:root{
  /* flat & fast: surfaces, borders, text */
  --bg:#151825; --s1:#1b1f2f; --s2:#222739; --s3:#2b3148; --bd:#2c3249;
  --txt:#e9ebf7; --dim:#9ba1bd; --mute:#646a87;
  /* accents */
  --vio:#c26bff; --vio-dk:#151825; --lav:#b9b4ec; --ice:#9fb8f5; --teal:#8fdad3; --brz:#c2a76b; --red:#ff6b8a;
  /* radii and motion */
  --r-tag:3px; --r-ctl:4px; --r-card:5px; --t:120ms;
  /* older names, kept so every rule follows the tokens */
  --bg2:var(--s1); --panel:var(--s2); --line:var(--bd); --ink:var(--txt); --pink:var(--vio); --pinkdk:var(--vio-dk); --sky:var(--ice);
  font-family:Inter,"IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color-scheme:dark;
  font-variant-numeric:tabular-nums;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{min-height:100dvh;overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top);background:var(--bg);z-index:7}
button,select,input{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--vio);outline-offset:2px}
a{color:var(--ice)}
body{font-size:14px}
h1,h2,h3{font-weight:800;letter-spacing:-.4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* keyboard hints and small tags */
kbd,.kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-tag);border:1px solid var(--bd);background:var(--s2);color:var(--dim);font:700 10.5px/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r-tag);background:var(--s3);color:var(--txt);font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.lbl{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}

.btn{min-height:40px;padding:0 16px;border-radius:var(--r-ctl);border:1px solid var(--bd);background:var(--s2);cursor:pointer;transition:background var(--t) ease-out,border-color var(--t) ease-out,color var(--t) ease-out;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:inherit}
.btn:active{background:var(--s3)}
@media (hover:hover){.btn:not(:disabled):hover{background:var(--s3)}.btn.main:not(:disabled):hover{background:#cd85ff;border-color:#cd85ff}}
.btn:disabled{opacity:.45;cursor:default}
.btn.main{background:var(--vio);border-color:var(--vio);color:var(--vio-dk);font-weight:700}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.icon{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-ctl);border:1px solid var(--bd);background:var(--s2);display:grid;place-items:center;cursor:pointer;transition:background var(--t) ease-out;color:var(--txt)}
.icon:active{background:var(--s3)}
@media (hover:hover){.icon:hover{background:var(--s3)}}
.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mlink{color:var(--sky);text-decoration:none;background:none;border:0;padding:2px 0;font:inherit;cursor:pointer}
@media (hover:hover){.mlink:hover{text-decoration:underline}}

/* ---------- song select ---------- */
#shell{max-width:1120px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 16px)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.brand{display:flex;gap:14px;align-items:center;min-width:0;color:inherit;text-decoration:none}
.logo{width:54px;height:54px;flex:0 0 auto;border-radius:50%;position:relative;background:radial-gradient(circle at 35% 30%,#ffa6d0,#ff5aa3 58%,#d8387d);box-shadow:inset 0 0 0 5px #fff,0 8px 26px rgba(194,107,255,.45);animation:logoBeat .5s cubic-bezier(.2,.9,.3,1) infinite alternate}
.logo::after{content:"";position:absolute;left:21px;top:16px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
@keyframes logoBeat{from{transform:scale(1)}to{transform:scale(1.06)}}
.brand .bname{display:block;margin:0;font-size:22px;font-weight:600;letter-spacing:.2px}
.brand p{margin:3px 0 0;color:var(--dim);font-size:13px}
.searchbar{position:sticky;top:env(safe-area-inset-top);z-index:6;margin:0 -16px;padding:8px 16px 6px;background:rgba(21,24,37,.9);}
.searchrow{display:flex;gap:8px;margin:0}
.searchrow input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--bd);background:var(--s2);font-size:15px}
/* a row that scrolls sideways fades at an end with more behind it (core.js: sfade) */
.sfl,.sfr{--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.sfl{--fl:28px}.sfr{--fr:28px}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 0 2px;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:32px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--bd);background:var(--s2);cursor:pointer;font-size:13px;font-weight:600;color:var(--dim);transition:background var(--t) ease-out,color var(--t) ease-out}
@media (hover:hover){.chip:not(.on):hover{background:var(--s3);color:var(--txt)}}
.chip.on{background:var(--vio);border-color:var(--vio);color:var(--vio-dk);font-weight:700}
.subrow{display:flex;gap:10px;margin:10px 0 4px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mirror{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:14px}
select{height:40px;border-radius:var(--r-ctl);border:1px solid var(--bd);background:var(--s2);padding:0 10px;font-weight:600}
.status{min-height:22px;color:var(--dim);font-size:14px;margin:8px 2px 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{position:relative;height:108px;border-radius:5px;overflow:hidden;border:1px solid var(--line);background:#120e19 center/cover no-repeat;animation:cardIn .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 30ms);transition:transform .15s,border-color .2s;content-visibility:auto;contain-intrinsic-size:auto 108px}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,24,37,.96) 30%,rgba(21,24,37,.45));pointer-events:none}
@media (hover:hover){.card:hover{border-color:var(--pink)}}
.card:has(.cmain:active){transform:scale(.98)}
.cmain{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;padding:0;cursor:pointer;z-index:1;border-radius:inherit}
.ci{position:absolute;inset:0;padding:11px 58px 11px 14px;display:flex;flex-direction:column;gap:2px;pointer-events:none;z-index:2;transition:transform .2s}
@media (hover:hover){.card:hover .ci{transform:translateX(4px)}}
.ci b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci span{font-size:13px;color:#ddd3ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci small{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci .mlink{pointer-events:auto;font-size:12px}
.cact{position:absolute;top:8px;right:8px;bottom:8px;z-index:3;display:flex;flex-direction:column;justify-content:space-between}
.cbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none;cursor:pointer}
.cbtn svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cbtn:active{transform:scale(.9)}
.tags{display:flex;gap:6px;margin-top:auto;align-items:center;min-width:0;overflow:hidden}
.tags em{font-style:normal;font-size:11px;padding:2px 8px;border-radius:5px;background:rgba(255,255,255,.12);white-space:nowrap}
.st-ranked,.st-approved{background:#3f7d4f!important}
.st-loved{background:#a3406f!important}
.st-qualified{background:#2f6d99!important}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.card.sk{background:linear-gradient(100deg,var(--s1) 30%,var(--s2) 50%,var(--s1) 70%) 0 0/300% 100%;animation:shimmer 1.2s linear infinite}
.card.sk::before{display:none}
@keyframes shimmer{to{background-position:-150% 0}}
.empty{color:var(--dim);text-align:center;padding:40px 10px;border:1px dashed var(--line);border-radius:5px;grid-column:1/-1}
.dots{display:flex;gap:3px;align-items:center;margin-left:2px}
.dots i{width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35);flex:0 0 auto}
.more{margin-top:14px}

/* volume */
.volpop{position:fixed;z-index:9;top:calc(env(safe-area-inset-top) + 76px);right:calc(env(safe-area-inset-right) + 12px);width:min(320px,calc(100% - 24px));padding:10px 14px;border-radius:5px;background:var(--panel);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.5);animation:panelIn .22s cubic-bezier(.2,.8,.2,1)}
.volc{display:flex;flex-direction:column}
.vrow{display:grid;grid-template-columns:76px 1fr 44px;align-items:center;gap:10px;min-height:44px;font-size:14px}
.vrow input{width:100%;height:28px;accent-color:var(--pink);margin:0}
.vrow output{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;font-size:13px}

/* mapper page */
.mapper{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px;border-radius:5px;background:linear-gradient(135deg,var(--s2),var(--s1));border:1px solid var(--line);margin:6px 0 4px;animation:cardIn .35s cubic-bezier(.2,.8,.2,1)}
.mav{width:76px;height:76px;border-radius:50%;flex:0 0 auto;background:#120e19 center/cover no-repeat;display:grid;place-items:center;font-size:32px;font-weight:600;box-shadow:0 0 0 3px var(--pink)}
.minfo{flex:1;min-width:200px}
.minfo h2{margin:0;font-size:22px;overflow-wrap:anywhere}
.minfo p{margin:2px 0 0;color:var(--dim);font-size:13px}
.mstats{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--dim);font-size:13px;margin-top:6px}
.mstats b{color:var(--ink);font-weight:600}
.macts{display:flex;gap:8px;flex-wrap:wrap;width:100%}

/* ---------- beatmap detail ---------- */
@keyframes panelIn{from{transform:translateY(28px);opacity:0}}
@keyframes fadeIn{from{opacity:0}}

/* ---------- player ---------- */
#player{position:fixed;inset:0;background:#000;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden}
.edmenu{min-width:40px;padding:0 10px;font-size:18px;letter-spacing:1px}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.ui .bar{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px calc(env(safe-area-inset-right) + 12px) 10px calc(env(safe-area-inset-left) + 12px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.toprow,.botrow{display:flex;align-items:center;gap:8px;min-width:0}
.bar.top{top:0;padding-top:calc(env(safe-area-inset-top) + 8px);background:linear-gradient(rgba(0,0,0,.75),transparent)}
.bar.bottom{bottom:0;padding-bottom:calc(env(safe-area-inset-bottom) + 12px);background:linear-gradient(transparent,rgba(0,0,0,.8))}
.ui.hide .bar.top{opacity:0;transform:translateY(-100%);pointer-events:none}
.ui.hide .bar.bottom{opacity:0;transform:translateY(100%);pointer-events:none}
.icon.play{width:54px;height:54px;background:var(--pink)}
.icon.play svg{fill:var(--pinkdk);stroke:none;width:24px;height:24px}
.meta{flex:1;min-width:0;display:flex;flex-direction:column}
.meta b,.meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta b{font-size:15px}
.meta span{font-size:12px;color:#d8cfe8}
#mRp{display:none;color:#ff99cc}
body.replay #mRp{display:block}
body.replay #mSub{display:none} /* (a replay: who played it and the mods, js/auto.js rpTopLine) */
.modesw{display:flex;flex:0 0 auto;padding:3px;border-radius:5px;background:rgba(255,255,255,.14)}
.modesw button{height:36px;padding:0 11px;border:0;border-radius:5px;background:transparent;color:#ddd;font-size:13px;cursor:pointer}
.modesw button.on{background:#fff;color:var(--bg);font-weight:600}
@media (max-width:520px){
  .ui .bar{gap:6px}
  .bar.top .icon{width:40px;height:40px}
  #fs{display:none}
  .meta span{display:none}
  .meta b{font-size:13px}
  .modesw button{padding:0 8px;font-size:12px}
  .toprow,.botrow{gap:6px}
  #player.editing .meta,#player.editing #shareBtn{display:none}
  .edtabs button{padding:0 9px;font-size:12px}
}
.time{font-size:13px;color:#e6def2;font-variant-numeric:tabular-nums;min-width:40px;text-align:center}
.spd{flex:0 0 auto;height:32px;padding:0 10px;border-radius:5px;border:0;background:var(--sky);color:#0d2233;font-weight:600;font-size:13px;cursor:pointer}
.snapsel{height:36px;flex:0 0 auto;font-size:13px}
.seekwrap{position:relative;flex:1;min-width:0;height:40px}
#tl{position:absolute;left:11px;top:3px;width:calc(100% - 22px);height:9px;border-radius:2px;pointer-events:none}
#seek{position:absolute;inset:0;width:100%;height:100%;margin:0;-webkit-appearance:none;appearance:none;background:transparent;touch-action:none}
#seek::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--pink) var(--p,0%),rgba(255,255,255,.25) var(--p,0%))}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(194,107,255,.5)}
#seek::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.25)}
#seek::-moz-range-progress{height:6px;border-radius:3px;background:var(--pink)}
#seek::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff}

/* editor (modding mode), laid out like the osu! editor: timeline on top, tools left, toggles right */
#player.editing .bar.top{background:var(--s1);padding-bottom:6px;box-shadow:0 1px 0 rgba(255,255,255,.08)}
#player.editing .bar.bottom{background:var(--s1);padding-top:6px;box-shadow:0 -1px 0 rgba(255,255,255,.08)}
.edtabs{display:flex;flex:1 1 auto;min-width:0;gap:2px;padding:3px;border-radius:5px;background:rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:none}
.edtabs::-webkit-scrollbar{display:none}
.edtabs button{flex:0 0 auto;height:34px;padding:0 12px;border:0;border-radius:4px;background:transparent;color:#cfc6de;font-size:13px;cursor:pointer}
.edtabs button.on{background:var(--pink);color:var(--pinkdk);font-weight:600}
#player.editing .meta{flex:0 1 180px}
.edtest{flex:0 0 auto;background:#2f6d99;border-color:#2f6d99;min-height:36px;padding:0 12px}
.edauto{flex:0 0 auto;min-height:36px;padding:0 10px;background:transparent;border-color:var(--line);color:var(--dim)}
#player.testplay #cv{cursor:none;touch-action:none}
.playres{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 2px}
.playres .prc{display:grid;gap:2px;padding:9px 10px;border-radius:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.playres .prc small{color:var(--dim);font-size:11.5px}.playres .prc b{font-size:17px;font-variant-numeric:tabular-nums}
.playres .prc.big{grid-column:span 2}.playres .prc.big b{font-size:26px}
.playres .j300 b{color:#32bce7}.playres .j100 b{color:#57e313}.playres .j50 b{color:#ffcc22}.playres .j0 b{color:#ff4d5e}
.playres .prc:nth-last-child(-n+3){grid-column:span 4}
@media (min-width:480px){.playres .prc:nth-last-child(-n+3){grid-column:span 2}.playres .prc:last-child{grid-column:span 4}}
.edtop{display:flex;gap:8px;align-items:stretch;height:min(var(--tlh,58px),max(44px,24dvh))} /* (a short screen caps the timeline: the playfield keeps most of the height) */
.edtime{flex:0 0 auto;min-width:92px;border:0;border-radius:5px;background:rgba(255,255,255,.08);color:#fff;font:600 14px/1 ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;cursor:pointer;padding:0 8px}
.edtl{flex:1;min-width:0;height:100%;border-radius:5px;background:#0e0b14;touch-action:none;cursor:ew-resize;display:block}
.edsnap{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:2px;font-size:10px;color:var(--dim)}
.edsnap select{height:34px;font-size:13px;padding:0 8px}
.edcol{position:absolute;top:var(--insT,120px);bottom:var(--insB,120px);display:flex;flex-direction:column;gap:5px;padding:8px 6px;overflow-y:auto;scrollbar-width:none;z-index:1}
.edcol::-webkit-scrollbar{display:none}
.edrowbtn{display:none}
@media (orientation:portrait) and (max-width:760px){.edrowbtn{display:grid}.edrowbtn[aria-pressed="false"]{background:var(--pink)}.edrowbtn[aria-pressed="false"] svg{stroke:var(--pinkdk)}}
.edcol.left{left:env(safe-area-inset-left)}
.edcol.right{right:env(safe-area-inset-right)}
.edcol button{flex:0 0 auto;width:48px;min-height:46px;padding:4px 2px;border-radius:5px;border:1px solid rgba(255,255,255,.14);background:rgba(27,31,47,.92);color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:14px;font-weight:600;line-height:1}
.edcol button svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.edcol button small{font-size:9px;font-weight:400;color:#cbbfe0}
.edcol button.on{background:var(--pink);border-color:var(--pink);color:var(--pinkdk)}
.edcol button.on svg{stroke:var(--pinkdk)}
.edcol button.on small{color:var(--pinkdk)}
.edcol button.lit{background:#2f6d99;border-color:var(--sky)}
.edcol button:disabled{opacity:.35}
.edcol .accent{background:var(--sky);border-color:var(--sky);color:#0d2233;font-size:11px}
.edcol .sep{flex:0 0 auto;height:1px;margin:2px 6px;background:rgba(255,255,255,.18)}
.edpanel{position:absolute;left:0;right:0;top:var(--insT,120px);bottom:var(--insB,120px);z-index:2;background:#16111f;overflow:auto;overscroll-behavior:contain;padding:14px calc(env(safe-area-inset-right) + 16px) 20px calc(env(safe-area-inset-left) + 16px);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.edpanel .wrap{max-width:860px;margin:0 auto}
.edinfo{display:flex;gap:8px;align-items:center;font-size:13px;min-height:34px}
#edSel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;color:#eee}
.ratesel{height:36px;flex:0 0 auto;font-size:13px}
@media (max-width:520px){.edcol button{width:42px;min-height:42px}.edtime{min-width:78px;font-size:12px}.edtop{height:min(var(--tlh,52px),max(44px,24dvh))}}
/* portrait phones: tool columns become rows so the playfield gets the full width */
@media (orientation:portrait) and (max-width:760px){
  .edcol{flex-direction:row;left:0!important;right:0!important;bottom:auto;padding:6px calc(env(safe-area-inset-right) + 8px) 6px calc(env(safe-area-inset-left) + 8px);overflow-x:auto;overflow-y:hidden;background:rgba(27,31,47,.92)}
  .edcol.left{top:var(--insT,120px)}
  .edcol.right{top:auto;bottom:var(--insB,120px)}
  .edcol button{width:auto;min-width:44px;min-height:44px;padding:4px 8px}
  .edcol .sep{width:1px;height:28px;margin:auto 2px}
  .edcol.right.merged{display:none} /* (its buttons are in the left row: editor.js edToolRow) */
  .edcol .rowsep{margin:auto 6px}
  #player.edrowhid .edcol.left{display:none}
}
/* verify (MapsetVerifier-style) */
.vsum{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.vsum button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:13px}
.vsum button.on{background:rgba(255,255,255,.14);border-color:#fff}
.vgrp{margin:10px 0}
.vgrp>h3{margin:0 0 6px;font-size:13px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.vchk{border-radius:5px;background:rgba(255,255,255,.04);margin-bottom:4px}
.vchk summary{display:flex;gap:10px;align-items:center;min-height:44px;padding:0 12px;cursor:pointer;list-style:none;font-size:14px}
.vchk summary::-webkit-details-marker{display:none}
.vchk summary .n{margin-left:auto;color:var(--dim);font-size:12px}
.vi{width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--bg)}
.vi.problem{background:var(--red)}.vi.warning{background:var(--brz)}.vi.minor{background:#8fa3c9}.vi.ok{background:var(--teal)}
.vissues{display:flex;flex-direction:column;gap:2px;padding:0 8px 8px}
.viss{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:4px;background:rgba(0,0,0,.2);color:inherit;cursor:pointer;font-size:13px;line-height:1.4}
@media (hover:hover){.viss:hover{background:rgba(255,255,255,.07)}}
.viss .ts{color:var(--sky);font-variant-numeric:tabular-nums;white-space:nowrap}
.vdiff{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}

.tapstart{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;background:radial-gradient(rgba(0,0,0,.25),rgba(0,0,0,.6));cursor:pointer;z-index:2}
.bigcircle{width:128px;height:128px;border-radius:50%;position:relative;background:radial-gradient(circle at 35% 30%,#ffa6d0,#ff5aa3 58%,#d8387d);box-shadow:inset 0 0 0 8px #fff,0 0 40px rgba(194,107,255,.6);animation:tapPulse 1s ease-in-out infinite}
.bigcircle::after{content:"";position:absolute;left:52px;top:40px;border-left:34px solid #fff;border-top:24px solid transparent;border-bottom:24px solid transparent}
.bigcircle::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid #fff;animation:approach 1s linear infinite}
@keyframes tapPulse{50%{transform:scale(1.05)}}
@keyframes approach{from{transform:scale(2.2);opacity:0}60%{opacity:.9}to{transform:scale(1);opacity:0}}
.tapstart p{margin:0;font-size:18px;text-shadow:none}
.tapstart small{color:#ddd;font-size:13px;max-width:80vw;text-align:center}
.tapplay{margin-top:4px;min-height:44px;padding:0 20px;border-radius:6px;background:rgba(27,31,47,.85);border:1px solid var(--ice);color:#fff;font-size:15px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.4)}
@media (hover:hover){.tapplay:hover{background:#2f6d99}}
.playbtn{flex:0 0 auto;min-height:36px;padding:0 12px;background:#2f6d99;border-color:#2f6d99;color:#fff;font-weight:600}
@media (max-width:520px){.playbtn{padding:0 10px}}
.playstop{position:absolute;z-index:6;top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(20,16,28,.55);color:#fff;font-size:18px;cursor:pointer;opacity:.55}
.playstop:focus-visible{opacity:1}@media (hover:hover){.playstop:hover{opacity:1}}
.kbrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kbind{min-width:96px;justify-content:center;font-variant-numeric:tabular-nums;font-weight:600}
.kbind.changed{border-color:var(--ice);color:#cdeeff}
.kbind.wait{border-color:var(--pink);color:var(--pink);animation:kbwait 1s ease-in-out infinite}
@keyframes kbwait{50%{opacity:.55}}
.tpgo{margin-bottom:6px}

.skip{position:absolute;right:calc(env(safe-area-inset-right) + 16px);bottom:calc(env(safe-area-inset-bottom) + 96px);z-index:3;height:48px;padding:0 26px;border-radius:6px;border:2px solid #fff;background:rgba(194,107,255,.85);color:#fff;font-size:17px;font-weight:600;cursor:pointer;animation:skipIn .35s cubic-bezier(.2,.9,.3,1.3) both,skipGlow 1s ease-in-out infinite alternate}
.skip.rot{right:auto;left:calc(env(safe-area-inset-left) + 16px)}
@keyframes skipIn{from{transform:translateX(60px);opacity:0}}
.skip.rot{animation-name:skipInL,skipGlow}
@keyframes skipInL{from{transform:translateX(-60px);opacity:0}}
@keyframes skipGlow{to{box-shadow:0 0 22px rgba(194,107,255,.9)}}

.sheet{position:absolute;right:0;top:0;bottom:0;z-index:4;width:min(370px,100%);background:rgba(27,31,47,.97);padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 20px) 16px;overflow:auto;overscroll-behavior:contain;animation:sheetIn .28s cubic-bezier(.2,.8,.2,1);box-shadow:-10px 0 40px rgba(0,0,0,.5);touch-action:pan-y;user-select:text;-webkit-user-select:text}
.sheet.tools{width:min(430px,100%)}
.sheet:focus,.sheet:focus-visible{outline:none}
@keyframes sheetIn{from{transform:translateX(100%)}}
@media (max-width:640px) and (orientation:portrait){
  .sheet{top:auto;left:0;width:100%!important;max-height:80dvh;border-radius:6px 6px 0 0;animation-name:sheetUp;padding-left:calc(env(safe-area-inset-left) + 16px)}
  #sheet .sheet-top{margin-left:calc(-1 * (env(safe-area-inset-left) + 16px));padding-left:calc(env(safe-area-inset-left) + 16px);padding-top:14px;border-radius:6px 6px 0 0}
}
@keyframes sheetUp{from{transform:translateY(100%)}}
.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet-h b{font-size:18px}
.subh{margin:14px 0 2px;font-size:13px;color:var(--pink);font-weight:600}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px}
.row select{max-width:62%}
.row input[type=range]{width:55%;accent-color:var(--pink)}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.tg{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:5px;background:rgba(255,255,255,.06);cursor:pointer;font-size:14px}
.tg input{width:20px;height:20px;accent-color:var(--pink);flex:0 0 auto}
.hint{color:var(--dim);font-size:12px;line-height:1.5;margin-top:10px}

/* mapping tools */
.live{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.live div{padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:2px;min-width:0}
.live small{color:var(--dim);font-size:11px}
.live b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg{display:flex;gap:4px;margin-top:6px}
.seg button{flex:1;height:40px;border-radius:5px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:14px}
.seg button.on{background:var(--sky);color:#0d2233;border-color:var(--sky);font-weight:600}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.tabs{display:flex;gap:4px;padding:4px;border-radius:5px;background:rgba(255,255,255,.06);margin:12px 0 10px;overflow-x:auto;scrollbar-width:none}
.tab{flex:1 0 auto;height:38px;padding:0 10px;border:0;border-radius:5px;background:transparent;cursor:pointer;font-size:13px;color:var(--dim);white-space:nowrap}
.tab.on{background:var(--pink);color:var(--pinkdk);font-weight:600}
.tbody h3{margin:14px 0 6px;font-size:14px;color:var(--pink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin:4px 0 10px}
.kv dt{color:var(--dim)}
.kv dd{margin:0;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.tlist{display:flex;flex-direction:column;gap:3px}
.tp{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:center;width:100%;min-height:40px;padding:0 10px;border-radius:5px;border:0;border-left:3px solid transparent;background:rgba(255,255,255,.04);cursor:pointer;text-align:left;font-size:13px;font-variant-numeric:tabular-nums;color:inherit}
.tp.red{border-left-color:var(--red)}
.tp.green{border-left-color:var(--teal)}
.tp.on{background:rgba(194,107,255,.2)}
.tp small{color:var(--dim);font-size:11px;text-align:right}
.tp.err{border-left-color:var(--red)}
.tp.warn{border-left-color:var(--brz)}
.tp.info{border-left-color:var(--sky)}
.ok{color:#8ee6a0}.warnc{color:var(--brz)}.errc{color:#ff7a8a}
.note{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.05);border-left:3px solid var(--sky)}
.note.problem{border-left-color:var(--red)}.note.suggestion{border-left-color:var(--brz)}.note.praise{border-left-color:var(--teal)}
.note .nh{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--dim)}
.note .nh button:nth-last-child(2){margin-left:auto}
.note p{margin:0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.cmpsrc{flex-wrap:wrap;gap:6px}.cmpsum{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px}.cmpsum b{font-size:16px}.cmpsum small{color:var(--dim)}
.cmpchips{margin-bottom:8px}.cmpchips .chip small{opacity:.7}
.cmplist{gap:2px}.cmprow{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:baseline;width:100%;padding:7px 10px;border:0;border-left:3px solid var(--line);border-radius:4px;background:rgba(255,255,255,.03);color:inherit;font:inherit;font-size:13px;text-align:left}
button.cmprow{cursor:pointer}@media (hover:hover){button.cmprow:hover{background:rgba(255,255,255,.07)}}
.cmpts{font:600 12px ui-monospace,Menlo,Consolas,monospace;color:var(--sky)}.cmpk{font-size:11.5px;color:var(--dim);white-space:nowrap}.cmpt{overflow-wrap:anywhere}
.cmprow.added{border-left-color:var(--teal)}.cmprow.removed{border-left-color:var(--red)}.cmprow.retimed,.cmprow.moved,.cmprow.shape{border-left-color:var(--brz)}.cmprow.timing{border-left-color:#ff9a3d}.cmprow.hitsound{border-left-color:var(--ice)}.cmprow.nc{border-left-color:#c58bff}
@media (max-width:520px){.cmprow{grid-template-columns:auto 1fr}.cmpk{display:none}}
.cmpset{margin:12px 0 4px;padding:12px;border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.025)}
.cmpset h4,.cmpdh{margin:0 0 8px;font-size:14px}.cmpdh{margin:14px 0 2px}
.cmpdiffs{display:flex;flex-direction:column;gap:3px}
.cmpdiff{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;padding:7px 10px;border:1px solid transparent;border-radius:4px;background:rgba(255,255,255,.035);color:inherit;font:inherit;font-size:13px;text-align:left}
button.cmpdiff{cursor:pointer}@media (hover:hover){button.cmpdiff:hover{background:rgba(255,255,255,.07)}}.cmpdiff.on{border-color:var(--pink)}
.cmpdiff b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpst{flex:none;font-size:12px;color:var(--dim)}.cmpst.changed{color:var(--brz)}.cmpst.added{color:var(--teal)}.cmpst.removed{color:#ff8a98}.cmpst.same{color:#8fd6a8}
.cmpfiles{margin-top:10px}.cmpfiles summary{cursor:pointer;font-size:13px;color:var(--dim);padding:4px 0}
.cmpfiles .cmprow{grid-template-columns:auto 1fr;margin-top:2px}
.cmprow.changed{border-left-color:var(--brz)}
@media (max-width:520px){.cmpfiles .cmpk{display:inline}}
.nreply{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.nreply .rst{height:28px;padding:0 10px;border-radius:5px;border:1px solid var(--line);background:transparent;color:var(--dim);font-size:12px;cursor:pointer}
.nreply .rst.fixed.on{background:var(--teal);border-color:var(--teal);color:#0f2a1b;font-weight:600}.nreply .rst.partly.on{background:var(--brz);border-color:var(--brz);color:#2a2110;font-weight:600}.nreply .rst.no.on{background:#ff8a98;border-color:#ff8a98;color:#2a0f14;font-weight:600}
.nreply input{flex:1 1 180px;min-width:0;height:30px;padding:0 10px;font-size:13px;border-radius:5px}
.note.answered>p{opacity:.65}
.nreplybar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0;padding:10px 12px;border-radius:5px;background:rgba(143,218,211,.08);border:1px solid rgba(143,218,211,.25)}
.nprog{display:flex;flex-direction:column;gap:5px;flex:1 1 160px;font-size:13px}.nprog i{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--teal) var(--p),rgba(255,255,255,.1) var(--p))}
.nquote{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);cursor:pointer}
.nform{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.nform textarea{min-height:70px;padding:10px 12px;border-radius:5px;border:1px solid var(--line);background:var(--bg2);resize:vertical;font:inherit;font-size:14px;color:inherit}
.nform .nrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nform input[type=text]{flex:1;min-width:120px;height:38px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:var(--bg2);font-variant-numeric:tabular-nums}

/* ---------- loading & toast ---------- */
.loading{position:fixed;inset:0;z-index:10;background:rgba(18,14,26,.9);display:grid;place-content:center;justify-items:center;gap:16px;padding:20px;text-align:center}
.loading p{margin:0;max-width:320px;color:var(--dim)}
/* the loading scene (js/loadscene.js): three notes that close in and pop on their own beat, 1 then 2 then 3 (124px box). Every moving layer is its own
   box animated with transform/opacity keyframes only, so the loop keeps running while the main thread is busy. Mode classes on #ldStage:
   .lp loop (nothing drawn yet), .dt determinate (notes already hit stay as ghosts), .hd holding what was drawn. Un-animated styles = the reduced-motion frame. */
.ldstage{position:relative;width:124px;height:124px}
.ldstage .L{position:absolute;left:0;top:0;width:124px;height:124px;overflow:visible}
.ldstage .mv{position:absolute;left:0;top:0;width:0;height:0}
.ldstage .mv>svg{position:absolute;left:-14px;top:-14px;width:28px;height:28px;overflow:visible}
.ldstage .hc .f{fill:#3d2a57}
.ldstage .hc .w{fill:none;stroke:#eceaf8;stroke-width:2.2}
.ldstage .hc .o{fill:none;stroke:var(--pink);stroke-width:1.6}
.ldstage text{fill:#fff;font:700 11px Inter,system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}
.ldstage .ap{opacity:0}
.ldstage .ap circle{fill:none;stroke:var(--pink);stroke-width:1.8}
.ldstage:not(.lp) .tr{transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .35s ease-out}
.ldstage .rf circle{fill:var(--lav);opacity:.4}
.ldstage .rb{opacity:0}
.ldstage .rb circle{fill:none;stroke:#fff;stroke-width:2}
.ldstage .rq{display:none}
.ldstage:not(.lp) .rq{display:block}
.ldstage:not(.lp) .rb{display:none}
.ldstage .rq svg{opacity:0}
.ldstage .rq circle{fill:none;stroke:var(--pink);stroke-width:2}
/* the reduced-motion frame: note 1 settled as a ghost with its burst, notes 2 and 3 still closing in */
.ldstage .rn1{opacity:.22;transform:scale(.9)}
.ldstage .rb1{opacity:.35;transform:scale(1.35)}
.ldstage .ra2{opacity:.85;transform:scale(1.5)}
.ldstage .ra3{opacity:.85;transform:scale(1.9)}
/* every note: its approach circle closes by 50% of the loop, it pops with a burst, settles as a ghost and fades; notes start 0.384 s apart */
.ldstage.lp :is(.rn,.ra,.rb){animation-duration:2.4s;animation-iteration-count:infinite;animation-fill-mode:both;animation-delay:var(--d)}
.ldstage.lp .rn{animation-name:ldN}
.ldstage.lp .ra{animation-name:ldAp}
.ldstage.lp .rb{animation-name:ldB}
.ldstage:not(.lp) .rq svg{animation:ldQ 1.2s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ldN{0%{opacity:0;transform:scale(.7);animation-timing-function:cubic-bezier(.2,.8,.3,1.3)}6%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,.8,.3,1.4)}54%{opacity:1;transform:scale(1.2);animation-timing-function:cubic-bezier(.3,0,.4,1)}61%,84%{opacity:.22;transform:scale(.9)}96%,to{opacity:0;transform:scale(.9)}}
@keyframes ldAp{0%{opacity:0;transform:scale(1.9);animation-timing-function:cubic-bezier(.35,.15,.7,.95)}6%{opacity:.9}50%{opacity:1;transform:scale(1)}51.5%,to{opacity:0;transform:scale(1)}}
@keyframes ldB{0%,49.5%{opacity:0;transform:scale(.9)}51%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,.8,.3,1)}64%,to{opacity:0;transform:scale(1.9)}}
@keyframes ldQ{0%{opacity:.75;transform:scale(.9)}to{opacity:0;transform:scale(1.7)}}
@media (prefers-reduced-motion:reduce){.ldstage,.ldstage *{animation:none!important;transition:none!important}}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);z-index:20;max-width:calc(100% - 32px);padding:12px 18px;border-radius:5px;background:#352c4b;border:1px solid var(--line);font-size:14px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;overflow-wrap:anywhere}
.toast.on{opacity:1;transform:translate(-50%,0)}
.drop{position:fixed;inset:0;z-index:15;border:4px dashed var(--pink);background:rgba(21,24,37,.8);display:grid;place-items:center;font-size:20px;pointer-events:none}

.topacts{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.langsel{height:40px;max-width:120px;font-size:13px}
.rng{display:flex;align-items:center;gap:8px;width:58%}
.rng input{flex:1;min-width:0;accent-color:var(--pink)}
.rng output{min-width:52px;text-align:right;color:var(--dim);font-size:13px;font-variant-numeric:tabular-nums}
.recs{margin:8px 0 4px;border-radius:5px;background:rgba(255,255,255,.05)}
.recs summary{min-height:44px;display:flex;align-items:center;padding:0 12px;cursor:pointer;font-size:14px;color:var(--sky)}
.reclist{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}
.rec{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px;border-radius:5px;background:rgba(0,0,0,.2)}
.rec b{font-size:14px}.rec small{grid-column:1;color:var(--dim);font-size:12px;line-height:1.4}
.rec .btn{grid-column:2;grid-row:1/span 2}
.notefmt{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;font-size:13px;margin:6px 0 10px}
.notefmt input{height:36px;padding:0 10px;border-radius:5px;border:1px solid var(--line);background:var(--bg2);min-width:0}
.notefmt .ex{grid-column:1/-1;color:var(--dim);font-size:12px;overflow-wrap:anywhere}
.edcol button.flash{background:#fff;color:var(--bg);border-color:#fff}
.edcol button{will-change:transform}
.edslider{display:flex;gap:4px;flex:0 0 auto}
.edslider .btn{padding:0 10px;min-width:40px}
.qnote{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--insB,120px) + 8px);z-index:3;width:min(620px,calc(100% - 20px));display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:5px;background:var(--s1);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.55)}
.qrow{display:flex;gap:6px;align-items:center;min-width:0}
.qts{width:150px;flex:0 0 auto;height:36px;padding:0 10px;border-radius:5px;border:1px solid var(--line);background:var(--bg2);font-size:13px;font-variant-numeric:tabular-nums}
.qtypes{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.qtype{flex:0 0 auto;height:34px;padding:0 10px;border-radius:5px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:12px;color:var(--dim)}
.qtype.on{color:var(--bg);font-weight:600}
.qtype.problem.on{background:var(--red);border-color:var(--red)}.qtype.suggestion.on{background:var(--brz);border-color:var(--brz)}.qtype.praise.on{background:var(--teal);border-color:var(--teal)}.qtype.note.on{background:var(--ice);border-color:var(--ice)}
.qtext{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:var(--bg2);font-size:15px}
.qclose{width:36px;height:36px}
@media (max-width:520px){.qts{width:120px}.qrow .btn.sm{padding:0 9px}}
.rhythm{margin:6px 0 14px;padding:10px;border-radius:5px;background:rgba(255,255,255,.04)}
.rhead{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.rhead b{margin-right:auto;font-size:14px}
.rhead .btn{min-width:40px;padding:0 10px}
.rcv{display:block;width:100%;border-radius:4px;background:#0e0b14;cursor:crosshair;touch-action:pan-y}
.rleg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11px;color:var(--dim)}
.rleg span{display:inline-flex;align-items:center;gap:4px}
.rleg i{width:9px;height:9px;border-radius:50%;display:inline-block}
.diffq{flex:0 1 auto;min-width:0;max-width:200px;height:38px;font-size:13px;font-weight:600;border-color:var(--pink);background:rgba(27,31,47,.9)}
@media (max-width:520px){.diffq{max-width:112px;height:36px;font-size:12px;padding:0 6px}}
.settabs{margin:4px 0 0;flex-wrap:wrap} /* (every tab in sight: on a phone the last ones, like General, were scrolled off with no sign) */
/* the title, ✕ and tabs stay at the top while the settings scroll (a solid bar: nothing shows through above it) */
#sheet{padding-top:0}
.sheet-top{position:sticky;top:0;z-index:3;margin:0 calc(-1 * (env(safe-area-inset-right) + 16px)) 6px -16px;padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px) 6px 16px;background:var(--s1);box-shadow:none}
.spane .subh{margin:16px 2px 6px}
.card2{border-radius:5px;background:rgba(255,255,255,.05);padding:2px 12px}
.card2 .row{border-bottom:1px solid rgba(255,255,255,.07)}
.card2 .row:last-child,.card2 .sw:last-child{border-bottom:0}
.card2 .seg{margin:10px 0 4px}
.card2 .hint{margin:4px 0 10px}
.card2 .volc{padding:4px 0}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer}
.sw.off{opacity:.5;cursor:default}
.aalert.vfystale{display:flex;align-items:center;justify-content:space-between;gap:10px}
p.vfystale{margin:4px 10px}
.swt{display:flex;flex-direction:column;gap:2px;min-width:0}
.swt b{font-size:15px;font-weight:600}
.swt small{font-size:12px;color:var(--dim);line-height:1.35}
input.switch{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:44px;height:24px;margin:0;border-radius:var(--r-ctl);background:var(--s3);position:relative;cursor:pointer;transition:background .15s}
input.switch::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:3px;background:var(--txt);box-shadow:none;transition:transform .15s}
input.switch:checked{background:var(--pink)}
input.switch:checked::before{transform:translateX(20px)}
.keys{display:flex;flex-direction:column;padding:6px 12px}
.krow{display:flex;gap:12px;align-items:center;min-height:34px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.05)}
.krow:last-child{border-bottom:0}
.krow kbd{flex:0 0 108px;font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;color:#fff;background:rgba(255,255,255,.1);border-radius:4px;padding:6px 8px;text-align:center}
.krow span{color:var(--dim)}
.spd.metro{background:#ffd84a;color:#2a2200}
.spd.metro .mtxt{margin-left:4px}
@media (max-width:900px){.spd.metro{padding:0 9px}.spd.metro .mtxt{display:none}} /* just ♩ ✕, so the seek bar keeps its room */
.notesio{margin:4px 0 10px}
.iobox{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.iobox .nrow input{flex:1;min-width:0;height:38px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:var(--bg2)}
.rcw{position:relative}
.rtip{position:absolute;z-index:2;pointer-events:none;white-space:nowrap;padding:6px 10px;border-radius:4px;background:#352c4b;border:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums;box-shadow:0 6px 20px rgba(0,0,0,.45)}
/* ---------- site shell: header nav, account, views ---------- */
#shell{min-height:100dvh;display:flex;flex-direction:column}
.apptop{flex-wrap:wrap}
.topnav{display:flex;gap:4px;padding:4px;border-radius:5px;background:rgba(255,255,255,.06);margin-right:auto;margin-left:10px}
.topnav a{height:36px;display:flex;align-items:center;padding:0 14px;border-radius:5px;color:var(--dim);text-decoration:none;font-size:14px;transition:background .2s,color .2s}
@media (hover:hover){.topnav a:hover{color:var(--ink);background:rgba(255,255,255,.06)}}
.topnav a.on{background:var(--pink);color:var(--pinkdk);font-weight:600}
@media (max-width:960px){.apptop .brand p{display:none}.apptop .brand .bname{font-size:19px}.apptop .logo{width:46px;height:46px}.apptop .logo::after{left:17px;top:13px;border-left-width:15px;border-top-width:10px;border-bottom-width:10px}}
@media (max-width:760px){.apptop{flex-wrap:wrap}.topnav{order:3;width:100%;margin:6px 0 0}.topnav a{flex:1;justify-content:center}.acct span:not(.acctl){display:none}.acct{padding:0 5px}.acct.out{padding:0 12px 0 5px}} /* (phones: the name goes, "Log in" stays: a bare pink circle said nothing) */
@media (min-width:761px){.apptop{flex-wrap:nowrap}}
@media (max-width:430px){.apptop .langsel{max-width:82px;padding:0 6px}.apptop .brand .bname{font-size:16px}.apptop .logo{width:38px;height:38px}.apptop .logo::after{left:14px;top:11px;border-left-width:12px;border-top-width:8px;border-bottom-width:8px}.apptop .brand{gap:9px}.topacts{gap:6px}}
.acct{height:40px;display:flex;align-items:center;gap:8px;padding:0 12px 0 5px;border-radius:6px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:13px;max-width:170px}
.acct span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:#3a3050 center/cover no-repeat;border:2px solid transparent;display:inline-block}
.av.big{width:48px;height:48px}
.osumark{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 30%,transparent 31%),var(--pink);box-shadow:inset 0 0 0 3px #fff;display:inline-block}
.btn .osumark{width:22px;height:22px}
.acctpop{display:flex;flex-direction:column;gap:8px;padding:14px;width:min(280px,calc(100% - 24px))}
.acctpop .btn.wide{width:100%}
.acctpop>.mlink{align-self:flex-start}
.volpop::before{content:"";position:absolute;top:-6px;left:calc(var(--ax,50%) - 6px);width:12px;height:12px;background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.acctme{display:flex;gap:12px;align-items:center}
.acctme div{display:flex;flex-direction:column;min-width:0}.acctme small{color:var(--dim);font-size:12px}
.view{flex:1 0 auto}
.view.vin{animation:viewIn .42s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(16px)}}
.vhead{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:16px 0 14px}
.vhead h2{margin:4px 0 0;font-size:26px}
.vhead p{margin:0;color:var(--dim);font-size:14px}
/* home menu */
.hero{position:relative;text-align:center;padding:44px 12px 26px;overflow:hidden;border-radius:6px;margin:8px 0 16px;background:radial-gradient(ellipse at 50% 0%,rgba(194,107,255,.22),transparent 65%),linear-gradient(180deg,var(--s1),var(--bg))}
.hero h1{position:relative;margin:0 auto;max-width:640px;font-size:clamp(24px,4.6vw,38px);line-height:1.2;animation:heroIn .7s cubic-bezier(.2,.8,.2,1) both}
.hero p{position:relative;margin:12px 0 0;color:var(--dim);animation:heroIn .7s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px) scale(.98)}}
.orbs{position:absolute;inset:0;pointer-events:none}
.orbs i{position:absolute;border-radius:50%;border:3px solid rgba(255,255,255,.5);opacity:0;animation:orb 3.2s cubic-bezier(.3,.6,.4,1) infinite}
.orbs i::after{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffa6d0,#ff5aa3 58%,#d8387d);box-shadow:inset 0 0 0 3px #fff}
.orbs i:nth-child(1){width:70px;height:70px;left:3%;top:14%;animation-delay:0s}
.orbs i:nth-child(2){width:54px;height:54px;right:4%;top:10%;animation-delay:.5s}
.orbs i:nth-child(3){width:62px;height:62px;left:9%;bottom:6%;animation-delay:1.1s}
.orbs i:nth-child(4){width:46px;height:46px;right:10%;bottom:10%;animation-delay:1.6s}
.orbs i:nth-child(5){width:36px;height:36px;left:24%;top:4%;animation-delay:2.2s}
.orbs i:nth-child(6){width:40px;height:40px;right:26%;bottom:3%;animation-delay:2.7s}
@keyframes orb{0%{opacity:0;transform:scale(1.9)}40%{opacity:.3}62%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
.hero h1,.hero p{z-index:1}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.menu.hub{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.menu,.menu.hub{grid-template-columns:1fr}}
.mcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px;border-radius:6px;border:1px solid var(--line);background:linear-gradient(150deg,var(--s2),var(--s1));color:inherit;text-decoration:none;overflow:hidden;animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.menu .mcard:nth-child(2){animation-delay:.07s}.menu .mcard:nth-child(3){animation-delay:.14s}.menu .mcard:nth-child(4){animation-delay:.21s}
.mcard:focus-within{transform:translateY(-4px);border-color:var(--pink);box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(194,107,255,.3)}@media (hover:hover){a.mcard:hover{transform:translateY(-4px);border-color:var(--pink);box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 1px rgba(194,107,255,.3)}}
a.mcard:active{transform:scale(.98)}
.mcard::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(194,107,255,.28),transparent 70%);transition:transform .5s}
.mcard.editor::before,.mcard.create::before{background:radial-gradient(circle,rgba(159,184,245,.28),transparent 70%)}
.mcard.live::before{background:radial-gradient(circle,rgba(255,216,74,.22),transparent 70%)}
@media (hover:hover){a.mcard:hover::before{transform:scale(1.3)}}
.mcard b{font-size:21px;position:relative}
.mcard>span:not(.mic){color:var(--dim);font-size:14px;line-height:1.5;position:relative}
.mcard em{font-style:normal;color:var(--pink);font-weight:600;margin-top:auto;position:relative;transition:transform .25s}
@media (hover:hover){a.mcard:hover em{transform:translateX(6px)}}
.mcard .searchrow{width:100%;position:relative}
.mcard .searchrow input{height:44px}
.mic{width:52px;height:52px;border-radius:5px;display:grid;place-items:center;background:var(--pink);box-shadow:0 8px 22px rgba(194,107,255,.35);position:relative}
.mcard.editor .mic,.mcard.create .mic{background:var(--sky);box-shadow:0 8px 22px rgba(159,184,245,.3)}
.mcard.live .mic{background:#ffd84a;box-shadow:0 8px 22px rgba(255,216,74,.25)}
.mcard.open .mic,.mcard.find .mic{background:#3f3558;box-shadow:none}
.mic svg{width:26px;height:26px;fill:none;stroke:var(--bg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mcard.open .mic svg,.mcard.find .mic svg{stroke:#fff}
.quick{margin:18px 0 8px;display:flex;flex-direction:column;gap:8px}
.pickban{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;margin:4px 0 6px;border-radius:5px;background:rgba(159,184,245,.14);border:1px solid rgba(159,184,245,.4);font-size:14px}
.foot{margin-top:40px;padding:18px 4px 4px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;color:var(--dim);font-size:13px}
.foot nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
.foot a{color:var(--ink);text-decoration:none}@media (hover:hover){.foot a:hover{color:var(--pink)}}
.foot small{font-size:11px;opacity:.8}
.foot .footname{color:var(--ink);font-weight:700;font-size:14px}
/* song cards: preview button + progress */
.cact{gap:6px;justify-content:flex-end}
.cplay .pa{display:none}
.card.playing .cplay{background:var(--pink);border-color:var(--pink)}
.card.playing .cplay svg{stroke:var(--pinkdk);fill:var(--pinkdk)}
.card.playing .cplay .pi{display:none}.card.playing .cplay .pa{display:block}
.cplay svg{fill:#fff;stroke:none}
.cplay svg path{stroke:none}
.cprog{position:absolute;left:0;bottom:0;height:3px;width:var(--pp,0%);background:var(--pink);z-index:4;opacity:0;transition:opacity .2s}
.card.playing{border-color:var(--pink)}
.card.playing .cprog{opacity:1}
.card{transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
@media (hover:hover){.card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.35)}}
/* detail: download menu + editor button */
.ddlmenu a.osu{background:rgba(194,107,255,.18);border:1px solid rgba(194,107,255,.5)}
.ddlmenu a.osu span{font-weight:600}
.ddlsep{font-size:12px;color:var(--dim);padding:6px 4px 0;text-transform:uppercase;letter-spacing:.5px}
.dlsum{border-color:var(--pink)}
.dfoot.edfirst #dEdit{order:2;flex:1}
.dfoot.edfirst #dGo{flex:0 1 auto}
@keyframes coverIn{from{background-size:115%;filter:brightness(.6)}}
/* create page */
.cform{display:flex;flex-direction:column;gap:14px}
.cstep{padding:16px;border-radius:6px;background:var(--bg2);border:1px solid var(--line);animation:cardIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 50ms)}
.cstep h3{margin:0 0 12px;font-size:16px;color:var(--pink)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 14px}
.cf{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--dim);min-width:0}
.cf input:not([type=range]):not([type=checkbox]),.cf textarea,.cf select{height:42px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:15px;width:100%}
.cf textarea{height:64px;padding:10px 12px;resize:vertical;font:inherit}
.cft{display:flex;justify-content:space-between}.cft output{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.rng2 input{width:100%;accent-color:var(--pink)}
.cinfo{font-size:11px;color:var(--dim)}
.cwarn{font-size:12px;color:var(--brz)}
.cwarn:empty{display:none}
.cdrop{display:flex;align-items:center;gap:14px;min-height:92px;padding:16px;border-radius:5px;border:2px dashed var(--line);cursor:pointer;transition:border-color .2s,background .2s}
.cdrop.over{border-color:var(--pink);background:rgba(194,107,255,.07)}@media (hover:hover){.cdrop:hover{border-color:var(--pink);background:rgba(194,107,255,.07)}}
.cdrop::before{content:"♪";width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--pink);color:var(--pinkdk);font-size:24px;font-weight:700}
.cdt{display:flex;flex-direction:column;gap:3px;min-width:0}.cdt b{overflow-wrap:anywhere}.cdt small{color:var(--dim);font-size:12px}
.crow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ctime{font-variant-numeric:tabular-nums;color:var(--dim);font-size:14px;min-width:90px}
.cbg{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.cbgimg{width:160px;height:90px;border-radius:5px;background:#120e19 center/cover no-repeat;border:1px solid var(--line)}
.cgo{position:sticky;bottom:calc(env(safe-area-inset-bottom) + 10px);display:flex;justify-content:center;z-index:3}
.cgo .btn{height:52px;padding:0 28px;font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
/* editor: timeline zoom, tool dialog, timing editor */
.tlzoom{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.tlzoom button{width:30px;flex:1;border:0;border-radius:4px;background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer}
.tlzoom button:active{background:rgba(255,255,255,.2)}
.eddlg{position:absolute;z-index:3;right:calc(env(safe-area-inset-right) + 64px);top:calc(var(--insT,120px) + 8px);width:min(340px,calc(100% - 20px));max-height:calc(100% - var(--insT,120px) - var(--insB,120px) - 16px);overflow:auto;padding:12px 14px;border-radius:5px;background:rgba(27,31,47,.97);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.55);animation:panelIn .25s cubic-bezier(.2,.8,.2,1)}
@media (orientation:portrait) and (max-width:760px){.eddlg{left:50%;right:auto;transform:translateX(-50%);top:auto;bottom:calc(var(--insB,120px) + 60px);max-height:55dvh}}
.dlhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dlhead b{font-size:15px}
.dlrow{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr) auto;gap:8px;align-items:center;min-height:40px;font-size:13px;color:var(--dim)}
.dlrow input[type=range]{width:100%;accent-color:var(--pink)}
.dlrow input[type=number]{width:100%;height:34px;padding:0 8px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.dlrow select{height:34px;width:100%}
.dlrow output{min-width:46px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.dlrow.chk{grid-template-columns:1fr auto}
.dlin{display:flex;gap:6px;align-items:center;min-width:0}
.dlin input{flex:1;min-width:0}
.eddlg .seg,.tpform .seg{margin:4px 0 8px}
.tpcols{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:16px;align-items:start}
.tpform{padding:12px;border-radius:5px;background:#221c2c;border:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:1}
@media (max-width:760px){.tpcols{grid-template-columns:minmax(0,1fr)}.tpform{position:static;order:-1}} /* (minmax: a long row can't push the column wider than the screen) */
.tpform h3{margin:0 0 8px;font-size:14px;color:var(--pink)}
.tpl{max-height:62dvh;overflow:auto}
.tapbpm{display:flex;gap:8px;align-items:center;margin-top:10px;font-variant-numeric:tabular-nums}
.dlrow input.tptime{min-width:118px;width:100%;height:34px;padding:0 8px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.dlrow .tpts{flex:0 0 auto;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
/* the offset row: the field and Now on the first line, the time it is (01:48:600) under them, so the row fits the
   timing panel's narrow form column (360 px) instead of pushing Now out of it */
.dlrow .dloff{flex-wrap:wrap;row-gap:2px}
.dlrow .dlin .tpts{order:3;flex-basis:100%;padding-left:2px}
.tp .tpat{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.tp .tpat b{font-variant-numeric:tabular-nums}
.tp .tpat small{color:var(--dim);font-size:10.5px;font-variant-numeric:tabular-nums}
.moveall input.tptime{width:96px;height:36px;padding:0 8px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}
.moveall input.tptime.bad{border-color:var(--red)}
.dlrow input.tptime.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,90,110,.18)}
.moveall{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:8px}
.moveall .dlin input{max-width:110px;height:34px;padding:0 8px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.moveall .dlin span{color:var(--dim);font-size:13px}
.chkrow{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);cursor:pointer}
.chkrow input{width:18px;height:18px;accent-color:var(--pink);margin:0}
.moveall .hint{margin:0;font-size:11.5px}
.btnrow.sticky{position:sticky;bottom:0;padding:8px 0;background:#16111f;z-index:1}
.edpanel .cgrid{margin-bottom:10px}
.edpanel h3{color:var(--pink);font-size:14px;margin:16px 0 8px}
/* live sessions */
.icon.lit{background:#ffd84a}.icon.lit svg{stroke:#2a2200}
.livepill{flex:0 0 auto;height:32px;padding:0 12px;border-radius:5px;border:0;background:var(--red);color:#fff;font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;cursor:pointer;animation:livePulse 2s ease-in-out infinite}
.livepill.warn{background:var(--brz);color:#2a2200}
@keyframes livePulse{50%{box-shadow:0 0 0 5px rgba(255,90,110,.25)}}
.livesheet{width:min(400px,100%)}
.lstop{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lscode{font:600 20px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;margin-right:auto}
.lsdot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,90,110,.6);animation:dotPulse 1.4s infinite;flex:0 0 auto}
@keyframes dotPulse{70%{box-shadow:0 0 0 8px rgba(255,90,110,0)}}
.lsbody{display:flex;flex-direction:column;gap:8px}
.lsbody .searchrow input{height:42px}
.lsm{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.05)}
.lsm .av{width:36px;height:36px}
.lsn{flex:1;min-width:0;display:flex;flex-direction:column}
.lsn b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lsn small{color:var(--dim);font-size:12px}
.lsping{font-variant-numeric:tabular-nums}.lsping.ok{color:var(--teal)}.lsping.mid{color:#ffd84a}.lsping.bad{color:#ff6b6b}
.lsrelay{font-size:10px;font-weight:700;letter-spacing:.04em;padding:0 5px;border-radius:4px;background:var(--sky);color:#000}
.btn.danger{color:#ff8a98;border-color:rgba(255,90,110,.5)}
.ljoin{z-index:11}
.ljpanel{padding:20px;gap:12px;display:flex;flex-direction:column}
.ljhead{display:flex;gap:10px;align-items:center;font-size:17px}
.ljhead code{margin-left:auto;font:600 18px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;color:var(--pink)}
.ljwho{display:flex;gap:10px;align-items:center;color:var(--dim);font-size:14px}
/* info pages */
.page{max-width:860px;width:100%;margin:0 auto}
.pgh{margin:22px 0 10px;font-size:15px;color:var(--pink)}
.freebox{padding:16px 18px;border-radius:5px;background:linear-gradient(135deg,rgba(143,218,211,.16),rgba(159,184,245,.1));border:1px solid rgba(143,218,211,.45)}
.freebox b{font-size:17px}.freebox p{margin:6px 0 0;line-height:1.55;font-size:14px}
.credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.credit{padding:14px;border-radius:5px;background:var(--bg2);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;animation:cardIn .4s cubic-bezier(.2,.8,.2,1) both}
.ct{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ct a{font-weight:600;font-size:15px;text-decoration:none}
.lic{font-style:normal;font-size:11px;padding:3px 9px;border-radius:5px;background:rgba(255,255,255,.1);color:#e6def2}
.cw{margin:0;font-size:13px;line-height:1.45}
.cby{color:var(--dim);font-size:12px}
.cok{margin:2px 0 0;padding:8px 10px;border-radius:5px;background:rgba(143,218,211,.1);font-size:12px;line-height:1.45;color:#c9f2d8}
.psec p{margin:0;line-height:1.6;font-size:14px;color:#e6def2}
.clog{padding:14px 16px;border-radius:5px;background:var(--bg2);border:1px solid var(--line);margin-bottom:10px}
.clog.cur{border-color:var(--pink)}
.clh{display:flex;gap:10px;align-items:center}.clh b{font-size:17px}.clh small{color:var(--dim)}
.clh em{font-style:normal;font-size:11px;padding:2px 8px;border-radius:4px;background:var(--pink);color:var(--pinkdk);font-weight:600}
.clog ul{margin:8px 0 0;padding-left:20px;line-height:1.6;font-size:14px}
.rtip{left:0;top:0;will-change:transform}
.hero{min-height:clamp(300px,46vw,420px);display:flex;flex-direction:column;justify-content:center}
.herodemo{position:absolute;inset:0;opacity:.62;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 75% 85% at 50% 50%,#000 45%,transparent 100%)}
.herodemo canvas{width:100%;height:100%;display:block}
.hero h1,.hero p{text-shadow:none}
.heromap{position:absolute;left:0;right:0;bottom:10px;z-index:1;text-align:center;padding:0 12px}
.heromap a{font-size:11px;color:rgba(243,238,251,.6);text-decoration:none;background:rgba(18,14,25,.55);padding:4px 10px;border-radius:5px;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.heromap a:hover{color:#fff}}
.edcol button.mixed{background:linear-gradient(135deg,#2f6d99 0 50%,rgba(27,31,47,.92) 50%);border-color:var(--sky)}
.edcol button.place{background:transparent;border:2px dashed var(--sky)}
.hswho{margin:0 0 8px}
.hsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 8px}
.hsbtn{height:44px;border-radius:5px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;font-weight:600}
.hsbtn.on{background:var(--sky);border-color:var(--sky);color:#0d2233}
.hsbtn.mixed,.seg button.mixed{background:linear-gradient(135deg,rgba(159,184,245,.55) 0 50%,transparent 50%);border-color:var(--sky)}
.eddlg .seg button{height:34px;font-size:12px}
.edges{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.edges button{height:30px;padding:0 10px;border-radius:5px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-size:12px}
.edges button.on{background:#ffd84a;border-color:#ffd84a;color:#2a2200;font-weight:600}
.hsbox{margin:8px 0;padding:6px 10px;border-radius:5px;background:rgba(255,255,255,.04)}
.hsbox summary{min-height:36px;display:flex;align-items:center;cursor:pointer}
.hsgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:8px 0}
.hsgrid button{height:34px;border-radius:4px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;font-weight:600}
.hsgrid button:nth-child(even){color:var(--dim);font-weight:400}
.hsgrid button.on{background:var(--pink);border-color:var(--pink);color:var(--pinkdk)}
.hsopts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}
.hsopts select{height:34px}
.hschk{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--dim)}
.ctxmenu{position:fixed;z-index:40;min-width:210px;max-width:min(320px,calc(100vw - 12px));padding:5px;border-radius:5px;background:var(--s1);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.55);animation:ctxIn .12s ease-out;user-select:none;-webkit-user-select:none}
@keyframes ctxIn{from{opacity:0;transform:scale(.97)}}
.ctxitem{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;width:100%;min-height:32px;padding:0 10px 0 6px;border:0;border-radius:4px;background:transparent;color:var(--ink);font-size:13px;text-align:left;cursor:pointer}
.ctxitem:focus-visible,.ctxitem.open{background:rgba(194,107,255,.18);outline:none}@media (hover:hover){.ctxitem:hover{background:rgba(194,107,255,.18);outline:none}}
.ctxitem:disabled{opacity:.4;cursor:default;background:transparent}
.ctxitem.danger{color:#ff8a98}
.ctxmark{color:var(--sky);font-weight:700;text-align:center}
.ctxkey{color:var(--dim);font-size:11px;white-space:nowrap}
.ctxsep{height:1px;margin:4px 6px;background:rgba(255,255,255,.1)}
.ctxhead{padding:5px 10px 4px 30px;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
@media (pointer:coarse){.ctxitem{min-height:42px;font-size:14px}}
.livechat{position:absolute;z-index:3;left:calc(env(safe-area-inset-left) + 12px);bottom:calc(var(--insB,110px) + 10px);width:min(340px,calc(100% - 24px));display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}
#player.editing .livechat{left:calc(env(safe-area-inset-left) + 66px)}
@media (orientation:portrait) and (max-width:760px){#player.editing .livechat{left:10px;bottom:calc(var(--insB,110px) + 64px)}}
.livechat>*{pointer-events:auto}
.lcbubbles{display:flex;flex-direction:column;gap:5px;align-items:flex-start;max-width:100%}
.lcm{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.lcm b{font-weight:600;margin-right:6px}
.lcm.sys{color:var(--dim);font-size:12px;font-style:italic}
.lcts{font-variant-numeric:tabular-nums;font-size:inherit;padding:0}
.lcb{max-width:100%;padding:7px 12px;border-radius:5px;background:rgba(21,24,37,.92);border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--c,#fff);box-shadow:0 6px 20px rgba(0,0,0,.45);cursor:pointer;animation:lcIn .28s cubic-bezier(.2,.9,.3,1.2);transition:opacity .4s,transform .4s}
.lcb.sys{border-left-color:rgba(255,255,255,.3)}
.lcb.out{opacity:0;transform:translateX(-12px)}
@keyframes lcIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
.lcbtn{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(21,24,37,.92);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.lcbtn svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.lcbtn.on{background:var(--pink);border-color:var(--pink)}.lcbtn.on svg{stroke:var(--pinkdk)}
.lcbadge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:5px;background:var(--red);color:#fff;font:600 11px/19px sans-serif;text-align:center;animation:lcIn .25s}
.lcpanel{width:100%;display:flex;flex-direction:column;max-height:min(46dvh,420px);border-radius:5px;background:rgba(21,24,37,.96);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.55);animation:panelIn .22s cubic-bezier(.2,.8,.2,1)}
.lchead{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 4px 14px}
.lclist{flex:1;min-height:80px;overflow-y:auto;overscroll-behavior:contain;padding:4px 14px 8px;display:flex;flex-direction:column;gap:6px}
.lclist .lcm{padding-left:8px;border-left:2px solid var(--c,transparent)}
.lclist .lcm.sys{border-left:0;padding-left:0}
.lcform{display:flex;gap:6px;padding:8px;border-top:1px solid rgba(255,255,255,.08)}
.lcform input{flex:1;min-width:0;height:38px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:14px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- dialogs ---------- */
.mdl{position:fixed;inset:0;z-index:80;background:rgba(10,12,20,.62);display:grid;place-items:center;padding:16px;animation:fadeIn .16s ease-out}
.mdl.out{animation:mdlOut .16s ease-in forwards}
.mdl.out .mdlp{animation:mdlPanelOut .16s ease-in forwards}
.mdlp{position:relative;width:min(440px,100%);max-height:min(88dvh,760px);overflow:auto;background:linear-gradient(180deg,var(--s2),var(--bg2) 120px);border:1px solid rgba(255,255,255,.09);border-radius:6px;padding:22px 22px 16px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 80px rgba(0,0,0,.6);animation:mdlIn .24s cubic-bezier(.2,.9,.25,1.05)}
.mdlp.wide{width:min(640px,100%)}
.mdlp::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,var(--mdl-accent,var(--pink)),transparent);opacity:.8}
.mdlp.ic-danger{--mdl-accent:var(--red)}.mdlp.ic-warn{--mdl-accent:#ffb547}.mdlp.ic-edit,.mdlp.ic-info{--mdl-accent:var(--sky)}
.mdlic{width:42px;height:42px;border-radius:5px;display:grid;place-items:center;margin:0 0 12px;font:700 21px/1 system-ui,sans-serif;color:var(--mdl-accent,var(--pink));background:color-mix(in srgb,var(--mdl-accent,var(--pink)) 16%,transparent);border:1px solid color-mix(in srgb,var(--mdl-accent,var(--pink)) 38%,transparent)}
.mdlt{margin:0 0 8px;font-size:18px;line-height:1.3;letter-spacing:.1px}
.mdlb{margin:0;color:var(--ink);font-size:14.5px;line-height:1.55}
.mdlp.has-ic:not(:has(.mdlt)) .mdlb{font-size:15.5px}
.mdlb p{margin:0 0 8px}
.mdlb p:last-child{margin-bottom:0}
.mdlbtns{justify-content:flex-end;margin-top:20px;gap:8px}
.mdlbtns .btn{min-width:96px}
/* the Aspire warning (app.js aspireAsk, modal variant "hazard"). osu!'s own shapes: a red hit circle with "!" that
   approach circles keep closing in on (each one lands with a "hit": the circle pops and the box's edge flashes). The
   screen goes near-black with drifting static and a red glow behind the box; the box tears in sideways with a red /
   cyan split; the title decodes from noise (app.js); the risks have red crosses. "Hold to open anyway" fills up while
   held (--hold, 0..1, set by app.js): the box shakes harder and the screen goes redder with it; letting go drops it
   back. Opening anyway ends in a red flash, not opening in a calm fade. Reduced motion: none of it. */
.mdl.v-hazard{--hz:#ff3355;--hold:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgba(70,0,14,calc(.45 + var(--hold) * .4)),rgba(2,1,2,.92) 70%);animation:hzBack .45s ease-out}
.mdl.v-hazard::before{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:hzStatic .5s steps(4) infinite}
.mdl.v-hazard::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 calc(140px + var(--hold) * 260px) calc(10px + var(--hold) * 80px) rgba(255,20,50,calc(.18 + var(--hold) * .5))}
.v-hazard .mdlp{width:min(470px,100%);padding:22px 24px 18px;border-radius:8px;border:1px solid rgba(255,60,85,.32);background:radial-gradient(circle at 46px 46px,rgba(255,40,70,.16),transparent 170px),linear-gradient(180deg,#140a0d,#0b0708);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 90px rgba(0,0,0,.7),0 0 60px rgba(255,30,60,.12);animation:hzIn .62s cubic-bezier(.2,.9,.25,1) both,hzEdge 1.6s ease-out .62s infinite,hzSlice 7s steps(1) 2s infinite}
.v-hazard .mdlp::before{display:none}
.mdl.v-hazard.holding .mdlp{animation:hzShake .09s linear infinite}
.v-hazard .asphd{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:16px;margin:0 0 16px}
.v-hazard .aspring{position:relative;width:62px;height:62px;display:grid;place-items:center}
.v-hazard .aspring b{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 24px/1 system-ui,sans-serif;color:#fff;
  background:radial-gradient(circle at 50% 35%,#ff5a76,#b3001f 70%);box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(0,0,0,.5),0 0 26px rgba(255,40,70,.7);animation:hzHit 1.6s ease-out .62s infinite}
.v-hazard .aspring i{position:absolute;inset:9px;border-radius:50%;border:2.5px solid var(--hz);opacity:0;animation:hzApproach 1.6s cubic-bezier(.4,0,1,1) .62s infinite}
.v-hazard .aspring i+i{animation-delay:1.42s}
.v-hazard .asptt{min-width:0}
.v-hazard .aspk{display:inline-flex;align-items:center;gap:6px;font:700 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:3px;text-transform:uppercase;color:var(--hz)}
:lang(th) .v-hazard .aspk,:lang(ja) .v-hazard .aspk,:lang(ko) .v-hazard .aspk{letter-spacing:1px;font-family:inherit}
.v-hazard .aspk::after{content:"";width:7px;height:12px;background:var(--hz);animation:hzCaret 1s steps(1) infinite}
.v-hazard .aspt{margin:6px 0 0;font-size:21px;line-height:1.25;color:#fff;letter-spacing:.2px;text-shadow:-1px 0 rgba(255,40,70,.55),1px 0 rgba(80,220,255,.35);overflow-wrap:anywhere}
.v-hazard .mdlb{color:#e6dcde}
.v-hazard .aspmap{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;padding:10px 12px 10px 14px;border-radius:4px;background:rgba(255,40,70,.06);border:1px solid rgba(255,60,85,.16);border-left:3px solid var(--hz)}
.v-hazard .aspmap b{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.v-hazard .aspchips{display:flex;flex-wrap:wrap;gap:6px}
/* the map as a card: its cover full width (darkened, a red cast), the title, artist and mapper over it. Its own layer
   (translateZ): the box "breathes" (hzBreatheS) and a repainted cover shimmered while it scaled */
.v-hazard .aspmap.hascard{padding:0;background:none;border:0;gap:10px}
.v-hazard .aspcard{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:150px;padding:14px 16px;border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,60,85,.35);background:radial-gradient(circle at 80% 20%,rgba(255,40,70,.22),transparent 60%),linear-gradient(135deg,#2a0c13,#0d0608);box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateZ(0);backface-visibility:hidden}
.v-hazard .aspcov{position:absolute;inset:0;z-index:-1}
.v-hazard .aspcov img{width:100%;height:100%;object-fit:cover;opacity:0;filter:saturate(.85) contrast(1.05) brightness(.92);transform:scale(1.04);transition:opacity .5s ease-out,transform 6s ease-out}
.v-hazard .aspcard.pic .aspcov img{opacity:1;transform:scale(1)}
.v-hazard .aspcov::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,4,7,0) 0%,rgba(12,4,7,.3) 40%,rgba(10,3,6,.92) 100%),linear-gradient(90deg,rgba(255,30,60,.18),transparent 55%)}
.v-hazard .aspctx{display:flex;flex-direction:column;gap:2px;min-width:0;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.v-hazard .aspct{font-size:18px;line-height:1.25;font-weight:800;color:#fff;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.v-hazard .aspca{font-size:13.5px;font-weight:600;color:#f0d9de;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.v-hazard .aspcm{margin-top:4px;font-size:12px;color:#ffb3c0;overflow-wrap:anywhere}
@media (max-width:420px){.v-hazard .aspcard{min-height:128px;padding:12px 13px}.v-hazard .aspct{font-size:16px}}
@media (prefers-reduced-motion:reduce){.v-hazard .aspcov img{transition:none;transform:none}}
.v-hazard .aspchip{padding:2px 9px;font-size:12px;line-height:1.6;border:1px solid;border-radius:3px;color:#ffb3c0;background:rgba(255,40,70,.14);border-color:rgba(255,60,85,.45)}
.v-hazard .aspchip.user{color:#fff;background:rgba(255,40,70,.3);border-color:var(--hz)}
.v-hazard .aspchip.user::before{content:"♦ ";color:var(--hz)}
.v-hazard .asprisk{margin:4px 0 12px;padding:0;list-style:none;display:grid;gap:6px}
.v-hazard .asprisk li{position:relative;padding-left:22px;color:#c8b9bc}
.v-hazard .asprisk li::before{content:"✕";position:absolute;left:2px;top:.05em;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font-size:12px;font-weight:800;color:var(--hz);text-shadow:0 0 8px rgba(255,40,70,.8)}
.v-hazard .aspq{font-weight:600;color:#fff;font-size:15px}
.v-hazard .mdlbtns{justify-content:flex-end;gap:10px;margin-top:18px}
.v-hazard .btn.aspno{min-height:42px;padding:0 20px;border-radius:5px;background:#f2eef0;border-color:#f2eef0;color:#140a0d;font-weight:700}
.v-hazard .btn.aspno:focus-visible{outline:2px solid #fff;outline-offset:3px}
.v-hazard .btn.aspgo{position:relative;overflow:hidden;isolation:isolate;min-height:42px;padding:0 16px;border-radius:5px;border:1px solid rgba(255,60,85,.55);color:#ff8a9e;background:rgba(255,40,70,.06);font-weight:600;opacity:1;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.v-hazard .btn.aspgo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#b3001f,var(--hz));transform-origin:left;transform:scaleX(var(--hold))}
.mdl.v-hazard.holding .btn.aspgo{color:#fff;border-color:var(--hz)}
@media (hover:hover){.v-hazard .btn.aspgo:hover{border-color:var(--hz);color:#ffb3c0;box-shadow:0 0 18px rgba(255,40,70,.3)}.v-hazard .btn.aspno:hover{background:#fff}}
.mdl.v-hazard.out{animation:mdlOut .3s ease-in forwards}
.mdl.v-hazard.out .mdlp{animation:hzAway .26s ease-in forwards}
.mdl.v-hazard.go.out{animation:hzFlash .3s ease-out forwards}
.mdl.v-hazard.go.out .mdlp{animation:hzBurst .26s ease-in forwards}
@keyframes hzBack{from{opacity:0}}
@keyframes hzStatic{25%{transform:translate(-40px,20px)}50%{transform:translate(30px,-30px)}75%{transform:translate(-20px,-40px)}}
@keyframes hzIn{0%{opacity:0;transform:translateX(-30px) skewX(14deg) scale(.96);filter:blur(6px);box-shadow:-10px 0 0 rgba(255,40,70,.6),10px 0 0 rgba(80,220,255,.45)}35%{opacity:1;transform:translateX(10px) skewX(-6deg);filter:none}48%{transform:translateX(-5px) skewX(3deg);box-shadow:-4px 0 0 rgba(255,40,70,.5),4px 0 0 rgba(80,220,255,.35)}60%{transform:translateX(2px)}72%,100%{transform:none}}
@keyframes hzEdge{0%{border-color:rgba(255,90,110,.9);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 90px rgba(0,0,0,.7),0 0 70px rgba(255,30,60,.35)}40%,100%{}}
@keyframes hzApproach{0%{opacity:0;transform:scale(1.9)}30%{opacity:.85}100%{opacity:1;transform:scale(1)}}
@keyframes hzHit{0%{transform:scale(1.14);filter:brightness(1.5)}30%,100%{transform:none;filter:none}}
@keyframes hzCaret{50%{opacity:0}}
@keyframes hzSlice{0%{transform:none;filter:none}93%{transform:translateX(-8px) skewX(5deg);filter:hue-rotate(-20deg) contrast(1.4)}94%{transform:translateX(7px) skewX(-3deg);filter:none}95%{transform:translateX(-2px)}96%{transform:none}} /* (transform only: a clip-path would also move where clicks land) */
@keyframes hzShake{0%{transform:translate(calc(var(--hold) * -4px),calc(var(--hold) * 2px)) rotate(calc(var(--hold) * -.6deg))}33%{transform:translate(calc(var(--hold) * 4px),calc(var(--hold) * -2px)) rotate(calc(var(--hold) * .5deg))}66%{transform:translate(calc(var(--hold) * -2px),calc(var(--hold) * -3px))}}
@keyframes hzAway{to{opacity:0;transform:translateY(10px) scale(.97);filter:blur(3px)}}
@keyframes hzFlash{0%{background-color:rgba(255,60,80,.6)}100%{opacity:0}}
@keyframes hzBurst{to{opacity:0;transform:scale(1.08);filter:brightness(2.5) blur(4px)}}
@media (max-width:560px){
  .mdl.v-hazard{place-items:center;padding:12px}
  .v-hazard .mdlp{width:100%;max-height:92dvh;border-radius:8px;padding:20px 18px calc(16px + env(safe-area-inset-bottom));animation:hzIn .62s cubic-bezier(.2,.9,.25,1) both,hzEdge 1.6s ease-out .62s infinite,hzSlice 7s steps(1) 2s infinite}
  .mdl.v-hazard.out .mdlp{animation:hzAway .26s ease-in forwards}
  .mdl.v-hazard.go.out .mdlp{animation:hzBurst .26s ease-in forwards}
  .v-hazard .asphd{grid-template-columns:54px 1fr;gap:12px}
  .v-hazard .aspring{width:54px;height:54px}
  .v-hazard .aspring b{width:38px;height:38px;font-size:21px}
  .v-hazard .aspt{font-size:18.5px}
  .v-hazard .mdlbtns{flex-direction:column-reverse!important;align-items:stretch}
  .v-hazard .mdlbtns .btn{width:100%!important;min-height:48px}
}
/* creepier while it's open (app.js aspireFx): darkness closing in from the edges over ~14 s (--creep), the light flickering now and then, the box breathing (scale, so
   it never fights the transform animations), the "!" twitching, red drips running down from the box's top edge */
@property --creep{syntax:"<number>";inherits:true;initial-value:0}
.mdl.v-hazard{animation:hzBack .45s ease-out,hzCreep 14s ease-in .4s forwards}
.mdl.v-hazard::after{box-shadow:inset 0 0 calc(140px + var(--hold) * 260px + var(--creep) * 220px) calc(10px + var(--hold) * 80px + var(--creep) * 120px) rgba(0,0,0,calc(.2 + var(--creep) * .55)),inset 0 0 calc(160px + var(--hold) * 260px) calc(10px + var(--hold) * 80px) rgba(255,20,50,calc(.16 + var(--hold) * .5))}
.hzfx{position:absolute;inset:0;pointer-events:none;z-index:0}
.mdl.v-hazard::after{z-index:1}.mdl.v-hazard .mdlp{z-index:2} /* (the darkness closes in around the box, never over it: on phones the box is nearly as wide as the screen) */
.hzflick{position:absolute;inset:0;background:#000;opacity:0;animation:hzFlick 6.3s steps(1) 2.4s infinite}
.mdl.v-hazard .mdlp{scale:1;animation-name:hzIn,hzEdge,hzSlice,hzBreatheS}
.mdl.v-hazard .mdlp{animation-duration:.62s,1.6s,7s,4.2s;animation-timing-function:cubic-bezier(.2,.9,.25,1),ease-out,steps(1),ease-in-out;animation-delay:0s,.62s,2s,.8s;animation-iteration-count:1,infinite,infinite,infinite;animation-fill-mode:both,none,none,none}
.mdl.v-hazard.holding .mdlp{animation:hzShake .09s linear infinite}
.mdl.v-hazard.out .mdlp{animation:hzAway .26s ease-in forwards}
.mdl.v-hazard.go.out .mdlp{animation:hzBurst .26s ease-in forwards}
.v-hazard .aspring b{rotate:0deg;animation:hzHit 1.6s ease-out .62s infinite,hzTwitch 3.7s steps(1) 2s infinite}
.hzdrip{position:absolute;top:0;width:3px;height:0;border-radius:0 0 3px 3px;background:linear-gradient(180deg,rgba(255,40,70,.0),rgba(200,10,35,.9));pointer-events:none;animation:hzDrip 3.2s ease-in both}
.hzdrip::after{content:"";position:absolute;left:-1.5px;bottom:-5px;width:6px;height:7px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:rgba(210,12,40,.95)}
@keyframes hzCreep{to{--creep:1}}
@keyframes hzFlick{0%{opacity:0}61%{opacity:.45}65%{opacity:0}89%{opacity:.22}92%{opacity:0}} /* (two short dims a cycle, 1.5 s apart: no fast flashing) */
@keyframes hzBreatheS{50%{scale:1.012}}
@keyframes hzTwitch{0%{rotate:0deg}84%{rotate:-14deg}85%{rotate:9deg}86%{rotate:-4deg}87%{rotate:0deg}}
@keyframes hzDrip{0%{height:0;opacity:0}10%{opacity:1}55%{height:22px}100%{height:34px;opacity:0;transform:translateY(40px)}}
@media (max-width:560px){.mdl.v-hazard .mdlp{animation-name:hzIn,hzEdge,hzSlice,hzBreatheS}}
/* the heads-up after "Open anyway" (app.js aspireFyi): the usual dialog, the points sliding in one after another and
   the "!" glowing once as it opens */
.mdl.v-fyi .mdlic{animation:fyiGlow 1.2s ease-out .15s}
.aspfyil{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.aspfyil li{position:relative;padding:8px 10px 8px 30px;border-radius:5px;background:rgba(255,181,71,.06);border:1px solid rgba(255,181,71,.14);color:var(--ink);font-size:13.5px;line-height:1.45;animation:fyiIn .32s cubic-bezier(.2,.9,.25,1) both}
.aspfyil li::before{content:"";position:absolute;left:12px;top:15px;width:7px;height:7px;border-radius:50%;background:#ffb547;box-shadow:0 0 0 3px rgba(255,181,71,.16)}
.aspfyil li:nth-child(1){animation-delay:.12s}.aspfyil li:nth-child(2){animation-delay:.19s}.aspfyil li:nth-child(3){animation-delay:.26s}.aspfyil li:nth-child(4){animation-delay:.33s}.aspfyil li:nth-child(5){animation-delay:.4s}
.mdl.v-fyi .mdlbtns{animation:fyiIn .3s .45s both}
.mdl.v-fyi .mdlbtns{align-items:center}
.mdl.v-fyi .btn.fyino{min-width:150px;font-weight:700;box-shadow:0 0 0 4px color-mix(in srgb,var(--pink) 22%,transparent)}
.mdl.v-fyi .btn.fyigo{min-width:0;padding:0 10px;border-color:transparent;background:none;color:var(--dim);font-size:13px;font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}
.mdl.v-fyi .btn.fyigo:disabled{opacity:.4;cursor:not-allowed}
@media (hover:hover){.mdl.v-fyi .btn.fyigo:not(:disabled):hover{opacity:1;color:#ffb547;background:none}}
@media (max-width:560px){.mdl.v-fyi .mdlbtns{flex-direction:column-reverse!important;align-items:stretch}.mdl.v-fyi .btn.fyino{width:100%;min-height:48px}.mdl.v-fyi .btn.fyigo{flex:none!important;width:auto!important;min-height:40px;align-self:center}}
@keyframes fyiIn{from{opacity:0;transform:translateY(6px)}}
@keyframes fyiGlow{0%{box-shadow:0 0 0 0 rgba(255,181,71,.5)}100%{box-shadow:0 0 0 14px rgba(255,181,71,0)}}
.btn.danger.solid{background:var(--red);border-color:var(--red);color:#2a0a10;font-weight:600}
@media (hover:hover){.btn.danger.solid:hover{background:#ff7385}}
.mdlin{display:block;width:100%;height:46px;margin:12px 0 0;padding:0 14px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.mdlin:focus{border-color:var(--sky);box-shadow:0 0 0 3px color-mix(in srgb,var(--sky) 22%,transparent)}
.mdlin.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,90,110,.18)}
.mdlerr{margin:6px 2px 0;color:#ff8a98;font-size:13px}
@keyframes mdlIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes mdlOut{to{opacity:0}}
@keyframes mdlPanelOut{to{opacity:0;transform:translateY(6px) scale(.98)}}
@media (max-width:560px){
  .mdl{place-items:end center;padding:0}
  .mdlp,.mdlp.wide{width:100%;max-height:90dvh;border-radius:6px 6px 0 0;padding:20px 18px calc(14px + env(safe-area-inset-bottom));animation:mdlSheet .26s cubic-bezier(.2,.9,.25,1)}
  .mdl.out .mdlp{animation:mdlSheetOut .16s ease-in forwards}
  .mdlbtns{flex-direction:column-reverse;align-items:stretch}
  .mdlbtns .btn{width:100%;min-height:48px}
  .mdlbtns:not(.many){flex-direction:row;flex-wrap:nowrap}
  .mdlbtns:not(.many) .btn{flex:1;width:auto;min-width:0}
}
@keyframes mdlSheet{from{transform:translateY(100%)}}
@keyframes mdlSheetOut{to{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.mdl,.mdlp,.mdl.out,.mdl.out .mdlp{animation-duration:.01s!important}}
.warnline{color:var(--brz);font-size:13px;line-height:1.45}
.plist{margin:6px 0;padding-left:18px;color:var(--dim);font-size:13px;line-height:1.5}
.plist li{margin:3px 0}
.annform textarea{min-height:90px}
.badge{font-style:normal;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;background:rgba(194,167,107,.18);color:var(--brz);margin-left:6px;white-space:nowrap}
.badge.dim{background:rgba(255,255,255,.08);color:var(--dim)}

/* ---------- drafts ---------- */
.drafts{margin-top:18px;padding:16px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:8px}
.drhead{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.drhead small{color:var(--dim);font-size:12px}
.drrow{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:5px;background:rgba(255,255,255,.05)}
.drinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.drinfo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drinfo small{color:var(--dim);font-size:12px}
.drafts>.mlink{align-self:flex-start;font-size:13px}
@media (max-width:520px){.drrow{flex-wrap:wrap}.drinfo{flex-basis:100%}}
.dchip{flex:0 0 auto;height:30px;padding:0 10px;border-radius:5px;border:1px solid rgba(255,255,255,.18);background:rgba(27,31,47,.85);color:#cbbfe0;font-size:11px;cursor:pointer;white-space:nowrap}
.dchip.saved::before{content:"✓ ";color:var(--teal)}
.dchip.pending,.dchip.saving{color:#fff}
.dchip.error{border-color:var(--red);color:#ffb3bd}
.dchip.error::before{content:"⚠ "}
@media (max-width:700px){.dchip{max-width:34px;overflow:hidden;padding:0 8px;text-indent:0}.dchip.saved{color:transparent}.dchip.saved::before{color:var(--teal)}}

/* ---------- annotations ---------- */
.annbox{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.annhead{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.annhead b{margin-right:auto}
.annrow{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.05);border-left:3px solid var(--ac,#ffd84a)}
.annrow.sel{background:rgba(255,255,255,.1)}
.annrow.gone{opacity:.75;border-left-color:#9a8fb0}
.annrt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.annrt small{color:var(--dim)}
.annrow p{margin:0;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- collab ---------- */
.mcard.collab::before{background:radial-gradient(circle,rgba(143,218,211,.24),transparent 70%)}
.mcard.collab .mic{background:var(--teal);box-shadow:0 8px 22px rgba(143,218,211,.25)}
.mcard.collab .mic svg{stroke:#10301f}
.collabpill{background:#2f9e63;animation:none}
.collabpill.connecting,.collabpill.syncing,.collabpill.reconnecting{background:var(--brz);color:#2a2200}
.collabpill.disconnected,.collabpill.error{background:var(--red)}
.csstat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:5px;background:rgba(143,218,211,.12);border:1px solid rgba(143,218,211,.35)}
.csstat.connecting,.csstat.syncing,.csstat.reconnecting{background:rgba(194,167,107,.1);border-color:rgba(194,167,107,.4)}
.csstat.disconnected,.csstat.error{background:rgba(255,90,110,.1);border-color:rgba(255,90,110,.45)}
.csstat small{color:var(--dim)}
.cslist{display:flex;flex-direction:column;gap:6px}
.csm{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.05)}
.csdot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.csname{flex:1;min-width:5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csm small{color:var(--dim);font-size:12px}
.cspos{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cslog{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
.cslrow{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:3px 0 3px 8px;border-left:2px solid var(--c)}
.cslrow b{font-weight:600;color:var(--c);white-space:nowrap}
.cslrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cslrow small{color:var(--dim);font-size:11px;white-space:nowrap}
.csm select{height:32px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 6px}
.collabsheet .row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.collabsheet .row select{height:36px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 8px}

/* ---------- avatars, user pages ---------- */
.cav{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#3f3558;color:#fff;font-size:10px;font-weight:600;vertical-align:-4px;margin-right:5px;overflow:hidden;flex:0 0 auto}
.cav img,.mav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.mav{position:relative;overflow:hidden}
.mapper.hascover{background:linear-gradient(90deg,rgba(21,24,37,.94),rgba(21,24,37,.72)),var(--cover) center/cover no-repeat}
.ugroup{font-style:normal;font-size:12px;font-weight:600;margin-left:8px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.08);vertical-align:3px}
.pubnote{width:100%;margin:0}
.empty.small{font-size:12px;padding:12px}

/* ---------- save online ---------- */
.cloudbtn{flex:0 0 auto;min-height:34px;height:34px;padding:0 12px;gap:6px;background:#2f6d99;border-color:#2f6d99;color:#fff;font-weight:600}
.cloudbtn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.cloudbtn span{display:none}.cloudbtn{padding:0 9px}}
.cchip{flex:0 0 auto;height:30px;padding:0 10px;border-radius:5px;border:1px solid rgba(159,184,245,.45);background:rgba(27,31,47,.85);color:#bfe6ff;font-size:11px;cursor:pointer;white-space:nowrap}
.cchip.saved::before{content:"☁ ✓ "}
.cchip.unsaved{border-color:var(--brz);color:#ffe3a3}
.cchip.unsaved::before{content:"☁ • "}
.cchip.saving::before{content:"☁ ↑ "}
.cchip.error{border-color:var(--red);color:#ffb3bd}
.cchip.error::before{content:"☁ ⚠ "}
@media (max-width:700px){.cchip{max-width:44px;overflow:hidden;text-overflow:clip}}
/* phones: the top bar wraps instead of pushing buttons (tools, settings) off screen; editor tabs get their own row */
@media (max-width:760px){
  .toprow{flex-wrap:wrap;row-gap:6px}
  .toprow>*{flex-shrink:0}
  .toprow .meta{flex:1 1 90px}
  #player.editing .edtabs{order:10;flex:1 0 100%}
  .toprow .livepill{max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:520px){.edtest{padding:0 10px}.edauto{padding:0 8px}}
.sizebar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0}
.sizebar i{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--pink));border-radius:4px}
.sizebar.big{height:12px}
.expline{color:#ffe3a3}
.expline.soon{color:#ff8a98;font-weight:600}
.share .searchrow{display:flex;gap:6px;margin:10px 0}
.share .searchrow input{flex:1;min-width:0;height:38px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 10px}
.share .searchrow select{height:38px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.plistbox{display:flex;flex-direction:column;gap:10px}
.proj{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:5px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.projtop{display:flex;align-items:center;gap:8px}
.projtop b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj small{color:var(--dim);font-size:12px}
.proj .btnrow{margin:6px 0 0}

/* ---------- admin ---------- */
.adminv{max-width:1180px}
.ahead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 12px}
.ahead h2{margin:0;font-size:24px}
.ahsub{display:block;color:var(--dim);font-size:12px;margin-top:2px}
.awrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:start}
.anav{display:flex;flex-direction:column;gap:2px;position:sticky;top:12px;padding:6px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.anavb{min-height:40px;padding:8px 12px;border:0;border-radius:5px;background:transparent;color:var(--dim);text-align:left;font-size:14px;line-height:1.3;cursor:pointer}
@media (hover:hover){.anavb:hover{background:rgba(255,255,255,.06);color:var(--ink)}}
.anavb.on{background:var(--pink);color:var(--pinkdk);font-weight:600}
.acnt{display:inline-block;min-width:20px;height:20px;margin-left:8px;padding:0 6px;border-radius:5px;background:#ffd84a;color:#2a2110;font-size:12px;font-weight:700;line-height:20px;text-align:center;vertical-align:1px}
#acctBtn{position:relative}.acctdot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:4px;background:#ffd84a;color:#2a2110;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg,var(--bg))}
.aerrs{gap:8px}.aerr{border:1px solid var(--line);border-radius:5px;background:rgba(255,255,255,.02)}
.aerr summary{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;cursor:pointer;list-style:none}.aerr summary::-webkit-details-marker{display:none}
.aerrmsg{font-size:13.5px;word-break:break-word}.aerrmeta{grid-column:1;color:var(--dim);font-size:12px}.aerr summary>:last-child{grid-row:1/3;grid-column:2;align-self:center;color:var(--dim);font-size:12px;white-space:nowrap}
.aerrfull{margin:0;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.5}.aerr.rep{border-color:rgba(159,184,245,.35)}
.rpbox{display:flex;flex-direction:column;gap:10px}.rpbox textarea{width:100%;box-sizing:border-box;min-height:110px;resize:vertical;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:10px 12px;font:inherit}.rpbox .hint{margin:0}
.aerrbody{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}.aerrbody small{color:var(--dim)}.aerrbody code{font-size:12px;word-break:break-all;color:#9fd6ff}
.aerrbody pre{margin:0;max-height:220px;overflow:auto;padding:10px;border-radius:4px;background:#15111d;font-size:11.5px;line-height:1.45;white-space:pre-wrap;word-break:break-all}
.abody{min-width:0}
.abody>.card.sk{height:80px;margin-bottom:10px}
@media (max-width:820px){
  .awrap{grid-template-columns:1fr;gap:10px}
  .anav{flex-direction:row;overflow-x:auto;scrollbar-width:none;position:static;top:auto}
  .anav::-webkit-scrollbar{display:none}
  .anavb{flex:0 0 auto;text-align:center;white-space:nowrap}
}
.aalerts{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.aalert{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:5px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);font-size:13px;line-height:1.45;margin:0 0 8px}
button.aalert{cursor:pointer}
.aalert.ok{border-color:rgba(143,218,211,.4);background:rgba(143,218,211,.08)}
.aalert.warn{border-color:rgba(194,167,107,.45);background:rgba(194,167,107,.08)}
.aalert.bad{border-color:rgba(255,90,110,.5);background:rgba(255,90,110,.1)}
.aalerts .aalert{margin:0}
.akpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 14px}
.akpis.small{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.akpi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);color:inherit;text-align:left;font:inherit;min-width:0}
button.akpi{cursor:pointer;transition:border-color .15s,background .15s}
@media (hover:hover){button.akpi:hover{border-color:var(--pink);background:rgba(194,107,255,.08)}}
.akpi small{color:var(--dim);font-size:12px}
.akpi b{font-size:20px;overflow-wrap:anywhere}
.akpis.small .akpi b{font-size:15px}
.akpisub{font-size:11px;color:var(--teal)}
.akpi.warn b{color:var(--brz)}
.agrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:980px){.agrid2{grid-template-columns:1fr}}
.asec{padding:14px 16px;border-radius:5px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);margin-bottom:12px;min-width:0}
.agrid2 .asec{margin-bottom:0}
.asech{margin:0 0 10px;font-size:13px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.abig{margin:0 0 8px;font-size:18px;font-weight:600}
.astack{display:flex;height:14px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.astack i,.alegend i{display:block;height:100%}
.astack i.c,.alegend i.c{background:var(--sky)}.astack i.p,.alegend i.p{background:var(--brz)}.astack i.o,.alegend i.o{background:#b48cff}.astack i.u,.alegend i.u{background:var(--red)}
.alegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0;font-size:12px;color:var(--dim)}
.alegend span{display:inline-flex;align-items:center;gap:5px}
.alegend i{width:10px;height:10px;border-radius:3px}
.alimits{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 18px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.alimits span{display:flex;flex-direction:column;font-size:14px}
.alimits small{color:var(--dim);font-size:11px}
.achart{display:flex;align-items:flex-end;gap:4px;height:130px;padding-top:6px}
.acol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.acol i{display:block;width:100%;max-width:26px;border-radius:5px 5px 2px 2px;background:linear-gradient(var(--pink),#b04a8a)}
.acol small{font-size:10px;color:var(--dim)}
.alist{display:flex;flex-direction:column;gap:2px}
.arow{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left}
button.arow{cursor:pointer}
@media (hover:hover){button.arow:hover{background:rgba(255,255,255,.06)}}
.arow>*{min-width:0}
.arow .aclip,.arow .atext{flex:1}
.aclip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anum{font-variant-numeric:tabular-nums;white-space:nowrap}
.adim{color:var(--dim)}
.abad{color:#ff8a98}
.auser{display:inline-flex;align-items:center;gap:8px;min-width:0}
.auser b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.auser .cav{flex:0 0 auto}
.abadge{font-style:normal;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.08);color:var(--dim);white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
.abadge.admin{background:rgba(159,184,245,.16);color:var(--sky)}
.abadge.owner{background:rgba(194,107,255,.18);color:var(--pink)}
.abadge.active{background:rgba(143,218,211,.14);color:var(--teal)}
.abadge.suspended,.abadge.deleting{background:rgba(255,90,110,.16);color:#ff8a98}
.abadge.expired{background:rgba(194,167,107,.16);color:var(--brz)}
.abadge.custom{background:rgba(180,140,255,.16);color:#c9b0ff}
.abadges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.abar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:4px;min-width:60px}
.abar i{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--pink))}
.abar.hot i{background:var(--red)}
.abar.big{height:10px;border-radius:5px;margin:0 0 12px}
.atool{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.atool input,.atool select,.arowin input,.aliminp input,.anote textarea{height:40px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;font-size:14px;min-width:0}
.atool input{flex:1 1 220px}
.atool select{flex:0 1 auto}
.acount{margin:4px 2px 8px;color:var(--dim);font-size:12px}
.atable{display:flex;flex-direction:column;border-radius:5px;border:1px solid rgba(255,255,255,.06);overflow:hidden}
.athead{display:grid;gap:10px;padding:8px 10px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;background:rgba(255,255,255,.04)}
.atable .arow{display:grid;border-radius:0;border-top:1px solid rgba(255,255,255,.05)}
.atable.users .athead,.atable.users .arow{grid-template-columns:minmax(0,2.2fr) .8fr 1.3fr 1fr}
.atable.projects .athead,.atable.projects .arow{grid-template-columns:minmax(0,2.4fr) 1fr 1.4fr .9fr}
.acell{display:flex;flex-direction:column;justify-content:center;min-width:0}
.aproj{flex-direction:row;align-items:center;gap:6px}
.acell.soon{color:var(--brz)}
.auser .abadge{margin-left:2px}
@media (max-width:640px){
  .athead{display:none}
  .atable.users .arow,.atable.projects .arow{grid-template-columns:1fr 1fr;row-gap:4px}
  .atable .arow>:first-child{grid-column:1/-1}
}
.alist.audit .arow{align-items:flex-start}
.alist.audit .admwhen{flex:0 0 96px;color:var(--dim)}
.awho{flex:0 0 auto;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atext{line-height:1.45;overflow-wrap:anywhere}
@media (max-width:640px){.alist.audit .arow{flex-wrap:wrap;gap:2px 8px}.alist.audit .atext{flex-basis:100%}}
.admwhen{white-space:nowrap}
/* side panel */
.apanel{position:fixed;inset:0;z-index:60}
.apshade{position:absolute;inset:0;background:rgba(8,5,14,.55);animation:fadeIn .2s}
.apsheet{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);display:flex;flex-direction:column;background:var(--bg2);border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.4);animation:apIn .25s cubic-bezier(.2,.8,.2,1)}
@keyframes apIn{from{transform:translateX(40px);opacity:0}}
.aptop{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;border-bottom:1px solid var(--line)}
.aptitle{flex:1;font-weight:600;color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.4px}
.apbody{flex:1;overflow-y:auto;padding:14px 16px calc(env(safe-area-inset-bottom) + 24px);overscroll-behavior:contain}
.aphead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.aphead h3{margin:0 0 2px;font-size:19px;overflow-wrap:anywhere}
.apav{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:5px;flex:0 0 auto;overflow:hidden;background:#3f3558;color:#fff;font-size:22px;font-weight:600}
.apav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.alims{display:flex;flex-direction:column;gap:10px;margin:8px 0 12px}
.alim{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:10px 12px;border-radius:5px;background:rgba(0,0,0,.18)}
.alim b{font-size:14px}
.alimdef{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);cursor:pointer}
.aliminp{display:flex;align-items:center;gap:6px}
.aliminp input{width:110px;text-align:right}
.aliminp input:disabled{opacity:.55}
.aacct{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.arowin{display:flex;gap:6px;width:100%;flex-wrap:wrap}
.arowin input{flex:1 1 180px}
.anote{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.anote textarea{width:100%;height:auto;padding:10px 12px;font:inherit;resize:vertical}
.aexp p{margin:0 0 8px}
.aexp .btnrow{margin:6px 0}
.alist.files .arow{min-height:34px;font-size:12px}
.asettings{display:flex;flex-direction:column;gap:8px}
.aset{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:5px;background:rgba(0,0,0,.18)}
.asettop{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.aset .hint{margin:0}
.aswitch{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.aswitch .swt{display:flex;flex-direction:column;gap:2px}
.aswitch small{color:var(--dim);font-size:12px;line-height:1.45}
.asticky{position:sticky;bottom:0;z-index:2;padding:12px 0 calc(env(safe-area-inset-bottom) + 12px);background:linear-gradient(transparent,var(--bg) 35%)}
.cllist{display:flex;flex-direction:column;gap:6px}
.clrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:5px;background:rgba(255,255,255,.05);border-left:3px solid var(--teal)}
.clrow.draft{border-left-color:#9a8fb0}
.clinfo{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.clinfo small{color:var(--dim);font-size:12px}
.clacts{display:flex;gap:6px;flex-wrap:wrap}
.cledit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:800px){.cledit{grid-template-columns:1fr}}
.clform{display:flex;flex-direction:column;gap:10px}
.clform textarea{min-height:260px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.clpreview{display:flex;flex-direction:column;gap:6px;min-width:0}
.clstatus{margin:0;font-size:13px;color:var(--dim)}
.clstatus.saving{color:#ffe3a3}.clstatus.ok{color:var(--teal)}.clstatus.err{color:#ff8a98}
.cltitle{font-weight:600}
.md{font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.md ul,.md ol{margin:6px 0;padding-left:20px}
.md p{margin:6px 0}
.md h4,.md h5,.md h6{margin:10px 0 4px}
.md code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:5px;font-size:.92em}
.md pre{background:rgba(0,0,0,.3);padding:10px;border-radius:5px;overflow:auto}
.md blockquote{margin:6px 0;padding-left:10px;border-left:3px solid var(--line);color:var(--dim)}
.cloglist{display:flex;flex-direction:column;gap:10px}
.clh .cltitle{margin-left:8px}

/* share link in the share dialog */
.clink{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:5px;background:rgba(159,184,245,.07);border:1px solid rgba(159,184,245,.25);margin-bottom:12px}
.clinkh{display:flex;flex-direction:column;gap:2px}
.clinkh small{color:var(--dim);font-size:12px;line-height:1.45}
.clinkrow{display:flex;gap:6px}
.clinkmode{flex:0 0 auto;max-width:44%;height:38px}
@media (max-width:520px){.clinkrow{flex-wrap:wrap}.clinkmode{flex:1 0 100%;max-width:none}} /* (a phone: what the link opens on its own row) */
.clinkurl{flex:1;min-width:0;height:38px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 10px;font:12px ui-monospace,Menlo,Consolas,monospace}
.clinkrow2{display:flex;flex-wrap:wrap;gap:4px 16px}
.clink .btn.ghost.sm{align-self:flex-start}
.cshead{display:block;margin:4px 0 2px}
.subacts{margin:0;gap:6px}
.tllock{flex:0 0 30px;border:0;border-radius:4px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.tllock svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tllock.on{background:rgba(194,167,107,.2);color:var(--brz)}
.edtl.locked{outline:1px dashed rgba(194,167,107,.45);outline-offset:-1px}
.annbtns{display:inline-flex;gap:2px;flex:0 0 auto}
.annb{min-width:38px;padding:0 8px;font-size:15px}
.annb.on{background:rgba(255,216,74,.18);border-color:#ffd84a}
.annb[data-ann=arrow].on{background:rgba(194,107,255,.18);border-color:var(--pink)}
.annb[data-ann=highlight].on{background:rgba(159,184,245,.18);border-color:var(--sky)}
.qann{border-top:3px solid var(--ac,#ffd84a)}
.qannlab{flex:0 0 auto;font:600 12px ui-monospace,Menlo,Consolas,monospace;color:var(--ac,#ffd84a);white-space:nowrap}
@media (max-width:640px){
  .edinfo{overflow-x:auto;scrollbar-width:none}
  .edinfo::-webkit-scrollbar{display:none}
  .edinfo>*:not(#edSel){flex:0 0 auto}
  .qann .qrow{flex-wrap:wrap}
  .qann .qannlab{flex:1 0 100%}
  .qann .qtext{flex:1 1 150px}
}
.keysfind{width:100%;height:40px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;margin:4px 0 6px;font-size:14px}
.keysgroups .card2{margin-bottom:4px}
#edSetBox .card2 input[type=text]{height:36px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 10px;min-width:0;width:180px}
#edSetBox .mlink{margin:8px 0 0}
/* audio calibration */
.calib{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.calib>p{margin:0}
.calibdot{width:120px;height:120px;border-radius:50%;border:4px solid var(--pink);background:rgba(194,107,255,.08);transition:background .08s,transform .08s}
.calibdot.flash{background:var(--pink);transform:scale(1.06)}
.calibdot.hit{animation:calibHit .18s ease-out}
@keyframes calibHit{from{background:rgba(194,107,255,.6);transform:scale(1.08)}}
.calibtap{min-width:180px;min-height:64px;font-size:20px;touch-action:manipulation}
.calibcount{font:600 13px ui-monospace,Menlo,Consolas,monospace;color:var(--dim)}
.calibres{color:var(--ink);font-weight:600}
.calibfine{width:100%;display:flex;align-items:center;gap:8px}
.calibfine input{flex:1}
/* ---------- Hitsound Studio: lanes under the timeline ---------- */
.edpanel .wrap.hsswrap{max-width:none;margin:0}
.edpanel:has(.hsswrap){padding-top:0}
.hsslanes{--lab:96px;--cw:22px;--lh:30px;--cf:11px;position:sticky;top:0;z-index:2;height:calc(9 * var(--lh) + 10px);margin:0 -16px 10px;padding:6px 0 4px;background:#16111f;border-bottom:1px solid rgba(255,255,255,.08);user-select:none;-webkit-user-select:none}
.hsslabels{position:absolute;left:0;top:6px;width:var(--lab);display:flex;flex-direction:column}
.hsslab{height:var(--lh);display:flex;align-items:center;justify-content:flex-end;padding:0 10px 0 6px;font-size:var(--lf,11px);color:var(--dim);text-align:right;line-height:1.1}
.hsslab.head{color:var(--pink);font-weight:600}
.hsstrack{position:absolute;top:6px;bottom:4px;overflow:hidden;touch-action:none;cursor:ew-resize;border-radius:5px;background:#0e0b14}
.hssinner{position:absolute;left:0;top:0;will-change:transform}
.hsslane{position:relative;height:var(--lh)}
.hsslane[data-row="v"],.hsslane[data-row="i"]{font-size:calc(var(--cf) - 1px)} /* (the numbers' size: on the two rows, so the cells themselves have no var(): see below) */
.hsslane:nth-child(odd){background:rgba(255,255,255,.015)}
.hssplay{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--pink);pointer-events:none;box-shadow:0 0 8px var(--pink)}
.hssmark,.hsscell{position:absolute;top:3px;width:22px;height:calc(100% - 6px);padding:0;border:0;border-radius:4px;cursor:pointer;font:inherit;text-align:center;overflow:hidden} /* (no var() here: hundreds of cells come and go while the song plays, and a var() in their rules made the browser work each one out from scratch, 60-150 ms a time; the width is set on each cell) */
.hssmark{background:#2a2238;color:#fff;border-bottom:3px solid transparent}
.hssmark.b1{border-bottom-color:#fff}.hssmark.b2{border-bottom-color:var(--red)}.hssmark.b4{border-bottom-color:#4f8cff}.hssmark.b3{border-bottom-color:#b48cff}.hssmark.bx{border-bottom-color:var(--brz)}
.hssmark.sel{background:var(--sky);color:#0d2233}
.hsscell{background:rgba(255,255,255,.07);color:var(--ink)}
@media (hover:hover){.hsscell:hover{background:rgba(255,255,255,.18)}}
.hsscell.on.w{background:#3b82f6}.hsscell.on.f{background:#f59e0b}.hsscell.on.c{background:#ec4899}
.hsscell.set.s1{background:rgba(255,255,255,.22)}.hsscell.set.s2{background:rgba(143,218,211,.4)}.hsscell.set.s3{background:rgba(255,120,80,.45)}.hsscell.set.s0{color:var(--dim)}
.hsscell.num{color:var(--dim)}
.hsscell.painting{outline:2px solid #fff;outline-offset:-2px}
.hssbox{padding:12px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.hssbox h4{margin:0 0 8px;font-size:13px;color:var(--pink)}
.hsslist{display:flex;flex-direction:column;gap:4px}
.hssfile{display:flex;align-items:center;gap:6px}
.hssfile code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.hssfile .btn.sm{min-height:30px;padding:0 10px}
.hssadd{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.hssaddrow{display:flex;gap:6px;flex-wrap:wrap}
.hssaddrow select,.hssaddrow input[type=number]{height:34px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 8px;min-width:0}
.hssaddrow input[type=number]{width:70px}
.hssaddrow input[type=file]{font-size:12px;max-width:100%}
.hssname{font-size:12px;color:var(--sky)}
@media (max-width:640px){.hsslab{font-size:9.5px;padding-right:6px}}
/* Setup -> Colours */
.setcols .card2{margin-bottom:10px}
.colhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0 6px}
.colhead b{font-size:15px;font-weight:600}
.colrow{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0 12px}
.colit{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px}
.colit small{font-size:11px;color:var(--dim);white-space:nowrap}
.colsw{position:relative;width:48px;height:48px}
.colsw input,.colright input[type=color]{-webkit-appearance:none;appearance:none;border:0;padding:0;background:none;cursor:pointer}
.colsw input{width:48px;height:48px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.5)}
.colsw input::-webkit-color-swatch-wrapper,.colright input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.colsw input::-webkit-color-swatch{border:0;border-radius:50%}
.colsw input::-moz-color-swatch{border:0;border-radius:50%}
.colnum{position:absolute;inset:0;display:grid;place-items:center;font:600 18px Inter,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none}
.colit.warn .colsw input{box-shadow:0 0 0 3px var(--brz),0 2px 8px rgba(0,0,0,.5)}
.coltools{display:flex;gap:4px}
.coltools button{width:26px;height:24px;border-radius:4px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;font-size:15px;line-height:1}
.coltools button:disabled{opacity:.3;cursor:default}
@media (hover:hover){.coltools button:not(:disabled):hover{background:rgba(255,255,255,.1)}}
.coladd{width:48px;height:48px;border-radius:50%;border:2px dashed var(--line);background:none;color:var(--dim);font-size:22px;cursor:pointer}
@media (hover:hover){.coladd:hover{color:var(--ink);border-color:var(--dim)}}
.colsl{cursor:default}
.colright{display:flex;align-items:center;gap:10px;flex:none}
.colright input[type=color]{width:40px;height:28px;border-radius:4px;box-shadow:0 0 0 1px var(--line)}
.colright input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}
.colright input[type=color]::-moz-color-swatch{border:0;border-radius:4px}
/* song select: Filters (like the osu! beatmap listing) */
.fchip{display:inline-flex;align-items:center;gap:6px}
.fchip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fchip.open,.fchip.has{border-color:var(--pink);color:var(--ink)}
.fcount{font-size:11px;min-width:18px;height:18px;border-radius:4px;background:var(--pink);color:var(--pinkdk);display:grid;place-items:center;padding:0 5px}
.fcount:empty{display:none}
.fpills{display:flex;flex-wrap:wrap;gap:6px;padding:6px 0 2px;align-items:center}
.fpill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 11px;border-radius:5px;border:1px solid rgba(194,107,255,.45);background:rgba(194,107,255,.12);color:var(--ink);font-size:12px;cursor:pointer}
.fpill b{font-size:14px;color:var(--dim);width:18px;height:18px;display:grid;place-items:center;border-radius:50%}
@media (hover:hover){.fpill:hover b{background:rgba(255,255,255,.12);color:var(--ink)}}
.advpanel{margin:10px 0 6px;padding:6px 16px 12px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid var(--line);animation:cardIn .25s cubic-bezier(.2,.8,.2,1)}
.advrow{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.advl{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;padding-top:8px}
.advc{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.chip.sm{height:30px;padding:0 11px;font-size:12.5px}
.advranges{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 16px;width:100%}
.advrange{display:grid;grid-template-columns:84px 1fr 10px 1fr;align-items:center;gap:6px;font-size:13px}
.advrange i{font-style:normal;color:var(--dim);text-align:center}
.advrange input{height:32px;min-width:0;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 8px;font:inherit}
.advc .hint{width:100%;margin:2px 0 0}
.tagtabs{display:flex;flex-wrap:wrap;gap:4px;width:100%}
.tagtab{height:30px;padding:0 11px;border-radius:4px;border:0;background:rgba(255,255,255,.06);color:var(--dim);cursor:pointer;font-size:12.5px}
.tagtab.on{background:rgba(159,184,245,.18);color:#bfe6ff;font-weight:600}
.taglist{display:flex;flex-wrap:wrap;gap:6px;width:100%;padding-top:4px}
.tagchip.on{background:var(--ice);border-color:var(--ice);color:#0d2230}
.tagtip{width:100%;margin:4px 0 0;font-size:12.5px;color:var(--dim);line-height:1.5;min-height:1.5em}
.tagtip b{color:var(--ink)}
.advfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:10px}
.advfoot .hint{flex:1;margin:0;min-width:160px}
@media (max-width:640px){.advrow{grid-template-columns:1fr;gap:4px}.advl{padding-top:0}.advpanel{padding:4px 12px 10px}}
/* map details: genre, language, player tags, mapper tags, nominators */
.dmeta{padding:0 18px}
.dmeta:empty{display:none}
.dmchip{height:26px;padding:0 10px;border-radius:5px;border:1px solid rgba(159,184,245,.4);background:rgba(159,184,245,.1);color:#bfe6ff;font-size:12px;cursor:pointer}
@media (hover:hover){.dmchip:hover{background:rgba(159,184,245,.2)}}
.dmrate,.dmnsfw{font-style:normal;font-size:12px;padding:3px 10px;border-radius:5px;background:rgba(255,216,74,.14);color:#ffe28a}
.dml{font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;margin:4px 0 6px}
.dmnom{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.dmnom .cav{width:22px;height:22px;font-size:11px}
.dmnom small{font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;background:rgba(163,71,235,.25);color:#e2c2ff}
.dmtags{padding-bottom:8px}
.dmtagrow{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:5px}
.dmcat{font-size:11.5px;color:#9fd9ff;font-weight:600;min-width:74px}
.dmtag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:4px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font-size:12px;cursor:pointer}
.dmtag small{font-size:10px;color:var(--dim)}
.dmore .dmtag small{font-size:12px}
@media (hover:hover){.dmtag:hover{border-color:var(--ice)}}
.dmtag.plain{height:24px;border-radius:5px;color:var(--dim)}
.dmtags .tagtip{margin:2px 0 0;font-size:12px}
/* mapper profile */
.mapper.prof{display:block;padding:0;overflow:hidden;background:linear-gradient(160deg,hsl(var(--hue,280) 30% 22%),var(--s1) 60%)}
.mapper.prof.hascover{background:linear-gradient(180deg,rgba(21,24,37,.35),rgba(21,24,37,.96) 150px,var(--s1)),var(--cover) center top/100% auto no-repeat,var(--s1)}
.prof>*{margin-left:16px;margin-right:16px}
.ptop{display:flex;gap:16px;align-items:flex-end;padding-top:70px}
.prof:not(.hascover) .ptop{padding-top:16px;align-items:center}
.prof .mav{width:96px;height:96px;font-size:40px;box-shadow:0 0 0 3px var(--pink),0 6px 20px rgba(0,0,0,.4)}
.prof .minfo h2{font-size:26px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.psup{font-size:14px;color:var(--vio);margin-left:2px}
.pgroups{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.pgroup{--gc:#aaa;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 3px;border-radius:5px;background:color-mix(in srgb,var(--gc) 18%,transparent);border:1px solid color-mix(in srgb,var(--gc) 55%,transparent);font-size:12px}
.pgroup b{background:var(--gc);color:#140f1c;border-radius:4px;padding:1px 7px;font-size:11px}
.pgroup.prob{border-style:dashed}
.prole{margin:4px 0 0!important;color:#ffd6ea!important;font-weight:600;font-size:14px!important}
.pmeta{margin:2px 0 0}
.pbadges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pbadges img{height:40px;border-radius:4px;background:rgba(0,0,0,.2)}
.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:14px}
.ptile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid transparent;color:var(--ink);font:inherit;text-align:left}
button.ptile{cursor:pointer}
@media (hover:hover){button.ptile:hover{border-color:var(--line)}}
.ptile.on{border-color:var(--pink);background:rgba(194,107,255,.12)}
.ptile b{font-size:19px;font-weight:600}
.ptile span{font-size:11.5px;color:var(--dim)}
.pstats{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--dim);font-size:13px;margin-top:12px}
.pstats b{color:var(--ink);font-weight:600}
.pinfo{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--dim);margin:10px 16px 0}
.pinfo a{color:#9fd9ff}
.pact{margin-top:14px;padding:10px 12px;border-radius:5px;background:rgba(0,0,0,.18)}
.pact .dml{margin-top:0}
.pact .hint{margin:0}
.actlist{display:flex;flex-direction:column}
.actrow{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px}
.actrow:last-child{border-bottom:0}
.actrow em{font-style:normal;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.08);white-space:nowrap}
.actrow.ap-ranked em,.actrow.ap-approved em{background:rgba(107,227,138,.18);color:#9ff0b5}
.actrow.ap-qualified em{background:rgba(159,184,245,.18);color:#bfe6ff}
.actrow.ap-loved em{background:rgba(194,107,255,.2);color:#ffc2dc}
.actrow.kudosu em{background:rgba(255,216,74,.16);color:#ffe28a}
.actrow a,.actrow>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actrow small{grid-column:2;color:var(--dim);font-size:11.5px}
.actrow time{font-size:11.5px;color:var(--dim);white-space:nowrap}
.pact>.mlink{margin-top:6px}
.prof .macts{margin-top:14px}
.prof .pubnote{margin:8px 16px 14px}
@media (max-width:640px){.ptop{padding-top:48px}.prof .mav{width:72px;height:72px}.prof .minfo h2{font-size:21px}.ptiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}
/* Hitsound Studio: slider ticks (their sound comes from green lines) */
.hssmark.tick{top:calc(var(--lh) * .3);height:calc(var(--lh) * .53);line-height:calc(var(--lh) * .53);background:#221b2e;color:#9e93b5;border-bottom:0;font-size:13px}
.hssmark.tick.gl,.hsscell.tick.gl{box-shadow:inset 0 -2px 0 var(--teal)}
.hsscell.tick{top:calc(var(--lh) * .23);height:calc(var(--lh) * .67);line-height:calc(var(--lh) * .67);font-size:calc(var(--cf) - 1px);opacity:.85;border:1px dashed rgba(255,255,255,.18)}
img.flag{height:.72em;width:auto;border-radius:3px;vertical-align:baseline}
span.flag{font-size:.6em;font-weight:600;padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.1)}
/* Privacy: label / value rows */
.prows{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:0;margin:10px 0 0;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.04)}
.prows dt,.prows dd{margin:0;padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);font-size:13.5px;line-height:1.55}
.prows dt:first-of-type,.prows dt:first-of-type+dd{border-top:0}
.prows dt{font-weight:600;color:#ffd6ea}
.prows dd{color:#e6def2}
@media (max-width:640px){.prows{grid-template-columns:1fr}.prows dd{border-top:0;padding-top:0}}
/* Compose side lists: mod notes / annotations (each its own panel, stacked when both are open) */
.edside{position:absolute;left:calc(env(safe-area-inset-left) + 66px);top:var(--insT,120px);bottom:var(--insB,120px);width:min(290px,42vw);display:flex;flex-direction:column;gap:8px;padding:8px 0;z-index:2;pointer-events:none}
.sidepanel{pointer-events:auto;flex:1 1 0;min-height:0;display:flex;flex-direction:column;border-radius:5px;background:rgba(27,31,47,.94);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.4);overflow:hidden}
.sidehead{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidehead b{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidehead .btn{height:28px;padding:0 9px;font-size:12px}
.sidehead .qclose{width:28px;height:28px}
.sidelist{overflow-y:auto;padding:4px;flex:1;min-height:0}
.sidelist .hint{margin:8px}
.siderow{display:flex;align-items:stretch;border-radius:4px;border-left:3px solid var(--c)}
.siderow+.siderow{margin-top:3px}
.siderow.now{background:rgba(194,107,255,.14)}
.siderow.sel{box-shadow:inset 0 0 0 1px var(--sky,var(--ice))}
.sidego{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 8px;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left;font:inherit}
@media (hover:hover){.sidego:hover{background:rgba(255,255,255,.05)}}
.sidego b{font-size:11.5px;font-weight:600;color:#cfc6de;font-variant-numeric:tabular-nums}
.sidego span{font-size:12.5px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.sidedel{flex:none;width:28px;border:0;background:none;color:var(--dim);cursor:pointer;font-size:16px}
@media (hover:hover){.sidedel:hover{color:var(--red)}}
.sidebtn.lit{border-color:var(--pink);color:var(--ink)}
.pvolpop{z-index:30}
@media (max-width:640px){.edside{width:min(250px,60vw);left:calc(env(safe-area-inset-left) + 60px)}}
.hsssize{display:inline-flex;align-items:center;gap:4px}
.hsssize small{color:var(--dim);font-size:12px}
.hsssize output{min-width:38px;text-align:center;font-size:12px;color:var(--ink)}
/* Hitsound Studio: stretch bar, full screen, tool dock */
.hssgrip{height:12px;margin:-10px -16px 8px;cursor:ns-resize;touch-action:none;position:relative}
.hssgrip::after{content:"";position:absolute;left:50%;top:4px;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:rgba(255,255,255,.25)}
@media (hover:hover){.hssgrip:hover::after{background:var(--pink)}}
.edpanel.hssfull{overflow:hidden;padding-bottom:0}
.hssfull .hsslanes{margin-bottom:0}
.hdb{min-width:36px;height:36px;padding:0 10px;border-radius:5px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);font:600 13px inherit;cursor:pointer}
@media (hover:hover){.hdb:hover{background:rgba(255,255,255,.12)}}
.hdb.snd.on[data-bit="2"]{background:#3b82f6;border-color:#3b82f6}.hdb.snd.on[data-bit="4"]{background:#f59e0b;border-color:#f59e0b}.hdb.snd.on[data-bit="8"]{background:#ec4899;border-color:#ec4899}
.hdb.on{background:var(--pink);border-color:var(--pink);color:var(--pinkdk)}
.hdseg{display:inline-flex;align-items:center;gap:3px}
.hdseg small{font-size:11px;color:var(--dim);margin-right:3px}
.hdseg .hdb{min-width:30px;padding:0 6px}
.hdnum{width:60px;height:36px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 8px;font:inherit}
.hssdock .hsssize .btn{height:36px}
.hssdock{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.hdgrp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.hdgrp+.hdgrp,.hdgap+.hdgrp{padding-left:8px;border-left:1px solid rgba(255,255,255,.1)}
.hdgap{flex:1 1 0}
.hdgap+.hdgrp{border-left:0;padding-left:0}
.hdinfo{font-size:12px;font-weight:600;color:var(--sky);min-width:72px}
.hdinfo.none{color:var(--dim);font-weight:400}
.hdb.snd{min-width:64px}
.hszl{margin-left:6px}
.hsshelpb{border-radius:50%;width:36px;padding:0}
.hsshelp{margin:-4px 0 10px;padding:10px 14px;border-radius:5px;background:rgba(124,200,255,.06);border:1px solid rgba(124,200,255,.18);font-size:13px;color:var(--dim)}
.hsshelp ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.hsshelp .hsstourb{margin-top:10px}
.hsstabs{margin-bottom:8px}
.hssfull .hssgrip,.hssfull .hsshelp{display:none}
.hssrc{position:absolute;right:8px;top:6px;width:var(--rcw);display:none;flex-direction:column}
.hsslanes.rc .hssrc{display:flex}
.hsrrow{height:var(--lh);display:flex;align-items:center;gap:3px}
.hsrrow .hdb{height:calc(var(--lh) - 6px);min-width:0;flex:1 1 0;padding:0 4px;font-size:var(--lf,11px);border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsrrow .hdnum{height:calc(var(--lh) - 6px);flex:1;width:auto;min-width:0;font-size:var(--lf,11px);border-radius:4px;padding:0 6px}
.hsrrow small{font-size:var(--lf,11px);color:var(--dim);width:12px}
.hrinfo{flex:1 1 auto;min-width:0;font-size:var(--lf,11px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hssrc.idle .hsrrow+.hsrrow{opacity:.45}
.hssrcon .hssdock .hdsel,.hssrcon .hssdock .hdsnd,.hssrcon .hssdock .hdsets,.hssrcon .hssdock .hdnums,.hssrcon .hssdock .hdmove{display:none}
.hssrcon .hssdock .hdmore{border-left:0;padding-left:0}
.hssrcon .hssdock{padding:4px 8px;gap:6px}
.hssrcon .hssdock .hdb,.hssrcon .hssdock .hsssize .btn{height:30px;min-width:30px}
@media (max-width:640px){.hssdock{padding:8px;gap:6px}.hdgrp+.hdgrp{border-left:0;padding-left:0}.hdgap{display:none}.hdsel{flex:1 0 100%}.hdb.snd{min-width:0;flex:1}.hdsnd{flex:1 0 100%}}
/* ---------- invite-only: the preview page (gate.js) ---------- */
body.gated #shell,body.gated #player,body.gated #detail{display:none!important}
.gate{max-width:1120px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 16px);min-height:100dvh;display:flex;flex-direction:column}
.gtop{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-bottom:10px}
.gtop .brand{flex:1 0 auto}
.gtop .brand .bname{white-space:nowrap}
.gtop .langsel{flex:0 0 auto}
.gacts{display:flex;gap:8px;align-items:center}
.gtop .gacts{flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.ghero{padding:64px 16px 40px;min-height:min(62vh,520px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ghero>.btn{position:relative;z-index:1;margin-top:18px}
.gfeat{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin:8px 0 18px}
/* the home page's "What you can do here" (the same cards as the access page) */
.homefeats{margin:26px 0 8px}.homefeats>h2{margin:0 0 12px;font-size:20px}
.gcard{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:6px;border:1px solid var(--line);background:linear-gradient(150deg,var(--s2),var(--s1));animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both}
.gcard b{font-size:18px}
.gcard span:not(.mic){color:var(--dim);font-size:14px;line-height:1.5}
.gcard:nth-child(3n+2) .mic{background:var(--sky);box-shadow:0 8px 22px rgba(159,184,245,.3)}
.gcard:nth-child(3n) .mic{background:#ffd84a;box-shadow:0 8px 22px rgba(255,216,74,.25)}
.ghow{padding:8px 4px 4px}
.ghow h3,.gask h3{margin:0 0 8px;font-size:20px}
.ghow ol{margin:0;padding-left:22px;color:var(--dim);line-height:1.8}
.gmore{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;align-items:center;margin:32px 0;padding:32px;border:1px solid rgba(194,107,255,.35);border-radius:16px;
  background:radial-gradient(120% 140% at 0% 0%,rgba(194,107,255,.22),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(159,184,245,.14),transparent 60%),var(--s1)}
.gmore::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:2px solid rgba(194,107,255,.18);box-shadow:0 0 0 22px rgba(194,107,255,.06),0 0 0 48px rgba(194,107,255,.04);pointer-events:none}
.gmcopy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.gmeyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vio)}
.gmore h3{margin:0;font-size:clamp(24px,3.2vw,32px);line-height:1.15;text-wrap:balance}
.gmore p{margin:0;color:var(--dim);line-height:1.55;max-width:44ch}
.gmacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.gmlogin{height:48px;padding:0 20px;font-size:16px;gap:10px;box-shadow:0 8px 28px rgba(194,107,255,.35)}
.gmacts .altlogin{display:flex;gap:10px}.gmacts .altlogin .btn{height:48px;padding:0 18px;font-size:15px}
.gmnote{color:var(--dim);font-size:12.5px;opacity:.85}
.gmgrid{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gmitem{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:12px;background:rgba(21,24,37,.55);border:1px solid var(--bd);min-width:0}
.gmitem b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.gmitem span:not(.gmic){display:block;color:var(--dim);font-size:13.5px;line-height:1.5}
.gmic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(194,107,255,.16);color:var(--vio)}
.gmic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.gmitem{transition:border-color .2s,transform .2s}.gmitem:hover{border-color:rgba(194,107,255,.5);transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.gmitem{transition:none}.gmitem:hover{transform:none}}
/* narrow: one column read top to bottom: the pitch, the perks, then the buttons and the note */
@media (max-width:860px){.gmore{display:flex;flex-direction:column;align-items:stretch;padding:24px 20px;gap:14px}.gmcopy{display:contents}
  .gmeyebrow,.gmore h3,.gmore p{order:0}.gmgrid{order:1;margin:6px 0}.gmacts{order:2;margin-top:4px}.gmnote{order:3;text-align:center}}
@media (max-width:520px){.gmgrid{grid-template-columns:minmax(0,1fr)}.gmacts{flex-direction:column}.gmacts>*,.gmacts .altlogin,.gmacts .altlogin .btn{width:100%;justify-content:center}}
.gask{margin:18px auto 0;max-width:560px;width:100%;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:6px;border:1px solid rgba(194,107,255,.45);background:radial-gradient(ellipse at 50% 0%,rgba(194,107,255,.16),transparent 70%),var(--s1)}
.gask p{margin:0;line-height:1.5}
.gbig{justify-content:center;gap:10px;min-height:48px;font-size:16px;text-decoration:none}
.gwho{display:flex;gap:12px;align-items:center}
.gwho .mav{width:44px;height:44px;flex:0 0 auto;font-size:18px}
.gwho>div{flex:1;min-width:0;display:flex;flex-direction:column}
.gwho small{color:var(--dim)}
.gnote{width:100%;box-sizing:border-box;resize:vertical;min-height:56px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:10px 12px;font:inherit}
.gstate{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:5px;background:rgba(255,216,74,.12);border:1px solid rgba(255,216,74,.4)}
.gstate b{color:#ffd84a}
.gstate small{color:var(--dim)}
.gstate.bad{background:rgba(255,90,110,.12);border-color:rgba(255,90,110,.45);color:#ffb3bd}
@media (max-width:640px){.gtop .gacts{flex:1 1 100%;margin-left:0}.gtop .gacts>*{flex:1 1 auto;justify-content:center}.gtop .gacts>.altlogin{flex:0 0 auto}.gtop .gback{display:none}
  .gtop .brand{gap:10px}.gtop .brand .bname{font-size:18px}.gtop .logo{width:40px;height:40px}.gtop .logo::after{left:15px;top:12px;border-left-width:12px;border-top-width:8px;border-bottom-width:8px}}
@media (max-width:560px){.ghero{padding:44px 12px 30px}.gask{padding:18px}}
@media (max-width:430px){.gtop .brand .bname{font-size:16px}.gtop .langsel{max-width:96px;padding:0 6px}.gtop .altlogin .gbtn{width:40px;padding:0;justify-content:center}.gtop .altlogin .gbtn span{display:none}.gtop .altlogin .altmark{margin:0}}
@media (max-width:360px){.gtop{column-gap:8px}.gtop .brand{gap:8px}.gtop .brand .bname{font-size:15px}.gtop .langsel{max-width:84px}.gtop .gacts{gap:6px}.gtop .gacts .btn.sm{padding:0 12px}}
.abadge.acc.ok{background:rgba(143,218,211,.14);color:var(--teal)}
.abadge.acc.warn{background:rgba(255,216,74,.16);color:#ffd84a}
.abadge.acc.bad{background:rgba(255,90,110,.16);color:#ff8a98}
.aacclist{display:flex;flex-direction:column;gap:8px}
.aaccrow{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:5px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.aacctop{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.anote{margin:0;padding:8px 12px;border-left:3px solid var(--pink);background:rgba(194,107,255,.07);border-radius:0 5px 5px 0;font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}
.aaccess p{margin:0 0 8px}
.achips{display:flex;flex-wrap:wrap;gap:6px}
/* the live tour: the real app in a frame (gate.js) driven by demo.js */
.gstage{margin:6px 0 22px;display:flex;flex-direction:column;gap:12px}
.gcapin{display:flex;gap:14px;align-items:center;justify-content:space-between;animation:gcapIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes gcapIn{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.gcapin{animation:none}}
.gshead h3{margin:0 0 4px;font-size:24px}
.gshead p{margin:0;color:var(--dim)}
.gsbox{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}
.gscreen{position:relative;overflow:hidden;border-radius:5px;border:1px solid var(--line);background:#000;box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(194,107,255,.18)}
.gsplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid rgba(194,107,255,.5);background:rgba(194,107,255,.16);color:#fff;font-size:24px;cursor:pointer;padding:0 0 0 4px}
.gsplay:hover,.gsplay:focus-visible{background:rgba(194,107,255,.32)}
.gscreen iframe{position:absolute;left:0;top:0;width:1280px;height:720px;border:0;transform-origin:0 0;pointer-events:none}
.gchaps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;overflow:auto;justify-self:stretch;scrollbar-width:thin}
.gchap{width:100%;display:flex;gap:10px;align-items:center;text-align:left;padding:6px 10px;border-radius:5px;border:1px solid transparent;background:none;color:var(--dim);font:inherit;font-size:14px;cursor:pointer}
.gchap em{font-style:normal;flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.07)}
@media (hover:hover){.gchap:hover{color:var(--ink);background:rgba(255,255,255,.04)}}
.gchap.on{color:var(--ink);border-color:rgba(194,107,255,.45);background:rgba(194,107,255,.1)}
.gchap.on em{background:var(--pink);color:var(--bg)}
.gcap{padding:14px 16px;border-radius:5px;background:linear-gradient(150deg,var(--s2),var(--s1));border:1px solid var(--line);min-height:62px}
.gcap b{font-size:17px}
.gcapin span{color:var(--dim);line-height:1.5}
.gbtn{gap:6px;text-decoration:none}
.gacts a.btn{text-decoration:none;display:inline-flex;align-items:center}
.gchip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 4px;border-radius:5px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.gchip .cav{width:28px;height:28px;margin:0;font-size:13px}
.gpill{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:5px;font-size:13px;font-weight:600;color:#ffd84a;background:rgba(255,216,74,.12);border:1px solid rgba(255,216,74,.4)}
@media (max-width:860px){.gsbox{grid-template-columns:1fr}.gchaps{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.gchaps li{flex:0 0 auto}.gchap{white-space:nowrap}}
/* inside the frame */
.tourcur{position:fixed;left:0;top:0;z-index:100000;width:26px;height:26px;margin:-3px 0 0 -4px;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.tourcur svg{width:100%;height:100%;fill:#fff;stroke:var(--bg);stroke-width:1.4;stroke-linejoin:round}
.tourrip{position:fixed;z-index:99999;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid var(--pink);pointer-events:none;animation:tourRip .55s ease-out forwards}
@keyframes tourRip{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}
.demotour #lcBtn,.demotour .livechat{display:none!important}
.gcapin>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.gcapin>.btn{flex:0 0 auto}
.ghero .ghbtns{position:relative;z-index:1;margin-top:18px;justify-content:center}
.ghero .ghbtns .btn{margin:0}
/* the playable demo editor */
body.gtrying{overflow:hidden}
.gtry{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:#0d0a12;animation:gtryIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes gtryIn{from{opacity:0;transform:scale(.97)}}
.gtrybar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top) + 8px) 14px 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.gtryinfo{display:flex;flex-direction:column;min-width:0}
.gtryinfo b{font-size:15px}
.gtryinfo span{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtry iframe{flex:1;width:100%;border:0;background:#000}
.gtryx{flex:0 0 auto}
/* inside the demo frame */
.demotry #cloudBtn,.demotry #cloudChip,.demotry #draftChip,.demotry #liveBtn,.demotry #shareBtn,.demotry #livePill,.demotry #collabPill,.demotry #lcBtn,.demotry .livechat{display:none!important}
@media (max-width:560px){.gcapin{flex-direction:column;align-items:stretch}.gtryinfo span{display:none}.gtrybar .gacts{gap:6px}.gtryinfo b{font-size:14px;white-space:nowrap}}
@media (max-width:430px){.gtryinfo{display:none}.gtrybar{justify-content:flex-end}}
/* invite links: the banner on the invite page (gate.js) and the Invite friends page (invites.js) */
.ginv{display:flex;flex-direction:column;gap:12px;margin:0 auto 14px;max-width:640px;width:100%;box-sizing:border-box;padding:20px;border-radius:6px;border:1px solid rgba(159,184,245,.5);background:radial-gradient(ellipse at 50% 0%,rgba(159,184,245,.16),transparent 70%),var(--s1);animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both}
.ginv.bad{border-color:rgba(255,90,110,.45)}
.ginv>b{font-size:17px}
.ginv>span{color:var(--dim)}
.ginvwho{display:flex;gap:14px;align-items:center}
.ginvwho .mav{width:56px;height:56px;font-size:22px;flex:0 0 auto}
.ginvwho>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ginvwho b{font-size:19px;line-height:1.3}
.ginvwho span{color:var(--dim)}
.invwrap{display:flex;flex-direction:column;gap:14px;max-width:760px}
.invcard,.invlist{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:6px;border:1px solid var(--line);background:linear-gradient(150deg,var(--s2),var(--s1))}
.invcard.off{opacity:.6}
.invcard h3,.invlist h3{margin:0;font-size:18px}
.invrow{display:flex;gap:8px;flex-wrap:wrap}
.invurl{flex:1 1 260px;min-width:0;height:42px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;font:inherit;font-size:14px}
.invuse{display:flex;flex-direction:column;gap:6px}
.invuse small{color:var(--dim)}
.invbar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.invbar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--sky))}
.invcard>.mlink{align-self:flex-start}
.invp{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.invp small{margin-left:auto;color:var(--dim)}
.invp .cav{width:26px;height:26px;margin:0;font-size:12px}
.ainv p{margin:0 0 8px}
.ainvlist{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:10px}
.invadm{border-color:rgba(255,216,74,.35)}
.invform{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.invlab{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:14px}
.invnum{width:84px;height:40px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 10px;font:inherit}
.invnote{flex:1 1 200px;min-width:0;height:40px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;font:inherit}
.invlinks{display:flex;flex-direction:column;gap:8px}
.invl{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:5px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.invl.off{opacity:.6}
.invltop{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.invltop small{margin-left:auto;color:var(--dim)}
/* the invitation scene (invscene.js): dark purple, closing circles, embers, a flickering name */
body.gising{overflow:hidden}
body.gising #gate,body.gising #shell{visibility:hidden}
.gis{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#f4f2ff 0%,#d4d0ef 20%,#a29ecd 44%,#57537e 70%,#1b1929 100%);color:#1d1a30;animation:gisIn 1.4s ease both}
@keyframes gisIn{from{opacity:0}}
.gis::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 30%,rgba(20,18,32,.55) 72%,rgba(12,10,20,.92) 100%);animation:gisBreath 5s ease-in-out infinite}
@keyframes gisBreath{50%{opacity:.8}}
.gis::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.07;background:repeating-linear-gradient(0deg,rgba(30,26,50,.6) 0 1px,transparent 1px 3px);animation:gisScan 7s linear infinite}
@keyframes gisScan{to{background-position:0 300px}}
.gisfx{position:absolute;inset:0;width:100%;height:100%}
.gisin{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 20px calc(env(safe-area-inset-bottom) + 24px);max-width:560px}
.gisav{width:112px;height:112px;margin:30px 0 62px;border-radius:50%;box-shadow:0 0 0 3px #1f1b33,0 0 0 7px rgba(255,255,255,.55),0 0 42px 8px rgba(255,106,216,.45);animation:gisPulse 2.4s ease-in-out infinite}
@keyframes gisPulse{50%{box-shadow:0 0 0 3px #1f1b33,0 0 0 7px rgba(255,255,255,.75),0 0 64px 14px rgba(181,140,255,.6)}}
.gisav .mav{width:112px;height:112px;font-size:42px;box-shadow:none;filter:saturate(.55) contrast(1.1) brightness(1.05)}
.gisfrom{margin:0;letter-spacing:.35em;text-transform:uppercase;font-size:12px;font-weight:600;color:#3a3560;animation:gisRise 1.2s .3s ease both}
.gisname{position:relative;margin:0;font-size:clamp(34px,8vw,58px);font-weight:700;letter-spacing:.04em;color:#15121f;text-shadow:0 0 14px rgba(255,255,255,.9),0 0 36px rgba(255,255,255,.6);animation:gisRise 1.2s .5s ease both,gisFlick 6s 2s infinite;overflow-wrap:anywhere}
.gisname::before,.gisname::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}
.gisname::before{color:#ff3bbf;animation:gisGlA 6s 2s infinite}
.gisname::after{color:#1fb8ff;animation:gisGlB 6s 2s infinite}
@keyframes gisFlick{0%,91%,100%{opacity:1}92%{opacity:.35}93%{opacity:1}95%{opacity:.6}96%{opacity:1}}
@keyframes gisGlA{0%,90%,100%{opacity:0;transform:none}91%{opacity:.8;transform:translate(-4px,1px);clip-path:inset(10% 0 55% 0)}93%{opacity:.8;transform:translate(3px,-2px);clip-path:inset(60% 0 8% 0)}95%{opacity:0}}
@keyframes gisGlB{0%,90%,100%{opacity:0;transform:none}92%{opacity:.8;transform:translate(4px,2px);clip-path:inset(40% 0 30% 0)}94%{opacity:.7;transform:translate(-3px,0);clip-path:inset(5% 0 70% 0)}96%{opacity:0}}
@keyframes gisRise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
.gisline{margin:6px 0 16px;font-size:17px;font-style:italic;font-weight:500;color:#2c2750;text-shadow:0 0 12px rgba(255,255,255,.8);animation:gisRise 1.2s .9s ease both}
.gissub{margin:0;font-size:13px;color:#3d3862}
.gisbtn{min-height:52px;padding:0 30px;font-size:17px;gap:10px;border-radius:26px;border:1px solid #ff6ad8;background:linear-gradient(135deg,#1f1b33,#3a2c66);color:#f6f2ff;text-decoration:none;box-shadow:0 0 0 1px rgba(63,214,255,.35),0 0 26px rgba(255,106,216,.45),inset 0 0 12px rgba(255,255,255,.08);animation:gisRise 1.2s 1.3s ease both,gisGlow 2.4s 2.5s ease-in-out infinite}
@media (hover:hover){.gisbtn:hover{filter:brightness(1.15)}}
.gisbtn.alt{margin-top:10px;animation-delay:1.45s,2.6s}
.gisin .gosu{width:min(320px,100%);box-sizing:border-box;height:46px;margin:10px 0;border-radius:23px;border:1px solid #ff6ad8;background:rgba(255,255,255,.85);color:#15121f;padding:0 18px;font:inherit;font-size:15px;text-align:center}
@keyframes gisGlow{50%{box-shadow:0 0 0 1px rgba(63,214,255,.55),0 0 40px rgba(255,106,216,.7),inset 0 0 12px rgba(255,255,255,.12)}}
.gislook{margin-top:18px;background:none;border:0;color:#3f3a66;font:inherit;font-size:13px;text-decoration:underline dotted;cursor:pointer;animation:gisRise 1.2s 1.8s ease both}
@media (hover:hover){.gislook:hover{color:#15121f}}
.gis.welcome .gisin{max-width:680px}
.gisprop{display:flex;flex-direction:column;gap:18px;align-items:center}
.gisw{margin:0;font-size:clamp(18px,3.4vw,24px);line-height:1.5;font-weight:500;color:#1f1a38;text-shadow:0 0 14px rgba(255,255,255,.9);animation:gisWord 1.4s ease both}
.gisw.first{font-size:clamp(28px,6vw,44px);font-weight:700;letter-spacing:.04em;color:#15121f}
@keyframes gisWord{from{opacity:0;filter:blur(10px);letter-spacing:.3em}}
.gis.out{animation:gisOut .9s ease forwards}
@keyframes gisOut{to{opacity:0;filter:blur(8px)}}
@media (prefers-reduced-motion:reduce){.gis *,.gis::before,.gis::after,.gis{animation:none!important}}
/* the scene tears: the content jumps sideways in slices for a blink */
.gis.tear .gisin{animation:gisTear .18s steps(3) both}
.gis.tear::before{opacity:.14}
@keyframes gisTear{0%{transform:translateX(-14px);clip-path:inset(0 0 62% 0)}33%{transform:translateX(18px) skewX(-6deg);clip-path:inset(38% 0 20% 0)}66%{transform:translateX(-8px);clip-path:inset(70% 0 0 0)}100%{transform:none;clip-path:none}}
.gis.welcome .gisin{animation:gisQuake .12s steps(2) infinite}
@keyframes gisQuake{50%{transform:translate(1px,-1px)}}
.gis.flash::after{animation:none;background:#e6e2f6;opacity:0;transition:opacity .9s}
.gis.flash.out::after{opacity:.6}
@media (prefers-reduced-motion:reduce){.gis.tear .gisin,.gis.welcome .gisin{animation:none!important}}
/* ---------- Verify page: menu + views ---------- */
.edpanel .wrap:has(> .vfyc){max-width:1180px}
.vfyc{container-type:inline-size}
.vfy{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.vfynav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;position:sticky;top:-14px;z-index:3;margin:-14px -16px 0;padding:10px 16px 8px;background:#16111f;border-bottom:1px solid rgba(255,255,255,.06)}
.vfynav::-webkit-scrollbar{display:none}
.vfyt{display:flex;align-items:center;gap:8px;flex:0 0 auto;height:36px;padding:0 12px;border-radius:5px;border:0;background:transparent;color:var(--dim);white-space:nowrap;cursor:pointer;font-size:13px}
@media (hover:hover){.vfyt:hover{background:rgba(255,255,255,.06);color:var(--ink)}}
.vfyt.on{background:rgba(194,107,255,.16);color:#fff}
.vfyic{width:18px;text-align:center;font-size:13px;opacity:.85}
.vfyt.on .vfyic{color:var(--pink);opacity:1}
.vfyb{font-style:normal;min-width:18px;height:18px;border-radius:4px;padding:0 5px;font-size:11px;font-weight:700;display:inline-grid;place-items:center;color:var(--bg);background:#8fa3c9}
.vfyb.problem{background:var(--red)}.vfyb.warning{background:var(--brz)}
.vfyt .vfyb{margin-left:auto}
@container (min-width:720px){
  .vfy{grid-template-columns:184px minmax(0,1fr);gap:18px}
  .vfynav{flex-direction:column;overflow:visible;align-self:start;top:0;margin:0;padding:0;background:none;border:0}
  .vfyt{width:100%}
}
.vfymain{min-width:0}
.vfybox{padding:12px 14px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);margin-bottom:12px}
.vfybox h4{margin:0 0 10px;font-size:13px;color:var(--pink)}
.vfyhead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.vfyhead h4{margin:0;flex:1}
.vfyhead .btn.on{background:var(--pink);color:var(--pinkdk);border-color:var(--pink)}
.vfyverdict{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:5px;margin-bottom:10px;border:1px solid rgba(255,255,255,.08);background:rgba(143,218,211,.08)}
.vfyverdict.problem{background:rgba(255,90,110,.1);border-color:rgba(255,90,110,.35)}
.vfyverdict.warning{background:rgba(194,167,107,.08);border-color:rgba(194,167,107,.3)}
.vfyverdict .vi{width:30px;height:30px;font-size:16px}
.vfyverdict b{display:block;font-size:15px}
.vfyverdict small{display:block;color:var(--dim);font-size:12px;margin-top:2px}
.vfycards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.vfycard{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:5px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04);cursor:pointer;text-align:left}
@media (hover:hover){.vfycard:hover{background:rgba(255,255,255,.08)}}
.vfycard b{font-size:20px;font-variant-numeric:tabular-nums}
.vfycard small{color:var(--dim);font-size:12px}
.vfymap,.speccv{display:block;width:100%;border-radius:4px}
.vfytw{overflow-x:auto;margin:0 -4px}
.vfytbl{width:100%;border-collapse:collapse;font-size:13px}
.vfytbl th,.vfytbl td{padding:7px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
.vfytbl thead th{font-size:11px;color:var(--dim);font-weight:600;white-space:nowrap}
.vfytbl th.n{text-align:right}
.vfytbl td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.vfytbl td.n.zero{color:rgba(255,255,255,.25);font-weight:400}
.vfytbl td.n.problem{color:var(--red)}.vfytbl td.n.warning{color:var(--brz)}.vfytbl td.n.minor{color:#8fa3c9}
.vfytbl.click tbody tr{cursor:pointer}
@media (hover:hover){.vfytbl.click tbody tr:hover,.vfytbl.files tbody tr:hover{background:rgba(255,255,255,.04)}}
.vfytbl tr.cur td.nm,.vfytbl th.cur{color:var(--pink)}
.vfytbl .nm{font-weight:600;white-space:nowrap}
.sdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px}
.vfytbl.cmp th:first-child{position:sticky;left:0;background:#201a2a;z-index:1;font-size:12px;color:var(--dim);font-weight:400;white-space:nowrap}
.vfytbl.cmp thead th small{display:block;font-weight:400;color:var(--dim)}
.vfytbl.cmp td{min-width:110px;overflow-wrap:anywhere}
.vfytbl.cmp tr.sec td{padding-top:14px;font-size:11px;font-weight:700;color:var(--pink);text-transform:uppercase;letter-spacing:.4px;border-bottom:0}
.vfytbl td.diff{background:rgba(255,160,60,.16);box-shadow:inset 3px 0 #ffa03c}
.vfytbl td.bad{background:rgba(255,90,110,.16);box-shadow:inset 3px 0 var(--red)}
.vfytags{display:inline;font-size:12px;line-height:1.7}
.vfytags span.odd{color:#ffa03c;text-decoration:underline wavy rgba(255,160,60,.6)}
.vfysw{display:inline-flex;gap:3px;flex-wrap:wrap}
.vfysw i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.4)}
.vfyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:10px}
.vfyfacts div{padding:8px 10px;border-radius:5px;background:rgba(0,0,0,.18)}
.vfyfacts small{display:block;font-size:11px;color:var(--dim)}
.vfyfacts b{font-size:13px;overflow-wrap:anywhere}
.vfychips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.vfychip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:13px;color:var(--ink)}
.vfychip.on{background:rgba(194,107,255,.16);border-color:var(--pink)}
.vfytools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.vfytools button{height:34px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:13px}
.vfytools button.on{background:rgba(255,255,255,.14);border-color:#fff}
.vfysel,.vfyq{height:34px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 10px;font-size:13px}
.vfyq{flex:1 1 180px;min-width:0}
.vchk summary .vct{flex:0 1 auto}
.vchk summary .vcat{font-size:11px;color:var(--dim);padding:2px 8px;border-radius:4px;background:rgba(255,255,255,.06);white-space:nowrap}
.vgrp>h3 small{margin-left:8px;text-transform:none;letter-spacing:0;font-weight:400}
.viss{position:relative}
.viss.nt{cursor:default}
.viss .vmsg{flex:1;min-width:0}
.vcopy{flex:0 0 auto;width:28px;height:24px;border-radius:4px;border:0;background:transparent;color:var(--dim);cursor:pointer;opacity:0}
.viss:focus-within .vcopy,.vcopy:focus-visible{opacity:1}@media (hover:hover){.viss:hover .vcopy{opacity:1}}
@media (hover:hover){.vcopy:hover{background:rgba(255,255,255,.1);color:var(--ink)}}
@media (hover:none){.vcopy{opacity:.7}}
.vfyspread{display:flex;flex-direction:column;gap:6px}
.vfysp{display:grid;grid-template-columns:minmax(80px,160px) 1fr 70px 48px;gap:10px;align-items:center;font-size:13px;cursor:pointer;padding:2px 4px;border-radius:4px}
@media (hover:hover){.vfysp:hover{background:rgba(255,255,255,.05)}}
.vfysp.cur .nm{color:var(--pink)}
.vfysp .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vfyspb{height:10px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.vfyspb i{display:block;height:100%;border-radius:5px}
.vfysp b{font-variant-numeric:tabular-nums;font-size:12px}
.vfysp small{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.vfysp small.big{color:#ffa03c;font-weight:700}
.vfystats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-bottom:12px}
.vfystat{padding:10px 12px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.vfystat.warning{border-color:rgba(194,167,107,.45);background:rgba(194,167,107,.07)}
.vfystat small{display:block;font-size:11px;color:var(--dim)}
.vfystat b{display:block;font-size:17px;margin:2px 0;font-variant-numeric:tabular-nums}
.vfystat p{margin:0;font-size:12px;color:var(--dim);line-height:1.4}
.speccv{cursor:crosshair;background:#000}
.vfytbl.files td{vertical-align:middle;padding-top:5px;padding-bottom:5px}
.vfytbl.files td.act{white-space:nowrap;text-align:right}
.vfytbl.files td.act .btn{min-height:28px;height:28px;padding:0 10px;margin-left:4px}
.vfytbl.files tr.bad td.nm{color:#ff8a98}
.vfytbl.files td.warn{color:var(--brz)}
.vfytbl.files td .abadge{margin-left:6px}
.vfyprev td{background:rgba(0,0,0,.25)}
.vfyprev img{display:block;max-width:100%;max-height:260px;border-radius:4px;margin-bottom:4px}
.vfyprev small{color:var(--dim);font-size:12px}
.vfycard{min-width:0;flex-wrap:wrap}
@media (max-width:640px){.vfycards{gap:6px}.vfycard{padding:8px 10px;gap:2px 8px}.vfycard b{font-size:17px}.vfycard small{flex-basis:100%}.vfysp{grid-template-columns:90px 1fr 62px 40px;gap:6px}}
.btset .btnud{padding:4px 0 8px}
.btset .btnud .row input[type=range]{flex:1;margin:0 10px}
.btset .btnud output{min-width:58px;text-align:right;font-variant-numeric:tabular-nums}
.sidechips{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.vfychip.sm{height:26px;padding:0 9px;font-size:12px;gap:4px}
.vfychip.sm .vi{width:16px;height:16px;font-size:10px}
.sidegen{display:block;width:100%;text-align:left;padding:6px 12px;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,90,110,.08);color:#ff8a98;font-size:12px;cursor:pointer}
.sidebtn{position:relative}
.sidebtn[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:4px;background:var(--red);color:var(--bg);font-size:10px;font-weight:700;line-height:16px;text-align:center}

/* permissions (gate.js): what this visitor can't use is hidden */
body.noperm-listing [data-perm~="listing"],body.noperm-player [data-perm~="player"],body.noperm-mappers [data-perm~="mappers"],
body.noperm-editor [data-perm~="editor"],body.noperm-online [data-perm~="online"]{display:none!important}
.aperm{width:100%;border-collapse:collapse;font-size:13px}
.aperm th{font-size:11px;color:var(--dim);font-weight:600;text-align:center;padding:6px 8px}
.aperm th:first-child{text-align:left}
.aperm td{padding:8px;border-top:1px solid rgba(255,255,255,.06);vertical-align:middle;text-align:center}
.aperm td:first-child{text-align:left}
.aperm td b{display:block;font-size:13px}
.aperm td small{display:block;color:var(--dim);font-size:11px;margin-top:2px}
/* small screens: the seek bar gets a full row of its own above the play button, times and chips */
@media (max-width:640px){
  .botrow{flex-wrap:wrap;row-gap:2px}
  .botrow .seekwrap{order:-1;flex:1 0 100%;height:34px}
  .botrow #tDur{margin-right:auto}
  .botrow #tDur::before{content:"/ ";opacity:.6}
}
/* what's playing (editor.js hsNow) */
#edHS.hsnow small{color:var(--pink);font-weight:700}
.hssmark.hshit,.hsscell.hshit{animation:hshit .26s ease-out}
@keyframes hshit{0%{filter:brightness(2.2);box-shadow:0 0 0 2px #fff,0 0 14px var(--pink);transform:scaleY(1.08)}100%{filter:none;box-shadow:none;transform:none}}
@media (prefers-reduced-motion:reduce){.hssmark.hshit,.hsscell.hshit{animation:none;outline:2px solid #fff;outline-offset:-2px}}
.hdnow{order:-1;flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-height:26px;padding:0 2px 6px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.06)}
.hdnowl{color:var(--pink);font-size:13px}
.hdnowc{padding:3px 8px;border-radius:4px;background:color-mix(in srgb,var(--pink) 14%,transparent);border:1px solid color-mix(in srgb,var(--pink) 30%,transparent);color:var(--ink);font:12px/1.2 ui-monospace,monospace;max-width:100%;overflow-wrap:anywhere}
.hdnow.on .hdnowc{animation:hdnowIn .25s ease-out}
@keyframes hdnowIn{from{background:color-mix(in srgb,var(--pink) 34%,transparent)}}

/* a guest watching a live session: the editor's Compose view only, nothing to click that changes the map */
body.live-watch #edTabs button:not([data-etab="compose"]),body.live-watch #edTest,body.live-watch #edLeft,body.live-watch #edRight,body.live-watch #edInfo,body.live-watch #modeSw{display:none!important}
/* the guest home's live code box: quiet, below the main buttons */
.glive{display:grid;justify-items:center;gap:4px;margin:18px auto 0;font-size:13px;color:var(--dim)}
.glrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.glrow input{width:150px;height:32px;padding:0 12px;font-size:13px;border-radius:6px}
.glive .hint{margin:0;font-size:11.5px;opacity:.8;max-width:420px;text-align:center}
.oszcache{display:flex;align-items:center;gap:12px;justify-content:space-between}.oszcache span{display:grid;gap:2px}.oszcache small{color:var(--dim);font-size:12px}
.aturnbars{display:grid;gap:6px}.aturnbars small{color:var(--dim);font-size:12px;margin-top:4px}
/* live session drawing tools: a floating brush (drag it anywhere) and its panel */
.inkfab{position:absolute;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:8px;touch-action:none}
.inkbtn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:grab;box-shadow:0 6px 18px #0006;touch-action:none}
.inkbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inkbtn:active{cursor:grabbing}.inkfab.active .inkbtn{background:var(--pink);color:var(--bg);border-color:var(--pink)}
.inkpanel{width:236px;padding:12px;border-radius:5px;background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 30px #0008;display:grid;gap:10px}
.inktools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.inktool{display:grid;justify-items:center;gap:2px;padding:7px 2px;border-radius:5px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.inktool .inkic{font-size:18px;line-height:1}.inktool small{font-size:10.5px;color:var(--dim)}
.inktool.on{background:var(--pink);border-color:var(--pink);color:var(--bg)}.inktool.on small{color:var(--bg)}
.inkttl{display:flex;align-items:center;justify-content:space-between;gap:8px}.inkttl small{color:var(--dim);font-size:12px}.inkttl select{max-width:120px}
.inkfoot{display:flex;align-items:center;justify-content:space-between;gap:8px}.inkcol{width:18px;height:18px;border-radius:50%;border:2px solid #fff3}
.inkpanel .hint{margin:0;font-size:11px}
#player.inking #cv{cursor:crosshair}
.csnet{display:flex;align-items:center;gap:4px;flex:0 0 auto;font-size:12px}.csnet:empty{display:none}
.hssmark.slim,.hsscell.slim{font-size:0;border-radius:4px}
.hssmode{display:inline-flex;gap:2px;padding:2px;border-radius:5px;background:rgba(255,255,255,.05)}
/* Hitsound Studio, By sound view (hslanes.js): one lane per sample; the canvas on the right draws the diamonds */
.hssview{display:inline-flex;gap:2px;padding:2px;border-radius:5px;background:rgba(255,255,255,.05)}
.hssview .hdb{min-width:0;padding:0 10px;font-size:12px}.hssview .hdb.on{background:var(--sky);color:#0d2233;border-color:var(--sky)}
.hsllanes{--lab:190px;--lh:26px;position:sticky;top:0;z-index:2;margin:0 -16px 10px;padding:4px 0;background:#16111f;border-bottom:1px solid rgba(255,255,255,.08);user-select:none;-webkit-user-select:none;box-sizing:content-box}
.hsllabels{position:absolute;left:0;top:4px;width:var(--lab);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}
.hslrow{height:var(--lh);display:flex;align-items:center;gap:4px;padding:0 6px 0 8px;box-sizing:border-box;border-left:3px solid var(--c);font-size:12px}
.hslrow:nth-child(even){background:rgba(255,255,255,.02)}
.hslrow:not(.hslhead){box-shadow:inset 0 0 0 100px rgba(255,255,255,calc(var(--fl,0) * .24))} /* (Settings → Hitsound Studio → Flash lane names: lit while its sound plays) */
/* thin rows (Fit every lane on screen): smaller names, then only the names */
#hslLanes.hsltight .hslrow{font-size:max(8px,calc(var(--lh) - 4px));gap:2px}
#hslLanes.hsltight :is(.hslpv,.hsleye){height:var(--lh);width:18px;font-size:9px}
#hslLanes.hsltight .hslhead .hslfold{height:var(--lh);font-size:9px}
#hslLanes.hsltiny :is(.hslpv,.hsleye,.hslcnt){display:none}
#hslLanes.hsltiny .hslname.own::after{content:none}
/* the rows per sound over the lanes (Settings → Hitsound Studio → Flash rows by sound): their names, lit with them */
.hslsum{position:absolute;left:0;width:var(--lab);display:flex;flex-direction:column}
.hslsum[hidden]{display:none}
.hslsumrow{height:14px;line-height:14px;padding:0 6px 0 8px;box-sizing:border-box;border-left:3px solid var(--c);font-size:10px;font-weight:600;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--c) calc(var(--fl,0) * 45%),transparent)}
.hslrow.shy .hslname{opacity:.5}
.hslrow.here .hslname{color:#fff;font-weight:600}
.hslrow.here{background:rgba(255,255,255,.05)}
.hslhead.here{background:#2a2239}
.hslbadge{position:absolute;left:calc(var(--lab) + 6px);z-index:3;height:18px;min-width:40px;padding:0 6px;border:0;border-radius:9px;background:var(--sky);color:#0d2233;font:700 11px/18px inherit;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.hslname{flex:1;min-width:0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.hslname.own::after{content:" ★";color:#ffd84a;font-size:10px}
.hslhead{--c:#cfc6de;background:#221b30;border-top:1px solid rgba(255,255,255,.1);cursor:pointer;box-shadow:inset 0 0 0 100px rgba(255,255,255,calc(var(--fl,0) * .22));font-weight:700}
.hslhead .hslname{color:var(--ink)}
.hslhead.fold .hslname{color:#fff}
.hslfold{flex:none;width:24px;height:calc(min(var(--lh), 30px) - 4px);padding:0;border:0;border-radius:4px;background:transparent;color:var(--ink);cursor:pointer;font-size:11px}
.hslcnt{flex:none;font-size:10.5px;font-weight:500;color:var(--dim)}
.hslkey.wht{background:#2a2433}
.hslkey.wht:nth-child(even){background:#26202f}
.hslkey.blk{background:#120e18}
.hslkey.blk .hslnote{color:var(--dim)}
.hslnote{font-weight:800;color:#fff;font-variant-numeric:tabular-nums;margin-right:2px}
.hslfn{color:var(--dim);font-size:.92em}
.hslname.fnm{display:flex;align-items:baseline;gap:4px}
.hslname.fnm .hslnote{flex:none;margin:0}
.hslname.fnm .hslfn{display:flex;min-width:0}
.hslfa{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hslfb{flex:none;white-space:nowrap}
.hslrow.here .hslname.fnm{font-weight:inherit}.hslrow.here .hslname.fnm .hslfn{color:#fff} /* (lit while it plays: brighter, not bolder, so the name doesn't get cut and uncut as lanes light up) */
#player.hslshort #hssMini,#player.hslshort .hslstatline,#player.hslshort .hssgrip{display:none!important} /* (a short panel: the lanes get the room) */
.hsswrap>.hsshelp{max-height:min(26vh,240px);overflow-y:auto}
#player.hslshort .hsswrap>.hsshelp{max-height:20vh}
.hslkey.missing .hslfn{text-decoration:line-through}
#player.hslpiano #edInfo,#player.hslpiano #edTray,#player.hsldocked #edInfo,#player.hsldocked #edTray{display:none!important}
#player:not(.editing) .hslbardock,#player:not([data-etab="hitsounds"]) .hslbardock{display:none!important} /* (in the bottom bar: only in the editor's Hitsounds tab) */
/* Hitsound Studio's bar as one row in the bottom bar: every button the same height, the row scrolls sideways when it's longer than the screen */
.bar.bottom .hslbardock{--dbg:#242837;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;margin:0 0 6px;padding:4px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-radius:6px;pointer-events:auto;background:var(--dbg)}
/* its last group (focus, full screen, help; ⋯ on phones) stays on the right; the rest scrolls under it (a shadow, not the fade, shows there is more). --dbg: --s1 with 4% white, opaque so nothing shows through the group */
.bar.bottom .hslbardock>.hdend{position:sticky;right:0;z-index:1;margin-left:auto;padding-left:8px;background:var(--dbg);box-shadow:6px 0 0 var(--dbg)}
.bar.bottom .hslbardock.sfr{--fr:0px}
.bar.bottom .hslbardock.sfr>.hdend{box-shadow:6px 0 0 var(--dbg),-14px 0 12px -8px rgba(0,0,0,.7)}
@media (min-width:720px) and (max-width:1599px){.hsldock :is([data-act="repeat"],[data-act="fade"],[data-act="guide"],[data-act="shy"],[data-act="files"]) .lg{display:none}.hsldock :is([data-act="repeat"],[data-act="fade"],[data-act="guide"],[data-act="shy"],[data-act="files"]) .sh{display:inline}} /* (the shorter labels: more of the bar in view) */
.bar.bottom .hslbardock::-webkit-scrollbar{display:none}
.bar.bottom .hslbardock .hslcap,.bar.bottom .hslbardock .hdgap{display:none}
.bar.bottom .hslbardock .hdgrp{flex:none;flex-wrap:nowrap;gap:6px;padding-left:6px}
.bar.bottom .hslbardock .hdb,.bar.bottom .hslbardock .hsssize .btn{flex:none;height:34px;min-height:0;min-width:34px;padding:0 10px;font-size:13px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.bar.bottom .hslbardock .hssview{padding:0;gap:2px;background:none}
.bar.bottom .hslbardock .narrow{display:none} /* (the phones' ⋯: its own rule lost to the line above) */
@media (max-width:719px){.bar.bottom .hslbardock .narrow{display:inline-flex}.bar.bottom .hslbardock .wide{display:none!important}} /* (both views' bars: the view switch and ? go into ⋯) */
#hssDock .sh{display:none}
@media (max-width:719px){#hssDock .lg{display:none}#hssDock .sh{display:inline}} /* (Classic's Focus: ◎ on phones) */
.bar.bottom .hslbardock .hssview .hdb{padding:0 10px;font-size:13px}
.bar.bottom .hslbardock>.hdgrp:first-child{padding-left:0}
/* the status line under the song overview: what a click does, the selection, the samples that play; one line */
.hslstat.hslstatline{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-height:24px;margin:0 0 4px;padding:0 2px;overflow:hidden;font-size:12px}
.hslstatline .hslnow{order:0;flex:1 1 auto;display:flex;flex-wrap:nowrap;gap:4px;align-items:center;min-height:0;margin:0;padding:0;border:0;overflow:hidden;max-width:none;white-space:nowrap} /* (the whole line: only the files that play) */
.hslstatline .hslclr{flex:none;height:22px;min-width:22px;padding:0 6px}
#player.hsldocked .edpanel{padding-bottom:4px}
#player.hslfocus .hslstatline{display:none!important}
.bar.bottom .hslbardock .hsssize{flex:none;gap:6px}
.bar.bottom .hslbardock .hdseg{flex:none;display:inline-flex;align-items:center;gap:4px}
.bar.bottom .hslbardock .hdseg .hdb{min-width:34px;padding:0 8px}
.bar.bottom .hslbardock .hdnum{height:34px;box-sizing:border-box;width:64px}
.bar.bottom .hslbardock .hdnow{display:none}
.hslstatline .hdnow{order:0;flex:1 1 auto;display:flex;flex-wrap:nowrap;gap:4px;align-items:center;min-height:0;margin:0;padding:0;border:0;overflow:hidden;max-width:none;white-space:nowrap}
#player.hslpiano .edpanel{padding-bottom:0}
#player.hslpiano .edpanel>.hsswrap{display:flex;flex-direction:column;min-height:100%}
#player.hslpiano .edpanel>.hsswrap>*{flex:none}
#player.hslpiano .edpanel>.hsswrap>.hsldock{margin:auto 0 0;order:10;border-radius:5px 5px 0 0;border-bottom:0} /* (flush on the bottom bar; the help, when open, goes above it) */
@media (min-width:720px){.hsldock .hslpkeys{width:190px;justify-content:flex-start}.hsldock .hslpkeys .lg{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}} /* (a fixed width: the bar doesn't move as Keys changes) */
#player.hslfocus .bar.top>.toprow,#player.hslfocus #edInfo,#player.hslfocus #edTray,#player.hslfocus #hslDock,#player.hslfocus #hssDock,#player.hslfocus .hssgrip,#player.hslfocus #hssMini,#player.hslfocus #hssHelp,#player.hslfocus #edTest{display:none!important}
#player.hslfocus .edpanel{padding-top:6px}
.hslpopck{display:flex;align-items:center;gap:8px;min-height:30px;padding:2px 2px;cursor:pointer;font-size:13px}
.hslpopck input{width:18px;height:18px;accent-color:var(--pink);flex:none}
.hslpopsub{margin:8px 0 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.hslempty{position:absolute;right:12px;z-index:3;padding:14px 16px;border-radius:10px;background:rgba(22,17,31,.94);border:1px solid rgba(255,255,255,.12);max-width:520px}
.hslempty b{display:block;margin-bottom:4px}
.hslempty p{margin:0;color:var(--dim);font-size:13px}
.hsldock .hslpiano.on{background:var(--pink);color:#1a0d16;border-color:transparent}
@media (hover:hover){.hslhead:hover{background:#2a2239}}
.hslpv,.hsleye{flex:none;width:24px;height:calc(min(var(--lh), 30px) - 4px);padding:0;border:0;border-radius:4px;background:transparent;color:var(--dim);cursor:pointer;font-size:10px;display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover){.hslpv:hover,.hsleye:hover{background:rgba(255,255,255,.1);color:var(--ink)}}
.hsleye[aria-pressed="true"]{color:var(--pink)} /* (muted: Hitsound Studio's eyes mute a lane or a group while listening) */
.hsleye.part{color:var(--pink);opacity:.6}
.hslvol{position:absolute;left:0;width:var(--lab);padding:4px 10px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--dim);text-align:right}
.hslvol b{font-size:12px;color:var(--ink);font-weight:600}
.hslrul{position:absolute;left:0;top:4px;width:var(--lab);height:18px;padding:0 6px 0 4px;box-sizing:border-box;display:flex;align-items:center;overflow:hidden}
/* the search over the lane names (where "Range" was); a finger gets 16px text (no zoom on focus), scaled back to the row */
.hslq{flex:1;min-width:0;height:18px;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:rgba(255,255,255,.04);color:var(--ink);font:11px Inter,sans-serif;padding:0 6px;outline:none}
.hslq::placeholder{color:var(--dim)}
.hslq:focus,.hslrul.on .hslq{border-color:var(--vio);background:rgba(194,107,255,.12)}
@media (pointer:coarse){.hslq{flex:none;width:133.3%;height:24px;font-size:16px;transform:scale(.75);transform-origin:left center}}
.hslrow.skinoff .hslname{opacity:.45;text-decoration:line-through dotted} /* (the skin's sounds muted: hsSkinMuted) */
.hslcv{position:absolute;top:4px;touch-action:none;cursor:pointer;border-radius:4px}
/* the By sound bar: a status line (what a click does, the selection, the samples that play), then the tools in groups,
   the view's controls on the right (one ⋯ menu on phones). Classic's bar keeps its own rules */
.hsldock{gap:8px 10px}
.hsldock .hslstat{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:28px;padding:0 2px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.hsldock .hslclr{min-width:28px;height:28px;padding:0;border-radius:50%}
.hsldock .hslnow{order:0;flex:0 1 auto;margin:0 0 0 auto;padding:0;border:0;min-height:0}
.hsldock .hslcap{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);margin-right:2px}
.hsldock .hdb[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.hsldock .narrow{display:none}
.hsldock .sh{display:none}
@media (max-width:719px){.hsldock .wide{display:none!important}.hsldock .narrow{display:inline-block}.hsldock .hslcap{display:none}.hsldock .hdgap{display:none}.hsldock .lg{display:none}.hsldock .sh{display:inline}.hsldock{gap:6px}.hsldock .hdgrp+.hdgrp{padding-left:6px}.hsldock .hslnow{flex-basis:100%;margin-left:0}}
.hslpop{position:fixed;z-index:41;display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.55);animation:panelIn .16s cubic-bezier(.2,.8,.2,1)}
.hslpophead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hslpophead b{font-size:14px;color:var(--ink)}
.hslpopx{min-width:30px;height:30px;padding:0;border-radius:50%}
.hslpoprow{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
.hslpoprow>span:first-child{min-width:54px}
.hslnum{display:inline-flex;align-items:center;gap:4px}
.hslnum .hdb{min-width:38px;height:38px;padding:0;font-size:18px}
.hslnum input{width:64px;height:38px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 15px inherit;text-align:center;padding:0 4px}
.hslpopinfo{margin:0;font-size:13px;font-weight:600;color:var(--sky)}
.hslpop .hint{margin:0;font-size:12px}
.hslpopfoot{display:flex;justify-content:flex-end;gap:8px}
.hslvol small{position:absolute;right:10px;line-height:14px}
.hslvol b{position:absolute;left:10px;right:auto;top:2px} /* (left: the 100 and 50 marks are on the right) */
.hssfull .hsllanes{margin-bottom:0}
@media (max-width:640px){.hslrow{font-size:10.5px;gap:2px;padding-left:5px}.hslpv{display:none}.hsleye{width:20px}}

.hssmode .hdb{min-width:0;padding:0 10px;font-size:12px}.hssmode .hdb.on{background:var(--pink);color:var(--bg);border-color:var(--pink)}
.hssmode .hsspg{padding:0 9px;font-size:17px;line-height:1}.hssmode .hsspg[hidden]{display:none} /* (Page mode: ‹ › turn the page by hand) */
/* phones held upright (hssvert): the lanes run top to bottom, time going down; the rows are columns, their names on top (read upwards) */
.hsslanes.hssvert{--hh:64px}
.hssvert .hsslabels{top:4px;left:3px;width:auto;height:var(--hh);flex-direction:row}
.hssvert .hsslab{width:var(--lh);height:100%;padding:2px 0;box-sizing:border-box;writing-mode:vertical-rl;transform:rotate(180deg);justify-content:flex-start;align-items:center;text-align:center;font-size:10.5px;line-height:1.05;white-space:normal;overflow:hidden}
.hssvert .hsstrack{top:calc(var(--hh) + 8px);cursor:ns-resize}
.hssvert .hssinner{display:flex}
.hssvert .hsslane{flex:none;width:var(--lh);height:auto}
.hssvert .hssmark,.hssvert .hsscell{left:3px;width:calc(100% - 6px);display:flex;align-items:center;justify-content:center;line-height:1}
.hssvert .hssmark.tick{left:calc(var(--lh) * .3);width:calc(var(--lh) * .4);line-height:1}
.hssvert .hsscell.tick{left:calc(var(--lh) * .2);width:calc(var(--lh) * .6);line-height:1}
.hssvert .hssplay{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;margin:-1px 0 0}
.hssvert~.hssgrip{display:none}
.bar.bottom .hslbardock .hsvbtn{display:none}
#player.hsportrait .bar.bottom #hssDock .hsvbtn{display:inline-flex} /* (the ⇅ switch: only on a phone held upright, in the classic view: the only one top to bottom so far) */
/* the zoom and the lanes' size: a small control in the lanes' bottom-right corner (both views, every layout) */
.hszoom{position:absolute;right:10px;bottom:8px;z-index:5;display:flex;align-items:center;gap:2px;padding:3px;border-radius:9px;background:rgba(18,14,26,.88);border:1px solid rgba(255,255,255,.14);box-shadow:0 4px 14px rgba(0,0,0,.45);touch-action:manipulation}
.hsstrack>.hszoom{right:6px;bottom:6px}
.hszb{width:30px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink);font:700 17px/1 inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover){.hszb:hover{background:rgba(255,255,255,.12)}}
.hszb:active{background:rgba(255,255,255,.22)}
.hszb.off{opacity:.3;pointer-events:none}
.hszb.on{background:var(--pink);color:#1a0d16}
.hszi{display:inline-flex;align-items:center;justify-content:center;width:18px;color:var(--dim);font-size:13px}
.hszsz{display:inline-flex;align-items:center;gap:2px;margin-left:3px;padding-left:3px;border-left:1px solid rgba(255,255,255,.14)}
.hszsz+.hszb{margin-left:3px}
.hszfx{display:none;height:28px;margin-left:4px;padding:0 12px;border:0;border-radius:6px;background:var(--vio);color:var(--vio-dk);font-size:13px;font-weight:700;font-family:inherit;white-space:nowrap;cursor:pointer;align-items:center} /* (Leave focus: beside the zoom, in the main colour, focus mode only) */
#player.hslfocus .hszfx{display:inline-flex}
@media (hover:hover){.hszfx:hover{background:#cd85ff}}
@media (pointer:coarse){.hszfx{height:32px}}
@media (max-width:719px){.hszfx{height:30px;padding:0 10px}}
@media (pointer:coarse){.hszb{width:34px;height:32px}}
.hssvert .hszsz{display:none} /* (top to bottom: the columns fit the width) */
.hssdots{position:absolute;left:0;top:0;cursor:pointer}.hssdotfx{position:absolute;left:0;top:0;pointer-events:none}.hsslanes:not(.hssdotmode) .hssdotfx{display:none}
.hsslanes.hssdotmode .hssinner{pointer-events:none}
.hssmini{position:relative;height:30px;margin:-4px 0 6px;border-radius:4px;background:#0e0b14;border:1px solid rgba(255,255,255,.07);cursor:pointer;touch-action:none;overflow:hidden}
.hssmini canvas{position:absolute;inset:0;width:100%;height:100%}
.hssminiwin{position:absolute;top:0;bottom:0;border:1.5px solid var(--sky);border-radius:4px;background:rgba(159,184,245,.12);pointer-events:none}
.hssminiplay{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--pink);pointer-events:none}
.hssfull .hssmini{display:none}
.ncats{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px}
.ncat{height:30px;padding:0 12px;border-radius:5px;border:1px solid var(--line);background:transparent;color:var(--dim);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ncat small{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}
.ncat.on{background:var(--pink,var(--vio));border-color:transparent;color:var(--bg);font-weight:600}
.ncat.add{width:30px;padding:0;justify-content:center;font-size:17px}
.ncated{display:inline-flex;gap:10px;margin-left:4px}
.ncsel{height:26px;max-width:130px;padding:0 6px;border-radius:4px;border:1px solid var(--line);background:var(--bg2);font-size:12px;color:inherit}
.nform .ncsel{height:38px;max-width:180px;border-radius:5px;font-size:13px}
.qcat{flex:0 1 auto;min-width:0}.qcat .ncsel{height:34px;max-width:140px}
.altlogin{display:flex;gap:6px;flex-wrap:wrap}.altlogin .btn.wide{flex:1 1 100%;justify-content:center}
.altlogin.compact{flex-wrap:nowrap}.altlogin.compact .btn{width:36px;padding:0;justify-content:center}.altlogin.compact .altmark{margin:0;width:18px;height:18px}
.altmark{display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px;flex:0 0 auto}.altmark svg{display:block;width:100%;height:100%}
.althint{margin:12px 0 6px}
.altbox .altrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.altname{display:flex;align-items:center;gap:10px;min-width:0}.altname .altmark{width:22px;height:22px;margin:0}.altname small{display:block;color:var(--dim);font-size:12px}
.acctwrap .acard{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:16px 18px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.acctwrap .acard h3{margin:0;font-size:16px}.acctwrap .acard .sw{width:100%}.acctwrap .acard .hint{margin:0}
.acctwrap .acard.danger{border-color:rgba(255,90,110,.35)}
.delacct ul{margin:4px 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:3px}
.delacct input{width:100%;height:40px;margin:6px 0 10px;padding:0 12px;border-radius:5px;border:1px solid rgba(255,90,110,.5);background:var(--bg2);font-size:15px;color:inherit}
.delacct .btn.danger{width:100%}.delacct .btn.danger:disabled{opacity:.45;cursor:not-allowed}
.gdbox{display:flex;flex-direction:column;gap:12px}.gdbox .sw{width:100%}
.gdlist{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto}
.gdlist h4{margin:8px 0 2px;font-size:13px;color:var(--dim);font-weight:600}
.gditem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.04)}
.gditem div{min-width:0}.gditem b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gditem small{color:var(--dim);font-size:12px}
.cchip.gdchip.reconnect{color:var(--brz)}
.cchip.gdchip{border-color:rgba(143,218,211,.45);color:#c4f2d6}
.cchip.gdchip.saved::before{content:"△ ✓ "}.cchip.gdchip.unsaved::before{content:"△ • "}.cchip.gdchip.saving::before{content:"△ ↑ "}.cchip.gdchip.error::before{content:"△ ⚠ "}.cchip.gdchip.reconnect::before{content:"△ ↻ "}
.cchip.gdchip.unsaved,.cchip.gdchip.reconnect{border-color:var(--brz);color:#ffe3a3}.cchip.gdchip.error{border-color:var(--red);color:#ffb3bd}
.abadge.warn{background:rgba(194,167,107,.16);color:var(--brz)}
.gask .gosu,.ginv .gosu{width:100%;box-sizing:border-box;height:44px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 14px;font:inherit;font-size:15px}
.gask .btn.gbig + .btn.gbig{margin-top:8px}.gask .btn.gbig .altmark{width:18px;height:18px}
.hsspop{position:fixed;z-index:40;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line);border-radius:5px;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden;animation:panelIn .18s cubic-bezier(.2,.8,.2,1)}
.hsspophead{display:flex;gap:8px;align-items:center;padding:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.hsspophead .hsstabs{flex:1;margin:0}
.hsspopx{flex:0 0 auto}
.hsspopbody{overflow:auto;padding:10px;overscroll-behavior:contain}
.hsspopbody .hssbox{border:0;background:transparent;padding:2px}
.hdb.hdpan{white-space:nowrap}
.ar2row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;margin:8px 0}
.ar2row>:nth-child(3){grid-column:1/-1}
/* Modding: a compact top bar (Settings → Editor → Compact top bar, off by default). Small buttons, tabs and a one-line title in one thin row (phones too: the tabs
   scroll), so the timeline and the playfield get the room */
#player.editing.edcompact .bar.top{gap:3px;padding-top:calc(env(safe-area-inset-top) + 3px);padding-bottom:3px}
#player.editing.edcompact .toprow{gap:4px;min-height:26px;flex-wrap:nowrap}
#player.editing.edcompact .bar.top .icon{width:26px;height:26px}
#player.editing.edcompact .bar.top .icon svg{width:14px;height:14px}
#player.editing.edcompact .meta{flex:1 1 0;min-width:80px;line-height:1.2} /* (the title takes what the tabs leave) */
#player.editing.edcompact .meta b{font-size:12px}
#player.editing.edcompact .meta span{display:none}
#player.editing.edcompact .edtabs{order:0;flex:0 1 auto;padding:1px;gap:1px;border-radius:4px} /* (only as wide as the tabs; scrolls when there's no room) */
#player.editing.edcompact .edtabs button{height:24px;padding:0 8px;font-size:11.5px;border-radius:4px}
#player.editing.edcompact .edtest,#player.editing.edcompact .edauto,#player.editing.edcompact .cloudbtn{min-height:24px;height:24px;padding:0 8px;font-size:11.5px;border-radius:5px}
#player.editing.edcompact .cloudbtn svg{width:13px;height:13px}
#player.editing.edcompact .diffq{height:24px;font-size:11px;padding:0 6px}
#player.editing.edcompact .cchip,#player.editing.edcompact .dchip,#player.editing.edcompact .livepill{height:22px;font-size:10.5px;padding:0 8px}
/* phones: the tabs get a thin row of their own under the buttons (the difficulty picker, save and Drive buttons and the
   chips can fill the first row, which squeezed the tabs to nothing) */
@media (max-width:760px){
  #player.editing.edcompact .toprow{flex-wrap:wrap;row-gap:3px;column-gap:3px}
  #player.editing.edcompact .edtest,#player.editing.edcompact .edauto,#player.editing.edcompact .cloudbtn{padding:0 7px}
  #player.editing.edcompact .toprow .meta,#player.editing.edcompact #shareBtn,#player.editing.edcompact #fs{display:none}
  #player.editing.edcompact .edtabs{order:10;flex:1 0 100%}
  #player.editing.edcompact .toprow>*:not(.edtabs):not(.diffq){flex-shrink:0}
  #player.editing.edcompact .diffq{flex:1 1 56px;min-width:56px;max-width:none} /* (the picker gives way first, so the buttons keep one row) */
}
/* ...and a compact bottom bar: thinner rows, the object info and the playback controls (with the seek bar) each on a
   row of their own; on phones the seek bar stays in the controls row (two thin rows instead of three) */
#player.editing.edcompact .bar.bottom{gap:4px;padding-top:4px;padding-bottom:calc(env(safe-area-inset-bottom) + 5px)}
#player.editing.edcompact .edinfo{min-height:28px;font-size:12px;gap:5px}
#player.editing.edcompact .edinfo .btn.sm{min-height:28px;height:28px;padding:0 10px;font-size:12px}
#player.editing.edcompact .edinfo .annb{min-width:32px;padding:0 6px;font-size:13px}
#player.editing.edcompact .botrow{gap:6px;flex-wrap:nowrap}
#player.editing.edcompact .icon.play{width:34px;height:34px}
#player.editing.edcompact .icon.play svg{width:16px;height:16px}
#player.editing.edcompact .botrow .time{font-size:12px}
#player.editing.edcompact .botrow .seekwrap{order:0;flex:1 1 auto;height:30px}
#player.editing.edcompact .botrow #tDur{margin-right:0}
#player.editing.edcompact .ratesel{height:28px;font-size:12px}
#player.editing.edcompact .botrow .spd{height:26px}
@media (orientation:portrait) and (max-width:760px){ /* (phones: the tool rows above the bottom bar get thinner too) */
  #player.editing.edcompact .edcol{padding-top:4px;padding-bottom:4px;gap:4px}
  #player.editing.edcompact .edcol button{width:auto;min-width:40px;min-height:36px;padding:2px 6px;font-size:13px}
  #player.editing.edcompact .edcol button svg{width:17px;height:17px}
  #player.editing.edcompact .edcol button small{font-size:8.5px}
}
/* short landscape screens (a phone turned sideways): the editor's bars squeeze into fewer, thinner rows so the
   playfield (which always fits between them, player.js) keeps a usable size */
@media (orientation:landscape) and (max-height:520px){
  #player.editing .bar{gap:4px}
  #player.editing .bar.top{padding-top:calc(env(safe-area-inset-top) + 4px);padding-bottom:4px}
  #player.editing .toprow{flex-wrap:wrap;row-gap:3px}
  #player.editing .toprow .meta,#player.editing #shareBtn,#player.editing #fs{display:none}
  #player.editing .edtabs,#player.editing.edcompact .edtabs{order:0;flex:1 1 0;min-width:170px} /* (what the buttons leave, scrolling, never under 170 px: a crowded row wraps instead) */
  #player.editing.edcompact .toprow>*:not(.edtabs):not(.diffq){flex-shrink:0}
  #player.editing.edcompact .diffq{flex:0 1 160px;min-width:56px}
  #player.editing .edtabs button{padding:0 9px;font-size:12px}
  #player.editing .edtop{height:min(var(--tlh,44px),max(44px,24dvh))}
  #player.editing .bar.bottom{gap:3px;padding-top:3px;padding-bottom:calc(env(safe-area-inset-bottom) + 3px)} /* (the object info and the seek bar keep a row each) */
  #player.editing .edinfo{min-height:26px;min-width:0;overflow-x:auto;scrollbar-width:none}
  #player.editing .edinfo::-webkit-scrollbar{display:none}
  #player.editing .edinfo>*:not(#edSel){flex:0 0 auto}
  #player.editing #edSel{flex:1 1 auto;min-width:64px}
  #player.editing .botrow{min-width:0;flex-wrap:nowrap;gap:6px}
  #player.editing .botrow .seekwrap{order:0;flex:1 1 auto;height:36px}
  #player.editing .botrow #tDur::before{content:none}
  #player.editing .icon.play{width:40px;height:40px}
}
/* touch screens: the top bar's round buttons and the Preview / Modding switch get a 44 px tap area from an invisible
   ::after, so they look the same. The compact Modding bar packs 26 px buttons 3 px apart with the tabs or the timeline
   just under them, so there they only grow into the empty space above (and half the gap at the sides): a tap never
   lands on a neighbour, the timeline or the playfield */
@media (pointer:coarse){
  #player .bar.top .icon,#player .modesw button,#player.editing.edcompact .bar.top .btn.sm{position:relative}
  #player .bar.top .icon::after,#player .modesw button::after,#player.editing.edcompact .bar.top .btn.sm::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  #player.editing.edcompact .bar.top .icon::after,#player.editing.edcompact .bar.top .btn.sm::after{inset:-9px -1.5px -1.5px;width:auto;height:auto;transform:none}
}
.previewbadge{position:fixed;left:calc(env(safe-area-inset-left) + 8px);bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:60;padding:3px 10px;border-radius:5px;background:var(--brz);color:var(--bg);font:700 11px/1.4 Inter,sans-serif;letter-spacing:.4px;text-transform:uppercase;opacity:.85;pointer-events:none}

/* ===================== redesign: navbar, home, footer ===================== */
html{overflow-x:clip}
/* the page under an overlay stays put (js/core.js pageLock): no scrolling by wheel, keys or touch. A classic scrollbar's room is kept as
   padding (.plockg) so nothing in the page moves; not scrollbar-gutter, which would also narrow the fixed overlays and leave a bare strip */
html.plock{overflow:hidden}
html.plockg{padding-right:var(--plg,0px)}
#shell{padding-top:0}
.apptop{position:sticky;top:0;z-index:9;height:calc(60px + env(safe-area-inset-top));margin:0 calc(50% - 50vw) 18px;padding:env(safe-area-inset-top) max(calc(env(safe-area-inset-right) + 24px),calc(50vw - 800px)) 0 max(calc(env(safe-area-inset-left) + 24px),calc(50vw - 800px));background:var(--s1);border-bottom:1px solid var(--bd);display:flex;flex-wrap:nowrap;align-items:center;gap:20px}
.apptop .brand{gap:10px;flex:0 0 auto}
.logo,.apptop .logo{animation:none;width:32px;height:30px;border-radius:0;background:var(--vio);clip-path:polygon(28% 0,100% 0,72% 100%,0 100%);box-shadow:none}
.logo::after,.apptop .logo::after{left:12px;top:9px;border-left:9px solid var(--bg);border-top:6px solid transparent;border-bottom:6px solid transparent;filter:none;transform:none}
.brand .bname,.apptop .brand .bname{font-size:23px;font-weight:800;font-style:italic;letter-spacing:-.6px;line-height:1}
.apptop .brand p{display:none}
.topnav{align-self:stretch;margin:0 auto 0 12px;padding:0;gap:2px;border-radius:0;background:none}
.topnav a{position:relative;height:100%;padding:0 14px;border-radius:0;background:none;color:var(--dim);font-weight:600;font-size:15px}
@media (hover:hover){.topnav a:hover{background:none;color:var(--txt)}}
.topnav a.on{background:none;color:var(--txt);font-weight:700}
.topnav a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;background:var(--vio)}
.acct{height:40px;border-radius:var(--r-ctl);border:1px solid var(--bd);background:var(--s2);font-weight:600}
.acct.out{background:var(--vio);border-color:var(--vio);color:var(--vio-dk);font-weight:700;padding:0 14px 0 12px;gap:8px}
.acct.out .osumark{width:18px;height:18px;background:none;border:3px solid var(--vio-dk);box-shadow:none}
@media (hover:hover){.acct.out:hover{background:#cd85ff;border-color:#cd85ff}}
.langsel{height:40px}

.homev{min-height:calc(100dvh - 60px - env(safe-area-inset-top) - 100px);display:grid;align-content:center;padding:12px 0}
.hwrap{width:100%;max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.hhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px}
.htitle{display:flex;flex-direction:column;gap:6px;min-width:0}
.hhead h1{margin:0;font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-1.4px}
.hhead h1 em{color:var(--vio);font-style:italic;letter-spacing:-1px}
.hhead p{margin:0;color:var(--dim);font-size:14.5px;font-weight:500}
.hfree{color:var(--dim);font-size:13px;font-weight:600;white-space:nowrap;padding-bottom:3px}
.hsearch{display:flex;align-items:center;gap:12px;height:58px;padding:0 8px 0 18px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-card);transition:border-color var(--t) ease-out}
.hsearch:focus-within{border-color:var(--vio)}
.hsico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round}
.hsearch input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:15px;outline:0;color:var(--txt)}
.hsearch input::placeholder{color:var(--mute)}
.hsearch input::-webkit-search-cancel-button{filter:invert(.7)}
.hsearch .btn{min-height:42px;padding:0 20px}
.hgrid{display:flex;gap:10px}
/* (two groups that reflow without holes when items are hidden by a feature switch or a permission (display:none!important from [data-feat] / [data-perm]):
   .hbig = the big tiles share one row, .hsmall = the small cards, two per line, an odd last one takes the whole line; home.js adds .none to a group whose items are all hidden, so the other one takes the width) */
.hbig{flex:1 1 0;min-width:0;display:flex;gap:10px}
.hsmall{flex:0 0 42%;min-width:0;display:flex;flex-wrap:wrap;gap:10px}
.hsmall>*{flex:1 1 calc(50% - 5px);min-width:0}
.hbig.none,.hsmall.none{display:none}
.hbig.none+.hsmall{flex:1 1 100%}
.hic{display:grid;place-items:center;flex:0 0 auto}
.hic svg{width:22px;height:22px;fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.htile{flex:1 1 0;min-width:0;min-height:306px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border-radius:var(--r-card);color:var(--bg);text-decoration:none;transition:filter var(--t) ease-out}
.htile.songs{background:var(--vio)}
.htile.editor{background:var(--ice)}
.htile.replays{background:var(--teal)}
.htile.pools{background:var(--brz)}
@media (hover:hover){.htile:hover{filter:brightness(1.07)}}
/* (the icon is in the flow, pinned to the top: the title can never slide under it, the tile grows instead) */
.htile .hic{position:relative;margin-bottom:auto;width:58px;height:58px;border-radius:var(--r-card);background:var(--bg)}
.htile.songs .hic svg{stroke:var(--vio)}.htile.editor .hic svg{stroke:var(--ice)}.htile.replays .hic svg{stroke:var(--teal)}.htile.pools .hic svg{stroke:var(--brz)}
.htile kbd{position:absolute;right:18px;top:18px;background:rgba(21,24,37,.16);border-color:transparent;color:var(--bg)}
.hnum{position:absolute;right:-6px;bottom:-34px;font:italic 800 170px/1 Inter,system-ui,sans-serif;letter-spacing:-10px;color:rgba(21,24,37,.12);pointer-events:none}
.htile b{position:relative;padding-top:14px;font-size:26px;font-weight:800;letter-spacing:-.8px;line-height:1.05;overflow-wrap:anywhere}
.htile>span:not(.hic){position:relative;margin-top:6px;font-size:14.5px;font-weight:600;color:rgba(21,24,37,.78)}
.hcard{min-height:184px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;border-radius:var(--r-card);background:var(--s1);border:1px solid var(--bd);color:var(--txt);text-decoration:none;transition:background var(--t) ease-out,border-color var(--t) ease-out}
.hcard .hic{position:absolute;left:22px;top:22px;width:46px;height:46px;border-radius:var(--r-ctl)}
.hcard.new .hic{background:var(--teal)}.hcard.open .hic{background:var(--lav)}
.hcard kbd{position:absolute;right:16px;top:16px}
.hcard b{font-size:20px;font-weight:800;letter-spacing:-.4px}
.hcard span:not(.hic){margin-top:4px;color:var(--dim);font-size:13.5px}
.hcard.open{padding:0}
.hcover{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:1 1 auto;width:100%;padding:22px;cursor:pointer;border-radius:var(--r-card)}
.hcover:focus-visible{outline:2px solid var(--vio);outline-offset:2px}
.hcard .gdopen{position:absolute;right:16px;bottom:16px;font-size:12px}
.hrow{min-height:112px;display:flex;align-items:center;gap:14px;padding:0 22px;border-radius:var(--r-card);background:var(--s1);border:1px solid var(--bd);color:var(--txt);text-decoration:none;text-align:left;cursor:pointer;font:inherit;transition:background var(--t) ease-out,border-color var(--t) ease-out}
.hrow .hic{width:46px;height:46px;border-radius:var(--r-ctl);background:var(--s3)}
.hrow.live .hic{background:var(--brz)}
.hrow.mine .hic svg{stroke:var(--lav)}
.hrow .htx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hrow b{font-size:17px;font-weight:800;letter-spacing:-.3px}
.hrow .htx span{color:var(--dim);font-size:13px}
.harr{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t) ease-out}
@media (hover:hover){.hcard:hover,.hrow:hover{background:var(--s2);border-color:var(--s3)}.hrow:hover .harr{transform:translateX(3px);stroke:var(--txt)}}
.hchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.hchips .lbl{margin-right:4px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--dim)}
.hchip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:var(--r-ctl);background:var(--s1);border:1px solid var(--bd);font-size:13px;font-weight:600;color:var(--txt)}
.hchip::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--vio)}
.hchip.c2::before{background:var(--ice)}.hchip.c3::before{background:var(--brz)}.hchip.c4::before{background:var(--teal)}.hchip.c5::before{background:var(--txt)}
.homev .drafts{margin-top:8px}

.foot{margin-top:20px;padding:14px 0 4px;border-top:0;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;font-size:13px;color:var(--mute)}
.foot nav{gap:18px}
.foot a{color:var(--dim);font-weight:600}
@media (hover:hover){.foot a:hover{color:var(--txt)}}
.foot .footname{font-size:13px;color:var(--dim);font-weight:700}
.foot small{font-size:13px;opacity:1;color:var(--mute)}
.foot .footbuild{flex-basis:100%;font-size:11px;color:var(--mute);opacity:.5;font-variant-numeric:tabular-nums;letter-spacing:.02em} /* (the build: faint on purpose, it's for the owner) */
.foot .footbuild:empty{display:none}

.hrow .htx span,.hcard span:not(.hic){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow{padding:0 14px;gap:11px}.hrow .hic{width:40px;height:40px}.hrow .htx span{font-size:12.5px}.hrow b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}.hrow .harr{width:17px;height:17px}
@media (max-width:960px){.hgrid{flex-direction:column}.hbig,.hsmall,.hbig.none+.hsmall{flex:0 0 auto}.htile{min-height:170px}.htile b{font-size:30px}.hcard{min-height:170px}.hrow{min-height:72px}.hnum{font-size:150px}}
@media (min-width:761px){
  .hbig.quad{display:grid;grid-template-columns:1fr 1fr}
  .hbig.quad .htile{min-height:148px;padding:18px 20px}
  .hbig.quad .htile .hic{width:46px;height:46px}
  .hbig.quad .htile b{padding-top:10px;font-size:24px}
  .hbig.quad .htile>span:not(.hic){font-size:13.5px;margin-top:4px}
  .hbig.quad .hnum{font-size:120px;bottom:-22px;letter-spacing:-7px}
}
@media (max-width:760px){
  .homev{min-height:0;align-content:start;padding:6px 0 0}
  .hwrap{gap:10px}
  .hhead{flex-direction:column;align-items:flex-start;gap:4px}
  .hhead h1{font-size:30px;letter-spacing:-1px}
  .hhead p{font-size:13px}
  .hfree{display:none}
  .hsearch{height:50px;padding:0 12px}
  .hsearch kbd,.hsearch .btn{display:none}
  .hgrid,.hbig,.hsmall{gap:8px}
  .hbig{flex-wrap:wrap}
  .hsmall{flex-direction:column;flex-wrap:nowrap}
  .hsmall>*{flex:0 0 auto}
  .htile{flex:1 1 calc(50% - 4px);min-height:156px;padding:16px}
  .htile.replays,.htile.pools{flex-basis:100%;min-height:84px;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-content:center}
  .htile.replays .hic,.htile.pools .hic{grid-row:span 2;margin:0;align-self:center}
  .htile.replays b,.htile.replays>span:not(.hic),.htile.pools b,.htile.pools>span:not(.hic){grid-column:2}
  .htile.replays b,.htile.pools b{padding-top:0}
  .htile .hic{width:40px;height:40px}
  .htile kbd{display:none}
  .htile b{padding-top:8px;font-size:22px;letter-spacing:-.5px}
  .htile>span:not(.hic){font-size:12.5px;margin-top:3px}
  .hnum{font-size:110px;bottom:-22px;letter-spacing:-6px}
  .hcard,.hcard.open,.hrow{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:0 14px;min-height:58px}
  .hcard .hic,.hrow .hic{position:static;width:38px;height:38px}
  .hcard kbd{display:none}
  .hcard b,.hrow b{font-size:15px}
  .hcard span:not(.hic),.hrow .htx span{font-size:12.5px;margin-top:0}
  .hcard>b,.hcard>span:not(.hic){display:block}
  .hcard{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-content:center}
  .hcard .hic{grid-row:span 2}
  .hcard>b,.hcard>span:not(.hic),.hcover>b,.hcover>span:not(.hic){grid-column:2}
  .hcard.open .hcover{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-content:center;padding:0;min-height:58px}
  .hcard.open .hcover .hic{grid-row:span 2}
  .hcard.open{display:flex;padding:0 14px}
  .hcard .gdopen{position:static;margin-left:auto}
  .hrow .harr{width:18px;height:18px}
  .hchips{gap:6px}
  .hchip{height:28px;font-size:12px}
}
@media (max-width:760px){
  .apptop{flex-wrap:wrap;height:auto;padding-bottom:0;gap:0 10px}
  .apptop .brand{height:56px}
  .topnav{order:3;width:100%;margin:0;height:44px;justify-content:space-around}
  .topnav a{flex:1;justify-content:center;padding:0 6px;font-size:14px}
  .acct.out .acctl{display:none}.acct.out{padding:0 10px}
}

/* ===================== redesign: home motion ===================== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.7,0,.2,1)}
@keyframes hRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes hWipe{0%{transform:scaleX(0);transform-origin:left}48%{transform:scaleX(1);transform-origin:left}52%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes hInk{0%,49%{color:transparent}50%,100%{color:var(--vio)}}
@keyframes hNum{from{opacity:0;transform:translate(30px,10px)}to{opacity:1;transform:none}}
@keyframes hBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* entrance: heading, search, tiles and chips come in one after another (each time the page is shown) */
.homev .htitle h1{animation:hRise .55s var(--ease) backwards}
.homev .htitle p{animation:hRise .55s var(--ease) .08s backwards}
.homev .hfree{animation:hRise .55s var(--ease) .14s backwards}
.homev .hhead h1 em{position:relative;display:inline-block;animation:hInk .8s var(--ease-io) .15s backwards}
.homev .hhead h1 em::after{content:"";position:absolute;left:-3px;right:-3px;top:8%;bottom:4%;background:var(--vio);transform:scaleX(0);animation:hWipe .8s var(--ease-io) .15s backwards}
.homev .hsearch{animation:hRise .55s var(--ease) .16s backwards}
.homev .hbig>*,.homev .hsmall>*{animation:hPop .6s var(--ease) backwards;animation-delay:calc(.22s + var(--k,0) * .06s)}
.homev .hbig>:nth-child(2){--k:1}.homev .hbig>:nth-child(3){--k:2}.homev .hbig>:nth-child(4){--k:3}.homev .hsmall>:nth-child(1){--k:3}.homev .hsmall>:nth-child(2){--k:4}.homev .hsmall>:nth-child(3){--k:5}.homev .hsmall>:nth-child(4){--k:6}
.homev .htile .hnum{animation:hNum .9s var(--ease) backwards;animation-delay:calc(.35s + var(--k,0) * .06s)}
.homev .hchips>*{animation:hRise .5s var(--ease) backwards;animation-delay:calc(.55s + var(--k,0) * .04s)}
.homev .hchips>:nth-child(2){--k:1}.homev .hchips>:nth-child(3){--k:2}.homev .hchips>:nth-child(4){--k:3}.homev .hchips>:nth-child(5){--k:4}.homev .hchips>:nth-child(6){--k:5}.homev .hchips>:nth-child(7){--k:6}
/* hover and press: tiles lift, their number drifts with the pointer, arrows and icons move */
.htile,.hcard,.hrow{transition:transform .28s var(--ease),background var(--t) ease-out,border-color var(--t) ease-out,filter var(--t) ease-out}
.htile .hnum{transition:transform .5s var(--ease)}
.htile .hic,.hcard .hic,.hrow .hic{transition:transform .3s var(--ease)}
.htile kbd,.hcard kbd{transition:background var(--t) ease-out,color var(--t) ease-out,border-color var(--t) ease-out}
@media (hover:hover){
  .htile:hover,.hcard:hover,.hrow:hover{transform:translateY(-3px)}
  .htile:hover .hnum{transform:translate(calc(var(--mx,0) * 14px - 10px),calc(var(--my,0) * 10px))}
  .htile:hover .hic{transform:translateY(-3px) rotate(-4deg)}
  .hcard:hover .hic,.hrow:hover .hic{transform:scale(1.08) rotate(-4deg)}
  .htile:hover kbd{background:var(--bg);color:var(--txt)}
  .hcard:hover kbd{border-color:var(--vio);color:var(--txt)}
  .hchip:hover::before{transform:scale(1.5)}
  .topnav a:not(.on):hover::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;background:var(--s3)}
  .acct.out:hover .osumark{transform:rotate(180deg) scale(1.1)}
  .brand:hover .logo{transform:skewX(-6deg) translateX(1px)}
}
.htile:active,.hcard:active,.hrow:active{transform:translateY(-1px) scale(.985);transition-duration:.08s}
.hchip::before{transition:transform .25s var(--ease)}
.acct .osumark{transition:transform .4s var(--ease)}
.apptop .logo{transition:transform .25s var(--ease)}
.topnav a.on::after{animation:hBar .35s var(--ease) both}
/* search: the icon and the "/" hint react to focus */
.hsico{transition:transform .25s var(--ease),stroke var(--t) ease-out}
.hsearch kbd{transition:opacity var(--t) ease-out,transform .2s var(--ease)}
.hsearch:focus-within .hsico{stroke:var(--vio);transform:rotate(-12deg) scale(1.08)}
.hsearch:focus-within kbd{opacity:0;transform:translateY(-4px)}

/* ===================== redesign: Beatmaps page ===================== */
body:has(#select:not([hidden])) #shell{--gut:max(24px,calc(50vw - 800px));max-width:none;padding-left:calc(env(safe-area-inset-left) + var(--gut));padding-right:calc(env(safe-area-inset-right) + var(--gut))}
#select .searchbar{position:sticky;top:calc(60px + env(safe-area-inset-top));z-index:6;display:flex;align-items:center;gap:12px;margin:-18px calc(-1 * var(--gut) - env(safe-area-inset-right)) 0 calc(-1 * var(--gut) - env(safe-area-inset-left));padding:12px var(--gut);height:64px;background:var(--bg);border-bottom:1px solid var(--bd)}
.sbq{flex:0 1 440px;min-width:200px;height:40px;display:flex;align-items:center;gap:10px;padding:0 6px 0 12px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-ctl);transition:border-color var(--t) ease-out}
.sbq:focus-within{border-color:var(--vio)}
.sbq input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;font-size:14px;outline:0}
.sbq input::placeholder{color:var(--mute)}
.sbq .btn{min-height:30px;padding:0 10px;font-size:12.5px}
.sbq kbd{transition:opacity var(--t) ease-out}.sbq:focus-within kbd{opacity:0}
.sbq:focus-within .hsico{stroke:var(--vio)}
#select #filters{flex:0 1 auto;min-width:0;padding:0;gap:6px;align-items:center}
#filters .chip:not(.fchip){border-color:transparent;background:none;color:var(--dim);padding:0 11px}
@media (hover:hover){#filters .chip:not(.fchip):not(.on):hover{background:var(--s2);color:var(--txt)}}
#filters .chip:not(.fchip).on{background:var(--txt);border-color:var(--txt);color:var(--bg)}
#filters .fchip{margin-left:6px;background:var(--s1);border-color:var(--bd);color:var(--txt)}
#filters .fchip .fcount:not(:empty){min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-tag);background:var(--vio);color:var(--vio-dk);font-size:11px;display:inline-grid;place-items:center}
.sbtools{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sbtools .mirror{gap:8px;height:40px;padding:0 4px 0 10px;border:1px solid var(--bd);border-radius:var(--r-ctl);background:var(--s1);color:var(--txt)}
.sbtools .mirror .lbl{font-size:10px}
.sbtools .mirror select{height:36px;border:0;background:none;padding:0 6px}
#select .fpills{position:absolute;left:0;right:0;top:100%;padding:6px var(--gut);background:var(--bg);border-bottom:1px solid var(--bd)}
#select .subrow{margin:16px 0 12px}
#select .status{margin:0;min-height:0;color:var(--dim);font-size:13px;font-weight:600}
#select .subacts .btn{min-height:32px}
.grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
/* cards: cover, status, square play button, title, artist · mapper, difficulty bars */
.card{height:auto;display:flex;flex-direction:column;border-radius:var(--r-card);border:1px solid var(--bd);background:var(--s1);overflow:visible;transition:transform .28s var(--ease),border-color var(--t) ease-out,outline-color var(--t) ease-out;outline:2px solid transparent;outline-offset:-1px}
.card::before{display:none}
.bc-cov{position:relative;height:108px;border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden;background:var(--s2)}
.bc-img{position:absolute;inset:0;background:center/cover no-repeat;transition:transform .5s var(--ease)}
.bc-tag{position:absolute;left:10px;top:10px;z-index:2;font-style:normal;height:18px;padding:0 6px;display:inline-flex;align-items:center;border-radius:var(--r-tag);font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;background:var(--s3);color:var(--txt)}
.bc-have{position:absolute;left:10px;bottom:10px;z-index:2;font-style:normal;height:22px;padding:0 9px 0 7px;display:inline-flex;align-items:center;border-radius:var(--r-tag);font-size:11.5px;font-weight:800;letter-spacing:.3px;background:#3ddbb0;color:#06281f;box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 2px rgba(6,40,31,.55)}
.card.has{border-color:#3ddbb0;box-shadow:0 0 0 1px #3ddbb0,0 6px 20px rgba(61,219,176,.18)}
.dhave{display:flex;align-items:center;gap:12px;margin:2px 22px 12px;padding:10px 12px;border-radius:var(--r-card);background:rgba(61,219,176,.13);border:1px solid rgba(61,219,176,.55);border-left:5px solid #3ddbb0}
.dhave .dhok{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#3ddbb0;color:#06281f;font-weight:900;font-size:16px}
.dhave .dhtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.dhave .dhtx b{font-size:15px;color:#fff}.dhave .dhtx small{color:var(--dim);font-size:12.5px;line-height:1.35}
.dhave .btn{flex:0 0 auto}
.dhave.upd{background:rgba(255,184,77,.13);border-color:rgba(255,184,77,.65);border-left-color:#ffb84d}.dhave.upd .dhok{background:#ffb84d;color:#2e1d00}.dhave.upd .dhok::before{content:"!"}.dhave.upd .dhok{font-size:0}.dhave.upd .dhok::before{font-size:16px}
@media (max-width:520px){.dhave{flex-wrap:wrap}.dhave .btn{width:100%}}
.cmgr{display:flex;flex-direction:column;gap:10px;min-width:0}
.cmgr input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--vio)}
.cmrow{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-ctl);cursor:pointer;min-width:0}
.cmrow:hover{background:rgba(255,255,255,.06)}
.cmrow .cmn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmrow small{color:var(--dim);flex:0 0 auto;font-size:12px}
.cmall{border:1px solid var(--bd);background:var(--s2)}
.cmhd{font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--lav);margin-top:2px}.cmhd small{margin-left:auto}
.cmlist{display:flex;flex-direction:column;max-height:26vh;overflow:auto;border-left:2px solid var(--bd);margin-left:9px;padding-left:4px}
.cmnone{margin:6px 8px;color:var(--mute);font-size:13px}
.cmsum{min-height:18px;color:var(--dim);font-size:13px}
.cmgo{width:100%;justify-content:center;transition:background .15s,transform .15s}
.cmgo.btn.armed,.cmgo.btn.armed:hover{background:#ff8a3d;border-color:#ff8a3d;color:#1c0d00}.cmgo.btn.armed2,.cmgo.btn.armed2:hover{background:#ff4d6d;border-color:#ff4d6d;color:#fff;box-shadow:0 0 0 3px rgba(255,77,109,.35)}
.bc-tag.st-ranked,.bc-tag.st-approved{background:var(--teal)!important;color:#11302d}
.bc-tag.st-loved{background:#f19ac4!important;color:#3a1028}
.bc-tag.st-qualified{background:var(--ice)!important;color:#142545}
.bc-tag.st-pending,.bc-tag.st-wip{background:var(--brz)!important;color:#2e2410}
.bc-tag.st-graveyard{background:var(--s3)!important;color:var(--dim)}
.bc-dl{position:absolute;right:10px;top:10px;border:0;padding:0;cursor:pointer;z-index:3;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-ctl);background:rgba(21,24,37,.72);color:var(--txt);opacity:0;transform:translateY(-4px);transition:opacity var(--t) ease-out,transform .25s var(--ease)}
.bc-dl:disabled{cursor:progress;opacity:1;transform:none}
.bc-dl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bc-play{position:absolute;right:14px;bottom:10px;z-index:3;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:var(--r-ctl);background:var(--txt);color:var(--bg);cursor:pointer;transition:transform .25s var(--ease),background var(--t) ease-out}
.bc-play svg{width:16px;height:16px;fill:currentColor;stroke:none}
.bc-play .pa{display:none}
.card.playing .bc-play{background:var(--vio);color:var(--vio-dk)}
.card.playing .bc-play svg{fill:var(--vio-dk);stroke:none}
.card .cprog{left:0;bottom:0;height:3px;background:var(--vio)}
.card.playing{border-color:var(--bd)}
.card .cmain{z-index:1;border-radius:var(--r-card)}
.bc-body{position:relative;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:3px;padding:12px 16px 14px}
.bc-t{font-size:15px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-by{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-by .mlink{pointer-events:auto;color:var(--txt);font-weight:700;font-size:12.5px}
.bc-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.bc-bars{display:flex;gap:4px;min-width:0;overflow:hidden}
.bc-bars i{flex:0 0 auto;width:14px;height:6px;border-radius:1px}
.bc-meta{font-size:12px;color:var(--dim);white-space:nowrap;font-weight:600}
.card.sel{outline-color:var(--vio)}
@media (hover:hover){
  .card:hover{transform:translateY(-3px);border-color:var(--s3)}
  .card:hover .bc-img{transform:scale(1.06)}
  .card:hover .bc-dl,.bc-dl:focus-visible{opacity:1;transform:none}
  .card:hover .bc-play{transform:translateY(-2px)}
  .bc-play:hover{background:var(--vio);color:var(--vio-dk)}
}
@media (hover:none){.bc-dl{opacity:1;transform:none}}
.card:has(.cmain:active){transform:scale(.985)}
.card.sk{height:226px;border:0}
/* the detail panel floats up over the page (a sheet from the bottom on phones) and sinks back when it closes */
@keyframes dFloat{from{transform:translateY(48px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes dSink{to{transform:translateY(32px) scale(.97);opacity:0}}
@keyframes dSheet{from{transform:translateY(100%)}}
@keyframes dSheetOut{to{transform:translateY(100%)}}
@keyframes dDim{from{opacity:0}}
@keyframes dUndim{to{opacity:0}}
@keyframes dRise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
/* Layout of the panel (#detail > #dPanel). .dpanel is ONE box with no transform at rest (it is what the open/close motion moves).
   Inside #dBody: .dside (cover, actions, set information) and .dmain (the difficulty table).
   >=900px: two zones side by side, each scrolls on its own; 701-899px: one column in a centred dialog; <=700px: a bottom sheet.
   Below 900px .dside/.dmain are display:contents and `order` puts the difficulties before the set information.
   One type scale: title 22/700, body 13, labels 11-12 (uppercase for headers), numbers tabular. One accent (the violet): the picked row,
   Listen, Preview. Quiet hairlines (white at 6%) instead of boxes; only what can be pressed gets a surface. */
.detail{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:rgba(10,12,20,.74);animation:dDim .2s ease-out;overscroll-behavior:contain;touch-action:pinch-zoom} /* (the backdrop, the footer, the grab strip: a pan there moves nothing, the page under it is locked; the panel's scrollers keep their own pans) */
.detail.out{animation:dUndim .18s ease-in forwards}
.dpanel{position:relative;display:flex;flex-direction:column;width:min(760px,100%);max-height:min(90vh,900px);max-height:min(90svh,900px);background:var(--s1);border:1px solid var(--bd);border-radius:6px;overflow:hidden;box-shadow:0 32px 90px rgba(0,0,0,.6);animation:dFloat .46s var(--ease);transition:transform .2s}
.detail.out .dpanel{animation:dSink .18s ease-in forwards}
.dbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain}
.dside,.dmain{display:contents}
.dside>*,.dmain>*{flex:0 0 auto;min-width:0}
.dcover{order:0}.dhave{order:2}.dacts{order:3}.dstats{order:5}.dtlabel{order:6}.dlist{order:7}.dilabel{order:8}.dmeta{order:9}
.dgrab{display:none}
/* the muted label colour, inside the panel only (the site-wide --mute #646a87 is 3.08:1 on the panel): #8a90ad is 5.2:1 on the panel surface and
   4.65:1 on a hovered row; the picked row's violet tint is darker-ish, so there (row + its strip) a lighter #9aa0bb keeps 5.5:1. Set on the body and the footer,
   not on #detail: the flying copy of the card lives in #dPanel and must keep the card's own colours. */
#dBody,#dfoot{--mute:#8a90ad}
.drow.on,.dstrip{--mute:#a8aec8}
/* wide screens: the panel opens out of the card that was clicked and closes back into it (js dFlyOpen / dFlyBack, Web
   Animations; the panel is moved and clipped, never scaled). .fly: the CSS float-in/out is off (one motion at a time); .flyout: closing,
   clicks go to the page under it; .dpicfly: the card's picture is flying (.dshr); .dsrc: the card the panel stands in for; .dghost: the
   copy of that card the move starts from / ends on */
.detail.fly,.detail.fly .dpanel{animation:none}
.detail.fly .dpanel{transform-origin:0 0}
.detail.flyout{pointer-events:none}
.card.dsrc{opacity:.001;pointer-events:none} /* (not visibility:hidden: Safari/WebKit drops a hidden card's painted picture and repaints it late when it shows again, so the card landed dark for a few frames) */
.dghost{position:absolute;z-index:6;margin:0;transform-origin:0 0;pointer-events:none;content-visibility:visible;animation:none!important;transition:none!important}
.dghost *{animation:none!important;transition:none!important}
/* .dgp: the card's picture flies on its own layer (.dshr), the copy keeps only the card's words, tag and buttons over it */
.dghost.dgp,.dghost.dgp .bc-cov{background:transparent!important}
.dghost.dgp .bc-img{visibility:hidden}
.dghost.dgp .bc-body{background:var(--s1);border-radius:0 0 calc(var(--r-card) - 1px) calc(var(--r-card) - 1px)}
/* the flying picture (js dShared): in the panel, above its cover and below the cover's title / badge, the close button and the card copy;
   one scale for both axes (its background-size is set in px), its shade comes in as it lands (the panel cover's own shade) */
.dshr{position:absolute;z-index:2;margin:0;pointer-events:none;background-color:var(--s2);background-position:center;background-repeat:no-repeat;overflow:hidden}
.dshr{background-size:cover}.dshc{position:absolute;inset:0;background:center/cover no-repeat}
.dshade{position:absolute;inset:0;background:linear-gradient(rgba(27,31,47,.05) 15%,rgba(27,31,47,.6) 60%,var(--s1) 100%)}
.detail.dpicfly .dcover{background:transparent!important}.detail.dpicfly .dcover::before{opacity:0} /* (while the picture flies the cover box is see-through: whatever order a browser paints the layers in, nothing dark covers the flying picture) */
.detail.dpicfly .dcovfx{visibility:hidden}
.detail.dpicfly .dhead{z-index:3}
.detail.dlate .dchips{animation:fadeIn .24s ease-out .12s backwards} /* (the panel's badge comes in as the card's tag goes) */
/* .dlate (opened from a card): the content comes in once the window has mostly opened, the difficulty rows one after another */
.detail.dlate .dhead,.detail.dlate .dacts{animation-duration:.36s;animation-delay:.1s}
.detail.dlate .dhave,.detail.dlate .dlabel,.detail.dlate .dmeta{animation:dRise .32s var(--ease) .18s backwards}
.detail.dlate .dlist .drow,.detail.dlate .dlist .dstrip.first{animation-delay:calc(.16s + min(var(--i,0) * 25ms,110ms))}
/* (everything has landed about .55s after the click: the rows start at .16s, 25ms apart, the stagger stops at .11s however many rows there are, each takes .28s) */
@media (min-width:900px){
  .dpanel{width:min(1100px,100%);height:min(92vh,780px);height:min(92svh,780px)} /* (a fixed height: opening "More details" never moves the panel; the columns scroll inside it. svh, not dvh: Safari's toolbar coming or going right after it lands must not resize it, which made it drift up) */
  .dbody{display:grid;grid-template-columns:minmax(300px,320px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}
  .dside,.dmain{display:flex;flex-direction:column;min-height:0;overflow:auto;overscroll-behavior:contain}
  .dside{border-right:1px solid rgba(255,255,255,.06)}
  /* the information column scrolls under a soft fade at its bottom edge (sticky, so it stays at the edge while there is more below; the blank padding under the last row lies beneath it at the end) */
  .dside::after{content:"";order:99;position:sticky;bottom:0;flex:0 0 28px;height:28px;margin-top:-28px;z-index:1;background:linear-gradient(rgba(27,31,47,0),var(--s1));pointer-events:none}
  .dside .dmeta{padding-bottom:32px}
  .dside .dacts{z-index:2}
  .dextra .dkv{min-height:28px;padding:2px 0}
  .dextra{display:flex;flex-direction:column} /* (rating and nominators first: on a short screen they are what the column's end would hide; the DOM order, which phones and keyboards follow, is unchanged) */
  .dextra .dkrate{order:-2}.dextra .dknom{order:-1}
  @media (max-height:800px){.dcover{min-height:120px}.dhead{padding-top:46px;padding-bottom:12px}.dacts{padding-bottom:14px}.dilabel{padding-top:2px}}
}
@media (max-width:700px){
  .detail{place-items:end stretch;padding:0}
  .dpanel{width:100%;max-height:94vh;max-height:94svh;border-radius:6px 6px 0 0;border-bottom:0;animation:dSheet .34s var(--ease)}
  .detail.out .dpanel{animation:dSheetOut .18s ease-in forwards}
  .dgrab{display:block;position:absolute;top:0;left:0;right:0;height:26px;z-index:3;touch-action:none}
  .dgrab::after{content:"";position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(255,255,255,.55)}
  .dcover{touch-action:none}
}
/* cover: the status badge top left, the title (2 lines), artist and mapper (1 line each, the full text in the tooltip) at the bottom */
.dcover{position:relative;min-height:172px;display:flex;align-items:flex-end;background:var(--s2) center/cover no-repeat}
.dcover::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(27,31,47,.05) 15%,rgba(27,31,47,.6) 60%,var(--s1) 100%)}
/* the card's picture while the larger cover loads (js dCoverFx): above the cover, with the same shade, so it can fade out */
.dcovfx{position:absolute;inset:0;background:center/cover no-repeat;pointer-events:none}
.dcovfx::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(27,31,47,.05) 15%,rgba(27,31,47,.6) 60%,var(--s1) 100%)}
/* the close button belongs to the PANEL (a direct child of #dPanel, first in tab order): 44px, solid, in the top-right corner at every width, above both
   columns / the cover / the table's sticky header (z 4; the Download menu is 5 and the flying card copy 6, so it never shows over the card shape while the panel is still growing).
   It stays put while the content scrolls. Violet on hover (the one accent), pressed a little smaller, a clear ring on keyboard focus */
.dclose{position:absolute;top:10px;right:12px;z-index:4;width:44px;height:44px;border-radius:10px;background:var(--s3);border:1px solid rgba(255,255,255,.18);color:var(--txt);box-shadow:0 2px 10px rgba(0,0,0,.45);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background var(--t) ease-out,border-color var(--t) ease-out,box-shadow var(--t) ease-out,transform var(--t) ease-out,opacity .1s}
.dclose svg{width:20px;height:20px;stroke-width:2.2}
@media (hover:hover){.dclose:hover{background:#58427f;border-color:var(--vio);color:#fff}}
.dclose:active{background:#58427f;border-color:var(--vio);transform:scale(.96)}
.dclose:focus-visible{outline:2px solid var(--vio);outline-offset:3px;box-shadow:0 0 0 7px rgba(194,107,255,.28),0 2px 10px rgba(0,0,0,.45)}
@keyframes dClosePop{from{opacity:0;transform:scale(.85)}}
.detail.dlate .dclose{animation:dClosePop .22s var(--ease) .22s backwards}
.detail.flyout .dclose{opacity:0}
.dchips{position:absolute;z-index:3;top:16px;left:24px;right:64px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.dchips em{font-style:normal;font-size:12px;font-weight:700;line-height:1;padding:5px 9px;border-radius:var(--r-tag);background:rgba(21,24,37,.7);color:var(--txt);text-transform:uppercase;letter-spacing:.6px}
.dchips em[class*="st-"]{color:var(--bg)}
.dchips .st-ranked,.dchips .st-approved{background:var(--teal)!important}.dchips .st-loved{background:#f19ac4!important}.dchips .st-qualified{background:var(--ice)!important}.dchips .st-pending,.dchips .st-wip{background:var(--brz)!important}
.dchips em[class*="st-"]:not(.st-ranked):not(.st-approved):not(.st-loved):not(.st-qualified):not(.st-pending):not(.st-wip){background:rgba(21,24,37,.7)!important;color:var(--txt)}
.dchips .nsfw{background:rgba(255,77,94,.85);color:#fff}
.dhead{position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;padding:56px 24px 16px;width:100%;animation:dRise .45s var(--ease) .05s backwards}
.dhead b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1.2}
.dhead span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt);opacity:.8;font-weight:500;font-size:14px}
.dhead small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-size:13px}
.dhead small .mlink{color:var(--txt);font-weight:600}
/* actions: one row that doesn't wrap. Listen is tinted with the accent, Share and Download are quiet; narrow: Share, then Download, shrink to their icons */
.dacts{position:relative;container-type:inline-size;display:flex;align-items:center;gap:8px;padding:4px 24px 20px;animation:dRise .45s var(--ease) .12s backwards}
.dacts .btn{flex:0 0 auto;min-height:38px;padding:0 12px;font-size:13px;gap:7px;border-color:rgba(255,255,255,.09);color:var(--dim);overflow:hidden}
.dacts .btn svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dacts .btn .btxt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dacts .btn .bic{font-size:12px}
#dPrev{flex:1 0 auto;min-width:84px;justify-content:center;background:rgba(194,107,255,.15);border-color:rgba(194,107,255,.35);color:#e2c2ff;font-weight:700}
.dacts .ddl{flex:0 1 auto;min-width:0;display:flex}
.dacts .ddl summary{flex:0 1 auto;min-width:0}
.dacts .ddl summary{list-style:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.ddl summary::-webkit-details-marker{display:none}
.dacts .btn .chev{width:14px;height:14px;opacity:.7;transition:transform var(--t) ease-out}
.ddl[open] .chev{transform:rotate(180deg)}
@media (hover:hover){.dacts .btn:not(:disabled):hover{background:rgba(255,255,255,.06);color:var(--txt)}.dacts #dPrev:hover{background:rgba(194,107,255,.24);color:#fff}}
@container (max-width:340px){#dShare .btxt{display:none}#dShare{padding:0 11px}}
@container (max-width:300px){.dacts{gap:6px}.dacts .btn{padding:0 10px}#dShare{padding:0 10px}.dlsum>svg:first-child{display:none}}
@container (max-width:240px){.dlsum .btxt,.dlsum .chev{display:none}.dlsum>svg:first-child{display:block}.dlsum{padding:0 11px}}
@container (min-width:420px){#dPrev{flex:0 0 auto;min-width:120px}}
/* the Download menu opens over what is below it (it never pushes the row apart) */
.ddlmenu{position:absolute;z-index:5;left:24px;right:24px;top:calc(100% - 14px);display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:6px;background:var(--s2);border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.ddlmenu a{display:flex;justify-content:space-between;gap:10px;min-height:44px;align-items:center;padding:0 12px;border-radius:5px;color:inherit;text-decoration:none;background:rgba(255,255,255,.05);font-size:14px}
.ddlmenu a small{color:var(--dim);font-size:12px}
.ddlmenu a:active{background:rgba(255,255,255,.12)}
.dlsum{border-color:rgba(255,255,255,.09)}
/* "downloaded" note: a quiet line, amber when a newer version is out */
.dhave{display:flex;align-items:center;gap:10px;margin:0 24px 14px;padding:8px 10px;border-radius:var(--r-card);background:rgba(143,218,211,.07);border:0}
.dhave .dhok{width:20px;height:20px;font-size:12px;background:var(--teal);color:#06281f}
.dhave .dhtx b{font-size:13px;color:var(--txt)}
.dhave .dhtx small{font-size:12px}
.dhave.upd{background:rgba(255,184,77,.09);border:0}
@media (max-width:520px){.dhave .btn{width:auto}}
@media (min-width:900px){.dhave{flex-wrap:wrap}.dhave .dhtx{flex:1 1 150px}.dhave .btn{width:100%}}
.dmvol{padding:14px 0 0}
.dmvol .dml{margin:0 0 2px}
.dvol{margin:0;padding:0}
.dvol .vrow{min-height:32px;font-size:13px}
.dlabel{padding:4px 24px 8px;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--mute)}
.dilabel{padding-top:8px}
.dempty{color:var(--dim);padding:18px;text-align:center;font-size:14px}
/* set information: four calm rows, then "More details". Key 12px muted, value 13px; one hairline (above the toggle), no boxes */
.dmeta{padding:0 24px 12px}
.dorig{display:flex;flex-direction:column;gap:2px;margin:0 0 12px;color:var(--mute);font-size:13px;line-height:1.4}
.dorig:empty{display:none}
.dorig span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dkvs{margin:0}
.dkv{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center;min-height:32px;padding:4px 0;font-size:13px;line-height:1.5}
.dkv dt{color:var(--mute);font-size:12px;font-weight:500}
.dkv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dwho{display:flex;align-items:center;gap:8px;min-width:0}
.dwho .cav,.dgrp{flex:0 0 auto}
.dwho .cav,.dnoms .cav{width:22px;height:22px;font-size:12px;margin:0;vertical-align:baseline}
.dwho .mlink,.dnoms .mlink{font-weight:600}
.dgrp,.dmnom small{padding:0;background:none;font-size:12px;font-weight:600;color:var(--mute);letter-spacing:.3px}
.dnoms .dmnom{text-decoration:none}
.dst{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.dst i{width:7px;height:7px;border-radius:50%;background:var(--mute)}
.dst[data-st=ranked] i,.dst[data-st=approved] i{background:var(--teal)}.dst[data-st=loved] i{background:#f19ac4}.dst[data-st=qualified] i{background:var(--ice)}.dst[data-st=pending] i,.dst[data-st=wip] i{background:var(--brz)}
.dsd{color:var(--dim);font-weight:400;white-space:pre-wrap}
.dfacts{display:flex;flex-direction:column;gap:6px;margin-top:8px;color:var(--dim);font-size:13px;line-height:1.5}
.dfacts:empty{display:none}
.dnum{display:flex;flex-wrap:wrap;gap:2px 16px;font-variant-numeric:tabular-nums}
.dnum>span{white-space:nowrap}
.dnum i{font-style:normal;font-size:12px;margin-right:6px;color:var(--mute)}
.dsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dlink{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
@media (hover:hover){.dlink:hover{color:var(--txt);text-decoration:underline}}
.dmorebtn{display:flex;align-items:center;gap:6px;width:100%;margin-top:14px;padding:12px 0 8px;border:0;border-top:1px solid rgba(255,255,255,.06);background:none;color:var(--dim);font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.dmorebtn[hidden]{display:none}
.dmore.flat .dmvol{margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.dmorebtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.dmorebtn[aria-expanded=true] svg{transform:rotate(180deg)}
@media (hover:hover){.dmorebtn:hover{color:var(--txt)}}
.dmore{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s ease,visibility 0s .2s}
.dmore.open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .2s ease}
.dmorein{min-height:0;overflow:hidden}
.dmorein>.dkvs:first-child{padding-top:2px}
.dkv .dmrate{display:inline-flex;align-items:baseline;gap:8px;padding:0;background:none;font-size:13px;font-weight:600;color:var(--txt)}
.dmrate b{white-space:nowrap}
.dmrate small{color:var(--dim);font-weight:400;font-size:12px}
.dnoms{display:flex;flex-wrap:wrap;gap:4px 14px}
.dkv.tags{display:block}.dkv.tags dt{margin-bottom:4px}
.dmore .dmtagrow{margin:0;gap:2px 12px}
.dmore .dmtag.plain{display:inline;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--dim);font-size:13px;line-height:1.7;text-align:left;white-space:normal;overflow-wrap:anywhere}
@media (hover:hover){.dmore .dmtag.plain:hover{color:var(--txt);text-decoration:underline}}
.dmore .dmtags{padding:12px 0 0}
.dmore .dml{margin:0 0 8px;color:var(--mute);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
.dmore .dmcat{min-width:0;margin-right:2px;color:var(--mute);font-size:12px;font-weight:500}
.dmore .dmtagrow:has(.dmcat){gap:6px;margin-bottom:6px}
.dmore .dmtag:not(.plain){height:24px;padding:0 9px;border:0;border-radius:12px;background:rgba(255,255,255,.05);color:var(--dim);font-size:12px}
@media (hover:hover){.dmore .dmtag:not(.plain):hover{background:rgba(255,255,255,.1);color:var(--txt)}}
.dmore .tagtip{margin:6px 0 0;font-size:12px;color:var(--mute);min-height:1.5em}
/* the difficulty table: plain numbers, no grid, hover tint, the picked row accented; the rest is in the strip under it */
/* the heading of the choice: a real heading (primary colour, 15px / 600, not a muted caption) with the number of difficulties as a quiet suffix */
.dtlabel{display:flex;align-items:center;gap:10px;padding:14px 24px 8px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--txt)}
.dcount{display:inline-block;min-width:22px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--dim);font-size:12px;font-weight:600;line-height:1.35;text-align:center;font-variant-numeric:tabular-nums}
.dcount:empty{display:none}
.dlist{container-type:inline-size;padding:0 16px 24px}
/* >=900px: the top of the right zone is a fixed band (the heading on the left, the close button on the right); only the table scrolls under it */
@media (min-width:900px){
  .dmain{overflow:hidden}
  .dtlabel{display:flex;align-items:center;height:64px;padding:0 76px 0 28px}
  .dlist{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-top:0}
}
.dtab{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.dtab th{position:sticky;top:0;z-index:2;padding:8px;background:var(--s1);border:0;color:var(--mute);font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;text-align:right;white-space:nowrap}
/* below 900px the table is not in a zone of its own: its sticky header would stick under the floating button, so there it scrolls away with the rows */
@media (max-width:899px){.dtab th{position:static}}
/* a row is 52px: 48px of row and a 2px gap above and below (a transparent border, the background and the inset lines stop at the padding edge) */
.dtab td{height:52px;padding:0 8px;border:0;border-block:2px solid transparent;background-clip:padding-box;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dtab th.c-star,.dtab th.c-name,.dtab td.c-star,.dtab td.c-name{text-align:left}
.dtab .c-star{width:1%;padding-left:12px}
.dtab .c-name{width:100%;max-width:0;overflow:hidden}
.dtab .c-n{min-width:44px}
/* the choice: every row carries a radio mark and answers the pointer. --rl: the line round the row (inset lines, drawn on the cells so they follow the corners), --bar: the
   width of the left edge, --rb: the bottom line (none while the picked row's strip is open under it, the two are one card). The picked row is the strongest thing in the panel:
   a solid violet tint, a 3px bar, a violet outline, a soft glow, a 16px / 700 name, bigger star chip, primary-colour figures; the others are 14px / 600 with dimmer figures. */
#dBody{--selbg:#3e2f5b}
.drow{--rl:transparent;--bar:1px;--rb:1px;cursor:pointer;scroll-margin-top:36px}
.drow td{background-color:transparent;box-shadow:inset 0 1px 0 var(--rl),inset 0 calc(-1 * var(--rb)) 0 var(--rl);transition:background-color 140ms ease-out,box-shadow 140ms ease-out}
.drow td:first-child{border-radius:8px 0 0 8px;box-shadow:inset 0 1px 0 var(--rl),inset 0 calc(-1 * var(--rb)) 0 var(--rl),inset var(--bar) 0 0 var(--rl)}
.drow td.c-last{border-radius:0 8px 8px 0;box-shadow:inset 0 1px 0 var(--rl),inset 0 calc(-1 * var(--rb)) 0 var(--rl),inset -1px 0 0 var(--rl)}
@media (hover:hover){.drow:not(.on):hover{--rl:rgba(194,107,255,.5)}.drow:not(.on):hover td{background-color:rgba(194,107,255,.1)}}
.drow.on{--rl:var(--vio);--bar:3px;box-shadow:0 0 22px rgba(194,107,255,.2)}
.drow.on:has(+ .dstrip){box-shadow:0 -10px 20px -8px rgba(194,107,255,.28)} /* (the picked row and its strip are one card: the glow above the row, below the strip; neither spills onto the other) */
.drow.on td,.drow.on:hover td{background-color:var(--selbg)}
.drow.on:has(+ .dstrip){--rb:0px}
.drow.on:has(+ .dstrip) td{border-bottom-width:0}
.drow.on:has(+ .dstrip) td:first-child{border-bottom-left-radius:0}.drow.on:has(+ .dstrip) td.c-last{border-bottom-right-radius:0}
.drow:has(.dn:focus-visible){--rl:var(--txt)}
.drow:has(.dn:focus-visible) td{box-shadow:inset 0 2px 0 var(--rl),inset 0 -2px 0 var(--rl)}
.drow:has(.dn:focus-visible) td:first-child{box-shadow:inset 0 2px 0 var(--rl),inset 0 -2px 0 var(--rl),inset 2px 0 0 var(--rl)}
.drow:has(.dn:focus-visible) td.c-last{box-shadow:inset 0 2px 0 var(--rl),inset 0 -2px 0 var(--rl),inset -2px 0 0 var(--rl)}
/* while a pick settles (js pickDiff puts .dpk on the list for the strips' 200 ms): the highlight leaves one row and lands on the other in the same frame (no fades of
   different lengths on the cells, the glow, the radio, the chip and the name), and rows sliding under a pointer that stands still don't light up as they pass */
#dList.dpk .drow,#dList.dpk .drow td,#dList.dpk .rad,#dList.dpk .star,#dList.dpk .dn b{transition:none}
@media (hover:hover){#dList.dpk .drow:not(.on):hover{--rl:transparent;background:none;border-color:transparent}#dList.dpk .drow:not(.on):hover td{background-color:transparent}#dList.dpk .drow:not(.on):hover .rad{border-color:#7a80a3}}
.dtab .c-star{white-space:nowrap}
.rad{display:inline-block;position:relative;box-sizing:border-box;width:18px;height:18px;margin-right:10px;border:2px solid #7a80a3;border-radius:50%;vertical-align:middle;transition:background-color 140ms ease-out,border-color 140ms ease-out,box-shadow 140ms ease-out}
@media (hover:hover){.drow:not(.on):hover .rad{border-color:var(--vio)}}
.drow.on .rad{background:var(--vio);border-color:var(--vio);box-shadow:0 0 0 3px rgba(194,107,255,.28)}
.drow.on .rad::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--vio-dk);border-width:0 2px 2px 0;transform:rotate(45deg)}
.star{display:inline-block;min-width:54px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;text-align:center;white-space:nowrap;vertical-align:middle;transition:box-shadow 140ms ease-out}
.drow.on .star{min-width:60px;padding:4px 11px;font-size:13px;box-shadow:0 0 0 2px rgba(233,235,247,.28)}
.dn{display:flex;align-items:baseline;gap:8px;width:100%;min-width:0;padding:0;border:0;background:none;color:var(--txt);font:inherit;text-align:left;cursor:pointer}
.dn:focus-visible{outline:2px solid var(--vio);outline-offset:3px;border-radius:3px}
.dn b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:600;transition:font-size 140ms ease-out}
.drow.on .dn b{font-size:16px;font-weight:700}
@supports selector(:has(*)){.dn:focus-visible{outline:none}}
.dn small{flex:0 99 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;color:var(--mute);font-size:12px}
.c-n b{display:block;font-weight:500;color:var(--dim)}
.drow.on .c-n b{color:var(--txt);font-weight:600}
.c-n.none b{color:var(--mute);font-weight:400}
.drow.on .c-bpm,.drow.on .c-len{color:var(--txt)}
.c-mob,.dtab td.c-guest{display:none}
/* the strip: opens under the picked row (the grid row goes 0fr -> 1fr), bars on the left, the figures on the right */
.dstrip{box-shadow:0 10px 20px -8px rgba(194,107,255,.28)}
.dstrip>td{height:auto;padding:0;border-width:0 0 2px;border-bottom-style:solid;border-bottom-color:transparent;border-radius:0 0 8px 8px;background-color:var(--selbg);background-clip:padding-box;box-shadow:inset 3px 0 0 var(--vio),inset -1px 0 0 var(--vio),inset 0 -1px 0 var(--vio),inset 0 1px 0 rgba(255,255,255,.08);text-align:left;white-space:normal}
.dsw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease}
.dstrip.open .dsw{grid-template-rows:1fr}
.dsin{min-height:0;overflow:hidden}
.dsc{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px 40px;padding:4px 20px 18px 23px;opacity:0;transition:opacity .2s ease}
.dstrip.open .dsc{opacity:1}
/* a folding strip (the pick has moved on, js dStripTo): no glow, frame, fill or figures from the first frame, only its height closes, so nothing of the old pick is left
   under its row; js removes it once the height is 0 (no border or padding left, and on the narrow table a -2px margin cancels the row gap it would otherwise
   keep apart from the next row's: taking it away moves nothing) */
.dstrip:not(.open){margin-bottom:-2px;border-width:0;background:none;box-shadow:none}
.dstrip:not(.open)>td{border-bottom-width:0;background-color:transparent;box-shadow:none}
.dstrip:not(.open) .dsc{transition:none}
.dsbars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;align-content:start}
.dsb{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:6px 8px}
.dsl{color:var(--mute);font-size:12px;font-weight:600;letter-spacing:.6px}
.dsb b{justify-self:end;font-size:13px;font-weight:600;color:var(--txt)}
.dsb i{grid-column:1/-1;position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.dsb i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);border-radius:3px;background:var(--lav)}
.dsobj{margin:0;display:flex;flex-direction:column;gap:6px;align-content:start;font-size:13px}
.dsobj>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.dsobj dt{color:var(--mute)}
.dsobj dd{white-space:nowrap}
.dsobj dd{margin:0;color:var(--txt);font-variant-numeric:tabular-nums}
.dsid{color:var(--ice);text-decoration:none}
@media (hover:hover){.dsid:hover{text-decoration:underline}}
.dlist .dstrip.first{animation:vSide .28s var(--ease) backwards;animation-delay:calc(.08s + min(var(--i,0) * 25ms,110ms))}
@container (max-width:560px){.dsc{grid-template-columns:minmax(0,1fr);gap:14px;padding-right:16px}.dsbars{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dsobj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}.dsobj>.dsidr{grid-column:1/-1}}
/* narrow table (a phone, or a narrow panel): a row is two lines, star + name + "3:10 · 180 BPM" over CS AR OD HP; the picked row's strip opens under it */
@container (max-width:480px){
  .dtab,.dtab tbody{display:block}
  .dtab thead{display:none}
  .drow{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;margin-block:2px;padding:11px 12px 10px;border:1px solid transparent;border-radius:8px;transition:background-color 140ms ease-out,border-color 140ms ease-out,box-shadow 140ms ease-out}
  .drow::before{content:"";order:4;flex:0 0 100%;height:0}
  .drow.on,.drow.on:hover{background:var(--selbg);border-color:var(--vio);box-shadow:inset 3px 0 0 var(--vio),0 0 22px rgba(194,107,255,.2)}
  @media (hover:hover){.drow:not(.on):hover{background:rgba(194,107,255,.1);border-color:rgba(194,107,255,.5)}}
  .drow:has(.dn:focus-visible){border-color:var(--txt);box-shadow:0 0 0 1px var(--txt)}
  .drow.on:has(+ .dstrip){margin-bottom:0;border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:inset 3px 0 0 var(--vio),0 -10px 20px -8px rgba(194,107,255,.28)}
  .dtab .drow td,.dtab .drow.on td,.dtab .drow:hover td{display:block;height:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left}
  .dtab .drow:has(.dn:focus-visible) td{border:0;border-radius:0;background:none;box-shadow:none}
  .dtab .drow td.c-star{order:1;width:auto}
  .rad{display:none} /* (no radio mark on a two-line row: there is no room, the bar, the outline and the bold name say which is picked, and the pills at the top of a phone sheet carry the choice) */
  .drow.on .star{min-width:54px;padding:4px 8px}
  .dtab .drow td.c-name{order:2;flex:1 1 0;min-width:0;width:auto;max-width:none}
  .dtab .drow td.c-mob{order:3;display:block;margin-left:auto;color:var(--dim);font-size:13px;font-weight:500}
  .dtab .drow td.c-bpm,.dtab .drow td.c-len{display:none}
  .dn small{display:none} /* (the guest's credit is on line 2, in .c-guest, before CS) */
  .dtab .drow td.c-guest{order:4;display:block;flex:0 0 calc(100% - 64px);min-width:0;margin-left:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute);font-size:12px}
  .dtab .drow td.c-cs,.dtab .drow td.c-ar,.dtab .drow td.c-od,.dtab .drow td.c-hp{order:5;display:inline-flex;align-items:baseline;gap:5px;min-width:0;margin-right:10px}
  .dtab .drow td.c-cs{margin-left:64px}
  .dtab .drow td.c-n::before{content:attr(data-k);color:var(--mute);font-size:12px;font-weight:600;letter-spacing:.3px}
  .dtab .drow td.c-n b{font-size:13px;color:var(--dim)}
  .dtab .drow.on td.c-n b,.dtab .drow.on td.c-mob{color:var(--txt)} /* (the picked row: its figures in the primary colour, like the wide table) */
  .dtab .drow td.c-n.none{display:none}
  .drow.on:has(.dn:focus-visible){border-color:var(--txt);box-shadow:inset 3px 0 0 var(--vio),0 0 0 1px var(--txt)} /* (after the strip rules above: a keyboard ring on the picked row too) */
  .dstrip{display:block;margin-bottom:2px;background:var(--selbg);border:1px solid var(--vio);border-top:0;box-shadow:inset 3px 0 0 var(--vio),0 10px 20px -8px rgba(194,107,255,.28);border-radius:0 0 8px 8px}
  .dstrip>td{display:block;border:0;background:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);border-radius:0}
}
@container (max-width:340px){ /* (320px phones: CS AR OD HP stay on one line, even "4.5 10 9.5 8") */
  .dtab .drow td.c-cs,.dtab .drow td.c-ar,.dtab .drow td.c-od,.dtab .drow td.c-hp{gap:3px;margin-right:7px}
  .dtab .drow td.c-hp{margin-right:0}
}
/* #dStats is kept (hidden): every figure of the picked difficulty is in its row or in the strip under it */
.dstats{display:none}
/* footer: the main buttons, on a plain surface with a soft shade above instead of a border */
.dfoot{position:relative;flex:0 0 auto;display:flex;gap:8px;padding:14px 24px calc(16px + env(safe-area-inset-bottom));background:var(--s1);box-shadow:0 -16px 20px -16px rgba(0,0,0,.5)}
.dfoot .btn{height:44px;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.dfoot .btn.ghost{border-color:rgba(255,255,255,.09);color:var(--dim)}
@media (hover:hover){.dfoot .btn.ghost:hover{color:var(--txt)}}
.dfoot .btn.main{flex:1;min-width:0}
@media (max-width:360px){.dfoot .btn{padding:0 12px}.dfoot .btn .gostar{padding:2px 6px;font-size:11px}}
.dfoot .btn .gostar{flex:0 0 auto;min-width:0;padding:3px 9px;font-size:12px;box-shadow:0 0 0 2px rgba(21,24,37,.5)} /* (the picked difficulty's star chip before "Preview: …"; the dark ring keeps it apart from the violet button) */
@media (min-width:701px){.dfoot{justify-content:flex-end}.dfoot .btn{min-width:150px}.dfoot .btn.main{flex:0 1 380px}.dfoot.edfirst #dEdit{flex:0 1 380px}}
@media (max-width:700px){
  .dcover{min-height:136px}
  .dhead{padding:54px 20px 12px}.dhead b{font-size:20px}
  .dchips{top:14px;left:20px}
  .dclose{top:8px;right:8px}
  .dacts{padding:2px 20px 14px}.ddlmenu{left:20px;right:20px}
  .dhave{margin:0 20px 12px}
  .dtlabel{padding:14px 20px 4px}.dlist{padding:0 8px 8px}
  .dilabel{padding:8px 20px 8px}.dmeta{padding:0 20px 20px}.dlabel{padding-left:20px;padding-right:20px}
  .dfoot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
}
/* phones: the set information comes right after the cover and the actions, above the difficulties, as compact label/value rows (renderSetMeta
   draws includes, source, dates, rating and nominators in .dextra, always visible, at every width: on a wide screen they fill the information column, which scrolls); only the tags and the volume stay behind "More details" */
.dextra:empty{display:none}
/* phones: the picked row's CS AR OD HP are in the row itself, so the strip under it holds only the extra facts (circles, sliders, spinners, combo, drain time, ID); no extra facts (a local file): no strip at all */
@media (max-width:700px){
  .dsbars{display:none}
  .dstrip:not(:has(.dsobj)){display:none}
  .drow.on:has(+ .dstrip:not(:has(.dsobj))){margin-bottom:2px;border-bottom-color:var(--vio);border-radius:8px;box-shadow:inset 3px 0 0 var(--vio),0 0 22px rgba(194,107,255,.2)}
  .drow.on:has(.dn:focus-visible):has(+ .dstrip:not(:has(.dsobj))){border-color:var(--txt);box-shadow:inset 3px 0 0 var(--vio),0 0 0 1px var(--txt)}
}
@media (max-width:700px){
  .dilabel{display:none}
  .dmeta{order:4;padding:0 20px 6px}
  .dorig{margin:0 0 8px}
  .dmeta .dkv{grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:start;min-height:0;padding:3px 0;line-height:1.4}
  .dmeta .dkv dt{line-height:20px}
  .dmeta .dkv dd{min-height:20px;display:flex;align-items:center;flex-wrap:wrap}
  .dmeta .dkv.tags{display:block}
  .dfacts{margin:6px 0 2px;gap:4px}
  .dnoms{gap:2px 12px}
  .dmorebtn{margin-top:8px;padding:10px 0 6px}
  .dtlabel{padding-top:10px}
}
@media (max-width:900px){
  #select .searchbar{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px;gap:8px}
  .sbq{flex:1 1 100%}
  #select #filters{flex:1 1 auto;overflow-x:auto}
  .sbtools .mirror .lbl{display:none}
}

/* ---- touch targets: the links in the panel get a taller hit area through padding (the negative margin keeps the look): --hp is 3px with a pointer
   (>= 24px tall), 5px on phones (>= 28px). The cover's mapper line clips its content, so it carries the padding itself too ---- */
#dBody{--hp:3px}
.dwho .mlink,.dnoms .dmnom{padding-block:var(--hp);margin-block:calc(-1 * var(--hp))}
.dhead small{--hq:calc(var(--hp) + 1.5px);position:relative;padding-block:var(--hq);margin-block:calc(-1 * var(--hq))} /* (relative: above the artist line, which is translucent and so paints over a plain block) */
.dhead small .mlink{padding-block:var(--hq)} /* (inline, so a long name still ends in "…"; an inline box is as tall as its font, hence the extra 1.5px) */
.dlink,.dsid{display:inline-block;line-height:1.5;padding-block:var(--hp);margin-block:calc(-1 * var(--hp))}
.dmore .dmtag.plain{display:inline-block;padding-block:var(--hp);margin-block:calc(-1 * var(--hp))}
.dmore .dmtagrow{row-gap:calc(2 * var(--hp))}
.dnoms,.dfacts{row-gap:calc(2 * var(--hp))}
.dvol .vrow input{height:36px}
@media (max-width:700px){
  #dBody{--hp:5px}
  .dacts .btn{min-height:44px}
  .dmorebtn{min-height:44px;margin-top:4px;padding-block:0}
  .dmore .dmtag:not(.plain){height:28px}
}
/* the grab handle: while the sheet is scrolled, a solid band (the sheet's own colour, 48px, fading out below it) carries the handle and the close button, so the text passing under them stays clean; at the top they float over the cover as before */
@media (max-width:700px){
  .dgrab::before{content:"";position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(var(--s1) 80%,rgba(27,31,47,0));opacity:0;transition:opacity .15s;pointer-events:none}
  .dpanel.dscr .dgrab::before{opacity:1}
}
/* phones: the rail of difficulty pills under Listen / Share / Download (js dRailBuild): one 44px pill per difficulty (star chip + short name), the picked one filled violet,
   ringed and a little bigger; scroll-snap, the edges fade while it scrolls that way (.fl / .fr set from js); 56px in all. Not on wider screens, not for a single difficulty. */
.drail{display:none}
@media (max-width:700px){
  .drail{order:3;--fl:0px;--fr:0px;display:flex;align-items:center;gap:8px;padding:6px 20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:20px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
  .detail.dlate .drail{animation:dRise .32s var(--ease) .18s backwards} /* (comes in with the rest of the content, like Set information) */
  .drail::-webkit-scrollbar{display:none}
  .drail.fl{--fl:28px}.drail.fr{--fr:28px}
  .drail[hidden]{display:none}
  .dpill{flex:0 0 auto;scroll-snap-align:center;display:inline-flex;align-items:center;gap:8px;max-width:240px;height:44px;padding:0 13px 0 7px;border:1px solid rgba(233,235,247,.26);border-radius:999px;background:transparent;color:var(--txt);font:inherit;font-size:13px;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color 140ms ease-out,border-color 140ms ease-out,box-shadow 140ms ease-out,transform 140ms ease-out}
  .dpill .star{min-width:0;padding:3px 8px;font-size:12px;box-shadow:none}
  .dpill .pname{min-width:0;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dpill.on{background:var(--vio);border-color:var(--vio);color:var(--vio-dk);font-size:14px;font-weight:700;box-shadow:0 0 0 3px rgba(194,107,255,.38);transform:scale(1.04)}
  .dpill.on .star{box-shadow:0 0 0 2px rgba(21,24,37,.55)}
  .dpill:active:not(.on){background:rgba(194,107,255,.16);border-color:var(--vio)}
  .dpill:focus-visible{outline:2px solid var(--txt);outline-offset:3px}
}
/* a press on the cover's title / artist / mapper line opens the whole text (js: .xp), again folds it */
.dhead{-webkit-tap-highlight-color:transparent}
.dhead.xp b{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}
.dhead.xp span,.dhead.xp small{white-space:normal;overflow:visible;text-overflow:clip}
.dhead.xp small{padding-block:0;margin-block:0}

/* ===================== redesign: motion on every page ===================== */
@keyframes vIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vPop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes vFade{from{opacity:0}to{opacity:1}}
@keyframes vSide{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes vUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes vBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vTick{0%{transform:scale(1)}40%{transform:scale(.9)}100%{transform:scale(1)}}
/* page change: the page slides up, its parts follow one after another */
.view.vin{animation:vIn .45s var(--ease)}
.view.vin:not(.homev)>*{animation:vIn .5s var(--ease) backwards;animation-delay:calc(var(--k,0) * .05s)}
.view.vin>:nth-child(2){--k:1}.view.vin>:nth-child(3){--k:2}.view.vin>:nth-child(4){--k:3}.view.vin>:nth-child(5){--k:4}.view.vin>:nth-child(6){--k:5}.view.vin>:nth-child(7){--k:6}.view.vin>:nth-child(n+8){--k:7}
/* Guide, Credits, Privacy, Changelog: sections and cards come in in order */
.page.vin>*{animation:vIn .5s var(--ease) backwards;animation-delay:calc(min(var(--n,0),10) * .045s)}
.page>:nth-child(2){--n:1}.page>:nth-child(3){--n:2}.page>:nth-child(4){--n:3}.page>:nth-child(5){--n:4}.page>:nth-child(6){--n:5}.page>:nth-child(7){--n:6}.page>:nth-child(8){--n:7}.page>:nth-child(9){--n:8}.page>:nth-child(10){--n:9}.page>:nth-child(n+11){--n:10}
.page.vin .credits>*{animation:vPop .5s var(--ease) backwards;animation-delay:calc(.2s + min(var(--c,0),8) * .04s)}
.credits>:nth-child(2){--c:1}.credits>:nth-child(3){--c:2}.credits>:nth-child(4){--c:3}.credits>:nth-child(5){--c:4}.credits>:nth-child(6){--c:5}.credits>:nth-child(7){--c:6}.credits>:nth-child(n+8){--c:7}
.pgh{color:var(--vio);font-weight:800;letter-spacing:-.2px}
.vhead h2{font-size:30px;font-weight:800;letter-spacing:-1px}
/* Editor page cards (find, create, open, live): flat, lift on hover, come in one by one */
.mcard{background:var(--s1);border-color:var(--bd);border-radius:var(--r-card);transition:transform .28s var(--ease),border-color var(--t) ease-out,background var(--t) ease-out;animation:vPop .55s var(--ease) backwards}
.mcard::before{display:none}
.mcard .mic{border-radius:var(--r-ctl);box-shadow:none;transition:transform .3s var(--ease)}
.mcard b{font-weight:800;letter-spacing:-.4px}
.mcard em{color:var(--vio)}
.menu .mcard:nth-child(2){animation-delay:.06s}.menu .mcard:nth-child(3){animation-delay:.12s}.menu .mcard:nth-child(4){animation-delay:.18s}
@media (hover:hover){a.mcard:hover,.mcard:focus-within{transform:translateY(-3px);border-color:var(--s3);box-shadow:none}a.mcard:hover .mic{transform:rotate(-6deg) scale(1.06)}a.mcard:hover em{transform:translateX(5px)}}
/* lists everywhere: drafts, projects, difficulty rows, cards */
.grid>.card{animation:vPop .5s var(--ease) backwards;animation-delay:calc(min(var(--i,0),12) * .035s)}
.dlist .drow{animation:vSide .28s var(--ease) backwards;animation-delay:calc(.08s + min(var(--i,0) * 25ms,110ms))}
.drafts>*{animation:vIn .45s var(--ease) backwards}
/* dialogs, sheets, menus and toasts */
.mdl{animation:vFade .18s ease-out}
.mdlp{background:var(--s1);border-color:var(--bd);border-radius:var(--r-card);animation:vPop .32s var(--ease)}
.mdlp::before{background:var(--vio)}
.sheet{background:var(--s1);border-left:1px solid var(--bd);animation:vSide .32s var(--ease)}
.sheet>*{animation:vIn .4s var(--ease) backwards}.sheet>:nth-child(2){animation-delay:.04s}.sheet>:nth-child(3){animation-delay:.08s}.sheet>:nth-child(n+4){animation-delay:.12s}
@media (max-width:760px){.sheet{animation:vUp .34s var(--ease)}}
.volpop{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-card);box-shadow:0 12px 34px rgba(0,0,0,.45);animation:vIn .22s var(--ease)}
.toast{background:var(--s2);border-color:var(--bd);border-left:3px solid var(--vio);border-radius:var(--r-ctl);transition:opacity .2s ease-out,transform .35s var(--ease)}
/* buttons and chips answer the press */
.btn:active:not(:disabled),.chip:active,.icon:active{animation:vTick .18s var(--ease)}
.chips .chip.on{animation:vPop .25s var(--ease)}
/* editor chrome: flat tabs with a violet bar, tool buttons, panels that slide in */
.edtabs{padding:0;gap:0;border-radius:var(--r-ctl);background:none}
.edtabs button{position:relative;height:38px;padding:0 14px;border-radius:0;color:var(--dim);font-weight:600;transition:color var(--t) ease-out,background var(--t) ease-out}
@media (hover:hover){.edtabs button:not(.on):hover{color:var(--txt);background:var(--s2)}}
.edtabs button.on{background:var(--s2);color:var(--txt);font-weight:700}
.edtabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--vio);animation:vBar .3s var(--ease)}
#player.editing .bar.top{background:var(--s1);box-shadow:0 1px 0 var(--bd)}
.edcol button{border-color:var(--bd);background:var(--s1);color:var(--txt);border-radius:var(--r-ctl);transition:background var(--t) ease-out,border-color var(--t) ease-out,transform .2s var(--ease)}
.edcol button svg{stroke:currentColor}
.edcol button small{color:var(--dim)}
@media (hover:hover){.edcol button:not(.on):hover{background:var(--s2);transform:translateX(2px)}.edcol.right button:not(.on):hover{transform:translateX(-2px)}}
.edcol button.on{background:var(--vio);border-color:var(--vio);color:var(--vio-dk);animation:vTick .22s var(--ease)}
.edcol button.on small{color:var(--vio-dk)}
.edcol button.lit{background:var(--ice);border-color:var(--ice);color:#142545}
.edcol button.lit small{color:#142545}
.edpanel{background:var(--bg);animation:vIn .32s var(--ease)}
.edpanel>*{animation:vIn .4s var(--ease) backwards}.edpanel>:nth-child(2){animation-delay:.04s}.edpanel>:nth-child(3){animation-delay:.08s}.edpanel>:nth-child(n+4){animation-delay:.12s}
/* the player: bars slide away and back */
.ui .bar{transition:opacity .25s ease-out,transform .35s var(--ease)}

/* ===================== redesign: editor ===================== */
#player.editing .bar.bottom{background:var(--s1);box-shadow:0 -1px 0 var(--bd)}
.edtime{background:var(--s2);font:700 15px/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.edtl{background:var(--bg)}
.edcol .edsec{display:none}
.edcol button small{font-weight:600;line-height:1.1}
#edNC.lit{background:var(--vio);border-color:var(--vio);color:var(--vio-dk)}
#edNC.lit small{color:var(--vio-dk)}
.edcol button.mixed{background:linear-gradient(135deg,var(--ice) 0 50%,var(--s1) 50%);border-color:var(--ice)}
.edcol button.place{background:transparent;border:2px dashed var(--ice)}
#player.editing .icon.play{border-radius:50%}
/* the bottom bar: list buttons with an icon and a name, the history buttons (phones) as plain squares */
.sidebtn{display:inline-flex;align-items:center;gap:6px}
.sidebtn svg,.edinfo>#edUndo svg,.edinfo>#edRedo svg,.edinfo>#edDel svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.edinfo>#edUndo,.edinfo>#edRedo,.edinfo>#edDel{flex:0 0 auto;display:grid;place-items:center;width:38px;height:36px;padding:0;border:1px solid var(--bd);border-radius:var(--r-ctl);background:var(--s2);color:var(--txt);cursor:pointer}
.edinfo>#edUndo:disabled,.edinfo>#edRedo:disabled,.edinfo>#edDel:disabled{opacity:.35}
.edinfo>#edUndo small,.edinfo>#edRedo small,.edinfo>#edDel small{display:none}
/* the sample set and additions group: on smaller screens its buttons are plain items of their column or row */
.edbanks,.bankrow{display:contents}
.edbanks .edsec,.edbanks .addrow{display:none}
/* desktop, laid out like osu!'s editor: two solid columns of big labelled buttons; on the left the sample set and
   additions (editor.js edToolRow puts them there) over the object tools, on the right new combo, the hitsounds and the
   snaps. Advanced adds its tools under them, so nothing moves. The playfield fits itself between them (player.js) */
@media (min-width:1100px) and (min-height:560px){
  #player.editing .edcol{width:88px;padding:10px 8px;gap:5px;background:var(--s1)}
  #player.editing .edcol.left{border-right:1px solid var(--bd)}
  #player.editing .edcol.right{border-left:1px solid var(--bd)}
  .edcol button{position:relative;width:72px;min-height:50px;gap:4px;font-size:16px;font-weight:800}
  .edcol button svg{width:23px;height:23px}
  .edcol button small{font-size:10.5px;font-weight:600}
  .edcol button.adv,#edUndo,#edRedo,#edDel{min-height:40px}
  .edcol button.adv{gap:2px;padding-top:2px;padding-bottom:2px}
  .edcol button.adv svg{width:18px;height:18px}
  #edUndo svg,#edRedo svg,#edDel svg{width:19px;height:19px}
  .edcol.left [data-tool]::after{position:absolute;top:4px;right:6px;font-size:9.5px;font-weight:700;color:var(--mute)}
  .edcol.left [data-tool].on::after{color:var(--vio-dk)}
  .edcol.left [data-tool=select]::after{content:"1"}.edcol.left [data-tool=circle]::after{content:"2"}.edcol.left [data-tool=slider]::after{content:"3"}.edcol.left [data-tool=spinner]::after{content:"4"}
  .edcol .sep{margin:3px 6px;background:var(--bd)}
  #edBanks{display:flex;flex-direction:column;gap:4px;margin-bottom:2px}
  #edBanks .edsec{display:block;margin-top:2px;font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mute);white-space:nowrap}
  #edBanks .bankrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  #edBanks button{width:auto;min-height:28px;padding:0;font-size:13px;font-weight:800}
  #edBanks button small{display:none}
  @media (hover:hover){.edcol button:not(.on):hover{transform:none;border-color:var(--s3)}}
  .edinfo{gap:6px}
  .edinfo .btn.sm{min-height:34px}
}
/* phones held upright: the title stays in the top bar, the timeline gets the width (time and beat snap stacked on its
   left), the object tools are one row of equal buttons, the hitsound and snapping buttons a grid of two lines above
   the bottom bar, and the hint has a line of its own over the action buttons (editor.js edToolRow moves undo / redo /
   delete there) */
@media (orientation:portrait) and (max-width:760px){
  #player.editing .toprow .meta{display:flex;flex:1 1 0;min-width:0} /* (it gives way before the buttons wrap) */
  #player.editing .toprow{gap:4px}
  #player.editing .bar.top .icon{width:36px;height:36px}
  #player.editing .edadvbtn{padding:0 6px;height:36px}
  #player.editing .edsave{height:36px;min-height:36px;padding:0 8px}
  #player.editing .toprow:has(.diffq:not([hidden])) .meta{display:none} /* (a set with several difficulties: the picker names the one open, cut short with … if it's still too long) */
  #player.editing .toprow .diffq{order:5;flex:1 0 100%;min-width:0;width:auto;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* (a line of its own under the buttons, the tabs under it) */
  #player.editing .meta b{font-size:13.5px}
  #player.editing .meta span{display:block;font-size:11px;color:var(--dim)}
  #player.editing .edtop{display:grid;grid-template-columns:76px minmax(0,1fr) 28px 28px;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:4px 6px;height:min(max(var(--tlh,60px),56px),max(56px,24dvh))}
  #player.editing .edtime{grid-area:1/1;min-width:0;padding:0 4px;font-size:12.5px}
  #player.editing .edsnap{grid-area:2/1;min-width:0}
  #player.editing .edsnap small{display:none}
  #player.editing .edsnap select{width:100%;height:100%;min-height:0;padding:0 4px;font-size:12px;color:var(--vio);font-weight:700}
  #player.editing .edtl{grid-area:1/2/3/3;width:100%;height:100%}
  #player.editing .tlzoom{grid-area:1/3/3/4}
  #player.editing .tlzoom button{width:28px}
  #player.editing .tllock{grid-area:1/4/3/5}
  /* (the tool rows and the action row: the dock, "agent 11: portrait editor dock" at the end of this file) */
  #player.editing .botrow{flex-wrap:nowrap;gap:8px}
  #player.editing .botrow .seekwrap{order:0;flex:1 1 auto;height:40px}
  #player.editing #tCur{display:none}
  #player.editing .botrow #tDur{margin:0}
  #player.editing .botrow #tDur::before{content:none}
  #player.editing .icon.play{width:44px;height:44px}
}
/* short phones (an iPhone SE): the hint keeps to one line and the timeline is a little lower, so the playfield keeps a
   usable height (the tool rows stay as on taller phones, so no button moves when Advanced is turned on) */
@media (orientation:portrait) and (max-width:760px) and (max-height:760px){
  #player.editing .edtop{height:min(max(var(--tlh,52px),52px),max(52px,22dvh))}
}

/* ===================== editor: Simple / Advanced tools, Compare's panel ===================== */
/* Simple (the default, editor.js edAdv): the modding and mapping tools (class "adv") are hidden */
#player.editing:not(.edadv) .adv{display:none!important}
.edadvbtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 8px;border:1px solid var(--bd);border-radius:var(--r-ctl);background:var(--s2);color:var(--dim);font:700 13px/1 Inter,"IBM Plex Sans Thai",system-ui,sans-serif;cursor:pointer;transition:color var(--t) ease-out,border-color var(--t) ease-out,background var(--t) ease-out}
.advsw{position:relative;flex:0 0 auto;width:28px;height:16px;border-radius:8px;background:var(--s3);transition:background var(--t) ease-out}
.advsw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--dim);transition:transform var(--t) ease-out,background var(--t) ease-out}
.edadvbtn[aria-pressed=true]{color:var(--txt);border-color:var(--vio)}
.edadvbtn[aria-pressed=true] .advsw{background:var(--vio)}
.edadvbtn[aria-pressed=true] .advsw::after{transform:translateX(12px);background:var(--vio-dk)}
@media (hover:hover){.edadvbtn:hover{color:var(--txt);background:var(--s3)}}
#player.editing.edcompact .edadvbtn{height:24px;padding:0 8px 0 6px;font-size:11.5px;gap:6px}
@media (max-width:520px){.edadvbtn{padding:0 8px;height:40px}.edadvbtn>span:last-child{display:none}} /* (phones: the switch alone, its title says what it is) */
/* Compare: the panel at the bottom right of the playfield while the other version shows faint (compare.js cmpDock) */
.cmpdock{position:absolute;z-index:3;width:252px;padding:6px 8px 10px 10px;border:1px solid var(--bd);border-radius:var(--r-card);background:var(--s1);box-shadow:0 10px 30px rgba(0,0,0,.35);animation:vPop .25s var(--ease)}
.cmpdock.min{padding-bottom:6px}
.cmpdhead{display:flex;align-items:center;gap:6px}
.cmpdfold{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:28px;padding:0 2px;border:0;background:none;color:var(--txt);font:inherit;text-align:left;cursor:pointer}
.cmpdfold b{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.cmpdfold::after{content:"";width:6px;height:6px;margin:0 4px 2px 0;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);transition:transform var(--t) ease-out}
.cmpdock.min .cmpdfold::after{transform:rotate(-135deg);margin-bottom:-2px}
.cmpdval{margin-left:auto;font-size:12px;font-weight:600;color:var(--dim);font-variant-numeric:tabular-nums}
.cmpdoff{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:var(--r-ctl);background:var(--s2);color:var(--dim);font-size:13px;cursor:pointer}
@media (hover:hover){.cmpdoff:hover{background:var(--s3);color:var(--txt)}}
.cmpdrow{display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:8px;margin-top:6px;font-size:12.5px;font-weight:700}
.cmpdrow.before>span{color:var(--bc,var(--dim))}
.cmpdrow.after>span{color:var(--vio)}
.cmpdrow .edrange{display:flex;align-items:center;gap:8px;min-width:0}
.cmpdrow input[type=range]{flex:1;min-width:0;width:auto;margin:0;accent-color:var(--vio)}
.cmpdrow.before input[type=range]{accent-color:var(--bc,var(--dim))}
.cmpdrow output{width:36px;text-align:right;font-size:12px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.cmpdock.min .cmpdrow{display:none}
/* the before colour (compare.js cmpColorCtl): swatches and a colour picker, in the panel and in Settings → Editor */
.cmpdcol>span{color:var(--mute);font-weight:600}
.cmpcols{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:wrap}
.cmpcol{flex:0 0 auto;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);cursor:pointer}
.cmpcol.on{box-shadow:0 0 0 2px var(--s1),0 0 0 3.5px var(--txt)}
.cmpcols input[type=color]{flex:0 0 auto;width:24px;height:20px;padding:0;border:0;border-radius:var(--r-tag);background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.cmpcols input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.cmpcols input[type=color]::-webkit-color-swatch{border:1px solid var(--bd);border-radius:var(--r-tag)}
.row .cmpcols{justify-content:flex-end}
@media (max-width:520px){.cmpdock{width:236px}.cmpdval{white-space:nowrap}}
@media (orientation:portrait) and (max-width:520px){#player.editing #pVolBtn,#player.editing #draftChip{display:none}} /* (upright phones: the top bar keeps one row; volume is in Settings, drafts behind Save) */
/* Save (cloud.js): in the editor whenever "Save online" isn't there */
.edsave{display:none;flex:0 0 auto;min-height:34px;height:34px;padding:0 12px;gap:6px;background:var(--vio);border-color:var(--vio);color:var(--vio-dk);font-weight:700}
.edsave svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#player.editing .edsave{display:inline-flex;align-items:center}
#player.editing #cloudBtn:not([hidden]) ~ .edsave,body.live-watch #player .edsave{display:none}
#player.editing.edcompact .edsave{min-height:24px;height:24px;padding:0 8px;font-size:11.5px}
@media (max-width:900px){.edsave span{display:none}#player.editing .edsave{padding:0 9px}}
/* the editor's panels (Timing, Setup, Verify…) never scroll sideways: on phones that let the whole page slide */
.edpanel{overflow-x:hidden}
.edpanel .wrap{min-width:0}
@media (max-width:520px){.dlrow{grid-template-columns:minmax(72px,30%) minmax(0,1fr) auto}.dlin{flex-wrap:wrap;row-gap:4px}} /* (phones: the time field keeps its width, Now goes under it instead of off the screen) */

/* ===================== agent A: editor hints and selection info ===================== */
/* the hint / selection line under the tools is gone: the selection shows in the timing pill on the playfield, the hint as a tip */
#player #edInfo #edSel{display:none}
/* the tool's hint: a small tip above the bottom bar for a few seconds (edHint in editor.js); a toast takes its place while it shows */
.edtip{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);z-index:19;width:max-content;max-width:min(720px,calc(100% - 32px));padding:6px 12px;border-radius:14px;background:rgba(18,14,25,.88);border:1px solid rgba(255,255,255,.08);color:#ddd8e8;font-size:12.5px;line-height:1.35;text-align:center;transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .2s ease-out,transform .3s ease-out}
.edtip.on{opacity:1;transform:translate(-50%,0)}
.toast.on~.edtip{opacity:0}
@media (max-width:520px){.edtip{font-size:12px;padding:5px 10px}}

/* ===================== agent B: editor bottom bar (time, title, bookmarks) ===================== */
/* the editor's top bar has no title (osu!'s neither): it is the bottom bar's song line, under the seek bar */
#player.editing .toprow .meta{display:none}
/* the time box sits by the play button, like osu!'s bottom-left time (the top timeline gets its width); #tCur goes */
#player.editing #tCur{display:none}
#player.editing .botrow .edtime{flex:0 0 auto;height:36px;min-width:98px;padding:0 10px;border:1px solid var(--bd);border-radius:var(--r-ctl);text-align:center;touch-action:manipulation}
#player.editing .botrow .edtime.held{background:var(--s3);border-color:var(--vio)}
#player.editing .botrow .edtimein{width:150px;cursor:text;outline:none;border-color:var(--vio);user-select:text;-webkit-user-select:text}
#player.editing .botrow .edtimein::placeholder{color:var(--mute)}
#player.editing .edbm{width:38px;height:36px}
#player.editing .edbm svg{width:18px;height:18px}
#player.editing .edbm.on{background:#2f6bd9;border-color:#4d9bff;color:#fff}
#player.editing .edbm.on svg{fill:#fff}
/* the seek bar with the song line under it (the bar keeps its own height above it) */
#player.editing .botrow .seekwrap{height:46px}
#player.editing #seek{bottom:auto;height:32px}
#player.editing #tl{height:10px;top:2px}
.edsong{position:absolute;left:11px;right:11px;bottom:0;font-size:11.5px;line-height:14px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* the top timeline: no time box at its left; on upright phones the beat snap there takes both rows */
@media (orientation:portrait) and (max-width:760px){
  #player.editing .edtop{grid-template-columns:58px minmax(0,1fr) 28px 28px}
  #player.editing .edsnap{grid-area:1/1/3/2}
  #player.editing .edsnap select{padding:0 2px;text-align:center}
}
/* phones: the time box, the bookmark and the speed get smaller and the duration goes, so the seek bar keeps its room */
@media (max-width:520px){
  #player.editing .botrow .edtime{min-width:0;height:34px;padding:0 6px;font-size:12.5px}
  #player.editing .botrow .edtimein{width:118px}
  #player.editing .edbm{width:34px;height:34px}
  #player.editing .botrow #tDur{display:none}
  #player.editing .ratesel{width:52px;height:34px;padding:0;text-align:center;text-align-last:center;-webkit-appearance:none;appearance:none} /* (no arrow: "100%" fits) */
  #player.editing .botrow{gap:6px}
}
/* the compact bar and short landscape screens: thinner */
#player.editing.edcompact .botrow .edtime,#player.editing.edcompact .edbm{height:28px;font-size:12.5px}
#player.editing.edcompact .botrow .seekwrap{height:40px}
#player.editing.edcompact #seek{height:27px}
#player.editing.edcompact .edsong{font-size:11px;line-height:13px}
@media (orientation:landscape) and (max-height:520px){
  #player.editing .botrow .seekwrap{height:40px}
  #player.editing #seek{height:27px}
  #player.editing .botrow .edtime,#player.editing .edbm{height:32px}
  .edsong{font-size:11px;line-height:13px}
}

/* ===================== agent D: audit fixes ===================== */
/* the tool tip: the redesign's small radius (like the toast), and gone with the player (it outlived it for up to 4 s) */
.edtip{border-radius:var(--r-card)}
body:has(#player[hidden]) .edtip{display:none}
/* upright phones with the height for it: the seek bar (and the song line under it) gets a row of its own, full width,
   instead of the ~120 px left between the time box and the speed; the play / time / bookmark / speed row goes under it */
@media (orientation:portrait) and (max-width:520px) and (min-height:780px){
  #player.editing .botrow{flex-wrap:wrap;row-gap:2px}
  #player.editing .botrow .seekwrap{order:-1;flex:1 0 100%}
  #player.editing .botrow .ratesel{margin-left:auto}
}

/* ===================== agent 1: search ===================== */
/* osu! keywords in the search box: the "?" Search tips button, its popover (tap an example to add it), keyword pills */
.kwbtn{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid var(--bd);border-radius:var(--r-tag);background:none;color:var(--dim);font:700 12px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:color var(--t) ease-out,border-color var(--t) ease-out,background var(--t) ease-out}
.kwbtn.on{color:var(--vio);border-color:var(--vio)}
@media (hover:hover){.kwbtn:hover{color:var(--txt);background:var(--s2)}}
.kwtips{position:absolute;top:100%;left:var(--gut,16px);z-index:8;width:min(600px,calc(100% - 2 * var(--gut,16px)));max-height:min(70vh,560px);overflow:auto;margin-top:6px;padding:14px 16px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-card);box-shadow:0 12px 32px rgba(0,0,0,.45);animation:vFade .15s ease-out}
.kwhead{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.kwhead b{font-size:13.5px}
.kwhead span{color:var(--dim);font-size:12.5px}
.kwgrid{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center}
.kwrow{display:contents}
@media (min-width:1000px){.kwtips{width:min(880px,calc(100% - 2 * var(--gut,16px)))}.kwgrid{grid-template-columns:auto 1fr auto 1fr}}
.kwex{justify-self:start;max-width:100%;padding:3px 7px;border:1px solid var(--bd);border-radius:var(--r-tag);background:var(--s2);color:var(--txt);cursor:pointer;text-align:left;transition:border-color var(--t) ease-out,color var(--t) ease-out}
.kwex code,.kwpill span{font:500 12px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
@media (hover:hover){.kwex:hover{border-color:var(--vio);color:var(--vio)}}
.kwd{color:var(--dim);font-size:12.5px;min-width:0}
.kwfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--bd);color:var(--dim);font-size:12.5px}
.kwops{margin-left:auto;color:var(--mute)}
@media (max-width:520px){
  .kwgrid{display:flex;flex-direction:column;align-items:stretch;gap:7px}
  .kwrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
  .kwd{font-size:12px}
  .kwops{margin-left:0}
}
/* the pills bar sits over the top of the list (position:absolute): the status line and its buttons move down under it */
#select:has(#advPills:not([hidden])) .subrow{margin-top:58px}

/* ===================== agent 3: editor tutorial ===================== */
/* the editor tour (edtour.js): a dim layer with a lit hole over one part of the editor and a small card beside it.
   Over sheets (4), menus (40) and toasts (20), under the pop-ups (.mdl, 80), so a question that opens anyway stays on top.
   The root catches every press (nothing under it can be used); the hole is drawn only (its shadow is the dim layer) */
.etour{position:fixed;inset:0;z-index:75;touch-action:none;animation:etourFade .16s ease-out}
.etour.out{opacity:0;transition:opacity .12s ease-out;pointer-events:none}
@keyframes etourFade{from{opacity:0}}
.etour-hole{position:fixed;left:50%;top:50%;width:0;height:0;border-radius:6px;box-shadow:0 0 0 200vmax rgba(10,12,20,.62);outline:2px solid var(--vio);outline-offset:0;pointer-events:none;
  transition:left .22s var(--ease),top .22s var(--ease),width .22s var(--ease),height .22s var(--ease)}
.etour-hole.none{outline:0}
.etour.init .etour-hole{transition:none}
.etour-card{position:fixed;left:16px;top:16px;z-index:1;width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - 32px);display:flex;flex-direction:column;gap:8px;
  padding:12px 14px 12px 16px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-card);box-shadow:0 14px 40px rgba(0,0,0,.55);
  color:var(--txt);font:400 13.5px/1.45 Inter,"IBM Plex Sans Thai",system-ui,sans-serif;touch-action:manipulation}
.etour-card.in{animation:etourIn .16s ease-out}
@keyframes etourIn{from{opacity:0;transform:translate(var(--ex,0),var(--ey,0))}}
.etour-bar{position:absolute;left:0;top:0;height:2px;width:calc(var(--k,0) * 100%);background:var(--vio);border-radius:var(--r-card) 0 0 0;transition:width .22s var(--ease)}
.etour-head{display:flex;align-items:center;gap:8px;min-height:28px}
.etour-count{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.etour-x{margin-left:auto;width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-ctl);background:var(--s2);color:var(--dim);cursor:pointer}
.etour-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (hover:hover){.etour-x:hover{background:var(--s3);color:var(--txt)}}
.etour-title{margin:-4px 0 0;font-size:15px;font-weight:800;letter-spacing:-.2px;line-height:1.3;color:var(--txt)}
.etour-body{margin:0;min-height:2.9em;flex:0 1 auto;overflow:auto;overscroll-behavior:contain;color:var(--dim)}
.etour-keys{display:flex;flex-wrap:wrap;gap:4px}
.etour-opt{align-self:flex-start;margin-top:2px}
.etour-opt input{margin:0;accent-color:var(--vio)}
.etour-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:4px}
.etour-foot .grow{margin-right:auto}
.etour-foot .btn.main{min-width:76px}
.etour-arrow{position:absolute;width:10px;height:10px;background:var(--s1);border:1px solid transparent;transform:rotate(45deg);pointer-events:none}
.etour-arrow.up{top:-6px;border-top-color:var(--bd);border-left-color:var(--bd)}
.etour-arrow.down{bottom:-6px;border-bottom-color:var(--bd);border-right-color:var(--bd)}
.etour-arrow.lt{left:-6px;border-bottom-color:var(--bd);border-left-color:var(--bd)}
.etour-arrow.rt{right:-6px;border-top-color:var(--bd);border-right-color:var(--bd)}
.etour-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.etour-setbtns{margin:2px 0 12px}
@media (pointer:coarse){.etour-foot .btn{min-height:40px}.etour-x{width:36px;height:36px}}

/* ===================== agent 4: QA fixes ===================== */
/* keyword / filter pills that wrap to 2+ lines no longer cover the status row and the first cards (--pills-h: listing.js) */
#select:has(#advPills:not([hidden])) .subrow{margin-top:calc(var(--pills-h,41px) + 17px)}

/* agent 3: status chips */
/* Beatmaps toolbar: the status chips never get cut. 901–1499px: two rows (search + mirror on top, every chip on the row under them);
   1500px+: one row, the chips keep their full width and the search box gives way (min 200px). The sideways scroll + edge fade (.sfl/.sfr) stays as the fallback, and phones keep the ≤900px layout */
#filters.chips{scroll-snap-type:x proximity;scroll-padding-inline:28px}
#filters.chips>.chip{scroll-snap-align:start}
@media (min-width:1500px){#select #filters{flex-shrink:0;max-width:calc(100% - 590px)}}
/* 1500px+: clicking / tabbing / pressing "/" into the search box stretches it (440 -> up to 760px). It takes the free room first, then the chips give way
   (they scroll, the edge fade shows it); the mirror + refresh stay put. Going back waits .28s so a chip pressed right after the blur (which happens on
   mousedown) is still under the pointer when the click lands */
@media (min-width:1500px){
  #select .sbq{transition:border-color var(--t) ease-out,flex .22s var(--ease) .28s}
  #select #filters{transition:flex .22s var(--ease) .28s}
  #select .sbq:focus-within{flex:0 0 clamp(440px,32vw,600px);transition-delay:0s,0s}
  #select .sbq:focus-within~#filters{flex-shrink:1;transition-delay:0s}
}
@media (min-width:901px) and (max-width:1499px){
  #select .searchbar{flex-wrap:wrap;height:auto;row-gap:10px;padding-top:12px;padding-bottom:10px}
  #select .sbq{order:1;flex:1 1 320px;max-width:none}
  #select .sbtools{order:2}
  #select #filters{order:3;flex:1 1 100%;margin:0 -2px;padding:0 2px}
}

/* agent 2: pills collapse */
/* pills that would wrap to 3+ rows fold to 2 (pillsFit, listing.js): hidden ones, the "+N" / "Show less" button */
.fpill.pcut{display:none}
.fpills .fmore{padding:0 11px;border-style:dashed;background:transparent;color:var(--txt);font-weight:700;white-space:nowrap}
.fpills .fmore[aria-expanded="true"]{font-weight:600;color:var(--dim)}
@media (hover:hover){.fpills .fmore:hover{background:rgba(194,107,255,.12);color:var(--ink)}}
.fpills .fmore:focus-visible{outline:2px solid var(--vio,#c26bff);outline-offset:2px}
.fpills>.mlink{white-space:nowrap}

/* agent 9: mobile home overflow */
/* The home page (.homev) is a one-column grid whose implicit `auto` column grew to its widest unbreakable content: a
   draft title (.drinfo b is nowrap) in "Unsaved work on this device". With drafts on the device the page became ~1000px
   wide on phones, the browser zoomed out and the sticky header covered only part of it. Pin the column to the screen
   and let every child shrink; long titles wrap (up to 3 lines) on phones instead of forcing the width. */
.homev{grid-template-columns:minmax(0,1fr)}
.homev>*,.hwrap>*,.drafts>*,.drrow{min-width:0}
.hchips>*{max-width:100%;overflow-wrap:anywhere}
@media (max-width:520px){
  .drinfo b{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
  .drinfo small{overflow-wrap:anywhere}
}
/* the beatmap detail sheet: a long unbreakable title / artist / mapper wraps instead of being cut at the edge */
.dhead b,.dhead span,.dhead small{overflow-wrap:anywhere}
/* Privacy page: "Delete everything this site stored in this browser" (.btn is nowrap) was wider than a phone */
#page .btn{max-width:100%;white-space:normal;height:auto;padding-top:8px;padding-bottom:8px;text-align:center}
/* safety net on phones: nothing in the page shell can widen the layout viewport (clip keeps the sticky header working;
   the player / editor live outside #shell) */
@media (max-width:760px){#shell{overflow-x:clip}}

/* agent 11: portrait editor dock (UX spec) */
/* upright phones (editor.js ONE_ROW): the top bar keeps one row of 40 px buttons, one tab strip and the timeline; every
   editing control sits in the bottom bar ("the dock", editor.js edDock moves the containers there): row 1 the object
   tools with Grid and DS (#edLeft), row 2 NC, W F C, N S D (#edRight), row 3 undo / redo / delete, the contextual slot,
   Tools (Advanced) and ⋯ (#edInfo), then the seek bar and the play row. Advanced's tools are in a tray over the rows
   (#edTray, opened by Tools), so the dock grows upward and no basic button moves. Elsewhere none of this shows. */
#edTray,.edctx,.edtraybtn,.trayic,.tlbl{display:none}
@media (orientation:portrait) and (max-width:760px){
  /* top: one row of 40 px buttons, the tab strip, the timeline */
  #player.editing .bar.top{gap:4px;padding:calc(env(safe-area-inset-top) + 4px) calc(env(safe-area-inset-right) + 8px) 4px calc(env(safe-area-inset-left) + 8px)}
  #player.editing .toprow{gap:4px;row-gap:4px}
  #player.editing .bar.top .icon,#player.editing .edsave{width:40px;height:40px;min-height:40px;padding:0;justify-content:center}
  #player.editing .edadvbtn{height:40px}
  #player.editing .edauto,#player.editing .edtest{min-height:40px;height:40px}
  #player.editing .bar.top .icon::after{width:100%} /* (the touch hit area stays inside the row: the buttons are 40 px wide here) */
  #player.editing #edRowBtn{display:none} /* (its "hide the tool rows" is in the ⋯ menu here) */
  #player.editing .toprow .diffq{order:0;flex:1 1 0;min-width:0;width:auto;max-width:none;height:40px} /* (a set with several difficulties: inline, it takes the free room) */
  #player.editing #back{order:-2}
  #player.editing #edTest,#player.editing #edAuto{order:-1}
  #player.editing .edadvbtn{margin-left:auto} /* (Advanced, Save, live and the gear to the right; the picker fills the gap when it's there) */
  #player.editing .edtabs{order:10;flex:1 0 100%;height:40px;padding:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--bd);overscroll-behavior-x:contain}
  #player.editing .edtabs button{height:40px;padding:0 12px;font-size:13px}
  #player.editing .edtabs [data-etab=notes]{order:1} /* (Mod notes last: turning Advanced on only adds to the end of the strip) */
  /* the timeline's zoom and lock buttons: 40 px wide (the two zoom buttons share its height) */
  #player.editing .edtop{grid-template-columns:58px minmax(0,1fr) 40px 40px}
  #player.editing .tlzoom button,#player.editing .tllock{width:40px}

  /* the dock: everything in the bottom bar, in flow */
  #player.editing .bar.bottom{gap:4px;padding:4px calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 8px)}
  #player.editing .bar.bottom>.edcol{position:static;display:grid;gap:3px;padding:0;background:none;border:0;overflow:visible;z-index:auto}
  #player.editing #edLeft button,#player.editing #edRight button{grid-column:auto;order:0;min-width:0;width:auto;height:44px;min-height:44px;padding:0 1px;margin:0}
  #player.editing #edLeft button small,#player.editing #edRight button small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;letter-spacing:0}
  #player.editing .edcol .sep,#player.editing .edcol .edsec,#player.editing #edBook{display:none} /* (Bookmark: the same toggle is next to the time box) */
  /* row 1: the 4 tools (1.25fr) | 6 px | Grid DS (1fr) */
  #player.editing #edLeft{grid-template-columns:repeat(4,minmax(0,1.25fr)) repeat(2,minmax(0,1fr))}
  #player.editing #edLeft #edGrid{margin-left:6px}
  /* row 2: NC | W F C | N S D, 6 px between the groups */
  #player.editing #edRight{grid-template-columns:repeat(7,minmax(0,1fr))}
  #player.editing #edRight #edW,#player.editing #edRight #edBankN{margin-left:6px}
  /* row 3 */
  #player.editing .edinfo{flex-wrap:nowrap;gap:3px;min-height:40px;overflow:visible}
  #player.editing #edInfo>button,#player.editing .edctx .btn,#player.editing .edctx>button{flex:0 0 40px;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;justify-content:center}
  #player.editing .edctx{display:flex;flex:1 1 0;align-items:center;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none}
  #player.editing .edctx::-webkit-scrollbar{display:none}
  #player.editing .edctx .edslider{gap:3px}
  #player.editing .edctx #edSliderDone{flex:0 0 auto;width:auto;min-width:40px;height:40px;padding:0 10px;border-radius:var(--r-ctl);font-weight:700}
  #player.editing .edctx #edHl span{display:none}
  #player.editing #edMenu{order:99;margin-left:auto}
  #player.editing.edadv #edInfo>.edtraybtn{position:relative;display:inline-flex;flex:0 0 56px;width:56px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;border:1px solid var(--vio);border-radius:var(--r-ctl);background:var(--s2);color:var(--txt);font-size:9px;font-weight:700;cursor:pointer}
  #player.editing .edtraybtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #player.editing .edtraybtn small{font-size:9px;font-weight:700;line-height:1}
  #player.editing.edadv #edInfo>.edtraybtn[aria-expanded=true]{background:var(--vio);color:var(--vio-dk)}
  #player.editing .edtraybtn .chev{position:absolute;top:2px;right:2px;width:10px;height:10px;transition:transform var(--t)}
  #player.editing .edtraybtn[aria-expanded=true] .chev{transform:rotate(180deg)}
  #player.editing .edtraybtn.has-on::before{content:"";position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:50%;background:var(--vio)}
  /* the tray */
  #player.editing.edadv.edtray #edTray{display:flex;flex-direction:column;gap:2px;padding-bottom:4px;border-bottom:1px solid var(--bd);animation:fadeIn .12s ease-out}
  #edTray .traycap{height:12px;line-height:12px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden}
  #edTray .trayrow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
  #edTray .annbtns{display:contents}
  #edTray button{position:relative;min-width:0;width:auto;height:44px;min-height:44px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 1px;border:1px solid var(--bd);border-radius:var(--r-ctl);background:var(--s2);color:var(--txt);font-size:15px;font-weight:600;line-height:1;cursor:pointer;transform:none}
  #edTray button svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #edTray .trayic,#edTray .tlbl{display:block}
  #edTray .edlbl{display:none}
  #edTray button small,#edTray .sbname{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:600;line-height:1.1;color:#cbbfe0}
  #edTray button:disabled{opacity:.35}
  #edTray button.lit,#edTray .annb.on,#edTray .sidebtn.lit{background:#2f6d99;border-color:var(--ice)}
  #edTray button.lit small,#edTray .annb.on small,#edTray .sidebtn.lit .sbname{color:#fff}
  #edTray .sidebtn[data-n]:not([data-n=""])::after{top:2px;right:2px}
  /* the other tabs: no compose toolbox, the panel gets the room */
  #player.editing[data-etab]:not([data-etab=compose]) :is(#edTray,#edLeft,#edRight,.edtraybtn,.edctx){display:none!important}
  /* ⋯ → Hide tool rows */
  #player.editing.edrowhid :is(#edTray,#edLeft,#edRight){display:none!important}
  body.live-watch #edTray{display:none!important} /* (a guest watching a live session: no tools, like the rows) */
  /* the play row: every control at least 40 px */
  #player.editing .botrow .edtime{height:40px}
  #player.editing .botrow .edbm{width:40px;height:40px}
  #player.editing .botrow .ratesel{height:40px}
  #player.editing .metro .mtxt{display:none}
  #player.editing .botrow .metro{min-width:40px;height:40px}
  /* overlays sit above the dock */
  .eddlg{bottom:calc(var(--insB,120px) + 8px);max-height:calc(100% - var(--insT,120px) - var(--insB,120px) - 16px)}
  #player.editing .livechat{bottom:calc(var(--insB,110px) + 8px)}
  .edside{left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);width:auto;top:auto;bottom:calc(var(--insB,120px) + 8px);max-height:calc((100% - var(--insT,120px) - var(--insB,120px)) * .6)}
}
@media (orientation:portrait) and (max-width:520px){
  #player.editing .edadvbtn{width:40px;padding:0;justify-content:center} /* (the switch alone here) */
}
@media (orientation:portrait) and (max-width:760px) and (max-height:760px){
  #edTray .traycap{display:none} /* (short phones: the tray without its captions) */
}
@media (orientation:portrait) and (max-width:374px){ /* (360 px: the Tools label goes, so the slider controls, Tools and ⋯ fit) */
  #player.editing.edadv #edInfo>.edtraybtn{flex-basis:40px;width:40px}
  #player.editing .edtraybtn small{display:none}
}

/* agent 9: mobile home overflow (part 2) */
/* narrow phones (320px): the mirror picker is as wide as its longest option ("Sayobot (download only)" in Thai) and
   "Create and open in the editor" (.cgo .btn, nowrap) was wider than the screen */
@media (max-width:900px){
  .sbtools{flex:0 1 auto;min-width:0;max-width:100%}
  .sbtools .mirror{flex:0 1 auto;min-width:0}
  .sbtools .mirror select{min-width:0;max-width:100%;text-overflow:ellipsis}
}
.cgo .btn{max-width:100%;white-space:normal;text-align:center}

/* beatmap detail: a long difficulty name in the Preview button ends in "…" instead of being cut on both sides */
.dfoot .btn .btxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Guide → Keyboard shortcuts: a long key combo ("Shift / Alt + Q W E R") wraps inside its chip, which grows with it
   (the global kbd has a fixed 18px height, so the 2nd line used to spill out of the chip) */
.krow{padding:4px 0}
.krow kbd{height:auto;min-height:24px;line-height:1.3;white-space:normal;overflow-wrap:anywhere}

/* the top bar on 761–900px (tablets upright, small windows): logo + 4 tabs + login + language + volume don't fit in
   one row there, so it takes the phones' two rows (the tabs under the logo) instead of pushing the page sideways */
@media (min-width:761px) and (max-width:900px){
  .apptop{flex-wrap:wrap;height:auto;padding-bottom:0;gap:0 10px}
  .apptop .brand{height:56px}
  .topnav{order:3;width:100%;margin:0;height:44px;justify-content:space-around}
  .topnav a{flex:1;justify-content:center;padding:0 6px;font-size:14px}
}
/* phones: six tabs in Thai or Malay are wider than the screen; a tab keeps its name on one line and the row scrolls
   sideways instead of breaking "หน้าแรก" into two */
@media (max-width:900px){
  .topnav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .topnav::-webkit-scrollbar{display:none}
  .topnav a{flex:1 0 auto;white-space:nowrap}
}

/* touch screens: text fields at 16 px at least, or iOS zooms the page in when one gets the focus (and leaves it zoomed);
   the pages stay zoomable. The player and the editor lock the zoom instead (player.js lockZoom), so their compact
   fields keep their size there */
@media (pointer:coarse){
  :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image]),textarea,select):not(#player *){font-size:16px!important}
}

/* ---------- Settings: a window floating in the middle of the screen (tabs down the left, the pane scrolls) ---------- */
.setdim{position:absolute;inset:0;z-index:4;background:rgba(8,10,18,.42);animation:setDimIn .2s var(--ease)}
@keyframes setDimIn{from{opacity:0}}
#sheet.setwin{inset:0;margin:auto;max-height:none;width:min(860px,calc(100% - 32px));height:min(640px,calc(100% - 40px));padding:0;z-index:5;
  display:grid;grid-template-columns:184px 1fr;grid-template-rows:auto 1fr;overflow:hidden;border:1px solid var(--bd);border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.6);animation:setWinIn .26s var(--ease)}
#sheet.setwin[hidden]{display:none}
@keyframes setWinIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
#sheet.setwin>*{animation:none}
#sheet.setwin .sheet-top{grid-column:1/-1;position:static;margin:0;padding:12px 14px 10px 18px;border-bottom:1px solid var(--bd);background:var(--s1)}
#sheet.setwin .sheet-h{margin:0}
#sheet.setwin .settabs{grid-column:1;flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;padding:10px 8px;border-radius:0;background:rgba(255,255,255,.025);border-right:1px solid var(--bd);overflow-y:auto}
#sheet.setwin .settabs .tab{flex:0 0 auto;height:38px;text-align:left;padding:0 12px;font-size:14px}
#sheet.setwin .settabs .tab:not(.on):hover{background:rgba(255,255,255,.06);color:var(--txt)}
#sheet.setwin .setbody{grid-column:2;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 20px 22px;touch-action:pan-y}
#sheet.setwin .spane>.subh:first-child,#sheet.setwin .spane>div>.subh:first-child{margin-top:12px}
/* upright phones and small windows: nearly the whole screen, the tabs one scrolling row at the top */
@media (max-width:640px){
  #sheet.setwin{width:calc(100% - 16px)!important;height:calc(100% - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin-top:calc(8px + env(safe-area-inset-top));grid-template-columns:1fr;grid-template-rows:auto auto 1fr;border-radius:8px}
  #sheet.setwin .settabs{grid-column:1;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:6px 8px;border-right:0;border-bottom:1px solid var(--bd)}
  #sheet.setwin .settabs .tab{text-align:center}
  #sheet.setwin .setbody{grid-column:1;padding:2px 14px 18px}
}
/* phones on their side: short, so the bars get thinner */
@media (max-height:500px) and (min-width:641px){
  #sheet.setwin{height:calc(100% - 16px);width:min(860px,calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
  #sheet.setwin .sheet-top{padding:8px 12px 6px 16px}
  #sheet.setwin .settabs{padding:6px}
  #sheet.setwin .settabs .tab{height:32px;font-size:13px}
}

/* ---------- timing window (F6) ---------- */
/* osu!stable's "Timing and Control Points" window in the site's look (the pop-ups' panel, tabs, switches): the selected
   point on the left, the list on the right, the options and OK / Cancel under them. It floats over the editor and is
   dragged by its title bar (timingwin.js places it); phones get a full-screen panel with the two halves stacked */
.twin{position:absolute;z-index:5;left:0;top:0;width:min(900px,calc(100% - 24px));max-height:calc(100% - 24px);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--s2),var(--bg2) 120px);border:1px solid rgba(255,255,255,.09);border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 80px rgba(0,0,0,.6);animation:fadeIn .16s ease-out;touch-action:pan-y;color:var(--txt);font-size:13px;overflow:hidden}
.twin:focus{outline:none}
.twin::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,var(--sky),transparent);opacity:.8}
.twhead{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-bottom:1px solid rgba(255,255,255,.07);cursor:move;touch-action:none;flex:0 0 auto}
.twhead b{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.twro{padding:2px 8px;border-radius:var(--r-tag);background:var(--s3);color:var(--dim);font-size:11.5px}
.twbody{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr);gap:16px;padding:12px 16px 6px;min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain}
.twin .tabs{margin:0 0 10px}
.twin .tab{height:34px}
.twpane{display:grid;gap:2px;align-content:start}
.twrow{display:grid;grid-template-columns:minmax(84px,32%) minmax(0,1fr);gap:8px;align-items:center;min-height:42px;color:var(--dim)}
.twrow>.twlbl{overflow-wrap:anywhere}
.twin input[type=text],.twin input[type=number]{height:34px;min-width:0;width:100%;padding:0 8px;border-radius:4px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}
.twin input.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,90,110,.18)}
.twin input:disabled,.twin select:disabled{opacity:.5;cursor:default}
.twspin{display:flex;gap:4px;align-items:center;min-width:0}
.twspin input{flex:1}
.twspin .btn.sm{flex:0 0 auto;width:34px;min-height:34px;padding:0;font-size:16px}
.twoff{display:flex;flex-direction:column;gap:2px;min-width:0}
.twts{color:var(--dim);font-size:12px;padding-left:40px}
.twnow{justify-self:start}
.twsig{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.twradio{display:flex;gap:8px;align-items:center;min-height:32px;color:var(--txt);cursor:pointer}
.twradio input[type=radio]{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--pink)}
.twradio input[type=text]{width:58px;flex:0 0 auto}
.twradio input:disabled+span{opacity:.5}
.twvol{display:flex;gap:8px;align-items:center;min-width:0}
.twvol input[type=range]{flex:1;min-width:0;accent-color:var(--pink)}
.twin .twvol input[type=number]{width:62px;flex:0 0 auto}
.twplays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.twplays .btn{padding:0 6px}
.twsw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;color:var(--txt);cursor:pointer}
.twpane .hint{margin:0 0 8px}
.twright{min-width:0;display:flex;flex-direction:column}
.twtbl{overflow:auto;height:min(44dvh,330px);border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);overscroll-behavior:contain;touch-action:pan-x pan-y}
.twtbl table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.twtbl th{position:sticky;top:0;z-index:1;background:var(--s3);color:var(--dim);font-weight:600;font-size:11.5px;text-align:left;padding:7px 8px;white-space:nowrap}
.twtbl td{padding:0 8px;height:30px;white-space:nowrap;border-top:1px solid rgba(255,255,255,.05)}
.twtbl tbody tr{cursor:pointer}
@media (hover:hover){.twtbl tbody tr:not(.twempty):hover{background:rgba(255,255,255,.06)}}
.twtbl tbody tr.on,.twtbl tbody tr.on:hover{background:rgba(194,107,255,.22)}
.twtbl td.hint{white-space:normal;padding:10px;cursor:default}
.twdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--red);vertical-align:1px}
.twtbl tr.green .twdot{background:var(--teal)}
.twtbl tr.green td:nth-child(2){color:var(--teal)}
.twk{color:#ffd84a;text-align:center}
.twlfoot{display:flex;align-items:center;gap:8px;margin-top:8px}
.twlfoot .chkrow{flex:1;min-width:0}
.twlfoot .btn.sm{width:40px;padding:0;font-size:16px}
.twapply{margin:6px 16px 0;padding:10px 0 2px;border-top:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.twapply h4{margin:0 0 8px;font-size:13px;color:var(--pink)}
.twopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.twopts .chkrow{min-height:28px}
.twdiv select{height:32px;padding:0 8px}
.twfoot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px 14px;flex:0 0 auto}
.twfoot .btn{min-width:104px}
/* phones (and short landscape screens): the whole screen, scrolled as one; upright, the halves stacked */
@media (max-width:760px),(max-height:520px){
  .twin{left:0!important;top:0!important;right:0;bottom:0;width:auto;max-height:none;border:0;border-radius:0;overflow:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  .twin::before{display:none}
  .twhead{cursor:default;position:sticky;top:0;z-index:3;background:var(--s2)}
  .twbody{overflow:visible;flex:none}
  .twfoot{position:sticky;bottom:0;z-index:3;background:var(--s1);border-top:1px solid rgba(255,255,255,.07);padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}
  .twfoot .btn{flex:1}
}
@media (max-width:760px){
  .twbody{grid-template-columns:minmax(0,1fr);gap:12px}
  .twright{order:-1} /* (the list first, like a pick-then-edit screen) */
  .twtbl{height:auto;max-height:34dvh}
  .twopts{grid-template-columns:minmax(0,1fr)}
  .twtbl td,.twtbl th{padding-left:6px;padding-right:6px}
}

/* ===== Admin → Features ===== */
.afstate{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;margin:0 0 14px;border:1px solid var(--bd);border-radius:var(--r-card);background:var(--s1)}
.afstate.off{border-color:var(--red);background:rgba(255,107,138,.08)}
.afgroup{margin:0 0 16px}
.afgroup h4{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)}
.afrow{padding:9px 12px;margin:0 0 6px;border:1px solid var(--bd);border-radius:var(--r-ctl);background:var(--s1)}

/* ===== Replays (js/replayui.js): the results screen, the end menu and the Replays page ===== */
/* results screen: a full-screen layer over the page (and over the player when it is opened after a replay) */
.rpres{position:fixed;inset:0;z-index:9;overflow:hidden auto;overscroll-behavior:contain;background:#0d0f19;color:var(--txt);display:flex;flex-direction:column}
.rpbg{position:fixed;inset:-48px;background:radial-gradient(ellipse at 30% 20%,#3a2a58,#151825 70%) center/cover;filter:blur(26px) brightness(.42) saturate(1.15);pointer-events:none}
.rpbg[style]{background-size:cover;background-position:center}
.rpin{position:relative;margin:auto;width:100%;max-width:1040px;padding:calc(env(safe-area-inset-top) + 28px) calc(env(safe-area-inset-right) + 28px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 28px);display:flex;flex-direction:column;gap:16px}
.rpnav{flex:0 0 auto;margin:0;z-index:3;background:rgba(13,15,25,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.rpmap{display:flex;align-items:center;gap:16px;padding:14px;border-radius:var(--r-card);background:rgba(13,15,25,.64);border:1px solid rgba(255,255,255,.1);min-height:96px}
.rpthumb{flex:0 0 auto;width:168px;height:72px;border-radius:var(--r-ctl);object-fit:cover;background:var(--s2)}
.rpmt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.rptitle{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.2;overflow-wrap:anywhere}
.rpartist{color:var(--lav);font-size:15px;font-weight:600;overflow-wrap:anywhere}
.rpdiff{color:var(--dim);font-size:13.5px}
.rpids{color:var(--mute);font-size:12px;margin-top:2px}
.rpmt .btn{margin-top:8px}
.rptags{display:flex;flex-wrap:wrap;gap:8px}
.rptag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-tag);background:rgba(255,255,255,.1);font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.rptag.stable{background:rgba(159,184,245,.2);color:var(--ice)}.rptag.lazer{background:rgba(194,107,255,.22);color:#e0b3ff}.rptag.fc{background:rgba(255,210,63,.18);color:#ffd23f}
.rpmain{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center;padding:26px 30px;border-radius:var(--r-card);background:rgba(13,15,25,.72);border:1px solid rgba(255,255,255,.1)}
.rprk{display:inline-block;font:italic 800 150px/1 Inter,system-ui,sans-serif;letter-spacing:-8px;padding:0 12px 0 0;text-shadow:0 6px 40px rgba(0,0,0,.45)}
.rprk.sm{font-size:46px;letter-spacing:-2px;padding:0}
.rprk.xs{font-size:22px;letter-spacing:-1px;padding:0;text-shadow:none}
.rprk.r-SS{color:#ffd23f}.rprk.r-S{color:#ffb62e}.rprk.r-A{color:#7ee34a}.rprk.r-B{color:#4db8ff}.rprk.r-C{color:#c26bff}.rprk.r-D{color:#ff5470}
.rprk.h{color:#dfe6f2}
.rpright{display:flex;flex-direction:column;gap:18px;min-width:0}
.rpscorebox{display:flex;flex-direction:column;gap:2px}
.rpscorebox small,.rpstat small{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.rpscore{font-size:64px;font-weight:800;letter-spacing:-1.5px;line-height:1.05;font-variant-numeric:tabular-nums}
.rpstrow{display:flex;flex-wrap:wrap;gap:8px 40px}
.rpstat{display:flex;flex-direction:column;gap:2px}.rpstat b{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.rpjs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rpj{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-ctl);background:rgba(255,255,255,.06);border-left:3px solid var(--jc,#fff)}
.rpj small{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.rpj b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--jc)}
.rpj em{font-style:normal;color:var(--mute);font-size:11.5px}
.rpj.j300{--jc:#32bce7}.rpj.j100{--jc:#57e313}.rpj.j50{--jc:#ffcc22}.rpj.j0{--jc:#ff4d5e}
.rpmods{display:inline-flex;flex-wrap:wrap;gap:6px}
.rpmod{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-tag);background:var(--vio);color:var(--vio-dk);font-size:11.5px;font-weight:800;letter-spacing:.5px}
.rpmod.off{background:rgba(255,255,255,.12);color:var(--dim);cursor:help}
.rpmodrow:empty{display:none}
.rpby{margin:0;color:var(--dim);font-size:14px}
.rpbtns{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.rpbtns .btn{min-height:46px;padding:0 22px}
.rpbtns .rpwatch{font-size:16px;padding:0 30px}
.rpfoot{margin:0;color:var(--mute);font-size:12px;text-align:center}
/* end menu: over the last frame of the replay */
.rpend{position:fixed;inset:0;z-index:9;display:grid;place-items:center;padding:16px;background:rgba(8,10,18,.5)}
.rpendp{display:flex;flex-direction:column;gap:18px;padding:22px 24px;border-radius:var(--r-card);background:rgba(21,24,37,.94);border:1px solid var(--bd);box-shadow:0 18px 60px rgba(0,0,0,.6);min-width:min(420px,100%)}
.rpendh{display:flex;align-items:center;gap:16px}
.rpendt{display:flex;flex-direction:column;gap:2px}.rpendt b{font-size:20px;font-weight:800}.rpendt span{color:var(--dim)}
.rpendbtns{display:flex;gap:10px}.rpendbtns .btn{flex:1;min-height:46px}
/* the Replays page */
.rprow{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 14px 10px 10px;border-radius:var(--r-card);border:1px solid var(--bd);background:var(--s1)}
.rprthumb{width:128px;height:72px;border-radius:var(--r-ctl);background:var(--s2);overflow:hidden}
.rprthumb img{width:100%;height:100%;object-fit:cover;display:block}
.rprtx{display:flex;flex-direction:column;gap:3px;min-width:0}
.rprtx b{font-size:15px;overflow-wrap:anywhere}
.rprsub{color:var(--dim);font-size:13px;overflow-wrap:anywhere}
.rprmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;font-weight:700}
.rprdate{color:var(--mute);font-size:12px}
.rpracts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:420px}
@media (max-width:760px){
  .rpin{padding:calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 16px);gap:12px}
  .rpmap{gap:12px;padding:12px;min-height:0}
  .rpthumb{width:96px;height:56px}
  .rptitle{font-size:18px}
  .rpmain{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 16px;justify-items:start}
  .rprk{font-size:96px;letter-spacing:-5px}
  .rpscore{font-size:44px}
  .rpstat b{font-size:24px}
  .rpjs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rpright{width:100%}
  .rpbtns{flex-direction:column-reverse}.rpbtns .btn{width:100%}
  .rprow{grid-template-columns:84px minmax(0,1fr);gap:10px}
  .rprthumb{width:84px;height:48px}
  .rpracts{grid-column:1/-1;flex-direction:row}.rpracts .btn{flex:1}
}
@media (max-height:520px) and (orientation:landscape){.rpin{margin:0 auto}}
#replayCache{margin-top:8px}
/* ===== end of Replays ===== */

/* ===== Replays saved online (js/replayui.js): the results screen line, the Replays page section ===== */
.rpsaved{display:inline-flex;align-items:center;min-height:46px;padding:0 4px;color:var(--teal);font-weight:700;font-size:14px}
.rpnote{margin:-6px 0 0;color:var(--dim);font-size:12.5px;text-align:right}
.rprexp{color:var(--dim);font-size:12px;font-weight:700}
.rprexp.soon{color:var(--red)}
.rprshared{display:block;color:var(--teal);font-size:12px;font-weight:700}
@media (max-width:760px){
  .rpsaved{min-height:0;justify-content:center;text-align:center;padding:4px 0}
  .rpnote{text-align:center;margin-top:0}
  .rpracts{flex-wrap:wrap}
}
/* ===== end of Replays saved online ===== */

/* ===== Top 50 scores of the replay's map (js/replayui.js) ===== */
.t5{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:var(--r-card);background:rgba(13,15,25,.72);border:1px solid rgba(255,255,255,.1)}
.t5[hidden]{display:none}
.t5h{margin:0;font-size:16px;font-weight:800;letter-spacing:-.2px}
.t5bar{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.t5bar[hidden],.t5msg[hidden]{display:none}
.t5hint{margin:0;color:var(--mute);font-size:12.5px}
.t5msg{margin:0;color:var(--red);font-size:13.5px}
.t5list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.t5hd,.t5i{display:grid;grid-template-columns:34px 24px minmax(0,1fr) 104px 84px 64px 118px 62px 90px;align-items:center;gap:10px}
.t5hd{padding:0 8px 4px;color:var(--mute);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.t5hd span:nth-child(n+4):nth-child(-n+6),.t5hd span:nth-child(8){text-align:right}
.t5hd span:nth-child(8){text-transform:none}
.t5i{padding:6px 8px;border-radius:var(--r-ctl);background:rgba(255,255,255,.04);font-size:13.5px;font-variant-numeric:tabular-nums}
.t5i.me{background:rgba(194,107,255,.22);box-shadow:inset 3px 0 0 var(--vio)}
.t5n{font-weight:800;color:var(--dim)}
.t5i:nth-child(1) .t5n{color:#ffd23f}.t5i:nth-child(2) .t5n{color:#cfd6e6}.t5i:nth-child(3) .t5n{color:#c98a52}
.t5av{display:block;width:24px;height:24px;border-radius:var(--r-tag);background:var(--s2);overflow:hidden}
.t5av img{width:100%;height:100%;object-fit:cover;display:block}
.t5who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.t5nm{overflow-wrap:anywhere}
.t5sc{text-align:right;font-weight:800}
.t5sub{display:contents}
.t5ac,.t5cb,.t5pp{text-align:right}
.t5pp{color:var(--teal);font-weight:700}
.t5dt{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t5md .rpmods{display:flex;flex-wrap:wrap;gap:3px}
.t5i .rpmod{height:18px;padding:0 5px;font-size:10.5px}
.t5foot{margin:4px 0 0;color:var(--mute);font-size:12px}
.t5empty{padding:18px 8px;color:var(--dim);text-align:center}
.t5sks{display:flex;flex-direction:column;gap:3px}
.t5ld{margin:0 0 4px;color:var(--dim);font-size:13px}
.t5sk{height:36px;border-radius:var(--r-ctl);background:linear-gradient(100deg,var(--s1) 30%,var(--s2) 50%,var(--s1) 70%) 0 0/300% 100%;animation:shimmer 1.2s linear infinite}
@media (max-width:900px){
  .t5hd{display:none}
  .t5who{white-space:normal;overflow:visible}
  .t5i{grid-template-columns:30px 24px minmax(0,1fr) auto;gap:2px 8px}
  .t5sub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;grid-column:3/-1;color:var(--dim);font-size:12px}
  .t5ac,.t5cb,.t5pp{text-align:left}
  .t5md:empty{display:none}
}
@media (max-width:760px){.t5{padding:12px}}
/* ===== end of Top 50 scores ===== */

/* ===== skin cards and options (js/skins.js renderSkinUI, Settings → Skin) ===== */
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:8px 0 4px}
.skcard{display:flex;flex-direction:column;min-width:0;border-radius:5px;border:1px solid var(--line);background:rgba(255,255,255,.05);overflow:hidden}
.skcard.on{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.skpv{display:block;width:100%;height:auto;aspect-ratio:4/1;background:linear-gradient(135deg,#1b1530,#0f0c1a);cursor:pointer;opacity:.35;transition:opacity .25s}
.skpv.ready{opacity:1}.skcard.on .skpv{cursor:default}
.skbody{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;min-width:0}
.sktop{display:flex;align-items:center;gap:8px;min-width:0}
.skname{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skbadge{flex:0 0 auto;font-size:11px;padding:1px 7px;border-radius:9px;background:var(--pink);color:#fff}
.skinfo{color:var(--dim);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.skacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.skacts .btn.sm{min-height:32px;padding:0 10px}
.skedit{width:100%;min-width:0;height:30px;border-radius:5px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 8px;font-size:14px;box-sizing:border-box}
.sknote{margin:8px 0;padding:10px 12px;border-radius:5px;background:rgba(255,200,90,.12);border:1px solid rgba(255,200,90,.4);font-size:13px;line-height:1.45}
#skinOpts .row select{max-width:50%}
#skinOpts .row>span:first-child{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.skgrid{grid-template-columns:minmax(0,1fr)}#skinOpts .rng{width:50%}#skinOpts .row:has(select){flex-wrap:wrap;gap:4px 12px;padding:8px 0}#skinOpts .row select{max-width:100%;width:100%}}
/* ===== end of skin cards ===== */

/* ===== Replays motion (js/replayui.js): the results screen entrance, the map card, the end menu, Top 50, the Replays page =====
   Only transform and opacity move. The base styles above are the final state: every keyframe set has a "from" and an implicit "to", so
   taking the class away (a key press, a click, the end of the entrance) shows the end state at once. The site's reduced-motion rule
   (animation:none, transition:none) covers all of it; the JS adds no class and no count-up then. */
@keyframes rpmFade{from{opacity:0}}
@keyframes rpmUp{from{opacity:0;transform:translateY(10px)}}
@keyframes rpmRise{from{opacity:0;transform:translateY(22px) scale(.985)}}
@keyframes rpmSide{from{opacity:0;transform:translateX(-18px)}}
@keyframes rpmBg{from{opacity:0;transform:scale(1.06)}}
@keyframes rpmStamp{0%{opacity:0;transform:scale(1.4) rotate(-5deg)}45%{opacity:1;transform:scale(.93) rotate(1deg)}72%{transform:scale(1.04) rotate(0)}100%{transform:none}}
@keyframes rpmPop{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.1)}}
@keyframes rpmPanel{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes rpmOut{to{opacity:0}}
@keyframes rpmPanelOut{to{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes rpmSweep{to{transform:translateX(100%)}}
@keyframes rpmBar{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes rpmGlow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes rpmBusy{50%{opacity:.22}}
/* results screen: the layer fades in, the backdrop settles, the card rises, then its parts one after another (about 1.3 s all in) */
.rpres.rpgo{animation:rpmFade .24s ease-out backwards}
.rpgo .rpbg{animation:rpmBg .8s var(--ease) backwards} /* (no will-change: the browser promotes what animates, and only while it does; many forced layers cost more than they save) */
.rpgo .rpcw{animation:rpmSide .42s var(--ease) .05s backwards}
.rpgo .rpmain{animation:rpmRise .45s var(--ease) .08s backwards}
.rpgo .rprk{animation:rpmStamp .55s ease-out .24s backwards}
.rpgo .rpscorebox{animation:rpmUp .36s var(--ease) .22s backwards}
.rpgo .rpstat:nth-child(1){animation:rpmUp .34s var(--ease) .38s backwards}
.rpgo .rpstat:nth-child(2){animation:rpmUp .34s var(--ease) .44s backwards}
.rpgo .rpj{animation:rpmUp .34s var(--ease) .5s backwards}
.rpgo .rpj:nth-child(2){animation-delay:.56s}.rpgo .rpj:nth-child(3){animation-delay:.62s}.rpgo .rpj:nth-child(4){animation-delay:.68s}
.rpgo .rptags{animation:rpmUp .3s var(--ease) .3s backwards}
.rpgo .rpmodrow .rpmod{animation:rpmPop .28s cubic-bezier(.3,1.4,.5,1) .72s backwards}
.rpgo .rpmodrow .rpmod:nth-child(2){animation-delay:.77s}.rpgo .rpmodrow .rpmod:nth-child(3){animation-delay:.82s}.rpgo .rpmodrow .rpmod:nth-child(4){animation-delay:.87s}.rpgo .rpmodrow .rpmod:nth-child(5){animation-delay:.92s}.rpgo .rpmodrow .rpmod:nth-child(n+6){animation-delay:.97s}
.rpgo .rpby{animation:rpmUp .3s var(--ease) .86s backwards}
.rpgo .rpbtns{animation:rpmUp .3s var(--ease) .9s backwards}
.rpgo .rpnote,.rpgo .rpfoot{animation:rpmFade .3s ease-out 1s backwards}
/* the numbers count up in a copy drawn from data-v; the real text stays in the page, transparent meanwhile (no decorative-content syntax: no copy, no count-up) */
@supports (content:"x" / ""){
  .rpcnt{position:relative;-webkit-text-fill-color:transparent}
  .rpcnt::after{content:attr(data-v) / "";position:absolute;left:0;top:0;white-space:pre;-webkit-text-fill-color:currentcolor}
}
/* buttons: lift on hover, press in, the focus ring stays (the global :focus-visible outline); transform and shadow only, no layout change */
.rpres .btn,.rpend .btn,.rprow .btn,.t5 .btn{transition:transform .15s var(--ease),box-shadow .15s var(--ease),background var(--t) ease-out,border-color var(--t) ease-out,color var(--t) ease-out}
@media (hover:hover){
  :is(.rpres,.rpend,.rprow,.t5) .btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.34)}
  :is(.rpres,.rpend,.rprow,.t5) .btn.main:hover:not(:disabled){box-shadow:0 6px 18px rgba(194,107,255,.4)}
  .rprow:hover{background:rgba(255,255,255,.07);border-color:var(--bd)}
}
:is(.rpres,.rpend,.rprow,.t5) .btn:focus-visible{transform:translateY(-1px)}
:is(.rpres,.rpend,.rprow,.t5) .btn:active:not(:disabled),:is(.rpres,.rpend,.rprow,.t5) .btn.main:active:not(:disabled){animation:none;transform:scale(.97);box-shadow:none;transition-duration:.08s}
.rprow{transition:background var(--t) ease-out,border-color var(--t) ease-out}
.replaySaveOnline.busy{animation:rpmBusy 1s ease-in-out infinite}
.rpsaved.pop{animation:rpmPop .4s cubic-bezier(.3,1.4,.5,1)}
/* map card: shimmer while the map is being found, the text fades in once it is, a sliver while it loads, the tick pops when it is ready */
.rpthumb{transition:opacity .3s ease-out}.rpthumb.lz{opacity:0}
.rpsk,.rpskb,.t5sk{position:relative;overflow:hidden;background:var(--s2)}
.rpsk::after,.rpskb::after,.t5sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.07) 50%,transparent 75%);transform:translateX(-100%);animation:rpmSweep 1.3s linear infinite}
.rpskb{display:block;height:14px;width:220px;max-width:100%;margin-top:8px;border-radius:3px}.rpskb+.rpskb{width:150px}.rpskb+.rpskb+.rpskb{width:100px}
.rpmap.swap .rpmt>*{animation:rpmUp .32s var(--ease) backwards;animation-delay:calc(0s - var(--sw,0ms))}
.rpmap.swap .rpmt>:nth-child(2){animation-delay:calc(.05s - var(--sw,0ms))}.rpmap.swap .rpmt>:nth-child(3){animation-delay:calc(.1s - var(--sw,0ms))}.rpmap.swap .rpmt>:nth-child(n+4){animation-delay:calc(.15s - var(--sw,0ms))}
/* end menu */
.rpend{animation:rpmFade .2s ease-out backwards}
.rpendp{animation:rpmPanel .38s var(--ease) backwards}
.rpend .rprk.sm{animation:rpmStamp .5s ease-out .14s backwards}
.rpend .rpendt{animation:rpmUp .3s var(--ease) .16s backwards}
.rpendx{position:fixed;inset:0;z-index:9;display:grid;place-items:center;padding:16px;background:rgba(8,10,18,.5);pointer-events:none;animation:rpmOut .16s ease-in forwards} /* (a menu on its way out: not .rpend any more) */
.rpendx .rpendp{animation:rpmPanelOut .16s ease-in forwards}
/* Top 50: the panel rises in, skeleton rows sweep, the first rows slide in one after another, the highlighted row glows once */
.t5{animation:rpmUp .36s var(--ease) backwards}
.t5sk{background:var(--s1);animation:rpmUp .3s var(--ease) backwards;animation-delay:calc(var(--i,0) * 30ms)}
.t5i.rpi{animation:rpmUp .34s var(--ease) backwards;animation-delay:calc(var(--i,0) * 35ms)}
.t5i.me{position:relative}
.t5i.me::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--vio),0 0 20px rgba(194,107,255,.55);opacity:0;animation:rpmGlow 1.2s ease-out .55s}
/* Replays page: the cards come in one after another; a later draw of the same visit continues the clock (--sk) instead of starting again */
#replays.vin>*{animation-delay:calc(var(--k,0) * .05s - var(--sk,0ms))}
.rprow{animation:rpmUp .4s var(--ease) backwards;animation-delay:calc(.16s + var(--i,0) * .05s - var(--sk,0ms))}
.rprthumb img{transition:opacity .3s ease-out}.rprthumb img.lz{opacity:0}
/* ===== end of Replays motion ===== */

/* ===== Replay analysis (js/replayanaui.js): the Analysis layer over the results / end menu, its tabs, tiles and charts =====
   Only transform and opacity move (the layer and the tab panels rise in; the site's reduced-motion rule and the JS cover the rest). */
.rpbtns .rpanbtn{margin-inline-end:auto;order:-1}
.rpendp>.rpanbtn{min-height:46px}
.rpan{position:fixed;inset:0;z-index:9;overflow:hidden auto;overscroll-behavior:contain;background:#0d0f19;color:var(--txt);display:flex;flex-direction:column}
.rpanin0{animation:rpmFade .24s ease-out backwards}
.rpanin0 .rpanin{animation:rpmUp .36s var(--ease) .04s backwards}
.rpanin{position:relative;margin:0 auto;width:100%;max-width:1040px;padding:calc(env(safe-area-inset-top) + 24px) calc(env(safe-area-inset-right) + 28px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 28px);display:flex;flex-direction:column;gap:14px}
.rpanhd{display:flex;align-items:flex-start;gap:14px}
.rpanback{flex:0 0 auto;min-height:44px}
.rpanttl{min-width:0;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.rpanttl h2{margin:0;font-size:24px;line-height:1.2}
.rpansub{margin:0;color:var(--dim);font-size:14px;overflow-wrap:anywhere}
.rpanttl .rpmods{margin-top:4px}
.rpanstate{display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 20px;border-radius:var(--r-card);background:rgba(13,15,25,.72);border:1px solid rgba(255,255,255,.1);text-align:center}
.rpanstate p{margin:0;max-width:420px;color:var(--lav);font-size:15px}
.rpanbar{position:relative;overflow:hidden;width:min(240px,70%);height:2px;border-radius:2px;background:rgba(255,255,255,.1)}
.rpanbar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--vio),var(--ice));animation:rpmBar 1.25s var(--ease-io) infinite}
.rpanrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.rpanwarn{margin:0;padding:10px 14px;border-radius:var(--r-ctl);border-left:3px solid #ffcc22;background:rgba(255,204,34,.1);color:var(--txt);font-size:13.5px;line-height:1.45}
.rpantabs{display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,.12)}
.rpantab{flex:0 1 auto;min-height:44px;padding:0 20px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--dim);font-weight:700;font-size:14.5px;cursor:pointer;transition:color var(--t) ease-out,border-color var(--t) ease-out}
.rpantab.on{color:var(--txt);border-bottom-color:var(--vio)}
@media (hover:hover){.rpantab:hover{color:var(--txt)}}
.rpanpanel{display:flex;flex-direction:column;gap:14px;min-width:0}
.rpansum{margin:0;color:var(--lav);font-size:14.5px;line-height:1.5}
.rpantiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rpantiles.col{grid-template-columns:minmax(0,1fr);align-content:start}
.rpanst{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;border-radius:var(--r-ctl);background:rgba(255,255,255,.06);border-left:3px solid var(--vio)}
.rpanst small{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.rpanst b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.2}
.rpanst em{font-style:normal;color:var(--dim);font-size:12px}
.rpancard{min-width:0;padding:14px 16px;border-radius:var(--r-card);background:rgba(13,15,25,.72);border:1px solid rgba(255,255,255,.1)}
.rpancard h3{margin:0 0 8px;font-size:14px}
.rpan2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.rpan2.aim,.rpan2.heat{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.rpanfig{margin:0;min-width:0}
.rpanfig figcaption{display:flex;flex-direction:column;gap:1px}
.rpanfig figcaption b{font-size:14px}
.rpanfig figcaption small{color:var(--dim);font-size:12px}
.rpanwrap{position:relative;margin-top:8px}
.rpanwrap canvas{display:block;width:100%;touch-action:pan-y}
.rpantip{position:absolute;z-index:2;display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:var(--r-ctl);background:rgba(21,24,37,.97);border:1px solid var(--bd);box-shadow:0 6px 18px rgba(0,0,0,.45);font-size:12px;line-height:1.35;white-space:nowrap;pointer-events:none}
.rpantip b{font-size:12.5px}.rpantip span{color:var(--dim)}
.rpantbl{display:flex;flex-direction:column}
.rpanr{display:grid;grid-template-columns:minmax(0,1fr) 76px 76px;gap:8px;align-items:center;padding:8px 0 8px 10px;border-left:3px solid var(--jc,transparent);border-bottom:1px solid rgba(255,255,255,.06);font-size:13.5px}
.rpanr.hd{border-left-color:transparent;color:var(--dim);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.rpanr .num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.rpancq{margin:10px 0 0;font-size:13px;font-weight:700}
.rpancq::before,.rpancons::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--qc,var(--dim))}
.q-good{--qc:var(--teal)}.q-fair{--qc:#ffcc22}.q-poor{--qc:#ff4d5e}
.rpanfoot{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.rpanfoot p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.45}
.rpanfoot .rpancons{color:var(--dim);font-weight:700}
.rpanctl{margin-top:10px;display:flex;gap:8px}
.rpantog.on{background:var(--vio);border-color:var(--vio);color:var(--vio-dk)}
.rpanramp{height:8px;margin-top:12px;border-radius:4px}
.rpanrl{display:inline-block;width:50%;margin-top:3px;color:var(--dim);font-size:11px}.rpanrl.r{text-align:right}
.rpanlegend{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--dim);font-size:12.5px}
.rpanlegend span::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:var(--jc)}
.rpan .btn{transition:transform .15s var(--ease),background var(--t) ease-out,border-color var(--t) ease-out,color var(--t) ease-out}
.rpan .btn:active:not(:disabled){transform:scale(.97)}
@media (max-width:760px){
  .rpanin{padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 16px);gap:12px}
  .rpanttl h2{font-size:20px}
  .rpantabs{gap:0}.rpantab{flex:1 1 0;padding:0 4px;font-size:13.5px}
  .rpantiles{grid-template-columns:repeat(2,minmax(0,1fr))}.rpantiles.col{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rpanst b{font-size:19px}
  .rpan2,.rpan2.aim,.rpan2.heat{grid-template-columns:minmax(0,1fr)}
  .rpancard{padding:12px}
  .rpbtns .rpanbtn{margin-inline-end:0}
}
/* ===== end of Replay analysis ===== */

/* Replays: the eye button on the bottom bar and its switches (Top 50, hit error bar, UR, early / late) */
.rpview{display:none;align-items:center;justify-content:center;padding:0 8px}
.rpview svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.replay .rpview{display:inline-flex}
.rppop{position:absolute;right:calc(env(safe-area-inset-right) + 10px);bottom:100%;margin-bottom:6px;z-index:5;width:min(300px,calc(100% - 20px));padding:4px 14px;border-radius:8px;background:rgba(27,31,47,.97);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 28px rgba(0,0,0,.5)}
.rppop[hidden],body:not(.replay) .rppop{display:none}
.rppop .sw:last-child{border-bottom:0}

/* Settings → Skin: Import from a link */
.sklink{display:flex;gap:8px;align-items:center;margin-top:10px}
.sklink input{flex:1 1 auto;min-width:0}

/* Replays: paste an osu! score link */

/* the link boxes (replay score link, skin link): a real field size, 16px text (iOS doesn't zoom the page on focus), stacked on a phone */
.sklink input{height:44px;font-size:16px;padding:0 12px;border-radius:8px}
.sklink .btn{height:44px;padding:0 16px;font-size:15px;white-space:nowrap}
.sklink{flex-wrap:wrap}
.sklink input{flex:1 1 260px}
@media (max-width:600px){.sklink{flex-direction:column;align-items:stretch}.sklink input{flex:0 0 auto;width:100%}.sklink .btn{width:100%}}

/* Replay results, closer to osu!lazer's: a facts row on the map card, the hit distribution, a details card, buttons that read on the dark glass in the site's colours */
.rpres .rpmap{background:linear-gradient(180deg,rgba(13,15,25,.5),rgba(13,15,25,.78));border-color:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.rpfacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rpfacts span{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-tag);background:rgba(194,107,255,.16);border:1px solid rgba(194,107,255,.38);color:#e9d2ff;font-size:12px;font-weight:700}
.rpres .rpmain{background:rgba(13,15,25,.76);border-color:rgba(255,255,255,.16);backdrop-filter:blur(6px);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.rprk{filter:drop-shadow(0 0 28px currentColor)}
.rpdist{display:flex;gap:2px;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}
.rpdist i{display:block;min-width:3px;flex-basis:0}
.rpdist .j300{background:#32bce7}.rpdist .j100{background:#57e313}.rpdist .j50{background:#ffcc22}.rpdist .j0{background:#ff4d5e}
.rpj{position:relative}
.rpj .rpjp{position:absolute;right:10px;top:10px;font-style:normal;font-size:12px;font-weight:700;color:var(--dim)}
.rpdet{padding:18px 22px;border-radius:var(--r-card);background:rgba(13,15,25,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.rpdeth{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--lav)}
.rpkvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px 22px}
.rpkv{display:flex;flex-direction:column;gap:3px;min-width:0}
.rpkv small,.rphpbox small{color:var(--dim);font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase}
.rpkvv{font-size:15px;font-weight:600;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rpmv{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}.rpmrate{color:var(--dim);font-size:12.5px;font-weight:700}
.rpkeys{display:inline-flex;flex-wrap:wrap;gap:6px}
.rpkey{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-tag);background:rgba(255,255,255,.1);font-size:13px;font-weight:700}
.rpkey i{font-style:normal;color:var(--teal);font-size:11px;font-weight:800;letter-spacing:.6px}
.rplink2{color:var(--ice);font-weight:700;text-decoration:underline;text-underline-offset:3px}.rplink2:hover{color:#fff}
.rphpbox{display:flex;flex-direction:column;gap:6px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.rphp{width:100%;height:56px;display:block;border-radius:var(--r-ctl);background:rgba(255,255,255,.05)}
.rphpa{fill:rgba(143,218,211,.2)}.rphpl{stroke:var(--teal);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rphpmin{color:var(--dim);font-size:12.5px}
/* buttons: filled glass with a clear edge, each in a colour of the site's theme (Watch the violet one, Analysis teal, Share ice, Back / Home neutral) */
.rpres .rpbtns .btn.ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.34);color:#fff;font-weight:700}
.rpres .rpbtns .btn.ghost:hover:not(:disabled){background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55)}
.rpres .rpbtns .btn.ghost.rpanbtn{background:rgba(143,218,211,.16);border-color:rgba(143,218,211,.6);color:#d6f7f3}
.rpres .rpbtns .btn.ghost.rpanbtn:hover:not(:disabled){background:rgba(143,218,211,.26);border-color:var(--teal)}
.rpres .rpbtns .btn.ghost.rpshare,.rpres .rpbtns .btn.ghost.rpcopy{background:rgba(159,184,245,.16);border-color:rgba(159,184,245,.6);color:#e1eaff}
.rpres .rpbtns .btn.ghost.rpstop{background:rgba(255,107,138,.14);border-color:rgba(255,107,138,.55);color:#ffd3dc}
.rpres .rpbtns .btn.ghost.replaySaveOnline{background:rgba(194,167,107,.18);border-color:rgba(194,167,107,.65);color:#f3e5c0}
.rpres .rpbtns .rpwatch{box-shadow:0 6px 22px rgba(194,107,255,.38)}
.rpres .rpsaved{align-self:center;color:var(--teal);font-size:13px;font-weight:700}
.rpres .rpnote,.rpres .rpfoot{color:var(--dim)}
@media (max-width:760px){
  .rpkvs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  .rpdet{padding:16px}
  .rpj .rpjp{top:auto;bottom:8px}
  .rpres .rpbtns{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px calc(-16px - env(safe-area-inset-right)) calc(-20px - env(safe-area-inset-bottom)) calc(-16px - env(safe-area-inset-left));padding:12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:rgba(13,15,25,.97);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
  .rpres .rpbtns .btn{width:100%;min-height:46px;padding:0 10px}
  .rpres .rpbtns .rpwatch{grid-column:1/-1;order:-2;min-height:50px}
  .rpres .rpbtns .rpsaved{grid-column:1/-1}
}
.rpplayed{display:flex;flex-direction:column;gap:1px}.rprel{color:var(--dim);font-size:12.5px;font-weight:600}
/* the Top 50 card's buttons read too */
.rpres .t5 .btn.ghost{background:rgba(194,107,255,.14);border:1px solid rgba(194,107,255,.5);color:#f1e6ff;font-weight:700}
.rpres .t5 .btn.ghost:hover:not(:disabled){background:rgba(194,107,255,.24);border-color:var(--vio)}
@media (max-width:760px){.rpres .rpfoot{padding-bottom:4px}}
/* the map's epilepsy warning (player.js epiWarn): 2 s in the middle (Preview, Replay), a smaller card at the playfield's top left in Modding; never in the way of a tap */
.epiwarn{position:absolute;left:50%;top:50%;z-index:5;box-sizing:border-box;width:min(460px,calc(100% - 32px));padding:22px 24px 20px;border-radius:16px;background:rgba(14,11,22,.93);border:2px solid #ffc83d;box-shadow:0 0 0 6px rgba(255,200,61,.14),0 18px 50px rgba(0,0,0,.6);color:var(--txt);text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .3s ease-out,transform .3s var(--ease)}
.epiwarn.in{opacity:1;transform:translate(-50%,-50%)}
.epiwarn.out{opacity:0;transition-duration:.4s}
.epiwarn .epiic{width:46px;height:46px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:#ffc83d;color:#1a1300;font:900 28px/1 Inter,sans-serif}
.epiwarn b{display:block;margin-bottom:8px;font-size:24px;font-weight:900;letter-spacing:-.3px;color:#ffd666}
.epiwarn p{margin:0;font-size:15px;line-height:1.5;color:#efe9d6}
.epiwarn.ed{width:min(300px,calc(100% - 24px));padding:10px 12px 10px 50px;border-radius:12px;text-align:left;transform:translateY(-6px)}
.epiwarn.ed.in{transform:none}
.epiwarn.ed .epiic{position:absolute;left:12px;top:12px;width:28px;height:28px;margin:0;font-size:17px}
.epiwarn.ed b{margin-bottom:2px;font-size:14px}
.epiwarn.ed p{font-size:12px;line-height:1.4}
/* the editor's Slider tool menu (editor.js slFlyOpen): placement mode + curve, beside the Slider button */
.edcol button[data-tool="slider"]{position:relative}
.edcol button[data-tool="slider"]::before{content:"";position:absolute;right:3px;bottom:3px;border:3.5px solid transparent;border-right-color:currentColor;border-bottom-color:currentColor;opacity:.7}
.edfly{position:fixed;z-index:40;display:flex;flex-direction:column;gap:2px;width:236px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;padding:6px;border-radius:var(--r-card);background:var(--s1);border:1px solid var(--bd);box-shadow:0 14px 40px rgba(0,0,0,.55);animation:ctxIn .12s ease-out;user-select:none;-webkit-user-select:none}
.edfly[hidden]{display:none}
.edflysec{padding:6px 8px 3px;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--dim)}
.edflyopt{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:6px 8px;border:0;border-radius:var(--r-ctl);background:none;color:var(--txt);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.edflyopt svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.edflyopt span{display:flex;flex-direction:column;gap:1px}
.edflyopt small{font-size:11px;color:var(--dim)}
.edflyopt:hover{background:var(--s2)}
.edflyopt.on{background:var(--vio);color:var(--vio-dk)}
.edflyopt.on small{color:var(--vio-dk);opacity:.8}
.edfly.dim .edflysec:nth-of-type(2)~.edflyopt:not(.on){opacity:.6}
/* the Settings page (?view=account, account.js): the same tabs and panes as the gear's window, moved here (player.js setPanesTo) */
.setpage{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start;max-width:980px}
.setpage .settabs{position:sticky;top:calc(var(--navh,60px) + 8px);flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;padding:8px;border-radius:var(--r-card);background:var(--s1);border:1px solid var(--bd)}
.setpage .settabs .tab{flex:0 0 auto;height:38px;text-align:left;padding:0 12px;font-size:14px}
.setpage .settabs .tab:not(.on):hover{background:rgba(255,255,255,.06);color:var(--txt)}
.setpage .setbody{min-width:0;padding-bottom:28px}
.setpage .spane>.subh:first-child,.setpage .spane>div>.subh:first-child{margin-top:4px}
.setpage .acctwrap{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.setpage .acctwrap:empty{display:none}
#sheet .acctwrap{display:flex;flex-direction:column;gap:12px;margin-top:12px}
@media (max-width:760px){
  .setpage{grid-template-columns:1fr;gap:10px}
  .setpage .settabs{flex-direction:row;overflow-x:auto;padding:6px;top:calc(var(--navh,60px) + 4px);z-index:2}
  .setpage .settabs .tab{text-align:center;height:34px;font-size:13px}
}
/* ---- quick settings (player.js QS): osu!lazer's player settings on the right of Preview and replays; open while the map stands still,
   a tab on the right edge while it plays (see-through while the bars are hidden, a hover on it still opens the panel) ---- */
.qset{--qsw:min(300px,calc(100vw - 64px));position:absolute;top:50%;right:0;z-index:3;display:flex;align-items:flex-start;transform:translate(var(--qsw),-50%);transition:transform .32s var(--ease)}
.qset.open{transform:translate(calc(-1 * env(safe-area-inset-right)),-50%)}
.qstab{flex:0 0 auto;width:34px;height:46px;margin-top:10px;display:grid;place-items:center;border:1px solid var(--bd);border-right:0;border-radius:var(--r-card) 0 0 var(--r-card);background:rgba(27,31,47,.88);color:var(--txt);cursor:pointer;transition:opacity .25s,background var(--t)}
.qstab:hover{background:var(--s3)}
.qstab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.qset.open .qstab{background:var(--s2)}
.qset.away .qstab{opacity:0}
.qsbody{width:var(--qsw);max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--bd);border-right:0;border-radius:var(--r-card) 0 0 var(--r-card);background:rgba(20,23,36,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.45);touch-action:pan-y}
.qssec{background:rgba(255,255,255,.035);border-radius:var(--r-card);padding:8px 10px}
.qssec header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.qssec header b{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.qsfold{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:var(--r-ctl);background:none;color:var(--dim);cursor:pointer}
.qsfold:hover{background:var(--s3);color:var(--txt)}
.qsfold svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.qssec.fold .qsrows{display:none}
.qsrows{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.qsrng{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:2px 6px;font-size:13.5px}
.qsrng input{grid-column:1/-1;width:100%;margin:0;accent-color:var(--pink)}
.qsrng output{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.qsreset{width:20px;height:20px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--pink);cursor:pointer;visibility:hidden}
.qsreset.on{visibility:visible}
.qsreset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.qssw{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-left:26px;font-size:13.5px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.qset{transition:none}}
.edflyopt:focus-visible{outline:2px solid var(--vio);outline-offset:-2px}
/* Hitsound Studio on a phone: the timeline's own zoom buttons give their room to the timeline (the lanes have theirs, in
   their corner, and two fingers zoom); the corner control smaller */
@media (orientation:portrait) and (max-width:760px){#player.editing.hsldocked .tlzoom{display:none}#player.editing.hsldocked .edtop{grid-template-columns:58px minmax(0,1fr) 40px}#player.editing.hsldocked .tllock{grid-area:1/3/3/4}}
@media (pointer:coarse) and (max-height:520px){#player.editing.hsldocked .tlzoom{display:none}}
@media (max-width:719px){.hszoom{padding:2px;gap:0}.hszb{width:30px;height:30px;font-size:16px}.hszi{width:14px}.hszsz{margin-left:2px;padding-left:2px}}
/* Hitsound Studio: Page mode's loop (by the timeline's lock, the Hitsounds tab only) and the floating jog panel (hsjog.js) */
.tlpagelock{display:none}
#player.hsldocked .tlpagelock{display:grid}
.tlpagelock.on{background:rgba(194,107,255,.22);color:var(--vio)}
@media (orientation:portrait) and (max-width:760px){#player.editing.hsldocked .edtop{grid-template-columns:58px minmax(0,1fr) 40px 40px}#player.editing.hsldocked .tlpagelock{grid-area:1/4/3/5}}
.hsjog{position:fixed;z-index:60;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:10px;background:rgba(18,14,26,.94);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 24px rgba(0,0,0,.5);touch-action:none;user-select:none;-webkit-user-select:none}
.hsjog{align-items:center;padding:6px 8px 8px;gap:4px}
.hsjog .hjhead{align-self:stretch;display:flex;align-items:center;gap:2px;cursor:grab}
.hsjog.pinned .hjhead{cursor:default}
.hsjog .hjgrip{flex:1;min-width:0;font-size:11px;font-weight:700;color:var(--dim);white-space:nowrap;padding-left:2px}
.hsjog .hjkeys{font-size:14px;color:var(--dim);cursor:help;padding:0 5px} /* (its keys, in the title) */
@media (pointer:coarse) and (hover:none){.hsjog .hjkeys{display:none}}
.hsjog .hjb{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--ink);font:700 14px/1 inherit;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;touch-action:none;padding:0}
.hsjog .hjhead .hjb{width:26px;height:26px;border-radius:6px;font-size:12px;border-color:transparent;background:transparent}
.hsjog .hjhead .hjb[aria-pressed="true"]{background:rgba(194,107,255,.3);color:#fff}
@media (hover:hover){.hsjog .hjb:not(:disabled):hover{background:rgba(255,255,255,.14)}}
.hsjog .hjb:disabled{opacity:.25;cursor:default}
/* the pad: a round base, four arrows and the middle button, like a game controller's */
.hsjog{--pad:136px}
.hsjog.big{--pad:196px}
@media (pointer:coarse){.hsjog{--pad:156px}.hsjog.big{--pad:212px}.hsjog .hjhead .hjb{width:32px;height:32px}}
.hsjog .hjpad{position:relative;width:var(--pad);height:var(--pad);border-radius:50%;background:radial-gradient(circle at 50% 40%,#2c2340,#17121f 70%);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);display:grid;grid-template:1fr 1fr 1fr/1fr 1fr 1fr;padding:6px;box-sizing:border-box;gap:2px}
.hsjog .hjd{border-radius:10px;font-size:calc(var(--pad) * .13);background:rgba(255,255,255,.08)}
.hsjog .hjup{grid-area:1/2}.hsjog .hjlt{grid-area:2/1}.hsjog .hjrt{grid-area:2/3}.hsjog .hjdn{grid-area:3/2}
.hsjog .hjlt,.hsjog .hjrt{color:#fff;background:rgba(194,107,255,.22);border-color:rgba(194,107,255,.45)}
.hsjog .hjd.down,.hsjog .hjd:active{background:var(--vio);color:var(--vio-dk);transform:scale(.94)}
.hsjog .hjmid{grid-area:2/2;border-radius:50%;font-size:calc(var(--pad) * .15);background:var(--vio);border-color:var(--vio);color:var(--vio-dk);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.hsjog .hjmid:active{transform:scale(.92)}
.hsjog .hjmid:disabled{opacity:.35}
.hsjog .hjname{max-width:calc(var(--pad) + 40px);font-size:12px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.hsjog.big .hjname{font-size:14px}
.hsjog .hjfoot{display:flex;align-items:center;gap:4px;margin-top:2px}
.hsjog .hjseg{display:inline-flex;padding:2px;gap:2px;border-radius:8px;background:rgba(255,255,255,.06)}
.hsjog .hjby,.hsjog .hjloop,.hsjog .hjhere,.hsjog .hjfree{height:28px;min-width:30px;padding:0 7px;border-radius:6px;font-size:12px;font-weight:600;border-color:transparent;background:transparent}
.hsjog .hjloop,.hsjog .hjhere,.hsjog .hjfree{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.hsjog .hjby.on,.hsjog .hjloop.on,.hsjog .hjfree.on{background:var(--vio);border-color:var(--vio);color:var(--vio-dk)}
.hsjog.big .hjby,.hsjog.big .hjloop,.hsjog.big .hjhere,.hsjog.big .hjfree{height:34px;font-size:14px}
@media (pointer:coarse){.hsjog .hjby,.hsjog .hjloop,.hsjog .hjhere,.hsjog .hjfree{height:34px}}
.hslrow.jogsel{box-shadow:inset 3px 0 0 var(--vio),inset 0 0 0 100px rgba(194,107,255,.14)}
.hslrow.jogsel .hslname{color:#fff}
.hssmark.jogat{outline:2.5px solid #d9a6ff;outline-offset:2px;box-shadow:0 0 12px 2px rgba(194,107,255,.85);z-index:3} /* (the jog's column in the Classic view, hsjog.js) */
.hssjogline{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed #d9a6ff;margin-left:-1px;pointer-events:none;filter:drop-shadow(0 0 4px #c26bff);z-index:2} /* (the jog's box, apart from the play line, hsjog.js) */
.hssvert .hssjogline{left:0;right:0;top:50%;bottom:auto;width:auto;height:0;border-left:0;border-top:2px dashed #d9a6ff;margin:-1px 0 0}

/* ============ Tournaments (js/tournament.js): the list, a tournament's rounds and pools, secret maps, the host's tools ============ */
.tnview{padding-bottom:90px}
.tnview .vhead .btn.main{margin-top:8px}
.tnempty{color:var(--dim);margin:24px 0}
.tnload{margin:24px 0}
.tnlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tnlink{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--s1);color:var(--ink);text-decoration:none;font-weight:600;font-size:13px}
.tnlink small{color:var(--mute);font-weight:400;font-size:12px}
.tnheadrow{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:8px}
.tnzone{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim);font-weight:700}
.tnzone .skedit{height:36px;min-width:240px}
.tnrounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:6px 0 18px}
.tnround{min-height:62px;padding:10px 12px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--s1);color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:4px;justify-content:center;cursor:pointer;font:inherit}
.tnround.locked{color:var(--dim)}
.tnround.on{background:var(--s2);border-color:var(--vio);color:var(--ink);box-shadow:inset 0 2px 0 var(--vio)}
.tnround small{font-size:12px;color:var(--dim)}.tnround small.ok{color:var(--teal)}.tnround small.soon{color:#e8c36a}
.tnpoolhead{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.tnpoolhead h3{margin:0;font-size:18px}.tnpoolhead small{color:var(--dim)}
.tncats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:none}
.tncat{flex:0 0 auto;min-height:36px;padding:0 13px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--s1);color:var(--dim);font:inherit;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.tncat.on{background:var(--vio);border-color:var(--vio);color:var(--vio-dk)}
.tndot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.tngroup{margin-bottom:20px}
.tngrouphead{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tngrouphead small{color:var(--dim)}
.tntag{display:inline-flex;align-items:center;justify-content:center;height:22px;min-width:34px;padding:0 8px;border-radius:var(--r-tag);background:var(--c);color:#151825;font-weight:800;font-size:12px;letter-spacing:.3px}
.tngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
/* a pool's map card is the Beatmaps card (.card, .bc-*) with these on top */
.tncover{background:linear-gradient(135deg,#3a2a52,#1d2236)}
.tncover .slot{position:absolute;left:10px;top:10px;z-index:3}
.tncbody{flex:1;min-width:0}
.tnreal{display:flex;flex-direction:column;gap:3px;min-width:0}
.tndiff{display:flex;gap:7px;align-items:center;font-size:12.5px;min-width:0}.tndiff i{flex:0 0 auto;width:14px;height:6px;border-radius:1px}.tndiff b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnlock{font-size:10px}
.tnstats{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:12px;color:var(--dim);font-weight:600}
.tnacts{display:flex;gap:8px;margin-top:auto;padding-top:10px;pointer-events:auto}.tnacts .btn{flex:0 0 auto}.tnacts .btn:first-child{flex:1}
/* secret: the red grid. A round that isn't out: two pictures crossfading and a scan line. A secret map's card: one still picture, no motion;
   when it unlocks the cover goes at once and the song card plays in the middle of the screen (.tnpop, js/tournament.js tnPop) */
@keyframes tnScan{0%{transform:translateY(-110%)}100%{transform:translateY(340%)}}
@keyframes tnBreathe{0%,100%{opacity:1}50%{opacity:.35}}
.tnfx{position:absolute;inset:0;z-index:2;background:#1a0d14;pointer-events:none}
.tngridfx{position:absolute;inset:-4px}
.tngl{position:absolute;inset:0;background:center/100% 100% no-repeat}
.tngl+.tngl{animation:tnSwap 2.6s ease-in-out infinite alternate;will-change:opacity}
.tngridfx.hot .tngl+.tngl{animation-duration:.9s}
@keyframes tnSwap{0%,20%{opacity:0}80%,100%{opacity:1}}
.tnlines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,77,109,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,77,109,.1) 1px,transparent 1px);background-size:10px 10px}
.tnscan{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(transparent,rgba(255,77,109,.22),transparent);animation:tnScan 3.2s linear infinite;will-change:transform}
.tncard.secret{border-color:#4a2234}
.tncard.soon{border-color:#ff4d6d}
.tncard.soon::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px rgba(255,77,109,.6),0 0 22px rgba(255,77,109,.3)}
.tnbadge{position:absolute;right:10px;top:10px;z-index:3;height:22px;padding:0 8px;border-radius:var(--r-tag);background:rgba(21,24,37,.85);border:1px solid #ff4d6d;color:#ff8fa6;font-weight:800;font-size:11px;letter-spacing:.8px;text-transform:uppercase;display:inline-flex;align-items:center}
.tnbadge.open{border-color:var(--teal);color:var(--teal)}
.tnbars{display:flex;flex-direction:column;gap:8px}
.tnbars i{display:block;height:14px;width:72%;border-radius:3px;background:rgba(255,77,109,.28);filter:blur(2px)}
.tnbars i+i{height:10px;width:46%;background:rgba(255,77,109,.18)}
.tncfoot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-top:8px;border-top:1px solid #3a2232}
.tncfoot :is(button,a){pointer-events:auto} /* (the card body lets taps through to the card, .bc-body: its own buttons, "View the maps" and ✎, take them) */
.tncfoot small,.tnwhen{color:var(--dim);font-size:12px}.tncount{font-variant-numeric:tabular-nums}
.tncard.soon .tncount{color:#ff8fa6}
.tncard.secret .tnreal{opacity:0;filter:blur(8px)}
.tncard.secret .tnacts{opacity:0;pointer-events:none}
.tncard.secret .tnbars{position:absolute;left:12px;right:12px;top:108px}
/* a round still hidden */
.tnhidden{position:relative;overflow:hidden;border-radius:var(--r-card);border:1px solid #4a2234;background:#160b11;min-height:320px;display:grid;place-items:center}
.tnhidden .tnfx{position:absolute;inset:0;background:transparent}
.tnhidden::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(22,11,17,.92) 0%,rgba(22,11,17,.55) 45%,rgba(22,11,17,0) 80%);pointer-events:none}
.tnhmid{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 16px;text-align:center}
.tnhmid .tnbadge{position:static;animation:tnBreathe 2.8s ease-in-out infinite;will-change:opacity}
.tnhmid h3{margin:0;font-size:24px}.tnhmid p{margin:0;font-weight:600}
.tncd{display:flex;gap:8px}
.tncd>div{min-width:68px;padding:10px 6px;background:rgba(21,24,37,.85);border:1px solid #4a2234;border-radius:var(--r-card);display:flex;flex-direction:column}
.tncd b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}.tncd small{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--dim);white-space:nowrap}
@media (max-width:520px){.tncd>div{min-width:0;flex:1}.tncd b{font-size:22px}.tnzone .skedit{min-width:0;width:100%}.tnzone{width:100%}}
@media (prefers-reduced-motion:reduce){.tngl,.tnscan,.tnhmid .tnbadge{animation:none!important}.tnscan{display:none}}
/* the host's tools */
.tntabs{display:flex;gap:6px;overflow-x:auto;margin-top:10px;scrollbar-width:none}
.tntab{flex:0 0 auto;min-height:38px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--s1);color:var(--dim);font:inherit;font-weight:700;cursor:pointer}
.tntab.on{background:var(--s3);border-color:var(--vio);color:var(--ink)}
.tnmbody{display:flex;flex-direction:column;gap:12px}
.tnadd{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r-card)}
.tnadd .skedit{width:auto;height:36px}
.tnadd small{color:var(--dim);font-weight:700;margin-right:4px}
.tnmround{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.tnmtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tnmtop .tnname{flex:1 1 200px;width:auto;height:36px;font-weight:700}
.tnkind{color:var(--dim);font-size:12px}
.tnstate{height:20px;padding:0 7px;border-radius:var(--r-tag);font-size:11px;font-weight:800;display:inline-flex;align-items:center;color:#151825;background:var(--mute)}
.tnstate.ok{background:var(--teal)}.tnstate.no{background:#e8c36a}
.tnseg{display:inline-flex;flex-wrap:wrap;gap:6px}
.tnseg button{min-height:34px;padding:0 12px;border-radius:var(--r-ctl);border:1px solid var(--line);background:transparent;color:var(--dim);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.tnseg button.on{background:var(--s3);border-color:var(--vio);color:var(--ink)}
.tnrevedit{display:flex;flex-direction:column;gap:8px}
.tnrow2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tnrow2 .skedit{width:auto;height:36px;flex:0 1 auto}
.tnrow2 input[type=url]{flex:1 1 240px}
.tnutc{color:var(--dim);font-size:12.5px}
.tnmaps{display:flex;flex-direction:column;gap:8px}
.tnmtable{display:flex;flex-direction:column;gap:4px}
.tnmrow{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-ctl);background:var(--bg);flex-wrap:wrap}
.tnmname{flex:1 1 200px;min-width:0;display:flex;flex-direction:column}
.tnmname b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tnmname small{color:var(--dim);font-size:12px}
.tnmrow .skedit{width:auto;height:34px}
.tnpaste{height:auto;min-height:70px;padding:8px;font:13px/1.6 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
.icon.sm{width:34px;height:34px}
.tncatrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 12px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card)}
.tncatrow input[type=color]{width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r-ctl);background:none;padding:2px;cursor:pointer}
.tncatrow .tncode{width:84px;height:36px;font-weight:800;text-transform:uppercase}
.tncatrow>.skedit:not(.tncode){flex:1 1 140px;width:auto;height:36px}
.tnmods{flex:2 1 300px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tnmodlist{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.tnmodlist small{color:var(--dim);margin-right:4px}
.tnmod{min-width:40px;min-height:32px;padding:0 8px;border-radius:var(--r-ctl);border:1px solid var(--line);background:transparent;color:var(--dim);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.tnmod.on{background:var(--c);border-color:var(--c);color:#151825}
.tnfield{display:flex;flex-direction:column;gap:6px;max-width:640px}
.tnfield>span{font-size:12px;font-weight:700;color:var(--dim)}.tnfield .skedit{height:38px}.tnfield .hint{margin:0}
.tnsecdlg{display:flex;flex-direction:column;gap:8px}.tnsecdlg b{font-size:12px;color:var(--dim);margin-top:6px}
.tnstafflist{display:flex;flex-direction:column;gap:4px}
.tnlog{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.tnlogrow{display:grid;grid-template-columns:150px 140px 1fr 130px;gap:10px;padding:9px 12px;border-bottom:1px solid var(--s2);align-items:start;font-size:13px}
.tnlogrow:last-child{border-bottom:0}
.tnlogwhen,.tnlogdev{color:var(--dim)}.tnlogwhat{display:flex;flex-direction:column;gap:2px}
.tnlogwhat .minus{color:#ff8fa6}.tnlogwhat .plus{color:var(--teal)}
.tnlogrow.k-reveal .tnlogwhat>b{color:#e8c36a}.tnlogrow.k-staff .tnlogwhat>b{color:var(--teal)}
@media (max-width:720px){.tnlogrow{grid-template-columns:1fr}.tnlogdev{display:none}}
.tnsavebar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r-card);background:var(--s2);border:1px solid var(--vio);box-shadow:0 10px 30px rgba(0,0,0,.45);max-width:calc(100vw - 32px)}
.tnsavebar span{font-weight:700}
.tncard.secret :is(.bc-play,.bc-dl,.cmain,.cprog){display:none}

/* ---------- the tournament preview's bar in the player (js/tournament.js tnpBar): slot, locked difficulty, mods, pool skin, ‹ › ---------- */
.tnpbar{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--bd);border-radius:6px;background:rgba(21,24,37,.88);backdrop-filter:blur(6px)}
.tnprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tnpdiff{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;color:var(--dim);font-size:13px}
.tnpdiff b{color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.tnpdiff .tnlock{font-size:11px}
.tnpmods{display:flex;gap:4px;flex-wrap:wrap}
.tnpmod{min-width:40px;min-height:34px;padding:0 8px;border-radius:4px;border:1px solid var(--bd);background:transparent;color:var(--txt);font:inherit;font-weight:800;font-size:13px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.tnpmod:disabled{color:var(--mute);cursor:default}
.tnpmod.on{background:var(--vio);border-color:var(--vio);color:#151825}
.tnpmod.on:disabled{opacity:.85;color:#151825}
@media (hover:hover){.tnpmod:not(:disabled):not(.on):hover{border-color:var(--vio)}}
.tnpskin,.tnpnav{min-height:34px;padding:0 10px;border-radius:4px;border:1px solid var(--bd);background:var(--s2);color:var(--txt);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.tnpskin.on{border-color:var(--vio);color:var(--vio)}
.tnpinfo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;flex:1 1 260px;min-width:0;margin-right:auto;padding-left:10px;border-left:1px solid var(--bd);color:var(--dim);font-size:12.5px}
.tnpinfo b{color:var(--txt)}
.tnpinfo .sr{color:#e8c36a;font-weight:700}
.tnpinfo .tnpnote{color:var(--mute)}
@media (max-width:760px){.tnpbar{padding:6px 8px;gap:4px}.tnpinfo{font-size:12px;gap:2px 10px;flex-basis:100%;order:9;padding-left:0;border-left:0}.tnpinfo .tnpnote{display:none}.tnpmod{min-width:36px;min-height:32px}.tnpskin,.tnpnav{min-height:32px}}
/* secret maps uploaded as an .osz (js/tournament.js tnUploadBox, tnSecretTools, tnCryptoInfo) */
.tnupbox{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--s2)}
.tnupbox label.btn{align-self:flex-start;cursor:pointer}
.tnupbox label.btn.disabled{opacity:.5;pointer-events:none}
.tnupfile{display:flex;flex-direction:column;gap:2px}
.tnupfile small,.tnupname{color:var(--dim);font-size:12.5px}
.tnupnote{margin:0;color:var(--dim);font-size:13px}
.tnupnote.bad{color:#ff8fa6}
.tnuprow{display:flex;flex-direction:column;gap:4px}
.tnuprow .skedit{max-width:100%}
.tnchecks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
.tnchecks .ok{color:var(--teal)}
.tnchecks .no{color:#ff8fa6}
.tnupprog{height:6px;border-radius:3px;background:var(--s3);overflow:hidden}
.tnupprog i{display:block;height:100%;width:0;background:var(--vio);transition:width .2s}
.tnsectools{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.tnsectools label.btn{cursor:pointer}
.tnwho{display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto}
.tnwhorow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.3fr);gap:8px;align-items:baseline;font-size:12.5px;padding:3px 0;border-bottom:1px solid var(--line)}
.tnwhorow small{color:var(--dim)}
.tnupl{position:absolute;right:10px;bottom:10px;z-index:3;height:22px;padding:0 8px;border-radius:var(--r-tag);background:rgba(21,24,37,.85);border:1px solid var(--line);color:var(--dim);font-weight:700;font-size:11px;display:inline-flex;align-items:center}
.tncrypto{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.tncrypto p{margin:0;color:var(--dim)}
.tncrypto ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.tncrypto .tnyes li::marker{content:"✓  ";color:var(--teal)}
.tncrypto .tnno li::marker{content:"!  ";color:#ff8fa6}
@media (max-width:600px){.tnwhorow{grid-template-columns:1fr 1fr}}
/* the tournament preview: its bar sits over the "Tap to start" cover (z-index 2), which otherwise takes its clicks */
body.tnprev .ui .bar.top{z-index:3}
/* phones: a round's name gets the whole first line, its kind, ↑ ↓ ✕ and state the next (they broke up across two lines) */
@media (max-width:600px){.tnmtop .tnname{flex:1 1 100%}.tnmtop .tnstate{margin-left:auto}}
/* a map card's ✎ (host and mappoolers) and its pop-up */
.tnedit{pointer-events:auto;flex:0 0 auto;min-width:34px}
.tncfoot .tnedit{align-self:center}
.tneditdlg{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.tneditdlg .mdlin{margin:0;height:42px;font-size:15px}
.tneditdlg .mdlin:disabled{opacity:.55}
.tneditwho{margin:0;color:var(--dim);font-size:13px;overflow-wrap:anywhere}
.tneditdlg>.hint{margin:0;font-size:12.5px}
/* a mystery song's card (secret "Guess the song"): no cover or name until it has been played here */
.tncard.myst .tncover{background:radial-gradient(120% 140% at 50% 120%,#5b3a8c 0%,#2a2140 55%,#1b1f30 100%)}
.tnmystq{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:58px;font-weight:900;line-height:1;color:rgba(255,255,255,.85);text-shadow:0 0 24px rgba(199,156,255,.7);animation:tnBreathe 2.8s ease-in-out infinite;will-change:opacity}
.tncard.myst .tnbadge.open{border-color:#c79cff;color:#d9bdff}
.tncard.myst .bc-t{letter-spacing:2px}
.tnnameat{max-width:140px}
@media (prefers-reduced-motion:reduce){.tnmystq{animation:none}}
/* the song card in the middle of the screen (js/tournament.js tnPop): a secret map unlocking on the pool page, a mystery song's name
   coming out in the preview. A broadcast-style card: cover, the slot and its category, the status, the name, then artist, difficulty and
   mapper. Motion: the card rises in, the category's line draws across, the name decodes from "???", the rest settles in; it stays 5 s and
   leaves. Over everything, taps go through it; transitions on transform and opacity only */
.tnpop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;pointer-events:none}
.tnpop::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(8,10,18,.72) 0%,rgba(8,10,18,.32) 50%,rgba(8,10,18,0) 78%);opacity:0;transition:opacity .5s ease}
.tnpop.in::before{opacity:1}.tnpop.out::before{opacity:0}
.tnpopcard{position:relative;display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);width:min(580px,100%);background:#11141f;border:1px solid rgba(255,255,255,.09);border-radius:10px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.6);opacity:0;transform:translateY(22px) scale(.97);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.tnpopcard::before{content:"";position:absolute;left:0;top:0;z-index:2;width:100%;height:3px;background:var(--c,var(--vio));transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.65,0,.35,1) .25s}
.tnpop.in .tnpopcard{opacity:1;transform:none}.tnpop.in .tnpopcard::before{transform:none}
.tnpop.out .tnpopcard{opacity:0;transform:translateY(-8px);transition-duration:.4s}
.tnpopcov{position:relative;min-height:156px;background:#1b1f30 center/cover no-repeat}
.tnpopcov canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tnpopcov::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,20,31,0) 55%,#11141f)}
.tnpop.myst .tnpopcov{background:radial-gradient(120% 140% at 50% 120%,#5b3a8c 0%,#2a2140 55%,#1b1f30 100%)}
.tnpopq{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);font-size:56px;font-weight:900;line-height:1;color:rgba(255,255,255,.88);text-shadow:0 0 24px rgba(199,156,255,.7)}
.tnpopbody{display:flex;flex-direction:column;gap:4px;padding:18px 20px;min-width:0}
.tnpophead{display:flex;align-items:center;gap:8px;min-width:0}
.tnpophead .tntag{flex:0 0 auto}
.tnpopcat{min-width:0;font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnpopstate{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--teal)}
.tnpopstate::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.tnpop.violet .tnpopstate,.tnpop.myst .tnpopstate{color:#c79cff}
.tnpoptitle{display:grid;grid-template-columns:minmax(0,1fr);margin-top:8px;font-size:24px;font-weight:800;line-height:1.2;overflow-wrap:break-word}
.tnpoptitle>span{grid-area:1/1;min-width:0}.tnpopghost{visibility:hidden}
.tnpopartist{font-size:14px;font-weight:600;color:var(--dim);overflow-wrap:break-word}
.tnpopfacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.tnpopfacts dt{align-self:center;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute)}
.tnpopfacts dd{margin:0;min-width:0;font-weight:700;color:var(--ink);overflow-wrap:break-word}
.tnpopartist,.tnpopfacts{opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.tnpop.named .tnpopartist{opacity:1;transform:none}.tnpop.named .tnpopfacts{opacity:1;transform:none;transition-delay:.12s}
@media (max-width:560px){.tnpopcard{grid-template-columns:minmax(0,1fr);width:min(340px,100%)}.tnpopcov{min-height:0;aspect-ratio:2.4;max-width:100%}.tnpopcov::after{background:linear-gradient(180deg,rgba(17,20,31,0) 55%,#11141f)}.tnpopbody{padding:14px 16px 16px}.tnpoptitle{font-size:20px;margin-top:6px}}
@media (prefers-reduced-motion:reduce){.tnpopcard,.tnpopcard::before,.tnpopartist,.tnpopfacts{transform:none!important;transition:opacity .3s ease!important}}
/* the preview bar's switches: "Pool mods" (Settings → General → Mappool preview) and "Pool skin", a lit dot when on */
.tnpchip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;border-radius:var(--r-ctl);border:1px solid var(--bd);background:var(--s2);color:var(--dim);font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.tnpchip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mute)}
.tnpchip.on{color:var(--ink);border-color:var(--vio)}.tnpchip.on::before{background:var(--vio);box-shadow:0 0 6px var(--vio)}
.tnpchip:focus-visible{outline:2px solid var(--vio);outline-offset:2px}
@media (max-width:760px){.tnpchip{min-height:32px;padding:0 9px}}
/* Mappools: the list page (a header panel, then "Yours" and "Public mappools" as cards) and the header panel of a mappool's page and of Manage */
.tnbackrow{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 12px}
.tneyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--vio)}
.tnhero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding:28px 30px;border:1px solid var(--bd);border-radius:10px;background:linear-gradient(135deg,rgba(194,107,255,.1),rgba(159,184,245,.04) 45%,transparent 70%),var(--s1);overflow:hidden}
.tnhero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(90deg,transparent 35%,#000);mask-image:linear-gradient(90deg,transparent 35%,#000);pointer-events:none}
.tnheromain{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.tnhero h2{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:34px;font-weight:800;letter-spacing:-1px}
.tnbeta{padding:4px 9px;border-radius:999px;border:1px solid rgba(194,107,255,.5);background:rgba(194,107,255,.1);color:var(--vio);font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.tnheromain p{margin:0;max-width:52ch;color:var(--dim);font-size:15px;line-height:1.55}
.tnheroacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tnfeats{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:center;margin:0;padding:0;list-style:none}
.tnfeats li{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:14px;border:1px solid var(--bd);border-radius:8px;background:rgba(21,24,37,.6)}
.tnico{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:rgba(194,107,255,.12);color:var(--vio)}
.tnico svg{width:18px;height:18px}
.tnfeats b{display:block;font-size:13.5px}
.tnfeats small{display:block;margin-top:2px;color:var(--dim);font-size:12.5px;line-height:1.45}
.tnsec{margin-top:30px}
.tnsech{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tnsech h3{margin:0;color:var(--ink);font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.tnsech::after{content:"";flex:1;height:1px;background:var(--bd)}
.tncount{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--s3);color:var(--dim);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.tnlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.tnrow{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--bd);border-radius:8px;background:var(--s1);color:var(--ink);text-decoration:none;transition:border-color var(--t),background var(--t)}
.tnrowbody{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 16px 14px}
@media (hover:hover){.tnrow:hover{border-color:rgba(194,107,255,.55);background:var(--s2)}.tnrow:hover .tnrowgo{color:var(--vio);transform:translateX(3px)}}
.tnrow:focus-visible{outline:2px solid var(--vio);outline-offset:2px}
.tnrowmain{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.tnrowmain b{overflow:hidden;font-size:15px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.tnrowmain small{color:var(--dim);font-size:12.5px}
.tnchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.tnchip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:4px;border:1px solid var(--bd);background:var(--s2);color:var(--dim);font-size:11.5px;font-weight:700}
.tnchip.pub{border-color:rgba(143,218,211,.35);color:var(--teal)}
.tnchip.role{border-color:rgba(159,184,245,.35);color:var(--ice)}
.tnchip.over{color:var(--mute)}
.tnrowgo{flex:0 0 auto;color:var(--mute);font-size:22px;line-height:1;transition:transform var(--t),color var(--t)}
.tnrow.skel{height:200px;background:linear-gradient(90deg,var(--s1) 0%,var(--s2) 50%,var(--s1) 100%) 0 0/200% 100%;animation:tnSkel 1.4s ease-in-out infinite}
@keyframes tnSkel{to{background-position:-200% 0}}
.tnemptybox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border:1px dashed var(--bd);border-radius:8px;color:var(--dim)}
.tnemptybox p{margin:0;font-size:14px}
.tnheadwrap{display:contents}
.tnhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:16px;padding:22px 24px;border:1px solid var(--bd);border-radius:10px;background:linear-gradient(135deg,rgba(194,107,255,.08),transparent 55%),var(--s1)}
.tnheadmain{display:flex;flex:1 1 360px;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.tnhead h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.8px;overflow-wrap:anywhere}
.tnheadmain p{margin:0;color:var(--dim);font-size:14px}
.tnhead .tnheadrow{margin-top:0}
.tnhead .tntabs{flex:1 0 100%;margin-top:4px}
@media (max-width:760px){.tnhero{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px 18px}.tnhero h2{font-size:28px}.tnfeats,.tnlist{grid-template-columns:minmax(0,1fr)}.tnhead{padding:18px 16px}.tnhead h2{font-size:24px}.tnheadmain{flex-basis:100%}}
/* a mappool's cover (1800 × 500, 3.6 : 1): the picture over a banner in the mappool's colour with its initials */
.tncov{position:relative;flex:0 0 auto;aspect-ratio:3.6;max-width:100%;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 34%,#141826) 0%,#141826 72%)}
.tncov::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:18px 18px}
.tncovmono{position:absolute;left:16px;bottom:8px;color:var(--c);font-size:44px;font-weight:900;letter-spacing:1px;line-height:1;opacity:.55}
.tncov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease}
.tncov.has img{opacity:1}.tncov.has .tncovmono{display:none}
.tnrow .tncov{border-bottom:1px solid var(--bd)}
.tnhead{position:relative;overflow:hidden}
.tnhead.cov{min-height:190px}
.tnhead>*:not(.tnheadcov){position:relative;z-index:1}
.tnheadcov{position:absolute;top:0;right:0;bottom:0;left:36%}
.tnheadcov img{width:100%;height:100%;object-fit:cover;display:block}
.tnheadcov{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.tnheadcov::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,17,27,.75),rgba(15,17,27,.2) 60%)}
/* Settings → Cover image */
.tncovfield>label{font-size:12px;font-weight:700;color:var(--dim)}
.tncovspec{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--bd);border-left:3px solid var(--vio);border-radius:6px;background:var(--s1);font-size:12.5px;color:var(--dim)}
.tncovspec b{color:var(--ink);font-size:13px}
.tncovpvrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.tncovpv{width:min(360px,100%);border:1px solid var(--bd);border-radius:6px;overflow:hidden}
.tncovnote{flex:1 1 200px;font-size:12.5px;font-weight:600;color:var(--dim)}
.tncovnote.ok{color:var(--teal)}.tncovnote.warn{color:#e8c36a}.tncovnote.bad{color:var(--red)}
@media (max-width:760px){.tnhead.cov{min-height:0}.tnheadcov{position:relative;top:auto;right:auto;bottom:auto;left:auto;flex:1 0 calc(100% + 32px);margin:-18px -16px 0;aspect-ratio:3.6;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 45%);mask-image:linear-gradient(0deg,transparent 0%,#000 45%)}.tnheadcov::after{display:none}}
@media (max-width:520px){.tnfeats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tnfeats li{flex-direction:column;gap:8px;padding:12px}.tnfeats small{display:none}}
@media (prefers-reduced-motion:reduce){.tnrow.skel{animation:none}}
/* Manage → Rounds and pools: Import rounds (whole rounds pasted at once, a preview of what happens), the paste boxes' status,
   room under the last round for the floating Save bar */
.tnmbody{padding-bottom:84px}
.tnimport{border:1px solid var(--bd);border-radius:8px;background:var(--s1)}
.tnimport>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 14px;cursor:pointer;list-style:none}
.tnimport>summary::-webkit-details-marker{display:none}
.tnimport>summary::before{content:"▸";color:var(--vio);font-size:12px;transition:transform var(--t)}
.tnimport[open]>summary::before{transform:rotate(90deg)}
.tnimport>summary b{font-size:14px}.tnimport>summary small{color:var(--dim);font-size:12.5px}
.tnimport>:not(summary){margin:0 14px 12px}
.tnimporthelp p{margin:0 0 8px;color:var(--dim);font-size:13px;line-height:1.5}
.tnspecial{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.tnspecial li{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--dim)}
.tnspecial b{flex:0 0 auto;min-width:30px;padding:1px 6px;border-radius:3px;background:var(--s3);color:var(--ink);font-size:11.5px;text-align:center}
.tnimporttext{min-height:150px}
.tnimportpv{display:flex;flex-direction:column;gap:6px}
.tnimprow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:8px 10px;border:1px solid var(--bd);border-left:3px solid var(--teal);border-radius:6px;background:var(--s2);font-size:13px}
.tnimprow.bad{border-left-color:#e8c36a}
.tnimpwhat{color:var(--dim)}.tnimpn{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.tnimprow ul{flex:1 0 100%;margin:4px 0 0;padding-left:18px;color:#e8c36a;font-size:12px;overflow-wrap:anywhere}
.tnpastest{font-size:12.5px;font-weight:700;color:var(--dim)}.tnpastest.ok{color:var(--teal)}.tnpastest.bad{color:#e8c36a}
/* the pool page: the tiebreaker, last, with its own heading and a larger card */
.tngroup.tb{padding-top:14px;border-top:1px solid rgba(232,195,106,.35)}
.tntbnote{padding:2px 8px;border-radius:999px;border:1px solid rgba(232,195,106,.45);background:rgba(232,195,106,.08);color:#e8c36a;font-size:11.5px;font-weight:700}
.tngroup.tb .tngrid{grid-template-columns:minmax(0,min(100%,640px))}
.tngroup.tb .tncard{border-color:rgba(232,195,106,.55);box-shadow:0 0 0 1px rgba(232,195,106,.18),0 12px 34px rgba(232,195,106,.1)}
/* a map card's tap opens its details (js/tournament.js tnMapDetail): the panel */
.tncard.tntap{cursor:pointer}
.tndet{display:flex;flex-direction:column;gap:12px;min-width:0}
.tndetcov{position:relative;aspect-ratio:3.6;max-width:100%;border-radius:8px;overflow:hidden;background:#1b1f30 center/cover no-repeat}
.tndetcov.secret{background:#1a0d14}.tndetcov.myst{background:radial-gradient(120% 140% at 50% 120%,#5b3a8c 0%,#2a2140 55%,#1b1f30 100%)}
.tndetcov .tntag{position:absolute;left:10px;top:10px;z-index:3}
.tndetcov .tnbadge{z-index:3}
.tndetcov .tnupl{position:absolute;right:10px;bottom:10px}
.tndethead{display:flex;flex-direction:column;gap:3px;min-width:0}
.tndetcat{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)}
.tndett{font-size:20px;font-weight:800;line-height:1.25;overflow-wrap:break-word}
.tndetsub{margin:0;color:var(--dim);font-size:13.5px;font-weight:600;overflow-wrap:break-word}
.tndetstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:0}
.tndetstats>dt{display:none}
.tndetstats dd{margin:0;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--bd);border-radius:6px;background:var(--s2);font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tndetstats dd::before{content:attr(data-k);font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.tndetlinks{display:flex;flex-wrap:wrap;gap:8px}
/* an unlock time reached: nothing redraws until "View the maps" */
.tnreadybtn{margin-top:4px}
.tncfoot .tnreadybtn{margin:0 0 0 auto}
.tnreadyl{color:var(--teal)}
.tnready{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:10px 12px 10px 16px;border-radius:10px;border:1px solid var(--teal);background:var(--s1);box-shadow:0 12px 40px rgba(0,0,0,.5);font-weight:700;animation:tnReadyIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes tnReadyIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.tnready{animation:none}}
/* the padlock (js/tournament.js tnLockIco): a line icon in the text's colour, in place of the words Locked / Unlocked */
.tnlk{display:inline-grid;place-items:center;flex:0 0 auto;width:1.1em;height:1.1em;vertical-align:-.2em}
.tnlk svg{display:block;width:100%;height:100%}
.tnlkt{display:inline-flex;align-items:center;gap:.4em}
.tnbadge.tnlkt{gap:0;padding:0 7px}.tnbadge .tnlk{width:14px;height:14px}
.tnhmid .tnbadge.tnlkt{gap:6px;padding:0 10px}
.tnlkbtn{display:inline-flex;align-items:center;justify-content:center;gap:.45em}.tnlkbtn .tnlk{width:16px;height:16px}
.tnpdiff .tnlk{width:12px;height:12px;opacity:.75}
.tnpinfo .tnlkt .tnlk{opacity:.8}
.tnround .tnlk{opacity:.8;vertical-align:-.15em}
.tnpopstate.tnlkt::before{display:none}.tnpopstate .tnlk{width:17px;height:17px}
.tnreadyl.tnlkt{color:var(--teal)}.tnreadyl.tnlkt .tnlk{width:20px;height:20px}
.tngrouphead small .tnlk,.tndetcat .tnlk{width:1.2em;height:1.2em;opacity:.85}
/* a mystery song before it unlocks (the host's choice): its "?" card in purple with the countdown */
.tncard.mystlock{border-color:rgba(199,156,255,.35)}
.tncard.mystlock .tncfoot{border-top-color:rgba(199,156,255,.22)}
.tncard.mystlock .tncount{color:#d9bdff}
/* Manage: the rounds as tabs over the one being edited, stuck under the header; the host drags them into order */
.tnmnav{position:sticky;z-index:4;display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-radius:var(--r-card);background:rgba(27,31,47,.94);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tnmchip{display:flex;align-items:center;gap:8px;min-height:44px;max-width:240px;padding:5px 12px 5px 10px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--s1);color:var(--dim);font:inherit;text-align:left;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background var(--t) ease-out,border-color var(--t) ease-out,transform .15s var(--ease),box-shadow .15s ease-out}
.tnmchipt{display:flex;flex-direction:column;min-width:0}
.tnmchip b{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnmchip small{font-size:11.5px;white-space:nowrap}.tnmchip small.ok{color:var(--teal)}
.tnmchip.on{background:var(--s3);border-color:var(--vio);box-shadow:inset 0 -2px 0 var(--vio)}
.tnmgrip{flex:0 0 auto;display:grid;place-items:center;width:14px;height:28px;margin-left:-4px;color:var(--mute);cursor:grab;touch-action:none}
.tnmgrip svg{width:8px;height:14px}
.tnmnav.sortable .tnmchip{cursor:grab}
.tnmnav.sorting,.tnmnav.sorting .tnmchip{cursor:grabbing}
.tnmchip.drag{border-color:var(--vio);background:var(--s3);transform:scale(1.04);box-shadow:0 10px 24px rgba(0,0,0,.45);opacity:.95;z-index:1}
@media (hover:hover){.tnmchip:not(.on):hover{border-color:rgba(194,107,255,.5);color:var(--ink)}.tnmchip:hover .tnmgrip{color:var(--dim)}}
@media (max-width:640px){.tnmnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px}.tnmnav::-webkit-scrollbar{display:none}.tnmchip{flex:0 0 auto;max-width:200px}}
@media (prefers-reduced-motion:reduce){.tnmchip{transition:none}.tnmchip.drag{transform:none}}
/* ===== Replays page (js/replayui.js rpoDrawPage): a header panel with what is kept where, opening a replay (a file or a score link),
   then the replays on this device and the ones saved online, each under a section line ===== */
.rpback{margin-bottom:12px}
.rphead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 28px;margin-bottom:14px;padding:22px 24px;border:1px solid var(--bd);border-radius:10px;background:linear-gradient(135deg,rgba(143,218,211,.09),transparent 55%),var(--s1)}
.rpheadmain{display:flex;flex:1 1 340px;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.rpeyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal)}
.rphead h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.8px}
.rpheadmain p{margin:0;color:var(--dim);font-size:14px;max-width:560px}
.rpstats{display:flex;gap:10px;flex-wrap:wrap}
.rpstatc{display:flex;flex-direction:column;gap:3px;min-width:150px;padding:12px 14px;border-radius:var(--r-card);background:var(--bg);border:1px solid var(--bd)}
.rpstatc>span{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--mute)}
.rpstatc b{font-size:24px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.rpstatc b small{font-size:14px;color:var(--mute);font-weight:700}
.rpstatc>small{font-size:12px;color:var(--dim)}
.rpmeter{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;margin:2px 0}
.rpmeter i{display:block;height:100%;border-radius:inherit;background:var(--teal);transition:width .4s var(--ease)}
.rpmeter.full i{background:#e8c36a}
.rpopen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px;margin-bottom:6px}
.rpdrop{display:flex;align-items:center;gap:14px;padding:18px 20px;border:1.5px dashed rgba(143,218,211,.35);border-radius:10px;background:rgba(143,218,211,.04);transition:background var(--t) ease-out,border-color var(--t) ease-out}
.rpdrop.over{border-color:var(--teal);background:rgba(143,218,211,.12)}
.rpdropic{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-card);background:rgba(143,218,211,.14)}
.rpdropic svg{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rpdroptx{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.rpdroptx b{font-size:15px}.rpdroptx small{color:var(--mute);font-size:12.5px}
.rpopen .rplink{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0;padding:16px 18px;border:1px solid var(--bd);border-radius:10px;background:var(--s1)}
.rpopen .rplink>b{font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.rplinkrow{display:flex;gap:8px}
.rpopen .rplink input{flex:1 1 auto;min-width:0;height:42px;font-size:15px;padding:0 12px;border-radius:8px}
.rpopen .rplink .btn{height:42px;flex:0 0 auto;padding:0 16px;white-space:nowrap}
.rphint{margin:0;font-size:12.5px;line-height:1.5;color:var(--mute)}
.rpsec{margin-top:26px}
.rpsech{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.rpsech h3{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink);font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.rpsech::after{content:"";order:1;flex:1;height:1px;background:var(--bd)}
.rpsech .btn{order:2}
.rpcount{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--s3);color:var(--dim);font-size:11.5px;letter-spacing:0}
.rpsecn{margin:0 0 10px;color:var(--dim);font-size:13px}
.rpoff{margin:0;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r-card);color:var(--dim);font-size:13.5px}
.rpempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 16px}
.rpemptyic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--s2)}
.rpemptyic svg{width:22px;height:22px;fill:none;stroke:var(--mute);stroke-width:1.8;stroke-linejoin:round}
@media (max-width:820px){.rpopen{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .rphead{padding:18px 16px}.rphead h2{font-size:26px}
  .rpstats{width:100%}.rpstatc{flex:1 1 0;min-width:0}
  .rpdrop{padding:14px 16px}.rpdrop .btn{flex:0 0 auto}
  .rplinkrow{flex-direction:column}.rpopen .rplink .btn{width:100%}
}
/* Mappools loading and touch (js/tournament.js tnSkeleton): the page keeps a screen's height while it loads, so the footer
   never shows under "Loading" and then jumps; the skeleton has the shape of a header and a grid of cards */
.tnview{min-height:calc(100vh - 60px)}
.tnskel{display:flex;flex-direction:column;gap:16px}
.tnskhead,.tnskcard{border-radius:var(--r-card);border:1px solid var(--line);background:linear-gradient(90deg,var(--s1) 0%,var(--s2) 50%,var(--s1) 100%) 0 0/200% 100%;animation:tnSkel 1.4s ease-in-out infinite}
.tnskhead{height:170px}
.tnskgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.tnskcard{height:260px}
@media (prefers-reduced-motion:reduce){.tnskhead,.tnskcard{animation:none}}
/* a phone: the rounds in one row that scrolls sideways, so the pool starts on the first screen */
@media (max-width:640px){
  .tnrounds{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:6px -16px 14px;padding:0 16px;scroll-padding:0 16px}
  .tnrounds::-webkit-scrollbar{display:none}
  .tnround{flex:0 0 auto;min-width:148px;max-width:220px;min-height:54px;padding:8px 12px}
  .tnround b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* a finger: buttons at least 42px tall, and the small ones on a card (download, the mapper's name) take a bigger tap than they show */
@media (pointer:coarse){
  .tnview .btn.sm,.tnview .tncat,.tnview .tnzone .skedit{min-height:42px}
  .tncard .bc-dl::after{content:"";position:absolute;inset:-8px}
  .tncard .bc-by .mlink{display:inline-block;padding:6px 0;margin:-6px 0}
}
#shell:not(.vready)>.foot{visibility:hidden} /* (js/app.js showView: until the first page shows, the footer would sit right under the header, then jump down) */
.tncard{contain-intrinsic-size:auto 264px} /* (a pool card, not a Beatmaps one: the space a card not drawn yet keeps, .card's content-visibility, is a pool card's height, so nothing grows when it is drawn) */
.tngroup.tb .tncard{contain-intrinsic-size:auto 330px}
/* a phone on a mappool's page: no "Request access" in the header. It comes in with the login check, after the page (which no longer
   waits for it: gate.js), and on a phone it pushes the header onto a third row, so the whole page jumped down; the home page keeps it */
@media (max-width:760px){body[data-view="mappools"] #guestReq{display:none}}
/* a pool as a list (js/tournament.js tnLine, the Cards / List switch tnviewsw): one line a map, a phone's default */
.tnviewsw{margin-left:auto;align-self:center;display:inline-flex;border:1px solid var(--bd);border-radius:var(--r-ctl);overflow:hidden;flex:0 0 auto}
.tnvsw{min-height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;background:var(--s1);color:var(--dim);border:0;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;transition:background var(--t) ease-out,color var(--t) ease-out}
.tnvsw+.tnvsw{border-left:1px solid var(--bd)}
.tnvsw svg{width:15px;height:15px;flex:0 0 auto}
.tnvsw[aria-pressed="true"]{background:var(--s3);color:var(--ink)}
.tnvsw:focus-visible{outline:2px solid var(--vio);outline-offset:-2px}
.tnql{display:flex;flex-direction:column;gap:6px}
.tnqlrow{display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 8px 7px 10px;border:1px solid var(--bd);border-radius:var(--r-card);background:var(--s1);cursor:pointer;transition:border-color var(--t) ease-out}
.tnqlrow:hover{border-color:var(--s3)}
.tnqlrow .tntag{flex:0 0 auto;min-width:42px}
.tnqlthumb{flex:0 0 auto;width:42px;height:42px;border-radius:var(--r-ctl);background:linear-gradient(135deg,#3a2a52,#1d2236) center/cover no-repeat;display:grid;place-items:center;color:rgba(255,255,255,.85);font-weight:900;font-size:20px}
.tnqlrow.secret .tnqlthumb{background:#1a0d14;color:#ff6b8a;font-size:18px}
.tnqlrow.myst .tnqlthumb{text-shadow:0 0 14px rgba(199,156,255,.7)}
.tnqlmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tnqlt{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tnqlsub{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:12.5px;min-width:0}
.tnqlsub i{flex:0 0 auto;width:14px;height:6px;border-radius:1px}
.tnqlv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tnqlsr{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:600}
.tnqlrow .tnopen,.tnqlrow .tnedit{flex:0 0 auto}
.tnqlfoot{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap;font-size:12.5px;padding-top:0;border-top:0}
.tnqlfoot>b:not(.tncount){font-weight:700;color:var(--dim)}
.tnqlrow.soon .tncount{color:#ff8fa6}
.tnqlfoot .tnreadybtn{margin-left:auto}
@media (pointer:coarse){.tnvsw{min-height:42px;padding:0 13px}.tnqlrow{min-height:62px}}
@media (max-width:380px){.tnvsw span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* a secret map that is out, to be unlocked or watched first (js/tournament.js tnVeilCard; its line, its details): an open padlock, nothing of the map */
.tnveil .tncover,.tndetcov.veil{background:radial-gradient(circle at 50% 45%,rgba(61,219,176,.16),transparent 60%),linear-gradient(135deg,#1f2a33,#171b29)}
.tnveilico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(61,219,176,.12);color:var(--teal);font-size:26px}
.tnveil .bc-by{color:var(--dim)}
.tnunlock{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tnqlrow.veil .tnqlthumb{background:#16242a;color:var(--teal);font-size:18px}
/* a pop-up as a sheet (js/core.js modal({ sheet }), mdlSheetDrag: a pool map's details): on a phone, from the bottom with a grab handle, pulled down to close as the Beatmaps page's panel */
.mdlgrab{display:none}
@media (max-width:700px){
  .mdl.mdlsheet{place-items:end stretch;padding:0}
  .mdl.mdlsheet .mdlp,.mdl.mdlsheet .mdlp.wide{width:100%;max-height:94svh;border-radius:6px 6px 0 0;border-bottom:0;padding-top:30px;padding-bottom:calc(14px + env(safe-area-inset-bottom));animation:dSheet .34s var(--ease)}
  .mdl.mdlsheet.out .mdlp{animation:dSheetOut .18s ease-in forwards}
  .mdlgrab{display:block;position:absolute;top:0;left:0;right:0;height:26px;z-index:3;touch-action:none;cursor:grab}
  .mdlgrab::after{content:"";position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(255,255,255,.55)}
}
/* a pop-up flying out of its card (js/core.js mdlFly, a pool map's details on a wide screen): the move is the Web Animations API's, no CSS motion */
.mdl.mdlfly,.mdl.mdlfly .mdlp{animation:none}
.mdl.mdlfly .mdlp{transform-origin:0 0;will-change:transform,clip-path}
.tnqlrow.dsrc{opacity:.001;pointer-events:none}
/* a mappool's map in the Beatmaps page's panel (js/tournament.js tnDetailPanel): its slot and category, first on the cover, in the category's colour */
.dchips .dslot{background:var(--c);color:#151825;font-weight:800;letter-spacing:.2px}
/* a mappool's map in the Beatmaps page's panel: the Mods section above the difficulties (js/tournament.js tnModsBox) */
.dxtra{order:4;padding:6px 24px 4px} /* (below 900px the panel's parts are ordered: after the buttons, before the difficulties) */
@media (max-width:700px){.dxtra{padding:6px 20px 4px}}
@media (min-width:900px){.dxtra{padding:20px 76px 4px 28px}} /* (the top of the right side: clear of the close button, like its heading) */
.tnmodsbox .dlabel{padding:0 0 6px}
.tnmodshead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tnmodsline{margin:4px 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13.5px;color:var(--txt)}
.tnmodsline small{color:var(--dim);font-size:12.5px}
.tnmodsrow{display:flex;flex-wrap:wrap;gap:6px}
@media (pointer:coarse){.tnmodsbox .tnpmod,.tnmodsbox .tnpchip{min-height:42px}}
/* a mappool's map not shown yet, in the Beatmaps page's panel (js/app.js showDetail info.veil, js/tournament.js tnVeilPanel): no picture, a sign in its place */
.dcover.dv-myst{background:radial-gradient(circle at 50% 55%,rgba(199,156,255,.28),transparent 62%),linear-gradient(160deg,#2a1f45,#1b1830 70%)!important}
.dcover.dv-secret{background:radial-gradient(circle at 50% 55%,rgba(255,77,109,.2),transparent 62%),linear-gradient(160deg,#2a1520,#1a0d14 70%)!important}
.dcover.dv-open{background:radial-gradient(circle at 50% 55%,rgba(61,219,176,.18),transparent 62%),linear-gradient(160deg,#16262c,#171b29 70%)!important}
.dveil{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:grid;place-items:center;font-size:88px;font-weight:900;line-height:1;color:rgba(255,255,255,.82);pointer-events:none} /* (on the right: the chips and the title keep the left) */
.dv-myst .dveil{text-shadow:0 0 28px rgba(199,156,255,.75);animation:tnBreathe 2.8s ease-in-out infinite}
.dv-secret .dveil,.dv-open .dveil{width:64px;height:64px;border-radius:50%;font-size:0}
.dv-secret .dveil{background:rgba(255,77,109,.14);color:#ff6b8a}.dv-open .dveil{background:rgba(61,219,176,.14);color:var(--teal)}
.dveil svg{width:34px;height:34px}
@media (prefers-reduced-motion:reduce){.dv-myst .dveil{animation:none}}
.dchips .dbadge{background:rgba(21,24,37,.7);border:1px solid currentColor}.dchips .dbadge-myst{color:#c9a6ff}.dchips .dbadge-secret{color:#ff8fa6}.dchips .dbadge-open{color:var(--teal)}
.tnxdl{margin-top:10px}
.tnhintl{color:var(--dim)}
/* ---- the Preview's bars (js/player.js pbMoreBuild): the top bar keeps back, the title, the map's figures, Preview / Modding and More; the other
   buttons wait in More's menu, labelled. The bottom bar: ±5 s round play, the speed, the volume, Quick settings, fullscreen. Modding keeps its own bars ---- */
#player:not(.editing) .toprow :is(#shareBtn,#liveBtn,#toolsBtn,#fs,#pVolBtn,#gear,#playBtn,#cloudBtn,#gdBtn){display:none}
#player.editing :is(#moreBtn,#mStats,#back5,#fwd5,#spdBtn,#bVol,#bQs,#bFs,.pbsep){display:none}
#player:not(.editing) #spd{display:none}
.qstab{display:none} /* (Quick settings opens from the bottom bar's button) */
.mstats{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0;overflow:hidden;margin-left:4px;padding-left:12px;border-left:1px solid color-mix(in srgb,var(--txt) 20%,transparent);font-size:12px;color:color-mix(in srgb,var(--txt) 82%,transparent);white-space:nowrap;font-variant-numeric:tabular-nums}
.mstats b{color:#fff;font-weight:600}
.mstats:empty{display:none}
/* (one look for the bars' new buttons: the site's control colours, like .icon / .btn) */
.morebtn,.pbk,.pbtn{flex:0 0 auto;border-radius:var(--r-ctl);border:1px solid var(--bd);background:var(--s2);color:var(--txt);font-weight:600;cursor:pointer;transition:background var(--t) ease-out}
.morebtn:hover,.morebtn[aria-expanded="true"],.pbk:hover,.pbtn:hover{background:var(--s3)}
.morebtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;font-size:13px}
.morebtn svg{width:18px;height:18px;fill:currentColor;stroke:none}
.moremenu,.spdmenu{position:fixed;z-index:40;min-width:220px;max-width:min(300px,calc(100vw - 16px));padding:5px;border-radius:var(--r-card);background:var(--s1);border:1px solid var(--bd);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.spdmenu{min-width:96px}
.mmhead{padding:8px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--dim)}
.mmsep{height:1px;margin:5px 4px;background:var(--bd)}
.mmitem{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--txt);font-size:14px;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
.mmitem:hover,.mmitem:focus-visible{background:var(--s3);outline:none}
.mmitem:disabled{opacity:.45;cursor:default}
.mmitem.on,.mmitem.lit{color:var(--pink)}
.mmitem svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pbk{width:44px;height:44px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.pbsep{flex:0 0 auto;width:1px;height:24px;background:color-mix(in srgb,var(--txt) 20%,transparent)}
.pbtn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;font-size:13px;white-space:nowrap}
.pbtn.pbicon{width:40px;padding:0;justify-content:center}
.pbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pbtn[aria-expanded="true"]{background:var(--s3);border-color:var(--pink)}
.spdbtn{font-weight:700;min-width:48px;justify-content:center}
.volpop.up::before{top:auto;bottom:-6px;transform:rotate(225deg)}
@media (max-width:900px){ .mstats{display:none} }
@media (max-width:900px){ #bQs span{display:none} #bQs{width:40px;padding:0;justify-content:center} }
@media (max-width:760px){ #moreBtn span{display:none} #moreBtn{width:40px;padding:0;justify-content:center} }
@media (max-width:520px){
  #player:not(.editing) #pLayer:not(.turned) :is(.pbsep,#bVol,#bFs,#turnBtn span){display:none}
  #player:not(.editing) #pLayer:not(.turned) #turnBtn{width:40px;padding:0;justify-content:center}
  .pbk{width:40px;height:40px}
  #player:not(.editing) #pLayer:not(.turned) .botrow{flex-wrap:wrap;row-gap:8px} /* (a phone held upright: the timeline on a row of its own, the buttons under it) */
  #player:not(.editing) #pLayer:not(.turned) .botrow>#tCur{order:-3}
  #player:not(.editing) #pLayer:not(.turned) .botrow>.seekwrap{order:-2;flex:1 1 calc(100% - 96px)}
  #player:not(.editing) #pLayer:not(.turned) .botrow>#tDur{order:-1}
  #player:not(.editing) #pLayer:not(.turned) #spdBtn{margin-left:auto}
}
/* ---- a portrait phone: the whole player turned a quarter clockwise with the picture (js/player.js pbTurn, core.js boxIn). The layer is as wide as the
   screen is tall, so its bars lay out as in landscape; the phone-width rules above that would squeeze them are undone here ---- */
#pLayer{display:contents}
#pLayer.turned{display:block;position:absolute;left:0;top:0;width:var(--th,100vh);height:var(--tw,100vw);transform:translateX(var(--tw,100vw)) rotate(90deg);transform-origin:0 0}
#player.editing #turnBtn{display:none}
#pLayer.turned #moreBtn span{display:inline}
#pLayer.turned #moreBtn{width:auto;padding:0 12px}
body:not(.replay) #pLayer.turned .meta #mSub{display:block}
#pLayer.turned .meta b{font-size:14px}
.turnbtn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#pLayer.turned .botrow{flex-wrap:nowrap} /* (the phone-width row of its own for the timeline: not on the turned bar, which is landscape-wide) */
#pLayer.turned .botrow .seekwrap{order:0;flex:1 1 auto;height:40px}
#pLayer.turned .botrow #tDur{margin-right:0}
#pLayer.turned .botrow #tDur::before{content:none}
#pLayer.turned .qset .qsbody{max-height:calc(var(--tw,100vw) - 150px);overflow-y:auto} /* (between the bars, so the bottom bar's button can close it) */
.rppop{max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain} /* (a short landscape phone: it scrolls instead of running off the top, where its first switch could not be reached) */
#pLayer.turned .rppop{max-height:calc(var(--tw,100vw) - 150px)}
/* ---- audit fixes ---- */
/* the times by the timeline stay readable over a bright picture (AA 4.5:1 for 12 px) */
#player .botrow .time{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6)}
/* a phone held upright: the difficulty picker waits in More, so the top bar keeps one row (js/player.js pbMoreBuild) */
@media (max-width:520px){
  #player:not(.editing) #pLayer:not(.turned) .toprow>#diffQuick{display:none}
  #player:not(.editing) #pLayer:not(.turned) .toprow{flex-wrap:nowrap}
  #player:not(.editing) #pLayer:not(.turned) .toprow .meta{flex:1 1 0;min-width:0} /* (the title gives way, cut with an ellipsis) */
}
.moremenu #diffQuick{display:block;width:calc(100% - 8px);max-width:none;margin:2px 4px 4px;height:44px}
/* touch screens: the bars' buttons and menu items at least 44 px */
@media (pointer:coarse){
  .pbk,.pbtn,.morebtn{min-height:44px;min-width:44px}
  .pbtn.pbicon{width:44px}
  .mmitem{min-height:44px}
}
/* Settings on a turned player: in its layer, laid out as on a phone on its side (tabs down the left), not the upright phone's tab row */
#pLayer.turned #sheet.setwin{width:calc(100% - 16px)!important;height:calc(100% - 16px);margin:auto;grid-template-columns:184px 1fr;grid-template-rows:auto 1fr}
#pLayer.turned #sheet.setwin .settabs{grid-column:1;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:6px;border-right:1px solid var(--bd);border-bottom:0}
#pLayer.turned #sheet.setwin .settabs .tab{height:32px;font-size:13px;text-align:left}
#pLayer.turned #sheet.setwin .setbody{grid-column:2;padding:4px 20px 22px}
#pLayer.turned #sheet.setwin .sheet-top{padding:8px 12px 6px 16px}