._0myxlW_wrap,._0myxlW_examples{--red:#d92d20;--red-on-sun:#b42318;--peer:color-mix(in srgb, var(--sky) 16%, var(--card));--same:color-mix(in srgb, var(--sun) 40%, var(--card));--hairline:color-mix(in srgb, var(--ink) 18%, var(--card));--given:color-mix(in srgb, var(--ink) 8%, var(--card));--clash-bg:color-mix(in srgb, var(--red) 24%, var(--card));--sticker-ink:#1b1612}:root[data-theme=dark] ._0myxlW_wrap,:root[data-theme=dark] ._0myxlW_examples{--red:#ff8a7a;--peer:color-mix(in srgb, var(--sky) 14%, var(--card));--same:color-mix(in srgb, var(--sun) 24%, var(--card));--given:color-mix(in srgb, var(--ink) 16%, var(--card));--clash-bg:color-mix(in srgb, var(--red) 28%, var(--card));--sticker-ink:#f3ece4}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) ._0myxlW_wrap,:root:not([data-theme=light]) ._0myxlW_examples{--red:#ff8a7a;--peer:color-mix(in srgb, var(--sky) 14%, var(--card));--same:color-mix(in srgb, var(--sun) 24%, var(--card));--given:color-mix(in srgb, var(--ink) 16%, var(--card));--clash-bg:color-mix(in srgb, var(--red) 28%, var(--card));--sticker-ink:#f3ece4}}._0myxlW_wrap{--most:56px;--cell:max(36px, min(var(--most), round(down, (100vw - 28px) / var(--n), 1px), round(down, (100dvh - 380px) / var(--n), 1px)));--side:calc(var(--n) * var(--cell) + 4px);grid-template-columns:var(--side);grid-template-areas:"bar""stage""pad";justify-content:center;gap:12px;padding:6px 0 24px;display:grid}._0myxlW_bar{grid-area:bar;justify-content:space-between;align-items:center;gap:10px;height:44px;display:flex}._0myxlW_clock{border:1.5px solid var(--hair);background:var(--card);height:44px;color:var(--ink);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:0 16px 0 12px;display:inline-flex}._0myxlW_clock:disabled{cursor:default}._0myxlW_clock:not(:disabled):hover{border-color:var(--line)}._0myxlW_clockIcon{color:var(--ink-2);display:inline-flex}._0myxlW_clockIcon svg{width:16px;height:16px}._0myxlW_time{min-width:3.3ch;font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:20px;font-weight:800}._0myxlW_tool{border:1.5px solid var(--hair);background:var(--card);height:44px;color:var(--ink);white-space:nowrap;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:14px;font-weight:700;display:inline-flex}._0myxlW_tool svg{flex:none;width:18px;height:18px}._0myxlW_tool:not(:disabled):hover{border-color:var(--line)}._0myxlW_tool:disabled{opacity:.45;cursor:default}._0myxlW_menuWrap{position:relative}._0myxlW_menu{z-index:15;border:var(--border);background:var(--card);min-width:170px;box-shadow:var(--shadow);border-radius:14px;padding:6px;display:grid;position:absolute;top:calc(100% + 6px);right:0}._0myxlW_menu button{height:44px;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;padding:0 12px;font-weight:700}._0myxlW_menu button:hover{background:var(--paper-2)}._0myxlW_stage{grid-area:stage;position:relative}._0myxlW_grid{border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:12px;overflow:hidden}._0myxlW_grid:focus{outline:none}._0myxlW_grid:focus-visible:not([data-chosen]){outline:3px solid var(--focus);outline-offset:3px}._0myxlW_wrap[data-done] ._0myxlW_grid:focus-visible{outline:none}._0myxlW_wrap[data-size="6"]{--most:72px}._0myxlW_wrap[data-done]{--cell-bg:color-mix(in srgb, var(--candy) 14%, var(--card))}._0myxlW_wrap[data-done] ._0myxlW_given{background:var(--cell-bg)}._0myxlW_hidden{filter:blur(14px);pointer-events:none}._0myxlW_row{grid-template-columns:repeat(var(--n), var(--cell));display:grid}._0myxlW_cell{--r:var(--hairline);--b:var(--hairline);--l:transparent;--t:transparent;height:var(--cell);background:var(--cell-bg,var(--card));box-shadow:inset -1px 0 0 var(--r), inset 0 -1px 0 var(--b), inset 1px 0 0 var(--l), inset 0 1px 0 var(--t);cursor:pointer;-webkit-tap-highlight-color:transparent;place-items:center;display:grid;position:relative}._0myxlW_cell[data-edge~=r]{--r:var(--line)}._0myxlW_cell[data-edge~=l]{--l:var(--line)}._0myxlW_cell[data-edge~=b]{--b:var(--line)}._0myxlW_cell[data-edge~=t]{--t:var(--line)}._0myxlW_cell[data-edge~=x]{--r:transparent}._0myxlW_cell[data-edge~=y]{--b:transparent}._0myxlW_given{background:var(--given)}._0myxlW_peer{background:var(--peer)}._0myxlW_peer._0myxlW_given{background:color-mix(in srgb, var(--sky) 16%, var(--given))}._0myxlW_same{background:var(--same)}._0myxlW_sel{--sticker-ink:#1b1612;background:var(--sun)}._0myxlW_clash:not(._0myxlW_sel){background:var(--clash-bg)}._0myxlW_sel._0myxlW_clash{box-shadow:inset 0 0 0 3px var(--red-on-sun), inset -1px 0 0 var(--r), inset 0 -1px 0 var(--b)}._0myxlW_pic{--fill:.7;width:calc(var(--cell) * var(--fill));height:calc(var(--cell) * var(--fill))}._0myxlW_wrap[data-size="6"] ._0myxlW_pic{--fill:.64}._0myxlW_wrong:after{content:"";background:linear-gradient(to top right, transparent calc(50% - 1px), var(--red) calc(50% - 1px), var(--red) calc(50% + 1px), transparent calc(50% + 1px));pointer-events:none;position:absolute;inset:0}._0myxlW_notes{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(calc(var(--n) / 3), 1fr);place-items:center;width:100%;height:100%;padding:3px;display:grid}._0myxlW_notes svg{width:max(10px, calc(var(--cell) * .24));height:max(10px, calc(var(--cell) * .24));display:block}._0myxlW_noteHit{background:var(--sun);box-shadow:0 0 0 2px var(--sun);--sticker-ink:#1b1612;border-radius:50%;place-items:center;display:grid}._0myxlW_nudge{animation:.36s ease-in-out _0myxlW_nudge}@keyframes _0myxlW_nudge{20%{translate:-3px}40%{translate:3px}60%{translate:-2px}80%{translate:2px}}._0myxlW_wave{animation:_0myxlW_wave .52s var(--ease-out) calc(var(--ring) * 55ms) both}._0myxlW_wave ._0myxlW_pic{animation:_0myxlW_press .52s var(--ease-pop) calc(var(--ring) * 55ms) both}@keyframes _0myxlW_wave{35%{background-color:color-mix(in srgb, var(--candy) 62%, var(--card))}}@keyframes _0myxlW_press{35%{transform:scale(1.2)rotate(-8deg)}70%{transform:scale(.96)rotate(2deg)}}@media (prefers-reduced-motion:reduce){._0myxlW_wave,._0myxlW_wave ._0myxlW_pic{animation-delay:0s!important}}._0myxlW_paused{place-content:center;justify-items:center;gap:12px;display:grid;position:absolute;inset:0}._0myxlW_paused b{font-family:var(--font-display);font-size:28px}._0myxlW_pad{grid-area:pad;grid-template-columns:repeat(6,1fr);justify-self:center;gap:6px;width:max-content;min-width:100%;display:grid}._0myxlW_key{background:var(--key);min-width:44px;height:58px;color:var(--ink);cursor:pointer;box-shadow:inset 0 -3px 0 var(--key-edge);touch-action:manipulation;border:0;border-radius:9px;align-content:center;place-items:center;gap:2px;padding:0;transition:background .2s,color .2s,transform 60ms;display:grid;position:relative}._0myxlW_notesKey{grid-area:1/6}._0myxlW_wrap[data-size="6"] ._0myxlW_notesKey{grid-area:auto}._0myxlW_wrap[data-size="6"] ._0myxlW_fn{grid-column:span 2}._0myxlW_key:active:not(:disabled){box-shadow:inset 0 -1px 0 var(--key-edge);transform:translateY(2px)}._0myxlW_key:disabled{cursor:default;opacity:.5}._0myxlW_keyPic{width:27px;height:27px;transition:transform .15s}._0myxlW_keyName{color:var(--ink-2);font-size:10.5px;font-weight:700;line-height:1}._0myxlW_keyLeft{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:700;line-height:1;display:inline-flex;position:absolute;top:4px;right:5px}._0myxlW_keyLeft svg{stroke-width:3.2px;width:11px;height:11px}._0myxlW_keyNumber{display:none}._0myxlW_key[data-full]{background:var(--paper-2);box-shadow:none;color:var(--ink-3)}._0myxlW_key[data-full] ._0myxlW_keyPic{opacity:.45}._0myxlW_fn{align-content:center;gap:3px;font-size:11.5px;font-weight:700;line-height:1}._0myxlW_fn svg{width:20px;height:20px}._0myxlW_notesKey[aria-pressed=true]{background:var(--sun);color:#1b1612;box-shadow:inset 0 0 0 2px #1b1612}._0myxlW_noting ._0myxlW_keyPic{transform:scale(.72)}._0myxlW_after{grid-area:pad;justify-content:center;align-items:start;display:flex}@media (max-height:700px) and (max-width:859px){._0myxlW_wrap{--cell:max(30px, min(var(--most), round(down, (100vw - 28px) / var(--n), 1px), round(down, (var(--fit-h,100svh) - 176px) / var(--n), 1px)));gap:8px;padding:4px 0}._0myxlW_bar,._0myxlW_clock{height:40px}._0myxlW_bar .btn{min-height:40px}._0myxlW_key{height:48px}._0myxlW_keyPic{width:22px;height:22px}}@media (max-height:480px) and (max-width:859px){._0myxlW_wrap{--cell:max(25px, min(var(--most), round(down, (100vw - 28px) / var(--n), 1px), round(down, (var(--fit-h,100svh) - 150px) / var(--n), 1px)));gap:6px;padding-bottom:2px}._0myxlW_bar,._0myxlW_clock{height:36px}._0myxlW_bar .btn{min-height:36px}._0myxlW_key{height:44px}._0myxlW_keyName{display:none}}@media (min-width:860px){._0myxlW_wrap{--most:58px;--cell:max(40px, min(var(--most), round(down, (100dvh - 200px) / var(--n), 1px)));grid-template-columns:var(--side) 256px;grid-template-rows:auto auto 1fr;grid-template-areas:"stage bar""stage pad""stage.";gap:14px 36px;padding-top:10px}._0myxlW_wrap[data-size="6"]{--most:84px}._0myxlW_pad{grid-template-columns:repeat(3,1fr);gap:8px}._0myxlW_key{aspect-ratio:1;gap:5px;height:auto}._0myxlW_notesKey,._0myxlW_wrap[data-size="6"] ._0myxlW_notesKey{grid-area:auto}._0myxlW_wrap[data-size="6"] ._0myxlW_fn{grid-column:auto}._0myxlW_keyPic{width:38px;height:38px}._0myxlW_keyName{font-size:12px}._0myxlW_keyLeft{font-size:12px;top:7px;right:9px}._0myxlW_keyNumber{border:1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);min-width:17px;height:17px;color:var(--ink-2);border-bottom-width:2.5px;border-radius:5px;place-items:center;padding:0 3px;font-size:11px;font-weight:700;line-height:1;display:inline-grid;position:absolute;top:6px;left:7px}._0myxlW_fn{gap:5px;font-size:13px}._0myxlW_fn svg{width:24px;height:24px}._0myxlW_after{justify-content:flex-start}}._0myxlW_examples{gap:14px;display:grid}._0myxlW_exampleRow{border:2px solid var(--line);border-radius:8px;width:max-content;margin-bottom:8px;display:flex;overflow:hidden}._0myxlW_exampleCell{--cell:38px;width:var(--cell);height:var(--cell);background:var(--card);box-shadow:inset -1px 0 0 var(--hairline);place-items:center;display:grid;position:relative}._0myxlW_exampleRow ._0myxlW_exampleCell:nth-child(3){box-shadow:inset -2px 0 0 var(--line)}._0myxlW_exampleRow ._0myxlW_exampleCell:last-child{box-shadow:none}._0myxlW_examplePic{width:27px;height:27px}._0myxlW_exampleSel{--sticker-ink:#1b1612;background:var(--sun)}._0myxlW_exampleText{color:var(--ink-2);font-size:14.5px}._0myxlW_exampleNoteWrap{align-items:center;gap:14px;display:flex}._0myxlW_exampleBig{--cell:58px;--n:9;border:2px solid var(--line);box-shadow:none;border-radius:8px;flex:none}