:root{
  --bg1:#F7F8FA; --bg2:#E8EBF0; --ink:#15171C; --mute:#8B929D; --hair:#E4E7EC;
  --card:#FFFFFF; --up:#2F9B6B; --down:#D6574E; --ice:#8FB4E8; --coral:#EE7C5B;
  --sq-l:#EEF1F5; --sq-d:#C6CED9;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{overflow-x:hidden;background:radial-gradient(120% 70% at 50% 20%,#FFFFFF 0%,var(--bg1) 45%,var(--bg2) 100%) fixed}
body{color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:14px}
.num,h1,h2,h3{font-family:"Sora",sans-serif}
.app{max-width:440px;margin:0 auto;padding:20px 20px 120px;overflow-x:hidden}
section{display:none}
section.on{display:block}
.muted{color:var(--mute)}
.up{color:var(--up)} .down{color:var(--down)}
.title{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.sub{font-size:14px;color:var(--mute);margin:4px 0 14px}
h3.t{font-size:17px;font-weight:600;margin:26px 0 10px;letter-spacing:-.01em}
.card{background:var(--card);border-radius:22px;padding:16px;box-shadow:0 12px 28px -20px rgba(21,23,28,.4)}

.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(21,23,28,.05)}
.seg button{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--mute);transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.seg button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(21,23,28,.12)}
.seg.full{display:flex}
.seg.full button{flex:1}
.seg img{width:18px;height:18px;vertical-align:-4px;margin-right:6px}

