html:has(.wb-root){overscroll-behavior:none}html:has(.wb-root) body{overscroll-behavior:none}.wb-root{--wb-floor-a:#f2ebdc;--wb-floor-b:#e6dbc5;--wb-front-ink:#6b5a3e;background:var(--surf-paper);height:100dvh;color:var(--brand-ink);font-family:var(--nl-font);overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);grid-template-rows:auto minmax(0,1fr);display:grid}.wb-header{align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-2) var(--space-4);padding-top:max(var(--space-2), env(safe-area-inset-top));background:var(--surf-card);border-bottom:2px solid var(--brand-ink);flex-wrap:wrap;display:flex}.wb-back{border-radius:var(--nl-radius-full);width:48px;height:48px;color:var(--brand-ink);font-size:var(--text-24);place-items:center;display:inline-grid}.wb-back:hover{background:var(--surf-fog)}.wb-back:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.wb-title{font-family:var(--nl-font);font-size:var(--text-24);letter-spacing:-.02em;white-space:nowrap;flex:1;margin:0;font-weight:800;line-height:1.1}.wb-header-segs{align-items:center;gap:var(--space-4);display:flex}.wb-seg--mode .nl-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.wb-seg .nl-field{gap:0}.wb-seg--stage .nl-field{align-items:center;gap:var(--space-2);flex-direction:row}.wb-header-segs>*{flex-shrink:0}.wb-root .mt-seg-btn{min-width:48px;min-height:48px;padding:0 var(--space-3);font-family:var(--nl-font);white-space:nowrap;flex:none;font-weight:700}.wb-root .mt-seg-btn[aria-checked=true]{color:var(--surf-deep)}.wb-stars{align-items:center;gap:var(--space-1);min-height:48px;padding:0 var(--space-3);border:2px solid var(--brand-ink);border-radius:var(--nl-radius-full);background:var(--surf-card);font-size:var(--text-20);font-variant-numeric:tabular-nums;font-weight:800;display:inline-flex}.wb-stars svg{color:var(--brand-gold);font-size:var(--text-24)}.wb-main{gap:var(--space-4);min-height:0;padding:var(--space-4);padding-bottom:max(var(--space-4), env(safe-area-inset-bottom));grid-template-columns:minmax(0,55fr) minmax(0,45fr);display:grid}.wb-stage{background:var(--surf-paper);border:2px solid var(--brand-ink);border-radius:var(--nl-radius-card);min-height:0;box-shadow:var(--shadow-hard-sm);overflow:hidden}.wb-panel{align-items:center;gap:var(--space-3);min-height:0;padding:var(--space-4);background:var(--surf-card);border:2px solid var(--brand-ink);border-radius:var(--nl-radius-card);box-shadow:var(--shadow-hard-sm);text-align:center;flex-direction:column;display:flex;overflow-y:auto}.wb-panel-title{font-family:var(--nl-font);font-size:var(--text-28);margin:0;font-weight:800;line-height:1.2}.wb-hint{max-width:32em;font-size:var(--text-20);margin:0;font-weight:600;line-height:1.35}.wb-actions{justify-content:center;gap:var(--space-3);width:100%;display:flex}.wb-actions>*{min-width:0;min-height:48px;padding-inline:var(--space-3);white-space:nowrap;flex:1 1 0}.wb-actions>[aria-disabled=true]{opacity:.5;cursor:not-allowed}.wb-feedback{width:100%;max-width:none;min-height:calc(2 * 1.35 * var(--text-20) + 2 * var(--space-2));justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-radius:var(--nl-radius-md);display:flex}.wb-feedback[data-tone]{font-weight:700}.wb-feedback svg{font-size:var(--text-28);flex:none}.wb-feedback[data-tone=ok]{color:var(--nl-success-text);background:var(--nl-success-bg)}.wb-feedback[data-tone=wrong]{color:var(--nl-error-text);background:var(--nl-error-bg)}.wb-feedback[data-tone=info]{background:color-mix(in oklab, var(--accent) 25%, var(--surf-card))}.wb-plan{--wb-gap:var(--space-1);--wb-front-h:calc(1.35 * var(--text-20));--wb-pad-h:0px;--wb-cell:clamp(40px, min(calc((100cqh - var(--wb-front-h) - var(--wb-pad-h) - 6 * var(--wb-gap)) / 5), calc((100cqw - 4 * var(--wb-gap)) / 5)), 96px);min-height:calc(5 * 40px + 6 * var(--wb-gap) + var(--wb-front-h) + var(--wb-pad-h));justify-content:safe center;align-items:center;gap:var(--wb-gap);flex-direction:column;flex:1 1 0;width:100%;display:flex;container-type:size}.wb-plan[data-pad]{--wb-pad-h:calc(56px + var(--space-3))}.wb-grid{gap:var(--wb-gap);flex-direction:column;display:flex}.wb-row{grid-template-columns:repeat(5, var(--wb-cell));grid-auto-rows:var(--wb-cell);gap:var(--wb-gap);display:grid}.wb-cell{border:2px solid color-mix(in oklab, var(--wb-front-ink) 45%, transparent);border-radius:var(--nl-radius-sm);background:var(--wb-floor-a);font-family:var(--nl-font);font-size:var(--text-28);font-variant-numeric:tabular-nums;color:var(--brand-ink);transition:background-color var(--tr-fast), border-color var(--tr-fast);place-items:center;padding:0;font-weight:800;display:grid}.wb-row:nth-child(odd) .wb-cell:nth-child(2n),.wb-row:nth-child(2n) .wb-cell:nth-child(odd){background:var(--wb-floor-b)}button.wb-cell{cursor:pointer}.wb-cell[data-selected]{border-color:var(--brand-ink);background:color-mix(in oklab, var(--accent) 45%, var(--surf-card));outline:3px solid var(--accent);outline-offset:2px}.wb-cell[data-revealed]{border-color:var(--brand-ink);background:color-mix(in oklab, var(--accent) 45%, var(--surf-card))}.wb-cell[aria-invalid=true]{border-color:var(--nl-error);box-shadow:inset 0 0 0 2px var(--nl-error)}.wb-cell:focus-visible{outline:4px solid var(--accent);outline-offset:2px}.wb-front{font-family:var(--nl-font-read);font-size:var(--text-20);color:var(--wb-front-ink);font-weight:800;line-height:1.35}.wb-pad{gap:var(--space-2);margin-top:calc(var(--space-3) - var(--wb-gap));grid-template-columns:repeat(6,minmax(48px,56px));grid-auto-rows:56px;display:grid}.wb-pad-key{border:2px solid var(--brand-ink);border-radius:var(--nl-radius-md);background:var(--surf-card);font-family:var(--nl-font);font-size:var(--text-24);color:var(--brand-ink);cursor:pointer;place-items:center;font-weight:800;display:grid}.wb-pad-key:active:not(:disabled){background:color-mix(in oklab, var(--accent) 35%, var(--surf-card));transform:translate(1px,1px)}.wb-pad-key:disabled{opacity:.4;cursor:default}.wb-pad-key:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media (orientation:portrait){.wb-root{grid-template-rows:auto auto;height:auto;min-height:100dvh}.wb-main{grid-template-rows:55dvh auto;grid-template-columns:minmax(0,1fr)}.wb-panel{overflow:visible}.wb-plan{--wb-cell:clamp(40px, calc((100cqw - 4 * var(--wb-gap)) / 5), 80px);flex:none;container-type:inline-size}}@media (max-width:1023px){.wb-header-segs{flex-wrap:wrap;order:10;justify-content:flex-end;width:100%}}.wb-confetti{z-index:20;pointer-events:none;position:fixed;inset:0;overflow:hidden}.wb-confetti i{top:0;left:var(--x);background:var(--c);opacity:0;width:10px;height:14px;animation:wb-confetti var(--dur) var(--delay) cubic-bezier(.25, .6, .45, 1) forwards;border-radius:2px;position:absolute}.wb-confetti i:nth-child(3n){border-radius:50%;width:8px;height:8px}@keyframes wb-confetti{0%{opacity:1;transform:translateY(-24px)rotate(0)}85%{opacity:1}to{opacity:0;transform:translate3d(var(--dx), 100dvh, 0) rotate(var(--rot))}}@media (prefers-reduced-motion:reduce){.wb-confetti{display:none}}