@font-face{font-family:"Segoe Print";src:local("Segoe Print"),url("/fonts/SegoePrint.woff2") format("woff2");font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:"Permanent Marker";src:local("Permanent Marker"),url("/fonts/PermanentMarker.woff2") format("woff2");font-weight:400; font-style:normal; font-display:swap;}
:root{
  --bg:#0b0e12;--card:#12161c;--text:#e7edf2;--muted:#9ba7b4;--accent:#4aa3ff;--accent2:#86f2d1;--radius:16px;
  --space-1:6px;--space-2:10px;--space-3:14px;--space-4:18px;--space-5:24px;--space-6:32px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --bw-hand: "system-ui", "Segoe Print", "ui-rounded", "Segoe UI",
      "Georgia", "Times New Roman", "Courier New", "Monaco",
      "Futura", "Impact", "Verdana", "Comic Sans MS"
  }
*{box-sizing:border-box;}
html{min-height:100% !important;height:100% !important;}
body{height:100%;}
.wrappermain{height:100% !important;}
body{margin:0;background:radial-gradient(1200px 800px at 20% -10%,#0f1420,#07090c) fixed;color:var(--text);font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;}
.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);}
#creds {display:flex;flex-direction:column;margin-left:15px;position: absolute;top:22px;left:22px;align-items:center;}
#huh-text{white-space:pre-line;width:100%;margin-top:0;}
#huh-list-one{width:100%;white-space:pre-line;text-align:right;margin-top:-25px;font-size:11px;}
#huh-overlay{width:150%;height:fit-content;margin:150px 0 0 0;position:absolute;overflow:clip;top:0;font-size:13px;}
.huhhuh{display:flex;flex-direction:row;justify-content:space-between;}
#huh-title{border:none;margin:10% 0 3% -70%;}
.huhhuh{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;}
#close-ego-btn{position:relative;right:-75%;top:-5px;}
.super-title{font-size:16px;margin:0 auto 2px 0;text-shadow:#00cfff 0px 0px 30px;}
.title{font-weight:700;letter-spacing:.2px;margin:2px auto 0px 0;font-size:24px;text-shadow:#00cfff 0px 0px 15px;}
.whowhatwhere{border-radius:5px;display:inline;color:#00cfff;font-weight:700;text-shadow:#fff 0px 0px 1px;padding:5px;transition:opacity 0.3s ease;}
h2{font-size:13px;margin:4px auto 5px -3px;text-shadow:#00cfff 0.2px 0.2px 0px;font-family:'Segoe Print';border:1px dashed #fff;padding:5px 7px;border-radius:5px;cursor:pointer;}
#overlayTitle{padding:10px;}
.sub-conscious{font-size:10px;letter-spacing:1.5;}
#freez{color:#00cfff;font-family:"Segoe Print";font-size:12px;margin:0 -1px;}
#freez4{color:#00cfff;font-family:"Permanent Marker";font-size:13px;margin:0 -1px;font-weight:400;}
#bwBtnLabel{display:none;font-family:"Segoe Print";font-size:9px;}
.wrapper{max-width:960px;margin:0 auto;padding:var(--space-6) var(--space-5) 100px;}
.card{width:100%;max-width:760px;margin:20px auto;background:linear-gradient(180deg,rgba(29,36,50,.4),rgba(15,20,31,.7));border-radius:var(--radius);padding:var(--space-5);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06);}
.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;min-width:0;}
.nowline{margin-top:var(--space-2);font-size:1rem;}
.pickerline{margin-top:var(--space-4);}
.playlistline{margin:var(--space-6) 0 0 var(--space-2);}
.controls{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);}
.tabs{display:inline-flex;gap:8px;min-width:0;}
.tab{appearance:none;border:1px solid rgba(255,255,255,.15);background:#141a25;color:var(--text);padding:8px 12px;border-radius:12px;cursor:pointer;opacity:.9;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;}
.tab:hover{opacity:1;transform:translateY(-1px);}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.tab.active{box-shadow:0 0 0 2px rgba(74,163,255,.35) inset,0 6px 18px rgba(74,163,255,.12);opacity:1;}
.playbtn{appearance:none;border:1px solid rgba(255,255,255,.2);background:#101723;color:var(--text);padding:8px 12px;border-radius:999px;cursor:pointer;min-width:256px;text-align:center;}
.playbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
body.mode-radio .card{box-shadow:0 10px 30px rgba(196,66,66,.12),var(--shadow);}
.timer{font-variant-numeric:tabular-nums;min-width:140px;text-align:center;opacity:.95;margin:0 40px 0 0;border: 1px dashed;border-radius: 5px;padding: 8px 16px;}
audio{width:100%;margin:var(--space-3) 0 var(--space-4);background:var(--card);border-radius:10px;opacity:0.75;}
select,input[type=range]{background:#0c111a;color:var(--text);border:1px solid rgba(255,255,255,.15);padding:8px 10px;border-radius:12px;}
#picker{max-width:100%;width:100%;flex:1;min-width:0;}
#upcoming{margin:var(--space-3) 0 0;padding-left:18px;color:var(--muted);}
#upcoming li{margin:4px 0;}
footer{text-align:center;color:var(--muted);display:flex;justify-content:space-between;position:fixed;bottom:20px;margin:0 auto;width:100%;}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999;}
.overlay.show{display:flex;}
.overlay .panel{background:linear-gradient(#1e2b3a, #0d131c);border:1px solid rgba(255,255,255,.08);padding:16px 20px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);}
body.mode-radio #pickerLine{display:none;}
body.mode-radio #playlistLine{display:flex;}
body.mode-ondemand #pickerLine{display:flex;}
body.mode-ondemand #playlistLine{display:none;}
h1{font-size:22px;}
#playlistName{white-space:pre;color:#00cfff;}
#mode{color:#00cfff;border:0.5px groove #00cfff;padding:5px 10px;border-radius:5px;margin-right:10px;}
#playBtn{color:#00cfff;}
#onDemandBtn{padding:10px 20px;margin: 0 0 0 6px;}
#radioBtn{padding: 10px 20px;}
#metamegawrap{display:flex;flex-direction:row}
[hidden]{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#tOP{position:fixed;bottom:20px;left:42.5%;z-index:1000;margin:35px 50% 0 auto;width:250px;}
.card{z-index:10;position:relative;}
#meta-block{display:none;flex-direction:column;width:100%;position:relative;align-items:center;padding:20px 0 0 0;}
#meta-wrap{display:flex;flex-direction:row;margin:0 0 10px 40px;}
.metaminiwrap{display:flex;}
.meta-song{display:inline-flex;margin-right:30px;font-size:0.85rem;}
#meta-disclaimer{text-align:right;font-size:0.8rem;color:#00cfff;margin:13px 50px 0;padding:10px 14px 10px 10px;width:fit-content;}
#art-wrap{max-width:200px;max-height:200px;position:relative;}
#meta-artwork{width:100%;height:auto;position:relative;z-index:-10;}
.metabla{font-size:0.8rem;margin-right:100px;color:#00cfff;}
.metablabla{color:#fff;}
#bow-on-top{display:flex;flex-direction:column;width:100%;}
#svg-wrapper {z-index:0;opacity:0.1;width:260px;height:auto;background:transparent;color:#6bc4c4;position:absolute;transition:margin 1s ease,top 1s ease,left 1s ease;transform:translate(-50%,-50%);}
#background-imgs {z-index:1;margin:auto;background:transparent;color:#6bc4c4;position:absolute;left:47%;top:26%;display:flex;flex-direction:column;pointer-events:none;transition:margin 1s ease,top 1s ease,left 1s ease;}
#svg-wrapper svg{width:100%;height:100%;display:block;}
.bw-btns{appearance:none;border:1px solid #00cfff;background:#101723;color:var(--text);padding:10px 20px;border-radius:999px;cursor:pointer;margin-left:auto;position:fixed;right:30px;top:30px;width:150px;z-index:100;}
.bw-btns:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bw-overlay{position:fixed;inset:0;background:transparent;display:none;align-items:center;justify-content:center;z-index:10000;}
.bw-overlay.show{display:flex}
#bw-root{position:fixed;width:90vw;height:90vh;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:16px;overflow:hidden;background:transparent;border:2px solid rgba(0,0,0,.35);box-shadow:0 18px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;opacity:0.9;backdrop-filter:none;}
#bw-bar{position:fixed;contain:layout paint;will-change:transform;}
#bw-save{background:rgb(208, 5, 7)}
#bw, #bw-bar, #bw-bar * {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;}
#bw-bar button{font-size:15px;padding:8px 12px;border-radius:12px;}
#bw-color{width:34px;height:34px;}
#bw-width{-webkit-appearance:none;appearance:none;}
#bw-width::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text);}
#bw-width::-moz-range-thumb{width:14px;height:14px;border-radius:50%;}
.vol-wrap{display:inline-flex;align-items:center;gap:8px;margin-left:14px;right:25px;position:absolute;}
.vol-btn{appearance:none;border:1px solid rgba(255,255,255,.2);background:#101723;color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer;line-height:1}
.vol-range{width:100px;height:24px}
.legal-body{padding:50px 50px 100px;height:auto;max-width:1000px;margin:0 auto;}
.legal-t{font-size:18px;}
.legal-p{font-size:12px;}
.legal-st{font-size:15px;width:fit-content;padding:10px;margin-top:20px;}
.legal-sst{font-size:14px;color:#00cfff;margin-left:20px;}
.legal-ssst{margin-left:20px;}
.legal{font-size:11px;margin:0 var(--space-5);}
ul,li{font-size:12px;}
html{width:100%;height:100%}
#muteToggle{width:40px;}
.legalBrief{display:flex;justify-content:space-between;width:300px;margin:auto 0 0 6px;}
#logoutBtn{margin:auto 30px 0 0;}
#helpOverlay{z-index:7654676545;background:rgba(0,0,0,.78);flex-direction:column;}
#closeRow{display:flex;flex-direction:row;justify-content:flex-end;}
#close-bw-help-btn{width:50px;}
#helpTxt{line-height:1;}
#bw-help{font-size:13px;}
.mll{line-height:1.5;}
.cl{text-align:center;font-weight:700;}
.span-blue{color:#00cfff;}
#goodnotgood{display:flex;width:200px;height:200px;flex-direction:column;z-index:100;background:var(--bg);opacity:0.9;padding:10px;font-size:13px;position:absolute;top:0;left:0;}
#close-gng-btn{color:#00cfff;margin-bottom:30px;}
.gng-overwrap{display:flex;flex-direction:row;justify-content:space-evenly;gap:10px;}
.gng-wrap{display:flex;flex-direction:row;justify-content:flex-end;}
.gngcolumn{display:flex;flex-direction:column;text-align:left;}
.gngtxtone{font-size:12px;color:#fff;font-weight:bold;}
.gngtxttwo{font-size:12px;color:#00cfff;text-decoration:underline;}
.gngtxt{font-size:11px;color:#fff;}
.gngcell{width:100%;}
.gnghead{text-decoration:underline;margin-bottom:5px;}
.leon{display:flex;z-index:-1 !important;background:#10141ee3;top:24px;left:-84px;transform:rotate(-36deg);padding:0 76px;opacity:0;position:absolute;font-size:32px;color:#00cfff;font-weight:700;transition:opacity 0.4s ease;text-shadow:2px 1px 1px #000;}
.metawraps{width:100%;}
.vert-wrap{display:flex;flex-direction:column;align-items:center;}
.radio-disclaimer{color:#00cfff;font-size:11px;margin:10px 0 0;transition:opacity 0.5s ease;}
.discs{transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;}
#shazam-disclaimer{position:absolute;z-index:10;bottom:18.5%;width:200px;height:40px;background:#0f131d;text-align:center;line-height:1.5;padding:2px;transition:opacity 0.3s ease;}
#playlistLine{width:fit-content;}
.mobile-only{display:none;color:#00cfff;font-size:1em;width:100%;margin:10px 0 15px 0;}
#close-bw-help-btn{width:175px;border-radius:15px;border:1px solid #00cfff;margin-bottom:20px;}
.in-link{text-align:center;display:inherit;margin-top:15px;margin-bottom:20px;}
.in-link-a{color:#00cfff;}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} }
@media (max-width:640px){
  .vol-wrap{display:none;}
  .wrapper{padding:var(--space-5) var(--space-4) 80px;}
  .title{text-align:center;line-height:1.3;margin-right:20px;}
  .card{padding:var(--space-4);}
  .controls{grid-template-columns:1fr;gap:var(--space-3);}
  .timer{margin:auto;text-align:center;padding:5px 8px}
  .tabs{width:100%;}
  .tab{flex:1;text-align:center;}
  #huh-overlay {width:67%;margin:70px auto;}  
  html,body{overflow-x:hidden;}  
  #bow-on-top{width:100%;}
  .row{min-width:0;}
  #upcoming{margin-bottom:10px;}
  #pickerLine{width:100%;margin-bottom:20px;}
  #picker,#playlistName{flex:1 1 auto;min-width:0;max-width:100%;}
  #playlistName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .playlistline{margin: var(--space-6) 0 0 0;}
  #metamegawrap{flex-direction:column;}
  #meta-wrap{margin: 0 0 15px 40px;}
  #meta-block{display:none;flex-direction:column;width:100%;position:relative;align-items:center;padding:20px 0 0 0;}
  #background-imgs{position:absolute;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;background:transparent;z-index:1;height:auto;}
  #svg-wrapper{position:absolute;width:clamp(160px,60vw,260px);height:260px;opacity:.1;margin:0;}
  #bwOverlay canvas,#bwOverlay{touch-action:none !important;-ms-touch-action:none;}
  #svg-wrapper svg{display:block;width:100%;height:auto;}
  footer{text-align:center;position:relative;display:flex;flex-direction:column;margin:auto;}
  #bw-root{width:95vw;height:90vh;left:48.5%;top:50%;opacity:0.97;}
  .bw-close{top:12px;right:12px;padding:6px 9px}
  #bw-bar{position:absolute !important;top:25px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;overflow-x:auto;overflow-y:hidden;padding:6px 8px;z-index:10002;}
  #bw-bar>*{flex:0 0 auto;}
  #bw-bar button{font-size:13px;padding:6px 10px;border-radius:10px; }
  #bw-width{width:120px;}
  #bw-color{width:30px;height:30px;}
  .row.nowline{flex-wrap:wrap;gap:20px;margin:30px auto 0;}
  .vol-wrap{order:2;width:100%;justify-content:flex-start;margin-left:0;right:0;position:relative;}
  .vol-range{flex:0 0 60vw;max-width:60vw}
  .header{display:flex;padding:var(--space-4) var(--space-5);flex-direction:column;align-items:center;position:relative;}
  #creds{display:flex;flex-direction:column;margin-left:15px;position:initial;height:100px;margin:70px auto -30px 0;}
  .title{text-align:center;line-height:1.3;margin-right:20px;}
  .sub-title {line-height:1.5;margin:5px auto auto 5px;}
  #bwBtnLabel {display:flex;position:absolute;top:27px;right:150px;}
  .bw-btns{padding:8px 8px;font-size:0.7rem;width:100px;position:static;margin:-165px auto auto 220px;}
  #bwClose{margin:10px auto auto;width:310px;}
  .legal-body{padding:20px;}
  .legalBrief{margin: auto;}
  #logoutBtn{margin:30px;position:relative;bottom:50px;}
  .sub-sub-title{z-index:100;line-height: 0.5;}
  #tOP{position:relative;bottom:-100px;left:0;width:100%;margin:var(--space-5) 0}
  #privacy{padding:15px;}
  .controls{gap:20px;}
  .landing-pad{top:20px;position:absolute;right:40px;}
  #close-gng-btn{flex:0;}
  .mobile-only{display:flex;}
  #trackTitle{flex:1;}
  audio{margin:var(--space-5) var(--space-1);}
}