/* ============ rating ============ */
.rhead{display:flex;justify-content:space-between;align-items:center}
.me{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -14px rgba(21,23,28,.4);font-weight:600;font-size:14px}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#fff,#c3cad4);box-shadow:inset 0 0 0 1px #fff;display:grid;place-items:center;font-size:12px;font-weight:600}
.me svg{width:14px;height:14px;color:var(--mute)}
.rhero{position:relative;height:250px;margin-top:6px}
.rhero .left{position:relative;z-index:2;padding-top:34px}
.rhero canvas{position:absolute;right:-40px;top:0;width:240px;height:250px;pointer-events:none}
.rhero::before{pointer-events:none;content:"";position:absolute;right:-30px;top:40px;width:220px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,180,232,.35),rgba(238,190,170,.15) 60%,transparent);filter:blur(22px)}
.rlab{font-size:14px;color:var(--mute)}
.rnum{font-size:72px;font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600}
.chip.up{background:rgba(47,155,107,.1)} .chip.down{background:rgba(214,87,78,.1)} .chip.flat{background:rgba(21,23,28,.05);color:var(--mute)}
.chip svg{width:14px;height:14px}
.chartbtn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px 8px 8px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -14px rgba(21,23,28,.45);font-size:13px;font-weight:600}
.chartbtn i{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.chartbtn svg{width:15px;height:15px}
.ctrls2{display:grid;gap:8px;margin-top:4px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.card.wide{grid-column:1/-1}
.ic{width:34px;height:34px;border-radius:11px;background:var(--bg1);display:grid;place-items:center;margin-bottom:12px}
.ic svg{width:18px;height:18px}
.ct{font-size:13px;color:var(--mute)}
.cv{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.wdl{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:10px;background:var(--hair)}
.wdl .w{background:var(--ink)} .wdl .d{background:#B9C0CB} .wdl .l{background:#E2E5EA}
.cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cardhead b{font-size:15px;font-weight:600}
.trow{display:grid;grid-template-columns:38px 1fr auto auto;gap:10px;align-items:center;width:100%;padding:10px 0;text-align:left;border-top:1px solid var(--hair)}
.trow:first-of-type{border-top:0}
.trow img{width:38px;height:38px}
.trow b{font-weight:600;display:block}
.trow small{font-size:12px;color:var(--mute)}
.trow .num{font-size:17px;font-weight:600}
.trow .dl{font-size:13px;font-weight:600;min-width:44px;text-align:right}
.trow.sel b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ice);margin-left:6px;vertical-align:2px}
.sess{display:grid;grid-template-columns:1fr auto;align-items:center;padding:11px 0;border-top:1px solid var(--hair)}
.sess:first-of-type{border-top:0}
.sess b{font-weight:600;display:block;font-size:14px}
.sess small{font-size:12px;color:var(--mute)}
.sess .num{font-size:15px;font-weight:600}

.chart{position:relative;height:230px;margin:10px -4px 0;touch-action:pan-y}
.chart svg{width:100%;height:100%;display:block;overflow:visible}
.tip{position:absolute;top:-4px;transform:translateX(-50%);font-size:12px;color:var(--mute);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.sgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
.cell{background:rgba(21,23,28,.04);border-radius:14px;padding:10px 12px}
.cell .num{font-size:18px;font-weight:600}
.cell span{font-size:12px;color:var(--mute);display:block}

/* ============ boards ============ */
.bd{position:relative;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 20px 40px -24px rgba(21,23,28,.45)}
.bd.still{touch-action:pan-y pinch-zoom}
.sqs{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}
.sq{position:relative;border:0;cursor:pointer}
.sq .h{position:absolute;inset:0;transition:background .25s}
.sq.lm .h{background:rgba(143,180,232,.42)}
.sq.hintsq .h{background:rgba(143,180,232,.75)}
.sq.pick{box-shadow:inset 0 0 0 3px var(--ink)}
.sq.over{box-shadow:inset 0 0 0 3px var(--ice)}
.sq .dot{position:absolute;left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;border-radius:50%;background:rgba(21,23,28,.22);opacity:0;pointer-events:none}
.sq.dotted .dot{opacity:1}
.sq .c,.sq .rk{position:absolute;font-size:9px;font-weight:600;color:rgba(21,23,28,.4);pointer-events:none}
.sq .c{right:3px;bottom:1px} .sq .rk{left:3px;top:1px}
.sq.mk::after{content:"";position:absolute;inset:3px;border-radius:7px;box-shadow:0 0 0 2.5px #15171C,0 0 0 5px rgba(255,255,255,.7);animation:mkp 1.2s ease-in-out 3;pointer-events:none}
.sq.mkbad::after{box-shadow:0 0 0 2.5px #EE7C5B,0 0 0 5px rgba(255,255,255,.7)}
@keyframes mkp{50%{transform:scale(.86)}}
.itiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 16px}
.itile{padding:14px 16px;border-radius:18px;background:rgba(21,23,28,.04)}
.itile span{display:block;font-size:12px;color:var(--mute)}
.itile b{display:block;font-family:"Sora";font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:4px}
.ichips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px 4px;scroll-padding:0 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 36px),transparent)}
.ichips::after{content:"";flex:0 0 24px}
.ichips::-webkit-scrollbar{display:none}
.ichips button{flex:0 0 auto;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(21,23,28,.12);white-space:nowrap;transition:background .2s,color .2s}
.ichips button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.ihero{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-top:14px;padding:18px 16px;border-radius:24px;background:linear-gradient(150deg,#FFFFFF,#EEF1F5);box-shadow:0 14px 30px -20px rgba(21,23,28,.35),inset 0 0 0 1px rgba(255,255,255,.9)}
.ihl img{width:64px;height:64px;display:block;filter:drop-shadow(0 8px 8px rgba(21,23,28,.2))}
.imini{display:grid;grid-template-columns:repeat(8,1fr);width:64px;height:64px;border-radius:10px;overflow:hidden}
.ihm small{display:block;font-size:10px;letter-spacing:.09em;font-weight:700;color:var(--mute)}
.ihm b{display:block;font-family:"Sora";font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-top:3px}
.ihm span{display:block;font-size:12px;color:var(--mute);margin-top:3px;line-height:1.35}
.ihv{text-align:right}
.ihv b{display:block;font-family:"Sora";font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1}
.ihv span{display:block;font-size:11px;color:var(--mute);margin-top:4px}
.ihv.down b{color:var(--coral)} .ihv.up b{color:#3E8E5E}
.imean{font-size:14px;line-height:1.5;margin:14px 2px 0;color:var(--ink)}
.iacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;margin-top:12px}
.iacts .pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;font-size:13px;min-width:0}
.iacts .pillbtn.dark{overflow:hidden;text-overflow:ellipsis}
.iacts .pillbtn:only-child{grid-column:1/-1}
.iacts.stack{grid-template-columns:1fr}
.iacts svg{width:15px;height:15px;flex:0 0 15px}
.irows.nr .irow{grid-template-columns:auto 1fr auto 12px}
.irows.nr .irow:not(:has(.isq)){grid-template-columns:1fr auto 12px}
.pillbtn.dark{background:var(--ink);color:#fff}
.irows{margin-top:14px;border-top:1px solid var(--hair)}
.irow{display:grid;grid-template-columns:22px auto 1fr auto 12px;gap:12px;align-items:center;width:100%;text-align:left;padding:13px 0;border-bottom:1px solid var(--hair)}
.irow:disabled{opacity:1;cursor:default}
.irk{font-size:14px;color:var(--mute);font-weight:500}
.isq{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:"Sora";font-weight:600;font-size:14px;background:rgba(21,23,28,.05)}
.irow .itx b{display:block;font-size:15px;font-weight:600}
.irow .itx small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.irow .iv{font-family:"Sora";font-weight:600;font-size:17px;white-space:nowrap}
.irow .iv.up{color:#3E8E5E} .irow .iv.down{color:var(--coral)}
.irow>svg{width:12px;height:12px;color:#B5BBC4}
.irow:not(:has(.isq)){grid-template-columns:22px 1fr auto 12px}
.ilink{display:flex;align-items:center;gap:6px;margin:12px auto 0;font-size:14px;font-weight:600}
.ilink svg{width:12px;height:12px}
.sqs>.sq:first-child .rk{left:9px;top:7px} .sqs>.sq:last-child .c{right:10px;bottom:6px}
.bread{padding:4px 18px}
.bread .vd{padding:14px 0 12px;border-bottom:1px solid var(--hair)}
.bread .vd small{display:block;font-size:11px;letter-spacing:.08em;font-weight:700;color:var(--mute)}
.bread .vd b{display:block;font-family:Sora;font-size:20px;font-weight:600;margin-top:4px;letter-spacing:-.01em}
.bread .vd p{font-size:13px;color:var(--mute);margin-top:4px;line-height:1.45}
.bread .brow{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--hair)}
.bread .brow:last-child{border-bottom:0}
.bread .bic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(79,127,196,.1);color:#4F7FC4}
.bread .bic.warn{background:rgba(238,124,91,.12);color:var(--coral)}
.bread .bic svg{width:17px;height:17px}
.bread .brow b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.bread .brow p{font-size:13px;color:var(--mute);margin-top:3px;line-height:1.45}
.bread .brow .v{font-family:Sora;font-weight:600;font-size:15px;white-space:nowrap}
.bread .brow .pillbtn{margin-top:8px}
.bfam{padding:14px 0 6px;border-top:1px solid var(--hair)}
.bfam h5{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600;margin-bottom:10px}
.bfam h5 small{font-weight:500;color:var(--mute);font-size:12px}
.bdg .req{font-size:11px;color:var(--mute);line-height:1.25;margin-top:2px}
.bdg.done small.req{color:#3E8E5E;font-weight:600}
.nxtc{padding:4px 16px;margin-bottom:14px}
.nxt{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid var(--hair)}
.nxt:last-child{border-bottom:0}
.nxt img{width:52px;height:52px;filter:grayscale(.6) drop-shadow(0 6px 6px rgba(21,23,28,.15));opacity:.8}
.nxt b{display:block;font-size:15px;font-weight:600}
.nxt small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.nxt .prog{display:block;height:5px;border-radius:3px;background:var(--hair);margin-top:7px;overflow:hidden}
.nxt .prog i{display:block;height:100%;background:var(--ink)}
.nxt .num{font-family:Sora;font-weight:600;font-size:14px;white-space:nowrap}
.pcs{position:absolute;inset:0;pointer-events:none}
.pz{position:absolute;left:0;top:0;width:12.5%;height:12.5%;transition:transform .38s cubic-bezier(.3,.8,.2,1),opacity .3s}
.pz img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 .7px rgba(21,23,28,.75)) drop-shadow(0 2px 2px rgba(21,23,28,.28))}
.pz.drag{transition:none;z-index:60!important}
.pz.drag img{transform:scale(1.18);filter:drop-shadow(0 0 .7px rgba(21,23,28,.75)) drop-shadow(0 10px 8px rgba(21,23,28,.3))}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* ============ train ============ */
.tiles{display:flex;gap:8px;overflow-x:auto;scroll-padding-left:20px;margin:0 -20px 14px;padding:2px 20px 8px;scrollbar-width:none;scroll-snap-type:x mandatory}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:0 0 128px;scroll-snap-align:start;text-align:left;padding:12px;border-radius:20px;background:rgba(255,255,255,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 10px 24px -18px rgba(21,23,28,.45)}
.tile i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(21,23,28,.06);margin-bottom:18px}
.tile i svg{width:15px;height:15px}
.tile b{display:block;font-size:14px;font-weight:600}
.tile small{font-size:12px;color:var(--mute)}
.focus{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:14px 16px}
.focus small{font-size:12px;color:var(--mute)}
.focus b{font-family:"Sora";font-size:16px;font-weight:600;letter-spacing:-.01em;display:block}
.focus .bar{grid-column:1/-1;height:5px;border-radius:3px;background:var(--hair);overflow:hidden;margin-top:6px}
.focus .bar i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .5s}
.focus .pts{font-size:12px;color:var(--mute);text-align:right}
.pzhead{margin:16px 0 10px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;scroll-margin-top:16px}
.pzhead h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
.pzhead small{font-size:13px;color:var(--mute)}
.dots{display:flex;gap:5px;padding-bottom:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--hair)}
.dots i.done{background:var(--ink)} .dots i.cur{background:var(--ice)}
.status{margin-top:10px;min-height:44px;font-size:14px;line-height:1.4}
.status b{font-weight:600}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.btn{padding:13px;border-radius:16px;font-weight:600;background:#fff;box-shadow:0 6px 16px -10px rgba(21,23,28,.35)}
.btn.dark{background:var(--ink);color:#fff}
.btn[disabled]{opacity:.35;cursor:default}
.btn.full{grid-column:1/-1}
.lrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--hair)}
.lrow:first-child{border-top:0}
.lrow b{font-weight:600;display:block;font-size:15px}
.lrow small{font-size:12px;color:var(--mute)}
.ldel{height:34px;min-width:34px;padding:0 9px;border-radius:999px;display:inline-grid;place-items:center;color:var(--mute);background:rgba(21,23,28,.05);font-size:13px;font-weight:600;transition:background .2s,color .2s}
.ldel svg{width:16px;height:16px}
.ldel.arm{background:rgba(238,124,91,.14);color:var(--coral);padding:0 12px}
.orow2{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border-bottom:1px solid var(--hair)}
.orow2 .orow{border-bottom:0}
.lrow .go{padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.empty{font-size:14px;color:var(--mute);padding:6px 0}

/* ============ lab ============ */
.labhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chips{display:flex;gap:6px;overflow-x:auto;margin:12px -20px 12px;padding:2px 20px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:#fff;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px var(--hair)}
.chips button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.chips button.mine::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ice);margin-right:6px;vertical-align:1px}
.labboard{position:relative;width:100%;aspect-ratio:1}
.labboard .bd{position:absolute;inset:0}
#lab3d{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:14px;touch-action:none;cursor:grab}
.camreset{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 2px 8px rgba(21,23,28,.15);display:grid;place-items:center;z-index:3}
.camreset svg{width:16px;height:16px}
.transport{display:grid;grid-template-columns:auto auto auto 1fr auto;gap:6px;align-items:center;margin-top:12px}
.tb{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -10px rgba(21,23,28,.4)}
.tb.main{width:46px;height:46px;background:var(--ink);color:#fff}
.tb svg{width:16px;height:16px}
.tb[disabled]{opacity:.35}
input[type=range]{width:100%;min-width:0;accent-color:var(--ink)}
.spd{font-size:13px;font-weight:600;padding:8px 10px;border-radius:999px;background:rgba(21,23,28,.05)}
.banner{margin-top:12px;font-size:14px;line-height:1.4;min-height:20px}
.banner b{font-weight:600}
.odds{margin-top:12px;padding:14px 16px}
.oddsrow{display:flex;justify-content:space-between;align-items:baseline}
.oddsrow .num{font-size:22px;font-weight:600;letter-spacing:-.02em}
.oddsrow small{font-size:12px;color:var(--mute);display:block}
.oddsrow .dl{font-size:13px;font-weight:600;margin-left:6px}
.obar{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:10px;background:var(--hair)}
.obar i{display:block;height:100%;transition:width .4s}
.obar .w{background:var(--ink)} .obar .d{background:#B9C0CB} .obar .l{background:var(--coral)}
.onote{font-size:12px;color:var(--mute);margin-top:8px}
.cands{margin-top:10px;padding:12px 16px}
.cands h4{font-size:13px;font-weight:600;color:var(--mute);margin-bottom:4px}
.cand{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;width:100%;padding:8px 0;text-align:left;border-top:1px solid var(--hair)}
.cand:first-of-type{border-top:0}
.cand b{font-family:"Sora";font-weight:600}
.cand .fq{height:5px;border-radius:3px;background:var(--hair);overflow:hidden}
.cand .fq i{display:block;height:100%;background:#9AA3AF}
.cand small{font-size:12px;color:var(--mute);text-align:right;white-space:nowrap}
.moves{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.mv{padding:5px 9px;border-radius:9px;background:#fff;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px var(--hair);transition:background .2s,color .2s}
.mv.fork{box-shadow:inset 0 0 0 1.5px var(--ice)}
.mv.cur{background:var(--ink);color:#fff;box-shadow:none}
.mv.after{color:var(--mute)}

/* ============ you ============ */
.youhead{display:flex;align-items:center;gap:12px}
.youhead .av{width:52px;height:52px;font-size:16px}
.youhead h1{font-size:22px;font-weight:600;letter-spacing:-.02em}
.tier{display:inline-flex;align-items:center;gap:6px;margin-top:3px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  background:linear-gradient(110deg,#F9FAFB 0%,#CDD4DE 30%,#FFFFFF 45%,#BFC7D3 60%,#F4F6F8 100%);background-size:250% 100%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 2px rgba(21,23,28,.15);animation:sheen 5s ease-in-out infinite}
.tier i{width:7px;height:7px;transform:rotate(45deg);background:linear-gradient(135deg,#E9B8D0,var(--ice))}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.youseg{margin:16px 0 4px}
.sig{position:relative;overflow:hidden;padding:18px}
.sig .top{display:grid;grid-template-columns:1fr 96px;gap:8px;align-items:start}
.sig h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:2px 0 6px;line-height:1.15}
.sig p{font-size:14px;color:var(--mute)}
.sig img{width:112px;height:112px;margin:-10px -12px 0 0}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}
.gauge{text-align:center}
.gauge svg{width:62px;height:62px}
.gauge span{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.rail{display:flex;gap:10px;overflow-x:auto;scroll-padding-left:20px;margin:0 -20px;padding:4px 20px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.pc{flex:0 0 104px;scroll-snap-align:start;background:var(--card);border-radius:20px;padding:6px 8px 12px;text-align:center;box-shadow:0 12px 26px -20px rgba(21,23,28,.45)}
.pc img{width:84px;height:84px;display:block;margin:0 auto}
.pc b{display:block;font-size:14px;font-weight:600}
.pc span{font-size:12px;color:var(--mute)}
.op{display:block;width:100%;text-align:left;background:var(--card);border-radius:18px;padding:14px 16px;margin-bottom:8px;box-shadow:0 12px 26px -20px rgba(21,23,28,.45)}
.op .r{display:flex;justify-content:space-between;align-items:baseline}
.op b{font-weight:600}
.op small{font-size:12px;color:var(--mute)}
.op .num{font-size:17px;font-weight:600}
.readout{margin-top:12px;min-height:70px}
.readout .num{font-size:17px;font-weight:600}
.readout p{font-size:14px;color:var(--mute)}
.phase{display:grid;grid-template-columns:96px 1fr 38px;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.track{height:8px;background:var(--hair);border-radius:4px;overflow:hidden}
.fill{height:100%;border-radius:4px}
.phase .num{text-align:right;font-weight:600;font-size:14px}

/* ============ tab bar ============ */
.tabs{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:6px;border-radius:40px;
  background:rgba(236,238,242,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 30px -16px rgba(21,23,28,.45),inset 0 0 0 1px rgba(255,255,255,.7);z-index:15;width:min(380px,calc(100% - 32px))}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;border-radius:30px;font-size:12px;font-weight:600;color:#A5ABB4;transition:background .25s,color .25s,box-shadow .25s}
.tab svg{width:21px;height:21px}
.tab[aria-selected=true]{background:#FAFAFB;color:var(--ink);box-shadow:0 6px 14px -8px rgba(21,23,28,.35),inset 0 0 0 1px #fff}

/* ============ overlays ============ */
.scrim{position:fixed;inset:0;background:rgba(236,239,243,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.scrim.on{opacity:1;pointer-events:auto}
.circ{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.8);box-shadow:0 6px 16px -10px rgba(21,23,28,.35),inset 0 0 0 1px #fff;flex:0 0 auto}
.circ svg{width:18px;height:18px}
.sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:440px;height:94vh;height:94dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:linear-gradient(180deg,#FFFFFF,#EEF1F5);border-radius:30px 30px 0 0;z-index:30;transform:translateY(102%);transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 50px -20px rgba(21,23,28,.3)}
.sheet.on{transform:none}
.sheet .sbody{padding:18px 20px 34px}
.shead{display:flex;justify-content:space-between;align-items:flex-start}
.pv{position:fixed;inset:0;margin:0 auto;max-width:440px;display:flex;flex-direction:column;gap:14px;padding:18px 16px 26px;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s}
.pv.on{opacity:1;pointer-events:auto}
.pv:not(.on),.pv:not(.on) *{pointer-events:none!important}
.mc:not(.on) *,.dlg:not(.on) *{pointer-events:none!important}
.pvtop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pill{padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 6px 16px -10px rgba(21,23,28,.35),inset 0 0 0 1px #fff;font-size:15px;font-weight:600}
.pill.soft{font-size:13px;color:var(--mute);font-weight:500}
.rim{flex:1;min-height:0;padding:4px;border-radius:44px;
  background:linear-gradient(172deg,#FFFFFF 0%,#B9C1CC 6%,#F6F7F9 12%,#8E97A4 20%,#E9ECF0 30%,#D5DAE1 55%,#E3E7EC 100%);
  box-shadow:0 40px 70px -34px rgba(21,23,28,.55),0 2px 0 rgba(255,255,255,.9) inset;transform:translateY(24px) scale(.94);transition:transform .6s cubic-bezier(.2,.9,.2,1.05)}
.pv.on .rim{transform:none}
.pin{position:relative;height:100%;border-radius:41px;overflow:hidden;background:radial-gradient(90% 60% at 50% 38%,#FFFFFF 0%,#F1F3F6 55%,#DDE2E8 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -30px 60px -40px rgba(21,23,28,.25)}
#pieceCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.pctrls{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:space-between;align-items:center;padding:0 26px;pointer-events:none}
.pctrls>*{pointer-events:auto}
.glass{width:56px;height:56px;background:rgba(255,255,255,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 8px 20px -12px rgba(21,23,28,.4)}
.shutter{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 10px 24px -12px rgba(21,23,28,.45)}
.shutter span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#FFFFFF 0%,#D6DBE2 38%,#F7F8FA 52%,#AEB6C2 100%);box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(21,23,28,.2);transition:transform .15s}
.shutter:active span{transform:scale(.92)}
.shutter svg{width:20px;height:20px}
.hint{position:absolute;left:0;right:0;top:20px;text-align:center;font-size:12px;color:var(--mute);transition:opacity .4s}
.pvstats{display:flex;justify-content:center;align-items:center;padding:13px 10px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 6px 16px -10px rgba(21,23,28,.35),inset 0 0 0 1px #fff;font-size:14px;color:var(--mute)}
.pvstats span{padding:0 12px;white-space:nowrap}
.pvstats span+span{border-left:1px solid var(--hair)}
.pvstats b{color:var(--ink);font-family:"Sora";font-weight:600;margin-right:4px}
.pvstats span.one{white-space:normal;text-align:center;color:var(--ink);font-weight:600;font-size:15px;padding:0 8px;line-height:1.3}
.fp{position:fixed;inset:0;margin:0 auto;max-width:440px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;z-index:40;background:radial-gradient(120% 50% at 50% 0%,#FFFFFF,#F2F4F7 55%,#E8EBF0);transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fp.on{transform:none}
.fp:not(.on),.sheet:not(.on){visibility:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s .5s}
.fp>.circ{position:absolute;left:16px;top:18px;z-index:2}
.fp canvas{width:100%;height:340px;display:block}
.fpb{padding:0 20px 40px}
.fpb h1{font-size:38px;font-weight:600;letter-spacing:-.04em;line-height:1}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.note{font-size:14px;line-height:1.5;padding-left:12px;border-left:2px solid var(--ice)}
.mini{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border-radius:14px;overflow:hidden}
.mini div{position:relative} .mini div i{position:absolute;inset:0}
.dlg{position:fixed;left:50%;top:50%;width:min(360px,calc(100% - 32px));transform:translate(-50%,-46%) scale(.95);opacity:0;pointer-events:none;background:#fff;border-radius:26px;padding:20px;z-index:35;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.2,1.1);box-shadow:0 30px 60px -24px rgba(21,23,28,.45)}
.dlg.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.dlg h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.dlg label{display:block;font-size:13px;color:var(--mute);margin:14px 0 6px}
.dlg input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:14px;border:1px solid var(--hair);background:var(--bg1)}
/* train: breathing-app treatment */
.trhero{position:relative;margin:-20px -20px 0;padding:22px 20px 18px;border-radius:0 0 34px 34px;overflow:hidden;
  background:radial-gradient(80% 90% at 85% 0%,#C9D7EC 0%,rgba(201,215,236,0) 60%),radial-gradient(70% 80% at 0% 100%,#EAD9DE 0%,rgba(234,217,222,0) 60%),linear-gradient(180deg,#DDE4EE,#EEF1F5)}
.trhero .orb{position:absolute;right:-30px;top:-20px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,rgba(255,255,255,.7) 18%,rgba(190,206,230,.55) 48%,rgba(160,178,210,.25) 70%,transparent 72%);filter:blur(.3px);opacity:.9}
.trtop{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.trtop h1{font-size:26px;font-weight:600;letter-spacing:-.03em}
.trtop p{font-size:13px;color:#6F7885}
.glassbtns{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.glassbtns span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.55)}
.glassbtns svg{width:16px;height:16px}
.trhero .tiles{position:relative;margin:18px -20px 0}
.trhero .tile{background:rgba(255,255,255,.42)}

/* lab: station-board treatment */
.labhead2{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;text-align:center}
.labhead2 h1{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.labhead2 p{font-size:12px;color:var(--mute)}
.viewseg{margin:14px 0 4px}
.mboard{margin-top:12px;padding:6px 16px 10px}
.mbhead{display:flex;justify-content:space-between;align-items:center;padding:10px 0 12px;border-bottom:1px solid var(--hair)}
.mbhead b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.mbhead b svg{width:18px;height:18px}
.mbpill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--bg1);font-size:12px;font-weight:600}
.mrow{display:grid;grid-template-columns:44px 1fr auto 12px;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid var(--hair)}
.mrow:last-of-type{border-bottom:0}
.mno{width:44px;height:44px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center;align-content:center;line-height:1}
.mno small{font-size:8px;letter-spacing:.08em;color:var(--mute)}
.mno b{font-family:"Sora";font-size:17px;font-weight:600;margin-top:2px}
.mey{font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--mute)}
.msan{font-family:"Sora";font-size:16px;font-weight:600;display:block;margin-top:1px}
.msub{font-size:12px;color:var(--mute)}
.mwin{font-family:"Sora";font-size:14px;font-weight:600}
.mrow svg{width:12px;height:12px;color:#B5BBC4}
.mrow.idea .mey,.mrow.idea .mwin{color:#4F7FC4}
.mrow.idea .mno{background:rgba(143,180,232,.18);box-shadow:none}
.mrow.now .mno{background:var(--ink);box-shadow:none}
.mrow.now .mno b,.mrow.now .mno small{color:#fff}
.mrow.after{opacity:.45}
.mfoot{text-align:center;font-size:12px;color:var(--mute);padding:10px 0 2px}

/* levels */
.tier{cursor:pointer}
.lvhero{text-align:center;padding-top:6px}
.medal{position:relative;width:132px;height:132px;margin:6px auto 0;display:grid;place-items:center}
.medal .gem{position:absolute;inset:14px;transform:rotate(45deg);border-radius:26px;
  background:linear-gradient(135deg,#FFFFFF 0%,#C9D0DA 26%,#F7F8FA 44%,#A7B0BD 62%,#E9ECF0 80%,#C3CAD4 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 20px 34px -18px rgba(21,23,28,.5)}
.medal .gem::after{content:"";position:absolute;inset:12px;border-radius:18px;background:linear-gradient(135deg,rgba(233,184,208,.35),rgba(143,180,232,.4));box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.medal .lvn{position:relative;font-family:"Sora";font-size:40px;font-weight:600;letter-spacing:-.04em}
.lvhero h2{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-top:10px}
.xpbar{height:10px;border-radius:5px;background:var(--hair);overflow:hidden;margin:14px 0 6px}
.xpbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#9FB6D9,#15171C)}
.xprow{display:flex;justify-content:space-between;font-size:13px;color:var(--mute)}
.ladder{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:4px 20px 10px;scrollbar-width:none;scroll-padding-left:20px}
.ladder::-webkit-scrollbar{display:none}
.rung{flex:0 0 96px;text-align:center;padding:12px 6px;border-radius:18px;background:#fff;box-shadow:0 10px 22px -18px rgba(21,23,28,.45)}
.rung i{display:block;width:34px;height:34px;margin:0 auto 8px;transform:rotate(45deg);border-radius:9px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.rung b{display:block;font-size:13px;font-weight:600}
.rung small{font-size:11px;color:var(--mute)}
.rung.cur{box-shadow:inset 0 0 0 2px var(--ink),0 10px 22px -18px rgba(21,23,28,.45)}
.rung.lock{opacity:.5}
.xps{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--hair)}
.xps:first-of-type{border-top:0}
.xps b{font-weight:600;font-size:14px;display:block}
.xps small{font-size:12px;color:var(--mute)}
.xps .num{font-size:15px;font-weight:600}
.unl{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--hair)}
.unl:first-of-type{border-top:0}
.unl i{width:40px;height:40px;border-radius:12px}
.unl b{font-weight:600;font-size:14px;display:block}
.unl small{font-size:12px;color:var(--mute)}
.unl span{font-size:12px;font-weight:600;color:var(--mute)}
.unl span.ok{color:var(--up)}
/* bullet wind */
.wind{position:absolute;right:-20px;top:70px;width:250px;height:120px;pointer-events:none;opacity:0;transition:opacity .4s}
.hcard.flying .wind{opacity:1}
.wind i{position:absolute;right:0;height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(143,160,190,0),rgba(143,160,190,.55),rgba(143,160,190,0));animation:gust 1.6s linear infinite}
@keyframes gust{0%{transform:translateX(40px);opacity:0}15%{opacity:1}100%{transform:translateX(-230px);opacity:0}}

/* train v2 */
.trtop .streak{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);font-size:13px;font-weight:600;white-space:nowrap}
.trtop .streak svg{width:14px;height:14px;color:var(--coral)}
.gfocus{position:relative;margin-top:16px;padding:14px 16px;border-radius:22px;background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 12px 26px -20px rgba(21,23,28,.45)}
.gfocus small{font-size:12px;color:#6F7885}
.gfocus b{display:block;font-family:"Sora";font-size:17px;font-weight:600;letter-spacing:-.01em;margin:1px 0 10px}
.gfocus .bar{height:5px;border-radius:3px;background:rgba(21,23,28,.08);overflow:hidden}
.gfocus .bar i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .5s}
.gfocus .row{display:flex;justify-content:space-between;font-size:12px;color:#6F7885;margin-top:7px}
.gfocus .x{position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7)}
.gfocus .x svg{width:12px;height:12px}
.gfocus.min{padding:10px 14px;cursor:pointer}
.gfocus.min b{font-size:14px;margin:0;display:inline}
.gfocus.min .bar,.gfocus.min .row,.gfocus.min small.lab{display:none}
.gfocus.min{display:flex;align-items:center;min-height:52px;padding-right:56px}
.gfocus.min .x{top:50%;right:12px;transform:translateY(-50%)}
.gfocus.min .x svg{transform:rotate(45deg)}
.pzcount{padding:5px 11px;border-radius:999px;background:rgba(21,23,28,.05);font-size:12px;font-weight:600;white-space:nowrap}
.mrow.done .mey{color:var(--up)}
.mrow.done .mno{background:rgba(47,155,107,.1);box-shadow:none}
.mrow.cur .mey{color:#4F7FC4}
.mrow.cur .mno{background:rgba(143,180,232,.2);box-shadow:none}
.mxp{font-size:13px;font-weight:600;color:var(--mute);white-space:nowrap}
.mrow.done .mxp{color:var(--up)}

/* chart page */
.page{position:fixed;inset:0;margin:0 auto;max-width:440px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;z-index:40;background:radial-gradient(120% 45% at 50% 0%,#FFFFFF,#F2F4F7 60%,#E9ECF0);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;visibility:hidden}
.page.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pbody{padding:16px 20px 40px}
.refer,.xcard{display:grid;grid-template-columns:auto 1fr 14px;gap:14px;align-items:center;width:100%;text-align:left;margin-top:12px;padding:14px 16px}
.refer>svg,.xcard>svg{width:14px;height:14px;color:#B5BBC4}
.rfp{position:relative;width:62px;height:40px}
.rfp img{position:absolute;width:38px;height:38px;filter:drop-shadow(0 4px 4px rgba(21,23,28,.18))}
.rfp img:nth-child(1){left:0;top:4px}.rfp img:nth-child(2){left:13px;top:0;z-index:2}.rfp img:nth-child(3){left:26px;top:4px}
.rcl small{display:block;font-size:10px;letter-spacing:.09em;font-weight:700;color:var(--mute)}
.rcl b{display:block;font-family:"Sora";font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:1px}
.rcl b em{font-style:normal}.rcl b em.up{color:#3E8E5E}.rcl b em.down{color:var(--coral)}
.rcl>span{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.refer .rcl b{font-size:15px}
.xcard{grid-template-columns:1fr auto 14px}
.xcard .rcs{width:96px;height:30px}
#oppCard,#rhythmCard{grid-template-columns:1fr 14px}
.replay{grid-template-columns:76px 1fr 14px;margin-top:16px}
.rpb .bd,.replay .bd{width:76px;border-radius:10px;box-shadow:none;pointer-events:none}
.replay .sq .c,.replay .sq .rk{display:none}
.gfocus.plan{display:block;width:100%;text-align:left;cursor:pointer}
.gfocus.plan b{margin:3px 0 12px}
.psteps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.psteps i{height:5px;border-radius:3px;background:rgba(21,23,28,.1)}
.psteps i.on{background:var(--ink)}
.gfocus .pgo{display:inline-flex;align-items:center;gap:4px;color:var(--ink);font-weight:600}
.gfocus .pgo svg{width:11px;height:11px}
.gaprow{display:grid;grid-template-columns:118px 1fr 42px 40px;gap:10px;align-items:center;padding:9px 0;font-size:13px}
.gaprow .track{height:7px}
.gaprow b{font-family:"Sora";font-weight:600;text-align:right}
.gaprow small{color:var(--mute);text-align:right;font-size:11px}
.itile small{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.irow.single{margin-top:0;padding:13px 16px;grid-template-columns:1fr auto 12px}
.rtip{margin-top:14px;padding:14px 16px;border-radius:18px;background:rgba(238,124,91,.1)}
.rtip b{display:block;font-size:15px;color:#C4552F}.rtip span{display:block;font-size:13px;color:var(--ink);margin-top:3px}
.ppath{position:relative;padding:10px 0 0 6px}
.ppath::before{content:"";position:absolute;left:42px;top:40px;bottom:60px;width:3px;border-radius:2px;background:repeating-linear-gradient(180deg,#C6CED9 0 8px,transparent 8px 14px)}
.pnode{position:relative;display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:center;padding:14px 0}
.pdot{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#FFFFFF,#DCE1E8);box-shadow:0 10px 20px -10px rgba(21,23,28,.4),inset 0 0 0 1px rgba(255,255,255,.9);z-index:1}
.pdot img{width:56px;height:56px}
.pnode.now .pdot{box-shadow:0 0 0 5px rgba(21,23,28,.9),0 14px 24px -10px rgba(21,23,28,.5);animation:pbob 2.2s ease-in-out infinite}
.pnode.done .pdot{background:linear-gradient(145deg,#2B2F37,#15171C);color:#fff}
.pdot svg{width:30px;height:30px}
@keyframes pbob{50%{transform:translateY(-4px)}}
.ptx small{display:block;font-size:10px;letter-spacing:.09em;font-weight:700;color:var(--mute)}
.ptx b{display:block;font-family:"Sora";font-size:17px;font-weight:600;margin-top:2px;line-height:1.25}
.ptx span{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.ptx .btn{margin-top:10px;padding:10px 22px}
.pnode.done .ptx b{color:var(--mute)}
.story{position:fixed;inset:0;margin:0 auto;max-width:440px;z-index:70;background:radial-gradient(120% 60% at 50% 0%,#FFFFFF,#E9EDF2 55%,#D9DFE7);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;user-select:none;-webkit-user-select:none}
.story.on{opacity:1;visibility:visible;transition:opacity .3s}
.sbars{position:absolute;left:14px;right:14px;top:14px;display:flex;gap:4px;z-index:3}
.sbars i{flex:1;height:3px;border-radius:2px;background:rgba(21,23,28,.12);overflow:hidden}
.sbars i b{display:block;height:100%;width:0;background:var(--ink)}
.sbars i.done b{width:100%}.sbars i.now b{animation:sbar 6.5s linear forwards}
@keyframes sbar{to{width:100%}}
.story .sx{position:absolute;right:14px;top:28px;z-index:4}
.sin{position:absolute;inset:0}
.sslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:70px 28px 40px;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s;pointer-events:none}
.sslide.on{opacity:1;transform:none;pointer-events:auto}
.sl{width:100%;text-align:center}
.sl small{display:block;font-size:12px;letter-spacing:.12em;font-weight:700;color:var(--mute);text-transform:uppercase}
.sl h2{font-family:"Sora";font-size:32px;font-weight:600;letter-spacing:-.03em;margin-top:8px;line-height:1.1}
.sl .big{font-family:"Sora";font-size:96px;font-weight:600;letter-spacing:-.05em;margin:18px 0 6px;line-height:1}
.sl .big.up{color:#3E8E5E}.sl .big.down{color:var(--coral)}
.sl p{font-size:16px;color:#5B636F;margin-top:14px;line-height:1.45}
.wld{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
.wld div{padding:18px 0;border-radius:22px;background:rgba(255,255,255,.7)}
.wld b{display:block;font-family:"Sora";font-size:44px;font-weight:600}.wld span{font-size:13px;color:var(--mute)}
.spath{width:100%;margin-top:18px}
.sbd{width:78%;margin:20px auto 0}.sbd .bd{border-radius:16px;pointer-events:none}
.sops{margin-top:22px;text-align:left}
.sops div{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-top:8px;border-radius:18px;background:rgba(255,255,255,.7)}
.sops img{width:40px;height:40px}.sops span{flex:1}.sops b{display:block;font-size:16px;font-weight:600}.sops small{font-size:12px;color:var(--mute);letter-spacing:0;text-transform:none;font-weight:500}
.sops em{font-style:normal;font-family:"Sora";font-weight:600;font-size:20px}
.sacts{display:grid;gap:10px;margin-top:26px}
.km{position:relative}.mrow.km .mey{color:var(--coral)}
.kmchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.kmchips button{padding:7px 12px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(238,124,91,.12);color:#C4552F}
.kmchips button.on{background:var(--coral);color:#fff}
.phead{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;text-align:center;margin-bottom:14px}
.phead h1{font-size:18px;font-weight:600;letter-spacing:-.02em}
.phead p{font-size:12px;color:var(--mute)}
.cphero{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.cphero .rnum{font-size:60px}
.cphero img{width:92px;height:92px}
.bubble{position:absolute;top:0;transform:translate(-50%,-120%);padding:6px 10px;border-radius:12px;background:#fff;box-shadow:0 8px 20px -10px rgba(21,23,28,.4);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;text-align:center;line-height:1.2}
.bubble b{display:block;font-family:"Sora";font-size:14px;font-weight:600}
.bubble small{font-size:11px;color:var(--mute)}
.mile{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;margin-top:16px}
.mile svg{width:64px;height:64px}
.mile b{font-weight:600;display:block}
.mile small{font-size:13px;color:var(--mute)}

/* map v2 */
.mstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px}
.mstrip .card{padding:12px}
.mstrip .num{font-size:20px;font-weight:600;letter-spacing:-.02em}
.mstrip span{display:block;font-size:12px;color:var(--mute);line-height:1.3;margin-top:2px}
.mtype{display:grid;grid-template-columns:120px 1fr 40px;gap:10px;align-items:center;padding:6px 0;font-size:14px}
.mtype .track{height:8px}
.mtype .num{text-align:right;font-weight:600;font-size:14px}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.side img{width:44px;height:44px;margin:-4px 0 6px -4px}
.side .num{font-size:22px;font-weight:600}
.side span{display:block;font-size:12px;color:var(--mute)}

.sqpop{position:absolute;z-index:5;width:68%;padding:12px 38px 12px 14px;border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 30px -14px rgba(21,23,28,.5),inset 0 0 0 1px #fff;opacity:0;transform:scale(.94);transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.2,1.1);pointer-events:none}
.sqpop.on{opacity:1;transform:none;pointer-events:auto}
.sqpop .mey{display:block}
.sqpop b{display:block;font-family:"Sora";font-size:16px;font-weight:600;margin:1px 0 3px}
.sqpop p{font-size:13px;line-height:1.35;color:#5B6370}
.sqpop .meter{height:5px;border-radius:3px;background:var(--hair);margin-top:9px;overflow:hidden}
.sqpop .meter i{display:block;height:100%;border-radius:3px}
.sqpop .x{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(21,23,28,.05)}
.sqpop .x svg{width:11px;height:11px}
/* level hero v2 */
.lvtop{display:grid;grid-template-columns:136px 1fr;gap:14px;align-items:center;margin-top:4px}
.lvtop img{width:136px;height:136px;filter:drop-shadow(0 18px 18px rgba(21,23,28,.18))}
.lvtop small{font-size:13px;color:var(--mute);font-weight:500}
.lvbig{font-family:"Sora";font-size:76px;font-weight:600;letter-spacing:-.06em;line-height:.95;
  background:linear-gradient(180deg,#15171C 0%,#4A5160 38%,#A9B2BF 62%,#2A2E36 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lvtop h2{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:4px}
.lvtop p{font-size:13px}

/* map entry on You */
.mapentry{display:grid;grid-template-columns:92px 1fr 14px;gap:14px;align-items:center;width:100%;text-align:left;margin-top:16px}
.mthumb{width:92px;height:92px;display:grid;grid-template-columns:repeat(8,1fr);border-radius:12px;overflow:hidden;box-shadow:0 8px 18px -12px rgba(21,23,28,.45)}
.mthumb i{display:block}
.mapentry b{display:block;font-family:"Sora";font-size:18px;font-weight:600;letter-spacing:-.02em}
.mapentry small{font-size:13px;color:var(--mute);display:block;margin-top:2px}
.mapentry svg{width:14px;height:14px;color:#B5BBC4}

/* map page */
#mapPage .pbody{padding-bottom:170px}
.mfilters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}
.mfilters .seg button{padding:6px 8px;font-size:12px}
#modeSeg{overflow-x:auto;scrollbar-width:none;max-width:100%}#modeSeg::-webkit-scrollbar{display:none}#modeSeg button{flex:1 0 auto;padding:6px 5px}
.dock{position:sticky;bottom:0;margin:18px -20px 0;padding:14px 0 22px;z-index:6;border-radius:28px 28px 0 0;
  background:rgba(242,244,247,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -14px 30px -22px rgba(21,23,28,.45),inset 0 1px 0 #fff}
.dock .lab{padding:0 20px 8px;font-size:13px;font-weight:600;display:flex;justify-content:space-between}
.dock .lab span{color:var(--mute);font-weight:500}
.pdock{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 4px;scrollbar-width:none;scroll-padding-left:20px;scroll-snap-type:x mandatory}
.pdock::-webkit-scrollbar{display:none}
.pk{flex:0 0 92px;scroll-snap-align:start;text-align:left;padding:8px 10px 10px;border-radius:20px;background:rgba(255,255,255,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 10px 22px -16px rgba(21,23,28,.45);transition:box-shadow .2s,background .2s}
.pk img{width:40px;height:40px;display:block;margin-bottom:4px}
.pk b{display:block;font-size:13px;font-weight:600}
.pk small{font-size:11px;color:var(--mute)}
.pk[aria-pressed=true]{background:#fff;box-shadow:inset 0 0 0 2px var(--ink),0 10px 22px -16px rgba(21,23,28,.45)}
.pk .allic{width:40px;height:40px;margin-bottom:4px;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:6px}
.pk .allic i{border-radius:3px;background:#C6CED9}.pk .allic i:nth-child(2),.pk .allic i:nth-child(3){background:#EE7C5B;opacity:.7}
.fix{margin-top:14px;padding:18px;border-radius:24px;background:linear-gradient(160deg,#1E2128,#15171C 60%,#2A2F38);color:#fff;box-shadow:0 20px 40px -24px rgba(21,23,28,.7)}
.fix .fe{font-size:10px;font-weight:600;letter-spacing:.09em;color:#9FB6D9}
.fix h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:4px 0 6px;line-height:1.2}
.fix p{font-size:14px;color:#B9C0CB;line-height:1.45}
.fix .fr{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.fix .pts{font-family:"Sora";font-size:22px;font-weight:600}
.fix .pts small{display:block;font-family:"Hanken Grotesk";font-size:12px;font-weight:500;color:#9AA3AF}
.fix button{padding:11px 18px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px}
.sqbars .sb{display:grid;grid-template-columns:36px 1fr 34px;gap:10px;align-items:center;width:100%;padding:6px 0;text-align:left}
.sqbars .sb b{font-family:"Sora";font-size:13px;font-weight:600}
.sqbars .sb .track{height:14px;border-radius:7px}
.sqbars .sb .fill{border-radius:7px}
.sqbars .sb .num{text-align:right;font-size:13px;font-weight:600}
.sqbars.named .sb{grid-template-columns:96px 1fr 30px}
.sqbars.named .pn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.sqpop .more{margin-top:10px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.sqpop .more svg{width:12px;height:12px}
#sqSheet{z-index:46}
.scrim.hi{z-index:44}
.sqhead{display:flex;align-items:center;gap:14px}
.sqhead .mno{width:64px;height:64px;border-radius:18px}
.sqhead .mno b{font-size:24px}
.sqhead h2{font-size:24px;font-weight:600;letter-spacing:-.02em}
.sqmini{width:100%;margin-top:4px}
/* map v3: board hero, piece bar, one sheet */
.mhero{position:relative;margin-top:4px;z-index:5}
.mhero .bd{border-radius:22px}
.pbar{position:absolute;left:50%;bottom:-62px;transform:translateX(-50%);display:flex;gap:2px;padding:5px;border-radius:999px;z-index:4;
  background:rgba(240,242,246,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 26px -14px rgba(21,23,28,.5),inset 0 0 0 1px rgba(255,255,255,.85)}
.pbar button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .2s,box-shadow .2s}
.pbar button img{width:34px;height:34px}
.pbar button[aria-pressed=true]{background:#fff;box-shadow:0 6px 14px -8px rgba(21,23,28,.45),inset 0 0 0 1px #fff}
.pbar .allic{width:22px;height:22px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pbar .allic i{border-radius:2px;background:#AEB7C4}.pbar .allic i:nth-child(2),.pbar .allic i:nth-child(3){background:#EE7C5B}
.msheet{margin-top:78px;background:#fff;border-radius:30px;padding:20px 18px 12px;box-shadow:0 18px 40px -28px rgba(21,23,28,.45)}
.mshead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.mshead h2{font-size:24px;font-weight:600;letter-spacing:-.03em}
.mshead p{font-size:13px;color:var(--mute)}
.ptsbadge{padding:6px 12px;border-radius:999px;background:rgba(47,155,107,.1);color:var(--up);font-size:13px;font-weight:600;white-space:nowrap}
.ftrow{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 4px}
.tseg{display:flex;gap:12px}
.tseg button{font-size:13px;font-weight:500;color:#A5ABB4;padding:4px 0;position:relative}
.tseg button[aria-pressed=true]{color:var(--ink);font-weight:600}
.tseg button[aria-pressed=true]::after{content:"";position:absolute;left:50%;bottom:-3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ink)}
.mline{display:grid;grid-template-columns:repeat(3,1fr);padding:14px 0;margin-top:10px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.mline div{padding:0 10px}
.mline div:first-child{padding-left:2px}
.mline div+div{border-left:1px solid var(--hair)}
.mline b{display:block;font-family:"Sora";font-size:20px;font-weight:600;letter-spacing:-.02em}
.mline span{font-size:12px;color:var(--mute);line-height:1.3;display:block}
.fixrow{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--hair)}
.fxic{width:40px;height:40px;border-radius:12px;background:rgba(238,124,91,.12);color:var(--coral);display:grid;place-items:center}
.fxic.blue{background:rgba(143,180,232,.2);color:#4F7FC4}
.fxic svg{width:18px;height:18px}
.fixrow .mey{color:var(--coral)}
.fixrow .mey.blue{color:#4F7FC4}
.fixrow b{display:block;font-family:"Sora";font-size:16px;font-weight:600;letter-spacing:-.01em;margin:2px 0 4px;line-height:1.25}
.fixrow p{font-size:13px;color:var(--mute);line-height:1.45}
.fixrow .ff{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.fixrow .ff span{font-size:12px;color:var(--mute)}
.fixrow .ff span b{display:inline;font-size:14px;color:var(--ink);margin:0}
.mbhead2{display:flex;justify-content:space-between;align-items:center;padding:14px 0 4px}
.mbhead2 b{font-size:15px;font-weight:600}
.srow{display:grid;grid-template-columns:44px 1fr auto 12px;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 0;border-bottom:1px solid var(--hair)}
.srow:last-of-type{border-bottom:0}
.srow .mno b{font-size:15px}
.srow .bar{height:4px;border-radius:2px;background:var(--hair);margin-top:6px;overflow:hidden}
.srow .bar i{display:block;height:100%;border-radius:2px}
.srow .n{font-family:"Sora";font-size:16px;font-weight:600}
.srow svg{width:12px;height:12px;color:#B5BBC4}
.srow.cur .mno{background:var(--ink);box-shadow:none}.srow.cur .mno b,.srow.cur .mno small{color:#fff}
.pat{padding:4px 16px}
.pat section{display:block;padding:14px 0;border-bottom:1px solid var(--hair)}
.pat section:last-child{border-bottom:0}
.pat h4{font-size:14px;font-weight:600;margin-bottom:6px}
.pat .phase{margin-bottom:6px}
.sides2{display:grid;grid-template-columns:1fr 1fr}
.sides2 div{display:grid;grid-template-columns:40px 1fr;gap:8px;align-items:center}
.sides2 div+div{border-left:1px solid var(--hair);padding-left:14px}
.sides2 img{width:40px;height:40px}
.sides2 b{font-family:"Sora";font-size:18px;font-weight:600;display:block}
.sides2 span{font-size:12px;color:var(--mute)}

/* invite */
.invhero{position:relative;height:190px;margin:6px 0 0}
.invhero img{position:absolute;width:120px;height:120px;filter:drop-shadow(0 16px 14px rgba(21,23,28,.18))}
.invhero::before{content:"";position:absolute;left:50%;top:30px;width:240px;height:150px;margin-left:-120px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,180,232,.4),rgba(238,190,170,.18) 60%,transparent);filter:blur(18px)}
.invtitle{text-align:center;font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.invsub{text-align:center;font-size:14px;color:var(--mute);margin:8px auto 0;max-width:32ch}
.linkbox{display:flex;align-items:center;gap:8px;margin-top:18px;padding:6px 6px 6px 16px;border-radius:999px;background:#fff;box-shadow:0 10px 24px -18px rgba(21,23,28,.45),inset 0 0 0 1px var(--hair)}
.linkbox span{flex:1;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shares{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.shares button{padding:12px 6px;border-radius:18px;background:#fff;box-shadow:0 8px 20px -16px rgba(21,23,28,.45);font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:6px}
.shares i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg1)}
.shares svg{width:16px;height:16px}
.mstone .mno.ok{background:rgba(47,155,107,.1);box-shadow:none}
.mstone .mno.ok b{color:var(--up)}
.mstone .mey.ok{color:var(--up)}
.frow{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--hair)}
.frow:first-of-type{border-top:0}
.frow .av{width:40px;height:40px;font-size:13px}
.frow b{font-weight:600;font-size:14px;display:block}
.frow small{font-size:12px;color:var(--mute)}
.invcard{display:grid;grid-template-columns:56px 1fr 12px;gap:12px;align-items:center;width:100%;text-align:left}
.invcard .stack{position:relative;width:56px;height:48px}
.invcard .stack img{position:absolute;width:40px;height:40px}
.invcard b{font-weight:600;font-size:15px;display:block}
.invcard small{font-size:12px;color:var(--mute)}
.invcard svg{width:12px;height:12px;color:#B5BBC4}
.invprog{height:4px;border-radius:2px;background:var(--hair);margin-top:7px;overflow:hidden}
.invprog i{display:block;height:100%;background:var(--ink);border-radius:2px}

/* connect */
.cfield{display:flex;gap:8px;margin-top:14px}
.cfield input{flex:1;min-width:0;font:inherit;font-size:16px;padding:14px 16px;border-radius:16px;border:1px solid var(--hair);background:#fff}
.cstep{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:10px 0}
.cstep i{width:30px;height:30px;border-radius:50%;background:var(--bg1);display:grid;place-items:center;font-style:normal;font-family:"Sora";font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px var(--hair)}
.cstep b{font-weight:600;font-size:14px;display:block}
.cstep small{font-size:12px;color:var(--mute)}
.pfound{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center}
.pfound .av{width:56px;height:56px;font-size:18px;overflow:hidden}
.pfound .av img{width:100%;height:100%;object-fit:cover}
.pfound b{font-family:"Sora";font-size:20px;font-weight:600;display:block}
.pfound small{font-size:13px;color:var(--mute)}
.rchips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.rchips div{padding:10px;border-radius:14px;background:var(--bg1);text-align:center}
.rchips img{width:22px;height:22px;display:block;margin:0 auto 2px}
.rchips b{font-family:"Sora";font-size:17px;font-weight:600;display:block}
.rchips span{font-size:11px;color:var(--mute)}
.istage{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:8px 0;font-size:14px}
.istage i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--hair);display:grid;place-items:center}
.istage.done i{background:var(--up);box-shadow:none;color:#fff}
.istage.now i{box-shadow:inset 0 0 0 2px var(--ink);border-right-color:transparent}
.istage i svg{width:12px;height:12px}
.istage span{font-size:12px;color:var(--mute)}
.note2{font-size:12px;color:var(--mute);margin-top:10px}
/* rating hero card */
.hcard{position:relative;margin-top:14px;padding:20px 18px 16px;border-radius:32px;color:#fff;overflow:hidden;
  background:radial-gradient(110% 80% at 80% 0%,#3B404A 0%,#23262D 48%,#15171C 100%);box-shadow:0 30px 50px -30px rgba(21,23,28,.75),inset 0 1px 0 rgba(255,255,255,.08)}
.hcard::before{content:"";position:absolute;right:30px;top:40px;width:190px;height:170px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,180,232,.28),rgba(238,190,170,.1) 60%,transparent);filter:blur(16px);pointer-events:none}
.hcard canvas{position:absolute;right:78px;top:6px;width:210px;height:230px;pointer-events:none}
.hcard .wind{right:70px;top:70px;width:200px}
.hcard .wind i{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}
.hc-lab{position:relative;font-size:13px;color:rgba(255,255,255,.55)}
.hc-num{position:relative;font-size:62px;font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:6px}
.hc-row{position:relative;display:flex;gap:6px;align-items:center;margin-top:12px}
.chip.dk{margin-top:0;font-size:13px;padding:6px 11px}
.chip.dk.up{background:rgba(92,210,150,.14);color:#7FE0AE}.chip.dk.down{background:rgba(255,120,110,.14);color:#FF9E94}.chip.dk.flat{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.hc-chart{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px;font-weight:600;color:#fff}
.hc-chart i{width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center}
.hc-chart svg{width:12px;height:12px}
.wheel{position:absolute;right:6px;top:22px;width:84px;height:186px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;perspective:300px;z-index:3;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel .witem{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:58px;scroll-snap-align:center;color:#fff}
.wheel .witem b{font-size:16px;font-weight:600}
.wheel .witem small{font-size:12px;color:rgba(255,255,255,.55)}
.wtick{position:absolute;right:94px;top:54px;width:8px;height:122px;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 1px,transparent 1px 9px);opacity:.7}
.wmark{position:absolute;right:90px;top:114px;width:14px;height:3px;border-radius:1px;background:#fff;pointer-events:none}
.hc-range{position:relative;display:flex;justify-content:space-between;margin-top:44px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06)}
.hc-range button{flex:1;padding:7px 0;border-radius:999px;font-size:12px;font-weight:600;color:rgba(255,255,255,.45);transition:background .2s,color .2s}
.hc-range button[aria-pressed=true]{background:rgba(255,255,255,.14);color:#fff}
.hc-subs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.hsub{padding:12px 13px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.hsub small{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.55)}
.hsub small i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1)}
.hsub small i svg{width:10px;height:10px}
.hsub b{display:block;font-family:"Sora";font-size:22px;font-weight:600;margin-top:6px;letter-spacing:-.02em}
.hsub span{font-size:11px;color:rgba(255,255,255,.5)}
.hsub .wdl{height:4px;margin-top:8px;background:rgba(255,255,255,.1)}
.hsub .wdl .w{background:#fff}.hsub .wdl .d{background:rgba(255,255,255,.45)}.hsub .wdl .l{background:rgba(255,255,255,.15)}
.seeall{font-size:13px;font-weight:600;color:#4F7FC4}
.nfylab{display:flex;align-items:center;gap:7px;margin-top:22px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.nfylab i{display:grid;place-items:center;color:#4F7FC4}
.nfylab svg{width:14px;height:14px}
.nfyrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.nfc{position:relative;height:150px;border-radius:24px;overflow:hidden;text-align:left;box-shadow:0 14px 28px -20px rgba(21,23,28,.6)}
.nfc .art{position:absolute;inset:0}
.nfc .art img{position:absolute;right:-6px;top:4px;width:96px;height:96px}
.nfc .art .big{position:absolute;left:14px;top:12px;font-family:"Sora";font-size:30px;font-weight:600;letter-spacing:-.03em}
.nfc.rush .art{background:radial-gradient(90% 90% at 80% 10%,#3B404A,#15171C);color:#fff}
.nfc.zen .art{background:radial-gradient(90% 90% at 80% 10%,#FFFFFF,#D6E0EE);color:var(--ink)}
.nfc .meta{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;padding:8px;border-radius:16px;background:rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.nfc.zen .meta{background:rgba(255,255,255,.6)}
.nfc .meta i{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.nfc.zen .meta i{background:#fff}
.nfc .meta svg{width:12px;height:12px}
.nfc .meta b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.nfc .meta small{font-size:11px;opacity:.7}
.nfc.rush .meta{color:#fff}
.rtop{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px}
.rscore{text-align:center;line-height:1.05}
.rscore b{font-family:"Sora";font-size:34px;font-weight:600;letter-spacing:-.03em;display:block}
.rscore small{font-size:12px;color:var(--mute)}
.lives{display:flex;gap:5px}
.lives i{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#fff,#AEB6C2);box-shadow:inset 0 0 0 1px #fff,0 1px 2px rgba(21,23,28,.25);transition:opacity .3s,transform .3s}
.lives i.gone{opacity:.2;transform:scale(.7)}
.rtimer{height:6px;border-radius:3px;background:var(--hair);margin:14px 0 10px;overflow:hidden}
.rtimer i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#15171C,#8FB4E8)}
.rtimer.low i{background:linear-gradient(90deg,#EE7C5B,#D6574E)}
.rbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;min-height:30px}
.combo{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;transform:scale(0);transition:transform .3s cubic-bezier(.2,.9,.2,1.4)}
.combo.on{transform:scale(1)}
.combo svg{width:12px;height:12px;color:#EE7C5B}
.rgoal{font-size:13px;color:var(--mute)}
.rwrap{position:relative}
.xpf{position:absolute;left:50%;top:44%;z-index:20;transform:translate(-50%,0);padding:8px 16px;border-radius:999px;background:#fff;box-shadow:0 12px 26px -12px rgba(21,23,28,.5);font-family:"Sora";font-weight:600;font-size:18px;color:var(--up);pointer-events:none;animation:xpup 1s cubic-bezier(.2,.8,.2,1) forwards;white-space:nowrap}
.xpf.big{font-size:22px;color:var(--ink);background:linear-gradient(110deg,#F9FAFB,#CDD4DE 30%,#FFFFFF 45%,#BFC7D3 60%,#F4F6F8)}
@keyframes xpup{0%{opacity:0;transform:translate(-50%,20px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1.05)}100%{opacity:0;transform:translate(-50%,-70px) scale(1)}}
.rend{text-align:center;padding:10px 0}
.rend .big{font-family:"Sora";font-size:84px;font-weight:600;letter-spacing:-.06em;line-height:1;background:linear-gradient(180deg,#15171C 0%,#4A5160 38%,#A9B2BF 62%,#2A2E36 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.newbest{display:inline-block;margin-top:8px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;background:linear-gradient(110deg,#F9FAFB 0%,#CDD4DE 30%,#FFFFFF 45%,#BFC7D3 60%,#F4F6F8 100%);background-size:250% 100%;animation:sheen 3s ease-in-out infinite;box-shadow:inset 0 0 0 1px #fff,0 2px 6px rgba(21,23,28,.15)}
.lvup{margin-top:16px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 12px 26px -20px rgba(21,23,28,.45);text-align:left}
.lvup .row{display:flex;justify-content:space-between;font-size:13px;color:var(--mute)}
.lvup b{color:var(--ink)}
.mapfold{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:6px}
.mapfold .mhero{margin-top:18px}
.mapfold .foldhint{margin-top:0;padding-bottom:14px}
.stagewrap{position:relative;flex:1;min-height:45vh;margin:-40px -20px 0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end}
.pstage{position:relative;flex:1;min-height:300px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.pstage:active{cursor:grabbing}
.pglow{position:absolute;left:50%;top:52%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(190,208,236,.55) 45%,rgba(238,200,184,.22) 70%,transparent);filter:blur(10px);animation:gpulse 4s ease-in-out infinite}
@keyframes gpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.pitem{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border:0;background:none;padding:0;will-change:transform}
.pitem img{width:100%;height:100%;display:block;filter:drop-shadow(0 26px 22px rgba(21,23,28,.24));pointer-events:none}
.pitem .allic{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;display:grid;grid-template-columns:1fr 1fr;gap:10px;filter:drop-shadow(0 20px 18px rgba(21,23,28,.2))}
.pitem .allic i{border-radius:18px;background:linear-gradient(145deg,#D5DBE4,#A9B3C1)}.pitem .allic i:nth-child(2),.pitem .allic i:nth-child(3){background:linear-gradient(145deg,#F6A487,#E4704E)}
.stagewrap .arcname{position:relative;bottom:auto;margin:-8px 0 22px;font-size:26px;letter-spacing:-.02em}
.stagewrap .arcname small{font-size:14px;margin-top:2px}
.arcwrap{position:relative;margin:18px -20px 0;height:132px}
.arcwrap svg.track{position:absolute;left:0;right:0;top:6px;width:100%;height:80px;pointer-events:none}
.arc{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.arc::-webkit-scrollbar{display:none}
.arc .witem{flex:0 0 64px;height:96px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px}
.arc .witem img{width:52px;height:52px;filter:drop-shadow(0 6px 5px rgba(21,23,28,.2))}
.arc .witem .allic{width:40px;height:40px;margin:6px 0;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.arc .witem .allic i{border-radius:3px;background:#AEB7C4}.arc .witem .allic i:nth-child(2),.arc .witem .allic i:nth-child(3){background:#EE7C5B}
.arc .witem .base{width:34px;height:6px;border-radius:50%;background:radial-gradient(closest-side,rgba(21,23,28,.18),transparent);margin-top:-2px}
.arcname{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:"Sora";font-size:17px;font-weight:600;letter-spacing:-.01em;pointer-events:none}
.arcname small{display:block;font-family:"Hanken Grotesk";font-size:12px;font-weight:500;color:var(--mute)}
.foldhint{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;font-size:12px;color:var(--mute)}
.foldhint svg{width:16px;height:16px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.trentry{display:grid;grid-template-columns:92px 1fr 14px;gap:14px;align-items:center;width:100%;text-align:left;margin-top:16px}
.trstack{position:relative;width:92px;height:70px}
.trstack img{position:absolute;width:52px;height:52px;filter:drop-shadow(0 6px 6px rgba(21,23,28,.2))}
.trentry b{display:block;font-family:"Sora";font-size:18px;font-weight:600;letter-spacing:-.02em}
.trentry small{font-size:13px;color:var(--mute)}
.trentry svg{width:14px;height:14px;color:#B5BBC4}
.shelf{position:relative;margin-top:6px;padding:10px 0 0}
.shelfrow{display:grid;grid-template-columns:repeat(3,1fr);align-items:end}
.tpin{display:flex;flex-direction:column;align-items:center;text-align:center}
.tpin img{width:96px;height:96px;filter:drop-shadow(0 12px 10px rgba(21,23,28,.22))}
.tpin.mid img{width:120px;height:120px}
.ped{width:70%;height:22px;margin-top:-6px;border-radius:50%;background:linear-gradient(180deg,#FFFFFF,#D4DAE2);box-shadow:inset 0 -3px 0 rgba(21,23,28,.08),0 10px 16px -10px rgba(21,23,28,.4)}
.tpin b{font-size:13px;font-weight:600;margin-top:8px}
.stars{font-size:12px;letter-spacing:1px;color:#D5DAE1}
.stars .f{color:#E0B04E}
.seasons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.season{display:flex;flex-direction:column;align-items:center;padding:8px 8px 10px;border-radius:20px;background:#fff;box-shadow:0 12px 24px -20px rgba(21,23,28,.5)}
.sframe{position:relative;width:100%;aspect-ratio:1;border-radius:14px;padding:5px}
.sboard{position:relative;display:block;width:100%;height:100%;border-radius:10px;overflow:hidden;background:conic-gradient(#C6CED9 25%,#EEF1F5 0 50%,#C6CED9 0 75%,#EEF1F5 0) 0 0/50% 50%;box-shadow:inset 0 2px 6px rgba(21,23,28,.15)}
.sframe{display:block}
.sboard img{position:absolute;left:50%;bottom:6%;width:74%;transform:translateX(-50%);filter:drop-shadow(0 6px 6px rgba(21,23,28,.3))}
.plaque{margin-top:8px;padding:3px 12px;border-radius:6px;font-family:"Sora";font-size:15px;font-weight:600;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 4px rgba(21,23,28,.15)}
.season small{font-size:11px;color:var(--mute);margin-top:4px}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px}
.bdg{display:flex;flex-direction:column;align-items:center;text-align:center}
.bdg img{width:84px;height:84px;filter:drop-shadow(0 10px 8px rgba(21,23,28,.2))}
.bdg .ped{width:56px;height:12px;margin-top:-4px}
.bdg b{font-size:13px;font-weight:600;margin-top:6px;line-height:1.2}
.bdg.lock img{filter:grayscale(1);opacity:.35}
.bdg .prog{width:56px;height:4px;border-radius:2px;background:var(--hair);margin-top:5px;overflow:hidden}
.bdg .prog i{display:block;height:100%;background:var(--ink)}
.bdg small{font-size:11px;color:var(--mute)}
.bgames{display:flex;gap:10px;overflow-x:auto;margin:0 -20px;padding:4px 20px 12px;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:20px}
.bgames::-webkit-scrollbar{display:none}
.bgame{flex:0 0 200px;scroll-snap-align:start;text-align:left;padding:10px;border-radius:22px;background:#fff;box-shadow:0 12px 24px -20px rgba(21,23,28,.5)}
.bgame .bd{border-radius:12px;box-shadow:none;pointer-events:none}
.bgame b{display:block;font-size:14px;font-weight:600;margin-top:10px}
.bgame small{font-size:12px;color:var(--mute)}
.bgame .tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;background:rgba(143,180,232,.2);color:#4F7FC4}
.ycard .yr{text-align:center;font-family:"Sora";font-size:64px;font-weight:600;letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,#15171C 0%,#4A5160 38%,#A9B2BF 62%,#2A2E36 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ycard .mvp{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;margin-top:14px;padding:12px;border-radius:18px;background:var(--bg1)}
.ycard .mvp img{width:64px;height:64px}
.pv{z-index:48!important}.mc{z-index:48!important}
/* lab v2 */
.labtop{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}
.labtitle{text-align:center}
.labtitle h1{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.labtitle p{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--mute)}
.labtitle p svg{width:12px;height:12px}
.labsheet{margin-top:12px;background:#fff;border-radius:30px;padding:6px 18px 16px;box-shadow:0 18px 40px -28px rgba(21,23,28,.45)}
.labsheet .card{background:none;box-shadow:none;border-radius:0;padding-left:0;padding-right:0;margin-top:0}
.labsheet .odds{padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.labsheet .cands{padding-top:12px;padding-bottom:6px;border-bottom:1px solid var(--hair)}
.labsheet .mboard{padding-top:4px}
.labsheet .acts{margin-top:10px}
.opsearch{width:100%;margin-top:14px;font:inherit;font-size:16px;padding:13px 16px;border-radius:16px;border:1px solid var(--hair);background:#fff}
.orow{display:grid;grid-template-columns:44px 1fr auto 12px;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid var(--hair)}
.orow:last-child{border-bottom:0}
.orow .oic{width:44px;height:44px;border-radius:13px;background:var(--bg1);display:grid;place-items:center}
.orow .oic img{width:34px;height:34px}
.orow b{font-weight:600;font-size:15px;display:block}
.orow small{font-size:12px;color:var(--mute)}
.orow .wdl{height:4px;margin-top:6px}
.orow .pct{font-family:"Sora";font-size:16px;font-weight:600}
.orow svg{width:12px;height:12px;color:#B5BBC4}
.orow.cur .oic{background:var(--ink)}
.invbody{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.invstage{position:relative;flex:1;min-height:380px;margin:0 -20px}
.invstage::before{content:"";position:absolute;left:50%;top:18%;width:320px;height:300px;margin-left:-160px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,180,232,.4),rgba(238,190,170,.18) 60%,transparent);filter:blur(22px)}
.invstage img{position:absolute;filter:drop-shadow(0 24px 20px rgba(21,23,28,.2));animation:ifloat 5s ease-in-out infinite}
.invstage .ip1{left:50%;margin-left:-178px;top:26%;width:190px;height:190px;transform:rotate(-12deg);animation-delay:-1.4s}
.invstage .ip2{left:50%;margin-left:-120px;top:6%;width:240px;height:240px;z-index:2}
.invstage .ip3{left:50%;margin-left:-8px;top:28%;width:190px;height:190px;transform:rotate(12deg);animation-delay:-2.8s}
.invstage .ishadow{position:absolute;left:50%;bottom:6%;width:260px;height:30px;margin-left:-130px;border-radius:50%;background:radial-gradient(closest-side,rgba(21,23,28,.18),transparent)}
@keyframes ifloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.invtitle{font-size:32px!important}
.invacts{display:grid;gap:8px;margin:22px 0 28px}
.invacts .btn{padding:16px;font-size:16px}
.giftbtn{position:relative;width:48px;height:48px;background:#fff}
.giftbtn svg{width:21px;height:21px}
.gdot{position:absolute;right:11px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px #fff}
.rrail{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:16px}
.rrail::-webkit-scrollbar{display:none}
.rp{flex:0 0 96px;scroll-snap-align:start;text-align:center;padding:6px 6px 10px;border-radius:18px;background:var(--bg1);box-shadow:inset 0 0 0 1px var(--hair)}
.rp img{width:62px;height:62px;display:block;margin:0 auto 2px}
.rp b{display:block;font-family:"Sora";font-size:17px;font-weight:600}
.rp span{display:block;font-size:12px;color:var(--mute)}
.rp em{display:block;font-style:normal;font-size:12px;font-weight:600;margin-top:2px}
.rp.worst{background:rgba(238,124,91,.08);box-shadow:inset 0 0 0 1px rgba(238,124,91,.3)}
.sampletag{display:none;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(21,23,28,.06);color:var(--mute);font-family:"Hanken Grotesk";font-size:11px;font-weight:600;vertical-align:2px;letter-spacing:0}
body.real .sampletag{display:inline-block}
.av{overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* style metric card */
.gauge{cursor:pointer;border-radius:16px;padding:4px 0;transition:background .2s}
.gauge:hover{background:rgba(21,23,28,.03)}
.gauge span::after{content:" ›";color:#B5BBC4}
.mc{position:fixed;left:50%;top:50%;width:min(380px,calc(100% - 28px));max-height:88vh;max-height:88dvh;display:flex;padding:4px;border-radius:40px;z-index:35;opacity:0;pointer-events:none;
  transform:translate(-50%,-46%) scale(.95);transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.2,1.05);
  background:linear-gradient(172deg,#FFFFFF 0%,#B9C1CC 6%,#F6F7F9 12%,#8E97A4 20%,#E9ECF0 30%,#D5DAE1 55%,#E3E7EC 100%);box-shadow:0 40px 70px -34px rgba(21,23,28,.55)}
.mc.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.mcin{flex:1;overflow-y:auto;overscroll-behavior:contain;border-radius:37px;background:linear-gradient(180deg,#FFFFFF,#F3F5F8);padding:18px 18px 20px}
.mctop{display:flex;justify-content:space-between;align-items:flex-start}
.mcring{display:grid;place-items:center;margin:0 auto}
.mcring svg{width:128px;height:128px}
.mcin h2{text-align:center;font-size:24px;font-weight:600;letter-spacing:-.03em;margin-top:6px}
.mcin .lead{text-align:center;font-size:14px;color:var(--mute);margin:4px auto 0;max-width:30ch}
.cmp{margin-top:16px}
.cmp .r{display:grid;grid-template-columns:70px 1fr 30px;gap:10px;align-items:center;font-size:13px;margin-bottom:6px}
.cmp .num{text-align:right;font-weight:600}
.led{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}
.led b{font-weight:600;font-size:14px;display:block}
.led small{font-size:12px;color:var(--mute)}
.led .num{font-size:14px;font-weight:600;white-space:nowrap}
.led .num i{font-style:normal;color:var(--mute);font-weight:500}
.led.tot{border-top:1.5px solid var(--ink)}
.led.tot b,.led.tot .num{font-size:16px}

/* ladder medals */
.rung{cursor:default}
.rung img{display:block;width:62px;height:62px;margin:-4px auto 4px}
.rung.open{cursor:pointer}
.rung.lock img{filter:grayscale(1);opacity:.5}
.medal img{position:absolute;inset:0;width:100%;height:100%}
.medal .lvn{color:#15171C;text-shadow:0 1px 0 rgba(255,255,255,.8)}
/* account page */
.acchero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 4px}
.acchero .av{width:84px;height:84px;font-size:26px;box-shadow:inset 0 0 0 2px #fff,0 16px 30px -18px rgba(21,23,28,.5)}
.acchero h2{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-top:12px}
.acchero p{font-size:13px;color:var(--mute);margin-top:2px}
.acchero .tier{margin-top:10px}
.accstats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px}
.accstats div{text-align:center}
.accstats div+div{border-left:1px solid var(--hair)}
.accstats .num{font-size:20px;font-weight:600}
.accstats span{display:block;font-size:12px;color:var(--mute)}
.src{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--hair)}
.src:first-of-type{border-top:0}
.src .logo{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-family:"Sora";font-weight:600;font-size:15px}
.src b{font-weight:600;font-size:15px;display:block}
.src small{font-size:12px;color:var(--mute)}
.src small .dotok{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--up);margin-right:5px;vertical-align:1px}
.pillbtn{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(21,23,28,.05);white-space:nowrap}
.pillbtn.dark{background:var(--ink);color:#fff}
.pillbtn .spin{display:inline-block;width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:6px;vertical-align:-1px;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.credits p{font-size:14px;line-height:1.45}.credits small{display:block;margin-top:4px;font-size:12px}.credits a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pref{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--hair)}
.pref:first-of-type{border-top:0}
.pref b{font-weight:600;font-size:14px;display:block}
.pref small{font-size:12px;color:var(--mute)}
.pref .seg button{padding:6px 11px}
.tgl{width:50px;height:30px;border-radius:999px;background:#D5DAE1;position:relative;transition:background .25s;flex:0 0 auto}
.tgl::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(21,23,28,.25);transition:transform .25s}
.tgl[aria-checked=true]{background:var(--ink)}
.tgl[aria-checked=true]::after{transform:translateX(20px)}
.sets{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:4px 16px 6px;scrollbar-width:none}
.sets::-webkit-scrollbar{display:none}
.set{flex:0 0 86px;text-align:center;padding:8px 6px 10px;border-radius:16px;background:var(--bg1);box-shadow:inset 0 0 0 1px var(--hair)}
.set img{width:56px;height:56px;display:block;margin:0 auto 4px}
.set b{font-size:12px;font-weight:600;display:block}
.set small{font-size:11px;color:var(--mute)}
.set[aria-pressed=true]{background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.set[disabled]{opacity:.45;cursor:default}
.toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,20px);padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* minimal delta: colored text with a slow shimmer, no pill */
.chip,.chip.dk{background:none!important;padding:0!important;border-radius:0;gap:5px;font-weight:600;
  -webkit-background-clip:text!important;background-clip:text!important;background-size:220% 100%!important;animation:dsheen 3.2s ease-in-out infinite}
.chip.up{color:transparent!important;background-image:linear-gradient(100deg,#2F9B6B 0%,#2F9B6B 40%,#8FE3BA 50%,#2F9B6B 60%,#2F9B6B 100%)!important}
.chip.down{color:transparent!important;background-image:linear-gradient(100deg,#D6574E 0%,#D6574E 40%,#FFB2A8 50%,#D6574E 60%,#D6574E 100%)!important}
.chip.dk.up{background-image:linear-gradient(100deg,#6FD9A2 0%,#6FD9A2 40%,#E4FFF1 50%,#6FD9A2 60%,#6FD9A2 100%)!important}
.chip.dk.down{background-image:linear-gradient(100deg,#FF8E83 0%,#FF8E83 40%,#FFE1DC 50%,#FF8E83 60%,#FF8E83 100%)!important}
.chip.flat{color:var(--mute)!important;animation:none}
.chip.dk.flat{color:rgba(255,255,255,.5)!important}
.chip svg{color:initial}
.chip.up svg{color:#2F9B6B}.chip.down svg{color:#D6574E}.chip.dk.up svg{color:#6FD9A2}.chip.dk.down svg{color:#FF8E83}
@keyframes dsheen{0%{background-position:100% 0}60%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Stockfish analysis progress */
.anarow{display:flex;justify-content:center;margin:2px 0 8px}.anarow:has(.anapill[hidden]){display:none}
.anapill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(21,23,28,.05);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.anapill[hidden]{display:none}.anapill svg{width:18px;height:18px;flex:0 0 18px}
.phead .anapill{margin-top:6px}
.bd.scanning::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);background-size:250% 100%;animation:scan 2.4s ease-in-out infinite}
@keyframes scan{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.bd.scanning::after{animation:none;background:rgba(255,255,255,.18)}}
/* the square popup floats over the board inside .mhero, so the board frame never clips it */
.mhero .sqpop{z-index:8;box-shadow:0 12px 32px rgba(21,23,28,.16)}
/* ======================= onboarding ======================= */
body.boot .app,body.boot .tabs,body.firstrun .app,body.firstrun .tabs{visibility:hidden}
body.firstrun{overflow:hidden}
.onb{display:none;position:fixed;inset:0;margin:0 auto;max-width:440px;overflow-y:auto;overflow-x:hidden;z-index:65;background:radial-gradient(120% 55% at 50% 0%,#FFFFFF,#F2F4F7 60%,#E6EAEF)}
body.firstrun .onb{display:block}
.ostep{display:none;flex-direction:column;min-height:100%;padding:20px 20px 32px}
.ostep.on{display:flex;animation:ofade .45s cubic-bezier(.2,.8,.2,1)}
@keyframes ofade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.obrand{display:flex;align-items:center;gap:8px;font-family:"Sora";font-weight:600;font-size:17px;letter-spacing:-.02em}
.omark{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#fff,#AEB6C2 55%,#E6E9EE);box-shadow:inset 0 0 0 1px #fff,0 4px 10px -6px rgba(21,23,28,.5)}
.ostage{position:relative;height:250px;margin:4px -20px 0}
.ostage::before{content:"";position:absolute;left:50%;top:12%;width:300px;height:220px;margin-left:-150px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,180,232,.42),rgba(238,190,170,.2) 60%,transparent);filter:blur(22px)}
.ostage img{position:absolute;filter:drop-shadow(0 22px 18px rgba(21,23,28,.2));animation:ifloat 5s ease-in-out infinite}
.ostage .ip1{left:50%;margin-left:-150px;top:30%;width:140px;height:140px;transform:rotate(-12deg);animation-delay:-1.4s}
.ostage .ip2{left:50%;margin-left:-95px;top:4%;width:190px;height:190px;z-index:2}
.ostage .ip3{left:50%;margin-left:10px;top:30%;width:140px;height:140px;transform:rotate(12deg);animation-delay:-2.8s}
.ostage .ishadow{position:absolute;left:50%;bottom:4%;width:230px;height:26px;margin-left:-115px;border-radius:50%;background:radial-gradient(closest-side,rgba(21,23,28,.18),transparent)}
.otitle{font-size:32px;font-weight:600;letter-spacing:-.04em;line-height:1.05;text-align:center;text-wrap:balance}
.oh{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:18px}
.osub{font-size:15px;color:var(--mute);text-align:center;margin:10px auto 0;max-width:34ch;text-wrap:balance}
.osub.left{text-align:left;margin-left:0}
.opoints{list-style:none;display:grid;gap:10px;margin:22px 0 0}
.opoints li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;font-size:15px;font-weight:500}
.opoints i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:"Sora";font-size:12px;font-weight:600;background:#fff;box-shadow:0 6px 14px -10px rgba(21,23,28,.5),inset 0 0 0 1px var(--hair)}
.oacts{display:grid;gap:8px;margin-top:auto;padding-top:24px}
.oacts .btn,.octa{padding:16px;font-size:16px}
.otop{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:44px}
.odots{display:flex;justify-content:center;gap:6px}
.odots i{width:22px;height:4px;border-radius:2px;background:var(--hair);transition:background .3s}
.odots i.on{background:var(--ink)}
#oFound{margin-top:14px}
.pcard{animation:ofade .4s cubic-bezier(.2,.8,.2,1)}
.note2.err{color:var(--down);font-size:13px}
.note2.err b{font-weight:600}
.oey{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--mute);margin-top:28px}
.onum{font-size:64px;font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:8px}
.olab{font-size:14px;color:var(--mute);margin-top:4px}
.obar{height:6px;border-radius:3px;margin-top:20px}
.obar i{transition:width .4s ease}
.omonth{font-size:13px;color:var(--mute);margin-top:8px;min-height:19px}
.orhead{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;margin-top:18px}
.orhead .av{width:56px;height:56px;font-size:18px;overflow:hidden}
.orhead .av img{width:100%;height:100%;object-fit:cover}
.orhead .oey{margin-top:0}
.orhead h2{font-size:24px;font-weight:600;letter-spacing:-.03em;overflow-wrap:anywhere}
#oCards{display:grid;gap:10px;margin:18px 0 22px}
.oin{opacity:0;animation:ofade .5s cubic-bezier(.2,.8,.2,1) forwards}
.orev{background:var(--card);border-radius:22px;padding:16px;box-shadow:0 12px 28px -20px rgba(21,23,28,.4)}
.orev small{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--mute)}
.orev b{display:block;font-family:"Sora";font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:4px}
.orev span{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.orev .rchips{margin-top:10px}
.orev .rchips span{margin-top:0}
.orev.dark{background:linear-gradient(160deg,#2A2E36,#15171C);color:#fff}
.orev.dark small,.orev.dark span{color:rgba(255,255,255,.6)}
.orev.dark .onum{margin-top:6px}
.orev.split{display:grid;grid-template-columns:1fr 64px;gap:10px;align-items:center}
.orev.split img{width:64px;height:64px;filter:drop-shadow(0 10px 10px rgba(21,23,28,.18))}
.octa{margin-top:auto}

/* ======================= empty states ======================= */
.emptyst b{display:block;font-family:"Sora";font-size:17px;font-weight:600;letter-spacing:-.01em}
.emptyst p{font-size:14px;color:var(--mute);margin-top:4px}
.emptyst small{display:block;font-size:12px;color:var(--mute);margin-top:6px}
.emptyst .acts{margin-top:14px}
.eprog{height:6px;border-radius:3px;background:var(--hair);margin-top:12px;overflow:hidden}
.eprog i{display:block;height:100%;border-radius:3px;background:var(--ink)}
#opsEmpty .card{margin-top:4px}
#railEmpty .card{margin-top:0}
.hcard.none .hc-num,.hcard.none .hc-row,.hcard.none .hc-range,.hcard.none .hc-subs,.hcard.none canvas{visibility:hidden}
.hcempty{position:absolute;left:18px;right:104px;top:52px;color:#fff}
.hcempty b{display:block;font-family:"Sora";font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.hcempty span{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-top:8px}
.mthumb.dim{opacity:.35;filter:grayscale(1)}
.btn.forget{width:100%;margin-top:18px;color:var(--down)}
.btn.forget.arm{background:var(--down);color:#fff}

/* ======================= game screen ======================= */
.labplay{display:flex;justify-content:center;margin:-4px 0 12px}.labplay .pillbtn{display:inline-flex;align-items:center;gap:6px}.labplay svg{width:16px;height:16px}
.gpage{z-index:45;overflow:hidden;display:flex;flex-direction:column}
.gwrap{flex:1;display:flex;flex-direction:column;padding:12px 16px 0;min-height:0;overflow-y:auto}
.gtop{margin-bottom:8px}
.gplayer{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 4px}
.gav{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#E3E7EC);box-shadow:inset 0 0 0 1px #fff,0 6px 14px -10px rgba(21,23,28,.5)}
.gav img{width:30px;height:30px}
.gwho{min-width:0}.gwho b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gwho small{display:block;font-size:12px;color:var(--mute)}
.gcap{display:flex;align-items:center;gap:0;min-height:16px;font-size:11px;color:var(--mute)}.gcap img{width:16px;height:16px;margin-right:-5px}.gcap em{font-style:normal;margin-left:8px;font-weight:600}
.gclock{font-family:"Sora";font-size:17px;font-weight:600;padding:7px 12px;border-radius:12px;background:rgba(21,23,28,.05);min-width:68px;text-align:center}
.gplayer.turn .gclock{background:var(--ink);color:#fff}
.gboard{width:100%;max-width:min(100%,calc(100dvh - 300px));margin:0 auto}
.gboard .bd{border-radius:16px}
.gboard .sq.check .h{background:rgba(238,124,91,.55)!important}
.gstatus{text-align:center;font-size:14px;color:var(--mute);min-height:22px;margin:4px 0 8px}
.gstatus b{color:var(--ink)}
.gbar{position:relative;z-index:10;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -10px 30px -20px rgba(21,23,28,.4)}
.gbar button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border-radius:14px;font-size:12px;font-weight:600;color:var(--ink)}
.gbar button svg{width:22px;height:22px}.gbar button:disabled{opacity:.35}
.gbar button.arm{background:var(--down);color:#fff}
.gscrim{position:fixed;inset:0;background:rgba(21,23,28,.32);opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.gscrim.on{opacity:1;pointer-events:auto}
.gsheet{position:absolute;left:0;right:0;bottom:0;z-index:21;padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;background:linear-gradient(180deg,#fff,#EEF1F5);transform:translateY(105%);transition:transform .4s cubic-bezier(.2,.8,.2,1);max-height:88dvh;overflow-y:auto}
.gsheet.on{transform:none}
.gopt{display:block;width:100%;padding:15px;border-radius:14px;font-weight:600;text-align:center}.gopt+.gopt{margin-top:4px}.gopt:not(.muted){background:rgba(21,23,28,.04)}
.gend h2{font-size:24px;text-align:center;margin-top:4px}.gend .gsub{text-align:center;color:var(--mute);font-size:14px;margin-top:4px}
.gend .accring{display:grid;place-items:center;margin:14px auto 6px}
.gend .gmist{margin-top:14px;padding:14px 16px;border-radius:18px;background:rgba(238,124,91,.08)}
.gend .gmist small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--coral)}
.gend .gmist b{display:block;font-family:"Sora";font-size:18px;margin:2px 0}
.gend .gmist p{font-size:13px;color:#5B6370}
.gend .acts{display:grid;grid-template-columns:1fr;gap:8px;margin-top:16px}
.gprog{height:6px;border-radius:3px;background:var(--hair);overflow:hidden;margin:14px 0 6px}.gprog i{display:block;height:100%;background:var(--ink);border-radius:3px;transition:width .2s}
.sheet.short{height:auto;max-height:92dvh}
#playSheet{z-index:46}
.lvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lvgrid button{padding:12px 0 10px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(21,23,28,.12);text-align:center}
.lvgrid button b{display:block;font-family:"Sora";font-size:17px;font-weight:600}.lvgrid button small{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.lvgrid button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}.lvgrid button[aria-pressed="true"] small{color:rgba(255,255,255,.7)}

/* ======================= game review: move labels ======================= */
.revsum{padding:12px 14px;margin:0 0 12px}
.revhd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.revhd b{font-size:14px}.revhd span{font-size:12px;color:var(--mute)}
.revrow{display:grid;grid-template-columns:auto auto;grid-template-areas:"who acc" "chips chips";gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--hair)}
.revwho{grid-area:who;display:flex;align-items:center;gap:6px;min-width:0}.revwho img{width:22px;height:22px}.revwho b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.revacc{grid-area:acc;justify-self:end;font-family:"Sora";font-weight:600;font-size:17px}.revacc small{font-family:"Hanken Grotesk";font-weight:500;font-size:11px;color:var(--mute);margin-left:4px}
.revchips{grid-area:chips;display:flex;flex-wrap:wrap;gap:4px}
.rc{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 4px;border-radius:999px;font-size:11px;font-weight:600;background:color-mix(in srgb,var(--c) 12%,#fff);color:#2A2E35}
.rc i{font-style:normal;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:999px;background:var(--c);color:#fff;font-size:10px}
.mlab{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--c);color:#fff;font-family:"Hanken Grotesk";font-size:10px;font-weight:700;vertical-align:2px;letter-spacing:.02em}
.mlab.big{margin:0 8px 0 0;min-width:26px;height:26px;padding:0 6px;display:inline-grid;place-items:center;font-size:12px;vertical-align:middle;flex:0 0 auto}
.revline{display:flex;align-items:center;margin-bottom:6px;text-align:left}
.revlay{position:absolute;inset:0;pointer-events:none;z-index:30}
.revarrow{position:absolute;inset:0;width:100%;height:100%}
.sqbadge{position:absolute;transform:translate(-88%,-12%);min-width:22px;height:22px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:11px;font-weight:800;box-shadow:0 2px 6px rgba(21,23,28,.3),0 0 0 2px #fff}

/* ======================= play it: compare with the original ======================= */
.gcmp{margin-top:16px;text-align:left}.gcmp .t{margin:0 0 8px}
.cmprow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--hair);font-size:14px}.cmprow span{color:var(--mute)}.cmprow b{text-align:right;font-weight:600}
.cmplist{list-style:none;margin:8px 0 0;display:grid;gap:6px}
.cmplist li{padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.35;background:rgba(21,23,28,.04)}
.cmplist li.up{background:rgba(62,142,94,.1)}.cmplist li.down{background:rgba(238,124,91,.12)}
.playrow{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.gacts2{display:flex;gap:6px;margin-top:8px}.gacts2 button{flex:1;padding:8px 0;border-radius:12px;font-size:12px;font-weight:600;background:rgba(21,23,28,.05)}.gacts2 button.dk{background:var(--ink);color:#fff}
.replay .rpacts{display:flex;gap:8px;margin-top:10px;grid-column:1/-1}.replay .rpacts button{flex:1;padding:9px 0;border-radius:12px;font-size:13px;font-weight:600;background:rgba(21,23,28,.05)}.replay .rpacts button.dk{background:var(--ink);color:#fff}
.replay{grid-template-columns:76px 1fr}

/* insight sections: Helps you, Hurts you */
.irhd{padding:14px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--hair)}
.irow .itx b{white-space:normal}

/* Lab with one of your games loaded */
.labtitle{min-width:0}.labtitle h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#t-lab.gamesrc #sideSeg{display:none}
#t-lab.gamesrc #labSub{font-size:13px;margin:8px 0 10px!important;line-height:1.4}
#t-lab .banner+.revsum{margin-top:12px}
#t-lab .labplay{margin:12px 0}

/* simpler review card: accuracy and Strong, Slips, Blunders; all labels on tap */
.revsum .revhd{display:flex;width:100%;justify-content:space-between;align-items:baseline;margin-bottom:8px}.revsum .revhd span{font-size:12px;font-weight:600;color:var(--blue,#4F7FC4)}
.rvcols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rvcol{min-width:0;padding:10px;border-radius:16px;background:rgba(21,23,28,.035)}
.rvacc{display:block;font-family:"Sora";font-size:30px;font-weight:600;letter-spacing:-.02em;margin-top:6px;line-height:1}.rvsub{display:block;font-size:11px;color:var(--mute)}
.rv3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px}.rv3>span{font-size:10px;color:var(--mute);text-align:center}.rv3 b{display:block;font-family:"Sora";font-size:16px;color:var(--ink)}
.rv3 .g b{color:var(--up,#3E8E5E)}.rv3 .m b{color:#C98A1E}.rv3 .x b{color:#D64545}
.rvcol .revchips{display:none;margin-top:10px}.revsum.open .rvcol .revchips{display:flex}
/* one action row: Play from move 1, Play from here, Play the engine */
#t-lab .labplay{display:flex;flex-wrap:nowrap;gap:6px}
#t-lab .labplay .pillbtn:not([hidden]){flex:1 1 0;min-width:0;justify-content:center;padding:10px 6px;font-size:12.5px;white-space:normal;line-height:1.2;text-align:center}
#t-lab.gamesrc .labplay svg{display:none}
/* promotion picker */
.promo{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(21,23,28,.32);opacity:0;pointer-events:none;transition:opacity .2s}
.promo.on{opacity:1;pointer-events:auto}
.promocard{width:min(340px,calc(100vw - 32px));padding:16px;border-radius:22px;background:linear-gradient(180deg,#fff,#EEF1F5);box-shadow:0 20px 50px -20px rgba(21,23,28,.5);text-align:center}
.promocard>b{display:block;font-size:15px;margin-bottom:10px}
.promorow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.promorow button{padding:8px 0 6px;border-radius:14px;background:rgba(21,23,28,.04)}.promorow img{width:48px;height:48px}.promorow small{display:block;font-size:11px;font-weight:600}
.promox{margin-top:10px;font-size:13px;font-weight:600;color:var(--mute);padding:6px 12px}

/* ======================= games library ======================= */
.gamesentry{display:grid;grid-template-columns:auto 1fr 14px;gap:14px;align-items:center;width:100%;text-align:left;padding:14px 16px}
.gamesentry .gicon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#E3E7EC);box-shadow:inset 0 0 0 1px #fff}.gamesentry .gicon img{width:32px;height:32px}
.gamesentry b{display:block;font-size:15px}.gamesentry small{display:block;font-size:12px;color:var(--mute)}.gamesentry svg{width:14px;height:14px;color:var(--mute)}
.opgames{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:16px;background:rgba(21,23,28,.04);margin:12px 0 10px}.opgames b{display:block;font-size:14px}.opgames span{font-size:12px;color:var(--mute)}
#gamesPage .opsearch{width:100%}
.glfilters{display:grid;gap:8px;margin:10px 0 12px}.glfilters .tseg{overflow-x:auto;scrollbar-width:none;max-width:100%}.glfilters .tseg::-webkit-scrollbar{display:none}
.gltogs{display:flex;gap:8px}.gltog{padding:8px 12px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(21,23,28,.12)}.gltog[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.glrow{padding:12px 0;border-bottom:1px solid var(--hair)}
.glmain{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left}
.glres{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-family:"Sora";font-weight:600;font-size:14px;color:#fff;background:#B9C0CB}.glres.w{background:var(--up,#3E8E5E)}.glres.l{background:var(--coral,#EE7C5B)}
.gltx{min-width:0}.gltx b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gltx b small{font-weight:500;color:var(--mute);font-size:12px}
.gltx small{display:block;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.glacc{font-family:"Sora";font-weight:600;font-size:16px;text-align:right}.glacc small{display:block;font-family:"Hanken Grotesk";font-size:10px;font-weight:500;color:var(--mute)}
.glacts{display:flex;gap:6px;margin:8px 0 0 44px}.glacts button{flex:1;padding:8px 0;border-radius:12px;font-size:12px;font-weight:600;background:rgba(21,23,28,.05)}.glacts button.dk{background:var(--ink);color:#fff}
.gltx b small{display:inline;margin-left:4px}