:root{
  --lead:#0B0B0F;--cobalt:#0A0F3C;--cobalt-d:#070A28;--mag:#FF3FA4;--lime:#7CFF4F;
  --amber:#FFB01E;--blue:#3355FF;--ink:#E9EEFF;--dim:#95A1D6;
  --rail:62px;--ctr:80px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
body{
  background:var(--cobalt) url('texture-cathedral.jpg') center/cover fixed no-repeat;
  color:var(--ink);font-family:'Inter Tight',system-ui,-apple-system,sans-serif;font-size:15px;
  line-height:1.4;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body::before{content:'';position:fixed;inset:0;background:rgba(4,6,22,.8);z-index:-1}
h1,h2,h3,.ctr b,.burnnum b,.brand span,.fin span{font-family:'Bowlby One',Impact,sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase}
img{max-width:100%;display:block}
a{color:inherit}
code{font-family:'Inter Tight',system-ui,sans-serif;font-variant-numeric:tabular-nums}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---- top rail ---- */
.rail{position:sticky;top:0;z-index:50;background:var(--lead);border-bottom:3px solid #000;
  display:flex;align-items:center;gap:8px;padding:9px 10px;min-height:var(--rail);flex-wrap:nowrap;overflow:hidden}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0}
.brand img{border:3px solid #000;flex:0 0 auto}
.brand span{font-size:17px;letter-spacing:.02em;white-space:nowrap}
.brand em{font-style:normal;color:var(--amber);font-weight:800;font-size:11.5px;letter-spacing:.06em;white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:2px;margin-left:auto}
.navlinks a{color:#C3CCF2;text-decoration:none;font-weight:600;font-size:13px;padding:9px 9px;white-space:nowrap;transition:color .15s ease}
.navlinks a:hover{color:var(--amber)}
.xico{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;color:#C3CCF2;flex:0 0 auto;transition:color .15s ease}
.xico:hover{color:var(--amber)}
.cutbtn{background:var(--mag);color:#0B0B0F;border:3px solid #000;text-decoration:none;white-space:nowrap;
  font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:10px 11px;flex:0 0 auto;
  transition:background-color .15s ease,transform .12s ease}
.cutbtn:hover{background:#fff}
.cutbtn:active{transform:translateY(2px)}
.wbtn{background:#0A0F3C;color:var(--ink);border:3px solid #000;font:inherit;font-weight:700;white-space:nowrap;
  font-size:12px;padding:10px 11px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto;
  transition:background-color .15s ease,transform .12s ease}
.wbtn:hover{background:#17205e}
.wbtn:active{transform:translateY(2px)}

/* ---- the window ---- */
.window{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto auto;
  gap:3px;background:var(--lead);padding:3px}
.fold{grid-column:2;grid-row:1;display:grid;gap:3px;background:var(--lead);
  grid-template-columns:minmax(0,1.02fr) minmax(0,1.5fr) minmax(0,.95fr);
  grid-template-rows:minmax(150px,1fr) minmax(150px,1fr) minmax(150px,1fr);
  grid-template-areas:"head play w1" "head play w2" "art play w3";
  min-height:calc(100svh - var(--rail) - var(--ctr) - 12px)}
.filters{grid-column:1;grid-row:1 / span 3;display:flex;flex-direction:column;gap:3px;
  position:sticky;top:calc(var(--rail) + 3px);align-self:start;
  height:calc(100svh - var(--rail) - var(--ctr) - 12px)}
.filters button{flex:1;background:var(--cobalt-d);color:var(--dim);border:0;
  font:inherit;font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  writing-mode:vertical-rl;cursor:pointer;padding:12px 0;min-height:64px;
  transition:background-color .18s ease,color .15s ease}
.filters button.on{background:var(--amber);color:#17120a}
.filters button:hover{color:var(--amber)}
.filters button.on:hover{color:#17120a}
.filters button:active{color:#fff}
.filters button.on:active{color:#17120a}

.pane{background:var(--cobalt);position:relative;overflow:hidden;min-width:0;padding:13px;
  display:flex;flex-direction:column;transition:background-color .18s ease,box-shadow .2s ease}

/* headline pane: flat amber glass */
.pane-head{grid-area:head;background:var(--amber);padding:clamp(14px,1.7vw,26px);gap:clamp(10px,1.3vw,16px);justify-content:center}
.pane-head::before{content:'';position:absolute;inset:0;background:url('texture-cathedral.jpg') center/cover no-repeat;
  opacity:.2;mix-blend-mode:multiply;pointer-events:none}
.pane-head>*{position:relative;z-index:1}
.pane-head h1{margin:0;color:#0B0B0F;font-size:clamp(29px,3.05vw,52px);line-height:.9;
  overflow-wrap:normal;word-break:keep-all;hyphens:none}
.pane-head h1 span{display:block}
.pane-head p{margin:0;color:#2A1A02;font-weight:600;font-size:clamp(13px,1.05vw,15.5px);max-width:36ch}
.heroacts{display:flex;gap:7px;flex-wrap:wrap}
.hstat{margin:0;margin-top:clamp(6px,1vw,14px);background:var(--lead);color:var(--amber);
  display:flex;align-items:center;gap:8px;padding:9px 10px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.hstat i{width:9px;height:9px;background:var(--lime);flex:0 0 auto;animation:pulse 2.4s infinite steps(1,end)}
@keyframes pulse{0%,60%{opacity:1}61%,100%{opacity:.25}}
.hstat span{min-width:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}

.btn{display:inline-block;background:var(--amber);color:#0B0B0F;border:3px solid #000;
  font:inherit;font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 14px;cursor:pointer;text-decoration:none;text-align:center;
  transition:background-color .15s ease,color .15s ease,transform .12s ease}
.btn.mag{background:var(--mag)}
.btn.ghost{background:transparent;color:#0B0B0F}
.btn:hover{background:#fff}
.btn.ghost:hover{background:#0B0B0F;color:var(--amber)}
.btn:active{transform:translateY(2px)}
.btn:disabled{background:#1B2258;color:#7D89BA;border-color:#000;cursor:not-allowed}
.btn:disabled:active{transform:none}

/* hero plate pane */
.pane-art{grid-area:art;padding:0;margin:0;background:#05081F}
.pane-art img{flex:1 1 auto;width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 48%}
.pane-art figcaption{background:var(--lead);color:#9AA6DB;font-size:11.5px;font-weight:600;padding:8px 11px}

/* world panes */
.slot1{grid-area:w1}.slot2{grid-area:w2}.slot3{grid-area:w3}
.pane-world{cursor:pointer}
.pane-world:hover,.pane-world:focus-visible{background:#18226B;outline:none}
.pane-world:hover .isle,.pane-world:focus-visible .isle{filter:brightness(1.25)}
.pane-world:active{background:#202C8C}
.pane-world.active{background:#1B2577;box-shadow:inset 0 0 0 3px var(--mag)}
.isle{width:100%;flex:1 1 auto;min-height:0;max-height:140px;transition:filter .2s ease}
.wmeta{margin-top:10px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.wmeta strong{font-family:'Bowlby One',sans-serif;font-size:14px;letter-spacing:.02em}
.wmeta span{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.wname{color:#C9D3FB;font-size:12.5px;font-weight:600;margin:2px 0 0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wcurve{position:relative;height:18px;margin-top:8px}
.wcurve svg{position:absolute;inset:0;width:100%;height:100%}
.wtag{position:absolute;right:0;bottom:0;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#8893C9;font-variant-numeric:tabular-nums;background:var(--cobalt);padding-left:5px}
.pane-world:hover .wtag{background:#18226B}
.wlit{color:var(--lime)}
.empty{justify-content:center;align-items:flex-start;gap:9px;background:var(--cobalt-d);color:#7D89BA}
.empty b{font-family:'Bowlby One',sans-serif;font-size:13px;color:#9AA6DB}
.empty p{margin:0;font-size:12.5px;max-width:24ch}

/* ---- lit player pane ---- */
.pane-play{grid-area:play;background:#0B1247;padding:0}
.phead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:3px solid #000;flex-wrap:wrap}
.phead .lit{background:var(--lime);color:#06210A;font-weight:800;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 6px}
.phead strong{font-family:'Bowlby One',sans-serif;font-size:15px}
.phead em{font-style:normal;color:var(--amber);font-weight:800;font-size:12.5px}
.pplays{margin-left:auto;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.playwrap{position:relative;flex:1 1 auto;min-height:260px;background:#05081F;border-bottom:3px solid #000}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;left:0;right:0;top:0;display:flex;gap:10px;padding:7px 10px;
  font-variant-numeric:tabular-nums;font-weight:800;font-size:12px;color:var(--amber);
  letter-spacing:.06em;text-transform:uppercase;background:rgba(5,8,31,.72);pointer-events:none}
.hud span:last-child{margin-left:auto;color:var(--lime)}
.pctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:11px;
  padding:10px 11px;background:rgba(5,8,25,.93);border-top:3px solid #000}
.pctl .btn{flex:0 0 auto;padding:10px 13px;font-size:12px}
.pctl p{margin:0;font-size:12px;font-weight:500;color:#C0CAF6;min-width:0}
.touch{display:none;gap:3px;border-bottom:3px solid #000}
.touch button{flex:1;background:var(--cobalt-d);color:var(--ink);border:0;border-right:3px solid #000;
  font-size:19px;padding:12px;cursor:pointer;transition:background-color .12s ease,transform .1s ease}
.touch button:active{background:var(--mag);color:#15030C;transform:translateY(2px)}

/* buy strip */
.strip{background:var(--mag);color:#15030C;padding:9px 11px 11px}
.stripline{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:12px;font-weight:700}
.sl b{font-variant-numeric:tabular-nums;font-size:13.5px}
.came{height:9px;background:#0B0B0F;margin:8px 0;position:relative;overflow:hidden}
.came i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--amber);transition:width .5s ease}
.trade{display:flex;gap:6px;flex-wrap:wrap}
.tbtns{display:flex;border:3px solid #000}
.tbtns button{background:#15030C;color:#FFD9EC;border:0;font:inherit;font-weight:800;font-size:12px;
  text-transform:uppercase;padding:8px 10px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.tbtns button.on{background:var(--amber);color:#15030C}
.tbtns button:active{background:#fff;color:#15030C}
.trade input{flex:1 1 90px;min-width:0;background:#15030C;color:#fff;border:3px solid #000;
  font:inherit;font-weight:700;padding:8px 9px;font-variant-numeric:tabular-nums}
.trade .btn{flex:0 0 auto;padding:9px 12px}
.quote{font-size:12px;font-weight:600;margin-top:7px;min-height:17px;word-break:break-word}
.quote a{color:#15030C}
.ca{display:flex;align-items:center;gap:7px;margin-top:8px;background:#15030C;border:3px solid #000;padding:6px 7px}
.ca img{border:2px solid #000;flex:0 0 auto}
.calabel{color:var(--amber);font-weight:800;font-size:11px;letter-spacing:.1em}
.ca code{color:#FFE2F0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}
.ca button{background:var(--amber);color:#15030C;border:0;font:inherit;font-weight:800;font-size:11px;
  text-transform:uppercase;padding:7px 9px;cursor:pointer;transition:background-color .15s ease,transform .12s ease}
.ca button:hover{background:#fff}
.ca button:active{transform:translateY(2px)}

/* directory continues the window */
.dirhead{grid-column:2;grid-row:2;background:var(--lead);padding:11px 12px;display:flex;
  align-items:baseline;gap:12px;flex-wrap:wrap;scroll-margin-top:calc(var(--rail) + 6px)}
.dirhead h2{margin:0;color:var(--amber);font-size:14px;letter-spacing:.06em}
.dirhead p{margin:0;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.dir{grid-column:2;grid-row:3;display:grid;gap:3px;background:var(--lead);
  grid-template-columns:repeat(auto-fill,minmax(188px,1fr))}
.dir .pane{min-height:196px}

/* ---- soldered counter rail ---- */
.counters{position:sticky;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3px;background:var(--lead);padding:0 3px 3px;border-top:3px solid #000}
.ctr{position:relative;background:#4A3306;padding:10px 12px;overflow:hidden;
  transition:background-color .35s ease,color .35s ease}
.ctr>*{position:relative;z-index:2}
.ctr-burn{background:#2A1A02}
.ctr-burn::before{content:'';position:absolute;inset:0;background:#2A1A02 url('section-burn.jpg') center/cover no-repeat;
  opacity:.38;animation:backlight 7s ease-in-out infinite;z-index:1}
.ctr-burn::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(9,6,1,.9) 0%,rgba(9,6,1,.72) 55%,rgba(9,6,1,.5) 100%)}
@keyframes backlight{0%,100%{opacity:.3}50%{opacity:.5}}
.ctr b{display:block;color:var(--amber);font-size:clamp(20px,3.2vw,34px);line-height:1;
  font-variant-numeric:tabular-nums}
.ctr-burn b{color:#FFE2A8}
.ctr span{display:block;color:#F2D9A2;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-top:4px}
.ctr i{display:block;color:#C6A868;font-style:normal;font-size:11px;margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ctr-burn span{color:#FFE2A8}
.ctr-burn i{color:#E7CC9A}
.ctr.hot{background:#FFF2CF}
.ctr.hot::before{opacity:.1}
.ctr.hot::after{opacity:0}
.ctr.hot b,.ctr.hot span,.ctr.hot i{color:#2A1E05}

/* ---- sections ---- */
.sec{border-top:3px solid #000;padding:clamp(24px,4vw,56px) clamp(12px,3.4vw,40px);max-width:1400px;margin:0 auto;
  scroll-margin-top:calc(var(--rail) + 6px)}
.sec h2{font-size:clamp(21px,2.6vw,34px);margin:0 0 10px;color:var(--amber);line-height:1}
.lead{color:#C3CCF2;max-width:60ch;margin:0 0 16px}
.fine{color:#8893C9;font-size:12.5px;max-width:72ch}
.two{display:grid;gap:3px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);background:var(--lead);padding:3px}
.panel{background:var(--cobalt);padding:clamp(15px,2vw,26px);min-width:0}
.panel.art{padding:0;display:flex;flex-direction:column;background:#070A28}
.panel.art img{width:100%;flex:1 1 auto;min-height:240px;object-fit:cover;object-position:50% 38%}
.panel.art figcaption{padding:11px 13px;color:#9AA6DB;font-size:12.5px;border-top:3px solid #000}

form label{display:block;margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#9AA6DB}
form input{display:block;width:100%;margin-top:5px;background:#05081F;color:#fff;border:3px solid #000;
  font:inherit;font-weight:600;padding:10px}
form input:focus{outline:3px solid var(--amber);outline-offset:0}
.glasspick{border:3px solid #000;margin:0 0 12px;padding:8px}
.glasspick legend{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9AA6DB;padding:0 4px}
#swatches{display:flex;gap:6px;flex-wrap:wrap}
#swatches button{width:48px;height:44px;border:3px solid #000;cursor:pointer;
  transition:box-shadow .15s ease,transform .12s ease}
#swatches button[aria-pressed="true"]{outline:3px solid #fff;outline-offset:-9px;box-shadow:0 0 0 3px var(--amber)}
#swatches button:active{transform:translateY(2px)}
.glasspicked{margin:9px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8893C9}
.glasspicked b{color:var(--amber)}
.err{color:var(--amber);font-weight:700;font-size:13px;min-height:18px;margin:8px 0 0}

.board{list-style:none;margin:0;padding:0}
.board li{display:flex;align-items:center;gap:9px;border-top:3px solid #000;padding:9px 0}
.board li:first-child{border-top:0}
.board .rk{font-family:'Bowlby One',sans-serif;color:#6B78AE;font-size:13px;min-width:22px}
.board .sw{width:16px;height:16px;border:3px solid #000;flex:0 0 auto}
.board .tk{font-weight:800}
.board .nm{color:#8893C9;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .pl{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--lime);font-weight:700;font-size:13px}
.board .wt{font-variant-numeric:tabular-nums;color:var(--amber);font-weight:700;font-size:12.5px;min-width:52px;text-align:right}
.log{list-style:none;margin:0;padding:0;max-height:340px;overflow:auto}
.log li{border-top:3px solid #000;padding:8px 0;font-size:12.5px;font-variant-numeric:tabular-nums;color:#AEB9E8;
  display:flex;gap:8px;align-items:baseline}
.log li:first-child{border-top:0}
.log .k{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.log .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log .play .k{color:var(--lime)}.log .cut .k{color:var(--mag)}.log .burn .k{color:var(--amber)}
.log .tm{margin-left:auto;color:#6B78AE;font-size:11.5px}

.burnsec{background:#000 url('section-burn.jpg') center/cover no-repeat;padding:0;max-width:none}
.burnin{background:linear-gradient(90deg,rgba(5,7,24,.94) 0%,rgba(5,7,24,.74) 58%,rgba(5,7,24,.16) 100%);
  padding:clamp(28px,5vw,70px) clamp(12px,3.4vw,40px)}
.burnin h2{color:var(--amber);font-size:clamp(22px,3vw,40px);margin:0 0 10px;max-width:16ch;line-height:.95}
.burnin p{max-width:56ch;color:#D5DDFB}
.burnnum{font-size:14px;color:#fff}
.burnnum b{color:var(--amber);font-size:clamp(28px,4.4vw,52px);display:block;font-variant-numeric:tabular-nums;line-height:1}

.steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:3px;background:var(--lead);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.steps li{background:var(--cobalt);padding:16px;display:flex;gap:11px}
.steps span{font-family:'Bowlby One',sans-serif;color:var(--mag);font-size:15px}
.steps p{margin:0;font-size:13.5px;color:#C3CCF2}
.steps b{color:#fff}
.feeline{background:var(--amber);color:#17120A;font-weight:800;padding:14px;border:3px solid #000;
  font-size:clamp(13px,1.6vw,17px);margin:0 0 16px}

footer{border-top:3px solid #000;background:var(--lead);padding:16px 12px calc(16px + var(--ctr));display:flex;gap:12px;
  align-items:center;flex-wrap:wrap}
.fin{display:flex;align-items:center;gap:9px;min-width:0}
.fin img{border:3px solid #000}
.fin span{font-size:14px}
.fin code{color:#8893C9;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.flinks{margin-left:auto;display:flex;align-items:center;gap:4px}
.flinks a{color:#C3CCF2;text-decoration:none;font-size:12.5px;font-weight:600;padding:9px 7px;transition:color .15s ease}
.flinks a:hover{color:var(--amber)}

/* ---- status toast ---- */
.toast{position:fixed;left:12px;bottom:calc(var(--ctr) + 12px);z-index:70;max-width:calc(100vw - 24px);
  background:var(--lead);color:var(--amber);border:3px solid #000;padding:10px 12px;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.toast.on{opacity:1;transform:none}

/* ---- motion: the window lights up ---- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @keyframes paneRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes paneLight{from{opacity:0;filter:brightness(.35)}to{opacity:1;filter:none}}
  @keyframes paneFade{from{opacity:0}to{opacity:1}}
  @keyframes paneSwap{0%{box-shadow:inset 0 0 0 3px var(--amber);filter:brightness(1.35)}100%{box-shadow:inset 0 0 0 3px rgba(255,176,30,0);filter:none}}
  .pane-head h1 span{animation:paneRise .6s cubic-bezier(.2,.7,.3,1) both}
  .pane-head h1 span:nth-child(1){animation-delay:.06s}
  .pane-head h1 span:nth-child(2){animation-delay:.14s}
  .pane-head h1 span:nth-child(3){animation-delay:.22s}
  .pane-head h1 span:nth-child(4){animation-delay:.3s}
  .pane-head p{animation:paneRise .6s cubic-bezier(.2,.7,.3,1) .36s both}
  .heroacts{animation:paneRise .55s cubic-bezier(.2,.7,.3,1) .44s both}
  .hstat{animation:paneRise .55s cubic-bezier(.2,.7,.3,1) .52s both}
  .pane-play{animation:paneLight .7s ease .1s both}
  .pane-art{animation:paneFade .7s ease .34s both}
  .pane-play.swap{animation:paneSwap .55s ease}
  .reveal{opacity:0;transform:translateY(18px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
}

@media (max-width:1040px){
  .fold{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    grid-template-areas:"head play" "art play" "w1 w2";
    grid-template-rows:minmax(190px,auto) minmax(130px,auto) minmax(160px,auto)}
  .slot3{display:none}
}
@media (max-width:900px){
  :root{--ctr:72px}
  body{background-attachment:scroll}
  .navlinks{display:none}
  .xico{margin-left:auto}
  .window{display:flex;flex-direction:column}
  .fold{display:flex;flex-direction:column;min-height:0}
  .pane{min-height:0}
  .pane-head{padding:18px 16px 16px}
  .pane-play{min-height:0}
  .pane-art{height:140px}
  .pane-art img{min-height:0}
  .slot1,.slot2,.slot3{display:flex;min-height:200px}
  .playwrap{min-height:230px}
  .filters{position:static;flex-direction:row;height:auto;overflow-x:auto}
  .filters button{writing-mode:horizontal-tb;min-height:46px;padding:12px;letter-spacing:.09em}
  .two{grid-template-columns:minmax(0,1fr)}
  .touch{display:flex}
  .touch button{padding:15px}
  .pctl{flex-wrap:wrap;gap:8px}
  .pctl p{font-size:11.5px;flex:1 1 100%}
  .ctr{padding:8px 9px}
  .ctr b{font-size:19px}
  .ctr span{font-size:9.5px;letter-spacing:.05em;margin-top:3px}
  .ctr i{display:none}
  .toast{left:8px;right:8px;max-width:none}
}
@media (max-width:520px){
  .brand span{font-size:15px}
  .brand em{display:none}
  .cutbtn,.wbtn{font-size:11px;padding:9px 8px}
  .dir{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .dir .pane{min-height:172px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .toast{opacity:0}
  .toast.on{opacity:1;transform:none}
}