:root{--bg:#e3edf0;--ink:#22305b;--card:#fff;--key:#fff;--on-key:#22305b;--dim:#22305b73;--faint:#22305b24;--shadow-col:#22305b33;--p1:#f25c3b;--on-p1:#22305b;--p2:#f2b705;--on-p2:#22305b;--p3:#147f73;--on-p3:#fff;--p4:#f7a1c4;--on-p4:#22305b;--p5:#22305b;--on-p5:#fff;--p6:#8cc5e3;--on-p6:#22305b;--rec:#d33a22;--on-rec:#fff;--go:#2f9e44;--on-go:#fff;--backdrop:#c4d3d9;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--one:var(--p1);--on-one:var(--on-p1);--two:var(--p3);--on-two:var(--on-p3);--play:var(--go);--on-play:var(--on-go);--back:var(--p5);--on-back:var(--on-p5);--shadow:2px 3px 0 var(--shadow-col);--shadow-lift:4px 6px 0 var(--shadow-col);--shadow-press:1px 1px 0 var(--shadow-col);--r-key:8px;--r-card:12px;--f-display:"Unbounded Variable", "Unbounded", system-ui, sans-serif;--f-mono:"Fragment Mono", ui-monospace, Menlo, monospace}@media (prefers-color-scheme:dark){:root{--bg:#1b2235;--ink:#f3efe6;--card:#252e46;--key:#2c3652;--on-key:#f3efe6;--dim:#f3efe673;--faint:#f3efe624;--shadow-col:#00000073;--p1:#f25c3b;--on-p1:#1d1d1f;--p2:#f2b705;--on-p2:#1d1d1f;--p3:#1b998b;--on-p3:#0e1a2b;--p4:#f7a1c4;--on-p4:#1d1d1f;--p5:#8cc5e3;--on-p5:#1d1d1f;--p6:#f3efe6;--on-p6:#1d1d1f;--rec:#ff5a4e;--on-rec:#1d1d1f;--go:#51cf66;--on-go:#0e1a2b;--backdrop:#0f1320;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{background:var(--backdrop);height:100%;color:var(--ink);font-family:var(--f-mono);overscroll-behavior:none;-webkit-text-size-adjust:100%;margin:0}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}button{color:inherit;-webkit-tap-highlight-color:transparent;font-family:inherit}button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}#root{height:100%}.stage{justify-content:center;align-items:center;min-height:100%;display:flex}.device{width:100%;max-width:440px;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px);background:var(--bg);flex-direction:column;gap:16px;display:flex;position:relative;overflow:hidden}@media (width>=560px) and (height>=760px){.device{border-radius:28px;height:min(860px,100dvh - 48px);min-height:0;padding:20px 18px 18px;box-shadow:0 30px 60px #0000004d}}.hdr{justify-content:space-between;align-items:center;display:flex}.title{font-family:var(--f-display);gap:6px;margin:0;font-size:22px;font-weight:800;line-height:1;display:flex}.title>span{box-shadow:var(--shadow);border-radius:6px;padding:8px 12px 7px}.t1{background:var(--one);color:var(--on-one);transform:rotate(-2deg)}.t2{background:var(--two);color:var(--on-two);animation:5s ease-in-out infinite turn;transform:rotate(3deg)}@keyframes turn{0%,80%{transform:rotate(3deg)rotateY(0)}to{transform:rotate(3deg)rotateY(360deg)}}.trophy{border-radius:var(--r-key);background:var(--p2);height:46px;color:var(--on-p2);box-shadow:var(--shadow);cursor:pointer;border:0;align-items:center;gap:7px;padding:0 12px 0 9px;transition:transform 60ms,box-shadow .2s ease-out;display:flex;position:relative;overflow:hidden}.trophy:active{box-shadow:var(--shadow-press);transform:translate(1px,1px)}.trophy-icon{filter:drop-shadow(1px 1.5px 0 var(--shadow-col))}.trophy .trophy-icon{width:26px;height:26px}.trophy-text{flex-direction:column;align-items:flex-start;line-height:1;display:flex}.trophy-text small{opacity:.75;font-size:8px}.trophy-text b{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-size:19px}.trophy.cheer{animation:1.1s cubic-bezier(.3,1.6,.5,1) hop}.trophy.cheer:after{content:"";background:linear-gradient(100deg,#0000,#fffc,#0000);width:40%;animation:1.1s ease-in-out glint;position:absolute;inset:-20% auto -20% -60%;transform:skew(-15deg)}@keyframes hop{0%{transform:none}25%{transform:translateY(-8px)rotate(-8deg)scale(1.08)}50%{transform:translateY(0)rotate(6deg)}75%{transform:rotate(-3deg)}}@keyframes glint{0%{left:-60%}to{left:130%}}.card{--paper:var(--one);--on-paper:var(--on-one);border-radius:var(--r-card);background:var(--card);box-shadow:var(--shadow);flex-direction:column;gap:10px;padding:14px;transition:opacity .3s,box-shadow .2s;display:flex}.step2{--paper:var(--two);--on-paper:var(--on-two)}.card.locked{opacity:.45}.card.live{box-shadow:0 0 0 3px var(--paper), var(--shadow-lift)}.card.next{animation:1.6s ease-in-out infinite beckon}@keyframes beckon{0%,to{box-shadow:0 0 0 0 var(--paper), var(--shadow)}50%{box-shadow:0 0 0 4px var(--paper), var(--shadow-lift)}}.card-top{align-items:center;gap:10px;display:flex}.card-top h2{font-family:var(--f-display);white-space:nowrap;flex:1;margin:0;font-size:15px;font-weight:700}.tag{background:var(--paper);width:28px;height:28px;color:var(--on-paper);box-shadow:var(--shadow);font-family:var(--f-display);border-radius:6px;place-items:center;font-size:14px;font-weight:800;display:grid}.timer{color:var(--rec);font-variant-numeric:tabular-nums;margin-right:4px;font-weight:700}.hint{opacity:.8;min-height:2.6em;margin:0;font-size:11px;line-height:1.3}.hint q{opacity:1;font-weight:700}.shuffle{cursor:pointer;vertical-align:-1px;background:0 0;border:0;padding:0 4px;font-size:14px;line-height:1}.msg{color:var(--rec);margin:0;font-size:10px}.wave{--wave-color:var(--paper);--wave-dim:var(--faint);width:100%;height:64px;display:block}.flipper{perspective:600px}.flipper>.wave{transition:transform .8s cubic-bezier(.6,-.3,.3,1.3)}.flipper.flipped>.wave{transform:rotateY(180deg)}.keys{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:8px;padding:0 3px 3px 0;display:grid}.key{border-radius:var(--r-key);background:var(--key);height:44px;color:var(--on-key);box-shadow:var(--shadow);font-family:var(--f-display);white-space:nowrap;cursor:pointer;border:0;justify-content:center;align-items:center;gap:6px;padding:0 6px;font-size:9.5px;font-weight:600;transition:transform 60ms,box-shadow .2s ease-out,opacity .2s;display:flex}.key:active:not(:disabled){box-shadow:var(--shadow-press);transform:translate(1px,1px)}.key:disabled{opacity:.35;cursor:default}.key.rec{background:var(--rec);color:var(--on-rec)}.key.play{background:var(--play);color:var(--on-play)}.key.back{background:var(--back);color:var(--on-back)}.key.flip{background:var(--two);color:var(--on-two)}.key.go{background:var(--p2);color:var(--on-p2)}.two-line{flex-direction:column;align-items:center;gap:3px;display:flex}.two-line small{font-family:var(--f-mono);opacity:.75;font-size:8.5px;font-weight:400}.key:has(.two-line){height:52px}.key.on{box-shadow:var(--shadow-lift);outline:2px solid var(--ink);outline-offset:2px;transform:translate(-1px,-2px)}.key.rec.on .ico-stop{animation:.8s steps(2,end) infinite blink}.ico-rec{background:currentColor;border-radius:50%;width:9px;height:9px}.ico-play{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:8px solid;width:0;height:0}.ico-play.back{transform:scaleX(-1)}.ico-stop{background:currentColor;border-radius:1px;width:9px;height:9px}@keyframes blink{to{opacity:.2}}.big{background:var(--p2);height:68px;color:var(--on-p2);box-shadow:var(--shadow-lift);font-family:var(--f-display);cursor:pointer;border:0;border-radius:14px;margin-top:auto;font-size:22px;font-weight:800;transition:transform 60ms,box-shadow .2s ease-out,opacity .2s}.big:not(:disabled){animation:2.4s ease-in-out infinite nudge}.big:active:not(:disabled){box-shadow:var(--shadow-press);animation:none;transform:translate(2px,3px)}.big:disabled{opacity:.35;box-shadow:var(--shadow);cursor:default}.arrows{margin-right:4px;display:inline-block}.big:not(:disabled) .arrows{animation:2.4s ease-in-out infinite spin}@keyframes nudge{0%,70%,to{transform:none}80%{transform:rotate(-1.5deg)}90%{transform:rotate(1.5deg)}}@keyframes spin{0%,60%{transform:scaleX(1)}80%,to{transform:scaleX(-1)}}.sheet-wrap{background:color-mix(in srgb, var(--bg) 55%, transparent);z-index:10;align-items:flex-end;animation:.2s fade;display:flex;position:absolute;inset:0}.sheet{width:100%;padding:20px 16px calc(env(safe-area-inset-bottom) + 18px);background:var(--card);box-shadow:0 -4px 0 var(--shadow-col);max-height:calc(100% - env(safe-area-inset-top) - 12px);border-radius:20px 20px 0 0;flex-direction:column;gap:14px;animation:.45s cubic-bezier(.2,1.3,.4,1) rise;display:flex;position:relative;overflow:hidden auto}@keyframes fade{0%{opacity:0}}@keyframes rise{0%{transform:translateY(100%)}}.sheet-wrap.leaving{pointer-events:none;animation:.2s .25s forwards unfade}.sheet-wrap.leaving .sheet{animation:.45s cubic-bezier(.6,0,.8,-.3) forwards sink}@keyframes unfade{to{opacity:0}}@keyframes sink{to{transform:translateY(100%)}}.score-row{align-items:center;gap:14px;display:flex}.score{background:var(--p2);min-width:2.1em;color:var(--on-p2);box-shadow:var(--shadow);font-family:var(--f-display);text-align:center;letter-spacing:-.03em;font-variant-numeric:tabular-nums;border-radius:10px;flex:none;padding:10px 12px 6px;font-size:56px;font-weight:800;line-height:1;transform:rotate(-2deg)}.score-side{flex-direction:column;gap:5px;min-width:0;display:flex}.stars{gap:4px;display:flex}.stars i{background:var(--faint);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);width:18px;height:18px}.stars i.on{background:var(--p2);animation:.4s backwards pop}.stars i.on:nth-child(2){animation-delay:.15s}.stars i.on:nth-child(3){animation-delay:.3s}.stars i.on:nth-child(4){animation-delay:.45s}.stars i.on:nth-child(5){animation-delay:.6s}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.4)}}.level{font-family:var(--f-display);font-size:17px;font-weight:800;line-height:1.1}.level-rev{opacity:.55;font-size:10px}.compare{flex-direction:column;gap:6px;display:flex}.legend{justify-content:space-between;font-size:9px;display:flex}.lg-top{color:var(--one)}.lg-bot{color:var(--two)}.lg-top:before,.lg-bot:before{content:"";background:currentColor;border-radius:2px;width:8px;height:8px;margin-right:5px;display:inline-block}.mirror{--top-color:var(--one);--bottom-color:var(--two);--wave-dim:var(--faint);width:100%;height:96px;display:block}.ranked{border-radius:var(--r-key);background:var(--ink);color:var(--bg);box-shadow:var(--shadow);font-family:var(--f-display);cursor:pointer;border:0;align-items:center;gap:8px;padding:8px 12px;font-size:11px;font-weight:700;animation:.4s .8s backwards pop;display:flex}.ranked svg{width:20px;height:20px;color:var(--p2)}.ranked.low svg{color:var(--rec);transform:rotate(180deg)}.ranked span{font-family:var(--f-mono);opacity:.8;margin-left:auto;font-size:9.5px;font-weight:400}.diff{--tag:var(--p6);--on-tag:var(--on-p6);background:var(--tag);color:var(--on-tag);box-shadow:1px 2px 0 var(--shadow-col);font-family:var(--f-display);letter-spacing:.03em;white-space:nowrap;vertical-align:1px;border-radius:5px;align-items:baseline;gap:4px;padding:3px 7px 2px;font-size:9px;font-weight:800;line-height:1.2;display:inline-flex}.diff small{font-family:var(--f-mono);letter-spacing:0;font-size:9px;font-weight:400}.diff.medium{--tag:var(--p2);--on-tag:var(--on-p2)}.diff.hard,.diff.wild{--tag:var(--p1);--on-tag:var(--on-p1)}.diff.wild{clip-path:polygon(0% 0%,8.3% 22%,16.7% 0%,25% 22%,33.3% 0%,41.7% 22%,50% 0%,58.3% 22%,66.7% 0%,75% 22%,83.3% 0%,91.7% 22%,100% 0%,93% 25%,100% 50%,93% 75%,100% 100%,91.7% 78%,83.3% 100%,75% 78%,66.7% 100%,58.3% 78%,50% 100%,41.7% 78%,33.3% 100%,25% 78%,16.7% 100%,8.3% 78%,0% 100%,7% 75%,0% 50%,7% 25%);padding:5px 11px 4px;animation:.24s step-end infinite jag,.96s step-end infinite wild-paper,.4s steps(2,end) infinite jitter}.wild-shadow{filter:drop-shadow(1px 2px 0 var(--shadow-col));display:inline-flex}@keyframes jag{50%{clip-path:polygon(0% 22%,8.3% 0%,16.7% 22%,25% 0%,33.3% 22%,41.7% 0%,50% 22%,58.3% 0%,66.7% 22%,75% 0%,83.3% 22%,91.7% 0%,100% 22%,100% 25%,93% 50%,100% 75%,93% 100%,91.7% 100%,83.3% 78%,75% 100%,66.7% 78%,58.3% 100%,50% 78%,41.7% 100%,33.3% 78%,25% 100%,16.7% 78%,8.3% 100%,0% 78%,0% 75%,7% 50%,0% 25%)}}@keyframes wild-paper{25%{background:var(--p2)}50%{background:var(--p4)}75%{background:var(--p6)}}@keyframes jitter{0%{transform:rotate(-3deg)scale(1)}50%{transform:rotate(3deg)scale(1.06)}}.card-diff{font-size:10px}.card-diff:not(.wild){animation:.35s pop}.calc{white-space:nowrap;align-items:center;gap:6px;margin-top:2px;font-size:10px;display:flex}.entry-stars{align-items:center;gap:7px;display:flex}.tune-bar{border-radius:var(--r-key);background:var(--ink);color:var(--bg);box-shadow:var(--shadow);font-family:var(--f-mono);text-align:left;cursor:pointer;border:0;align-items:center;gap:10px;margin-top:-6px;padding:8px 12px;font-size:10px;display:flex}.tune-bar b{font-family:var(--f-display);letter-spacing:.04em;font-size:10px}.tune-share{font-family:var(--f-display);color:var(--p2);margin-left:auto;font-weight:700}.toast{top:calc(env(safe-area-inset-top) + 70px);z-index:30;background:var(--ink);color:var(--bg);box-shadow:var(--shadow-lift);font-family:var(--f-display);white-space:nowrap;border-radius:999px;padding:9px 14px;font-size:11px;font-weight:700;animation:.3s pop;position:absolute;left:50%;transform:translate(-50%)}.rating{border-radius:var(--r-key);border:1.5px dashed var(--dim);flex-direction:column;gap:8px;padding:10px;display:flex}.rate{flex-direction:column;gap:5px;font-size:9px;display:flex}.chips{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.chip{background:var(--key);height:30px;color:var(--on-key);box-shadow:var(--shadow);font-family:var(--f-display);white-space:nowrap;cursor:pointer;border:0;border-radius:6px;padding:0 4px;font-size:8.5px;font-weight:600}.chip.on{background:var(--ink);color:var(--bg)}.tuning-title{font-family:var(--f-display);margin:0;font-size:18px;font-weight:800}.tuning-text{margin:0;font-size:11px;line-height:1.45}.tuning-text code{font-family:var(--f-mono);font-weight:700}.tuning-status{font-family:var(--f-display);color:var(--p3);margin:0;font-size:11px;font-weight:700}.sheet.board{max-height:calc(100% - env(safe-area-inset-top) - 24px);padding-bottom:0}.board-top{align-items:center;gap:8px;display:flex}.board-top h2{flex:1;align-items:center;gap:8px;min-width:0;margin:0;display:flex}.board-trophy{width:30px;height:30px;color:var(--p2);flex:none;transition:transform .5s cubic-bezier(.4,1.5,.5,1)}.reversed .board-trophy{color:var(--rec);transform:rotate(180deg)}.board-title{min-width:0;font-family:var(--f-display);flex-direction:column;gap:3px;font-size:17px;font-weight:800;line-height:1;display:flex}.board-title small{font-family:var(--f-mono);opacity:.7;font-size:8.5px;font-weight:400}.reverse-board{border-radius:var(--r-key);background:var(--p2);height:44px;color:var(--on-p2);box-shadow:var(--shadow);font-family:var(--f-display);cursor:pointer;border:0;flex:none;align-items:center;gap:8px;padding:0 14px;font-size:11px;font-weight:700;display:flex}.reverse-board small{font-family:var(--f-mono);opacity:.8;margin-left:auto;font-size:9px;font-weight:400}.reverse-board:active{box-shadow:var(--shadow-press);transform:translate(1px,1px)}.reverse-board .arrows{font-size:15px;transition:transform .4s}.reverse-board.on{background:var(--ink);color:var(--bg)}.reverse-board.on .arrows{transform:rotate(180deg)}.board-list.out{animation:.2s ease-in forwards turn-out}.board-list.in{animation:.25s ease-out turn-in}@keyframes turn-out{to{opacity:.4;transform:perspective(700px)rotateX(90deg)}}@keyframes turn-in{0%{opacity:.4;transform:perspective(700px)rotateX(-90deg)}}.close{border-radius:var(--r-key);background:var(--key);width:40px;height:40px;color:var(--on-key);box-shadow:var(--shadow);cursor:pointer;border:0;font-size:15px}.board-empty{opacity:.8;margin:8px 0 16px;font-size:11px;line-height:1.4}.board-list{-webkit-overflow-scrolling:touch;flex-direction:column;gap:14px;min-height:0;margin:0 -16px;padding:4px 16px 14px;list-style:none;display:flex;overflow-y:auto}.entry{--medal:var(--key);--on-medal:var(--on-key);border-radius:var(--r-card);background:var(--bg);box-shadow:var(--shadow);flex-direction:column;gap:10px;padding:12px;display:flex}.entry.rank1{--medal:var(--p2);--on-medal:var(--on-p2)}.entry.rank2{--medal:var(--p6);--on-medal:var(--on-p6)}.entry.rank3{--medal:var(--p4);--on-medal:var(--on-p4)}.reversed .entry.rank1{--medal:var(--rec);--on-medal:var(--on-rec)}.entry.new{box-shadow:0 0 0 3px var(--p2), var(--shadow)}.entry-top{align-items:center;gap:10px;display:flex}.rank{background:var(--medal);width:30px;height:30px;color:var(--on-medal);box-shadow:var(--shadow);font-family:var(--f-display);border-radius:50%;flex:none;place-items:center;font-size:13px;font-weight:800;display:grid}.entry-score{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-size:30px;font-weight:800;line-height:1}.del{border-radius:var(--r-key);background:var(--key);min-width:34px;height:34px;color:var(--dim);box-shadow:var(--shadow);font-family:var(--f-display);cursor:pointer;border:0;flex:none;justify-content:center;align-self:flex-start;align-items:center;gap:5px;margin-left:auto;padding:0 8px;font-size:9.5px;font-weight:700;transition:background .15s,color .15s;display:flex}.del:active{box-shadow:var(--shadow-press);transform:translate(1px,1px)}.del .bin{width:17px;height:17px}.del.armed{background:var(--rec);color:var(--on-rec);animation:.25s pop}.entry-meta{flex-direction:column;gap:3px;min-width:0;display:flex}.entry-meta b{font-family:var(--f-display);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.entry-meta time{opacity:.75;white-space:nowrap;font-size:9.5px}.mini-stars{letter-spacing:1px;color:var(--p2);font-size:11px;font-style:normal;line-height:1}.mini-stars i{color:var(--faint);font-style:normal}.privacy-link{padding:10px 16px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--faint);color:var(--dim);text-align:center;flex:none;margin:0 -16px;font-size:9px;text-decoration:none}.mirror.small{height:64px}.parts{grid-template-columns:1fr 1fr;gap:12px;display:grid}.part{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:10px;display:grid}.part i{background:linear-gradient(90deg, var(--ink) calc(var(--v) * 100%), var(--faint) 0);border-radius:4px;height:8px}.part b{font-family:var(--f-display);text-align:right;min-width:2ch;font-size:12px}.poppers{pointer-events:none;z-index:20;width:100%;height:100%;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation-duration:0s!important}}