@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);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;}
#huh-list{white-space:pre-line;columns:2;}
#huh-overlay{width:80%;height:80%;margin:auto;position:absolute;overflow:scroll;top:0;}
#huh-title{border:none;}
/*
.super-title{font-size:13px;margin:0 auto 5px 0;text-shadow:#00cfff 0.5px 0.5px 0px;}
.title {font-weight:700;letter-spacing:.2px;margin:5px auto 5px 0;font-size:24px;text-shadow:#00cfff 0px 0px 15px;}
h2{font-size:14px;margin:5px auto 5px 0;text-shadow:#00cfff 0.5px 0.5px 0px;}
*/
.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;}
h2{font-size:13px;margin:4px auto 5px 0;text-shadow:#00cfff 0.2px 0.2px 0px;font-family:'Segoe Print';border:1px dashed #fff;padding:5px;border-radius:5px;cursor:pointer;}
h3{font-size:13px;margin:5px auto auto 0px;display:flex;text-align:left;gap:5px;}
.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-top:var(--space-4);}
.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:#10151f;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:20px;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;}
#meta-artwork{width:100%;height:auto;}
.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.25;margin:70px auto;width:212px;height:260px;background:#6bc4c4;color:#0b0e16;position:absolute;}
#background-imgs {z-index:1;margin:auto;background:#0b0e16;color:#6bc4c4;position:absolute;left:40%;top:10%;display:flex;flex-direction:column;pointer-events:none;}
*/

#svg-wrapper {z-index:0;opacity:0.25;margin:30px auto;width:260px;height:auto;background:transparent;color:#6bc4c4;position:absolute;}
#background-imgs {z-index:1;margin:auto;background:transparent;color:#6bc4c4;position:absolute;left:40%;top:10%;display:flex;flex-direction:column;pointer-events:none;}


#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:80vw;height:80vh;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.8;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%;}
#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-t{font-size:18px;}
.legal-p{font-size:12px;}
.legal-st{font-size:15px;}
.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);}
#helpTxt{line-height:1;}
#bw-help{font-size:13px;}
.mll{line-height:1.5;}
.cl{text-align:center;}
.span-blue{color:#00cfff;}
#goodnotgood{display:none;width:95px;padding:10px 15px 15px 15px;flex-direction:row;border:1px dashed #fff;justify-content:center;align-items:center;position:absolute;background:var(--bg);opacity:0.9;border-radius:10px;margin:75px 40px auto auto;}
#goodnotgood label{font-size:12px;color:#00cfff;text-decoration:underline;}
.gng-wrap{display:flex;flex-direction:column;}
.gngrow{display:flex;flex-direction:column;width:100%;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%;}
.leon{display:none;position:absolute;transform:rotate(-3deg);z-index:-30;top:105px;left:59%;font-size:50px;color:#1c2c35;font-weight:700;}
.metawraps{width:100%;}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}
@media (max-width:640px){
  .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;}
  html,body{overflow-x:hidden;}  
  #bow-on-top{width:100%;}
  .row{min-width:0;}
  #upcoming{margin-bottom:20px}
  #playlistLine{width:100%;}
  #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;}
  #metamegawrap{flex-direction:column;}
  #meta-block{display:none;flex-direction:column;width:100%;position:relative;align-items:center;padding:20px 0 0 0;}
  #background-imgs{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;background:transparent;z-index:1;height:auto;}
  #svg-wrapper{position:absolute;left:22%;top:0;width:clamp(160px,60vw,260px);height:260px;opacity:.25;}

  #bwOverlay canvas,#bwOverlay{touch-action:none !important;-ms-touch-action:none;}

/*  #svg-wrapper{position:relative;left:auto;top:auto;width:clamp(160px,60vw,260px);height:260px;opacity:.25;color:#0b0e16;background:#6bc4c4;}*/
  #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:10px}
  .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;}
  #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:0.5;margin:5px auto auto 5px;}
  #bwBtnLabel {display:flex;position:relative;top:-135px;left:25px;}
  .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;}
  .leon{position:relative;top:-340px;left:18%;}
  #tOP{position:relative;bottom:-100px;left:10%;margin:var(--space-5);}
  #privacy{padding:15px;}
}