*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100dvh}:root{--bg: #fafaf7;--fg: #1a1a1f;--board-bg: #e9eaee;--board-border: #c4c8d1;--cell-bg: transparent;--cell-border: #c2c6d0;--tile-bg: #ffffff;--tile-fg: #1a1a1f;--bar-bg: #e9eaee;--slot-bg: #ffffff;--slot-border: #c4c8d1;--accent: #2058e8;--accent-fg: #ffffff;--orange: #e07b00;--focus-ring: #2058e8;--bar-correct: #3b82f6;--slot-dark-letter: #000000;--letter-scale: 1.2;--tile-font-size: calc(clamp(1rem, 4.5vw, 1.75rem) * var(--letter-scale));--bar-incorrect: #94a3b8;--surface: #ffffff;--text-muted: #5e636d;--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}@media (prefers-color-scheme: dark){:root{--bg: #101116;--fg: #ececef;--board-bg: #181a20;--board-border: #2b2e36;--cell-bg: transparent;--cell-border: #3d414b;--tile-bg: #2a2d36;--tile-fg: #f0f1f3;--bar-bg: #181a20;--slot-bg: #2a2d36;--slot-border: #3a3e48;--bar-incorrect: #94a3b8;--surface: #1d1e25;--text-muted: #9a9ea8}}:root[data-theme=light]{--bg: #fafaf7;--fg: #1a1a1f;--board-bg: #e9eaee;--board-border: #c4c8d1;--cell-bg: transparent;--cell-border: #c2c6d0;--tile-bg: #ffffff;--tile-fg: #1a1a1f;--bar-bg: #e9eaee;--slot-bg: #ffffff;--slot-border: #c4c8d1;--bar-incorrect: #94a3b8;--surface: #ffffff;--text-muted: #5e636d}:root[data-theme=dark]{--bg: #101116;--fg: #ececef;--board-bg: #181a20;--board-border: #2b2e36;--cell-bg: transparent;--cell-border: #3d414b;--tile-bg: #2a2d36;--tile-fg: #f0f1f3;--bar-bg: #181a20;--slot-bg: #2a2d36;--slot-border: #3a3e48;--bar-incorrect: #94a3b8;--surface: #1d1e25;--text-muted: #9a9ea8}body{background:var(--bg);color:var(--fg);font-family:var(--font-stack);font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#app{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.25rem 1rem .75rem;max-width:32rem;margin:0 auto}@media (max-width: 360px){#app{padding-inline:0}}.header{width:100%;display:flex;align-items:center;justify-content:center;position:relative}.title{margin:0;font-size:2rem;font-weight:900;letter-spacing:.02em;color:var(--accent)}.header__settings,.header__help{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;font-size:1.25rem;line-height:1;cursor:pointer;min-width:44px;min-height:44px;border-radius:8px;color:var(--fg);padding:0}.header__settings{right:0}.header__help{left:0}.header__btn-label{font-size:.95rem;font-style:italic;font-weight:500;color:var(--text-muted)}.header__settings:hover,.header__help:hover{background:#0000000d}@media (prefers-color-scheme: dark){.header__settings:hover,.header__help:hover{background:#ffffff0f}}:root[data-theme=dark] .header__settings:hover,:root[data-theme=dark] .header__help:hover{background:#ffffff0f}.puzzle-subtitle{margin:0;font-size:.875rem;font-weight:400;text-align:center;color:var(--text-muted)}.puzzle-subtitle:empty{display:none}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}#settings-title:focus,#settings-title:focus-visible{outline:none}.footer{margin:.5rem auto 0;padding:0 1rem max(1rem,env(safe-area-inset-bottom));text-align:center;font-size:.75rem;color:var(--text-muted)}.footer__btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}.footer__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.practice-nav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:min(100%,28rem);margin:0 auto .5rem;padding:0 .25rem}.practice-nav[hidden]{display:none}.practice-nav__btn{font:inherit;font-size:.9rem;font-weight:600;min-height:44px;min-width:44px;padding:.25rem .75rem;background:transparent;color:var(--fg);border:1px solid var(--slot-border);border-radius:.375rem;cursor:pointer}.practice-nav__btn:hover{filter:brightness(.97)}.practice-nav__btn:active{transform:translateY(1px)}.practice-nav__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.practice-nav__btn[disabled]{opacity:.4;cursor:not-allowed;filter:none;transform:none}.practice-nav__position{font-size:.9rem;font-weight:600;color:var(--text-muted);text-align:center;white-space:nowrap}.practice-nav__position--stacked{font-size:.75rem;line-height:1.1;white-space:pre-line}.board-stage{position:relative;width:min(100%,28rem);aspect-ratio:1 / 1}.board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);width:min(100%,28rem);aspect-ratio:1 / 1;gap:0;background:var(--board-bg);border:1px solid var(--board-border);border-radius:.375rem;overflow:hidden;touch-action:none}.cell{display:flex;align-items:center;justify-content:center;border:1px solid var(--cell-border);background:var(--cell-bg);font-size:var(--tile-font-size);font-weight:700;text-transform:uppercase;color:var(--tile-fg);user-select:none;-webkit-user-select:none}.cell:focus-visible,.cell:focus{outline:none}.cell[data-filled=true]{background:var(--tile-bg);cursor:grab}.cell[data-filled=true]:active{cursor:grabbing}@keyframes cell-press-in{0%{transform:scale(1);box-shadow:0 0 #14182800}}.cell--pressed{position:relative;z-index:3;transform:scale(1.05);box-shadow:0 6px 16px #1418283d;animation:cell-press-in .12s ease}@media (prefers-reduced-motion: reduce){.cell--pressed{transform:none;animation:none}}.cell--moving{position:relative;z-index:2;will-change:transform}.board[data-animating=true]{pointer-events:none}@keyframes cell-shake{0%{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}to{transform:translate(0)}}.cell--shake{animation:cell-shake .2s ease-in-out}@media (prefers-reduced-motion: reduce){.cell--shake{animation:none}}.bar{display:flex;gap:.375rem;width:min(calc(var(--bar-slot-count, 7) * 4rem + (var(--bar-slot-count, 7) - 1) * .375rem + 1rem),100%,28rem);margin:.5rem auto 0;padding:.5rem;background:var(--bar-bg);border-radius:.375rem;list-style:none}.slot{flex:1;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;background:var(--slot-bg);border:1px solid var(--slot-border);border-radius:.25rem;font-size:var(--tile-font-size);font-weight:700;text-transform:uppercase;color:var(--tile-fg);user-select:none;-webkit-user-select:none;position:relative;overflow:hidden}.slot[data-filled=true]{background:var(--tile-bg)}.slot[data-state=correct-canonical]{background:var(--bar-correct);color:var(--accent-fg);border-color:var(--bar-correct)}.slot:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translate(-100%);animation:slot-blue-shine 6.4s linear infinite;pointer-events:none;opacity:0;transition:opacity .2s ease}.slot[data-state=correct-canonical]:after{opacity:1}@keyframes slot-blue-shine{0%{transform:translate(-100%)}10%{transform:translate(100%)}to{transform:translate(100%)}}.slot:nth-child(1):after{animation-delay:0s}.slot:nth-child(2):after{animation-delay:.416s}.slot:nth-child(3):after{animation-delay:.832s}.slot:nth-child(4):after{animation-delay:1.248s}.slot:nth-child(5):after{animation-delay:1.664s}.slot:nth-child(6):after{animation-delay:2.08s}.slot:nth-child(7):after{animation-delay:2.496s}.slot:nth-child(8):after{animation-delay:2.912s}.slot:nth-child(9):after{animation-delay:3.328s}.slot:nth-child(10):after{animation-delay:3.744s}@media (prefers-reduced-motion: reduce){.slot:after{animation:none}}.slot[data-state=correct-alt]{background:var(--orange);color:var(--slot-dark-letter);border-color:var(--orange)}.slot[data-state=incorrect]{background:repeating-linear-gradient(45deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(-45deg,rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 2px,transparent 2px,transparent 6px),var(--bar-incorrect);color:var(--accent-fg);border-color:var(--bar-incorrect)}.undo-row{font:inherit;display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.25rem .75rem;min-height:44px;background:transparent;color:var(--fg);border:1px solid var(--slot-border);border-radius:.25rem;cursor:pointer}.undo-row__label{font-weight:600;font-size:.875rem}.undo-row__slots{font-size:clamp(.875rem,3.5vw,1.125rem);line-height:1;white-space:nowrap}.undo-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.25rem}.undo-row[disabled]{cursor:not-allowed}.dev-only{font:inherit;font-size:.875rem;padding:.375rem .75rem;margin-top:.5rem;background:transparent;color:var(--accent);border:2px dashed var(--accent);border-radius:.375rem;cursor:pointer}.dev-only:hover{opacity:.85}.dev-only:active{transform:translateY(1px)}@keyframes slot-victory-pulse{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.25)}to{transform:rotate(360deg) scale(1)}}.slot[data-victory-pulse=true]{animation:slot-victory-pulse .4s ease-in-out;position:relative;z-index:2}@keyframes slot-victory-finale{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.slot[data-victory-finale=true]{animation:slot-victory-finale .5s ease-in-out 0s 2;position:relative;z-index:2}@media (prefers-reduced-motion: reduce){.slot[data-victory-pulse=true],.slot[data-victory-finale=true]{animation:none}}.board[data-loss-overflow=true]{overflow:visible}body.loss-animating,html:has(body.loss-animating){overflow:hidden}.cell--falling{position:relative;background:var(--cell-border);border-color:var(--cell-border);pointer-events:none}.cell--falling:after{content:"";position:absolute;inset:-1px;background:var(--board-bg);border:1px solid var(--cell-border);box-sizing:border-box;z-index:3;will-change:transform,opacity;animation:loss-drop 1.2s forwards;pointer-events:none}.tile--falling{position:relative;z-index:4;will-change:transform,opacity;pointer-events:none;animation:loss-drop 1.2s forwards}@keyframes loss-drop{0%{transform:translate(0) rotate(0);opacity:1;animation-timing-function:ease-out}14%{transform:translate(calc(var(--fx) * .12),-10px) rotate(calc(var(--rot) * .12));opacity:1;animation-timing-function:cubic-bezier(.45,0,.9,.6)}to{transform:translate(var(--fx),var(--fall)) rotate(var(--rot));opacity:0}}.slot[data-loss-bar-pulse=true]{animation:loss-bar-pulse .62s ease-out 2;position:relative;z-index:2}@keyframes loss-bar-pulse{0%{transform:scale(1)}30%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes loss-fade{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tile--falling{animation:loss-fade .15s ease-out forwards}.cell--falling:after{animation:loss-fade .15s ease-out forwards}.slot[data-loss-bar-pulse=true]{animation:none}}.modal{margin:auto;border:none;padding:0;background:var(--surface);color:var(--fg);border-radius:16px;max-width:min(420px,92vw);width:92vw;box-shadow:0 12px 48px #00000040}.modal::backdrop{background:#00000080}.modal__inner{position:relative;padding:24px;display:flex;flex-direction:column;gap:16px}.modal__title{font-size:1.5rem;margin:0;font-weight:700}#endgame-title{text-align:center;white-space:pre-line}.modal__lead{margin:0;font-size:1rem}#onboarding-modal .modal__title,#onboarding-modal .modal__lead,#about-modal .modal__title,#about-modal .modal__lead{text-align:center}.modal__byline{margin:.75rem 0 0;text-align:center;font-size:.85rem;font-style:italic;color:var(--text-muted)}.modal__subhead{margin:0;font-size:1rem;font-weight:600;text-align:center;color:var(--text-muted)}.modal__close{position:absolute;top:8px;right:8px;background:transparent;border:none;font-size:1.5rem;line-height:1;cursor:pointer;padding:4px 8px;color:var(--text-muted);min-width:44px;min-height:44px}.modal__close:hover{color:var(--fg)}.modal__grid{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:1.75rem;letter-spacing:.05em;text-align:center;margin:0;font-variant-emoji:emoji}.modal__grid-row{display:block;line-height:1;white-space:nowrap}.modal__tally{margin:0;font-size:.9rem;text-align:center;color:var(--text-muted)}@media (max-width: 480px){.modal__grid{font-size:1.5rem;gap:3px}}.modal__bullets{margin:0;padding-left:0;list-style:none}.modal__bullets li{margin:6px 0}#about-modal .modal__bullets{text-align:center}.modal__actions{display:flex;gap:12px;justify-content:flex-end;margin:0;padding:0}.modal__actions--center{justify-content:center}.modal__actions--row{flex-direction:row;gap:12px}.modal__actions--row>.btn{flex:1 1 0;min-width:0}.modal__countdown:empty{display:none}.modal__stats{border-top:1px solid var(--slot-border);padding-top:12px}.modal__stats-heading{font-size:1rem;margin:0 0 6px;font-weight:600}.modal__stats-row{margin:0;font-size:.9rem;color:var(--fg)}.modal__countdown{font-size:.9rem;color:var(--text-muted);margin:0;text-align:center}.modal__share-text{margin:0;padding:10px 12px;background:#0000000a;border:1px solid var(--slot-border);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;line-height:1.35;white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text;text-align:left;color:var(--fg)}.btn{font:inherit;font-weight:600;padding:10px 18px;min-height:44px;border-radius:8px;cursor:pointer;border:1px solid var(--slot-border);background:var(--tile-bg);color:var(--tile-fg)}a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center}.btn:hover{filter:brightness(.97)}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:var(--accent-fg);border-color:transparent}.btn--secondary{background:transparent}.btn--danger{background:transparent;color:var(--orange);border-color:var(--orange)}.btn--danger:hover{background:#e07b0014}.btn--primary-outline{background:transparent;color:var(--accent);border-color:var(--accent)}.btn--primary-outline:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}.btn--primary-outline:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.settings__group{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.settings__legend{font-size:.95rem;font-weight:600;margin:0 0 4px;padding:0;color:var(--fg);text-transform:uppercase;letter-spacing:.04em}.settings__segments{display:flex;width:100%;padding:3px;gap:2px;background:var(--surface);border:1px solid var(--slot-border);border-radius:8px}.settings__segment{flex:1;position:relative;display:flex;cursor:pointer}.settings__segment input[type=radio]{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.settings__segment span{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:.4rem .5rem;font-size:.95rem;color:var(--fg);border-radius:6px;user-select:none;transition:background .12s ease,color .12s ease}.settings__segment input[type=radio]:checked+span{background:var(--accent);color:var(--accent-fg);font-weight:600}.modal--settings .settings__segment input[type=radio]:checked+span,.modal--settings .btn--primary{background:var(--bar-correct)}.modal--settings .btn--primary-outline{color:var(--bar-correct);border-color:var(--bar-correct)}.modal--settings .btn--primary-outline:hover{background:color-mix(in srgb,var(--bar-correct) 8%,transparent)}.settings__segment input[type=radio]:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}@media (hover: hover){.settings__segment:hover input[type=radio]:not(:checked)+span{background:var(--bg)}}.settings__copy,.settings__danger-copy{margin:0;font-size:.85rem;color:var(--text-muted);line-height:1.4}@keyframes dialog-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}dialog[open]{animation:dialog-in .15s ease-out}dialog[open]::backdrop{animation:backdrop-in .15s ease-out}@media (prefers-reduced-motion: reduce){dialog[open],dialog[open]::backdrop{animation:none}}html:has(dialog[open]),body:has(dialog[open]){overflow:hidden}.hint-toast-root{position:fixed;top:calc(env(safe-area-inset-top,0px) + 56px);left:50%;transform:translate(-50%);pointer-events:none;z-index:1000;width:max-content;max-width:calc(100vw - 32px)}.hint-toast{background:#fff;color:var(--accent);padding:12px 22px;min-height:44px;border:1px solid rgba(0,0,0,.12);border-radius:10px;font-size:1.1rem;font-weight:700;text-align:center;box-shadow:0 8px 24px #00000047;pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:center;animation:hint-toast 4s ease-out forwards}.hint-toast--orange{color:var(--orange)}.hint-toast--black{color:#2d3748}@keyframes hint-toast{0%{opacity:0;transform:translateY(-12px)}6%{opacity:1;transform:translateY(0)}94%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.hint-toast{animation:none}}.warmup-caption-root{position:absolute;top:78.5714%;transform:translateY(-50%);left:10px;right:10px;z-index:6;pointer-events:none}.warmup-caption{background:var(--surface);color:var(--fg);white-space:pre-line;padding:12px 16px;border:2px solid var(--bar-correct);border-radius:8px;font-size:1rem;font-weight:600;text-align:center;box-shadow:0 6px 18px #00000038}.warmup-caption--begin{pointer-events:auto;cursor:pointer;display:block;width:100%;font:inherit;font-size:1rem;font-weight:600}.puzzle-subtitle--warmup-skip{cursor:pointer}.puzzle-subtitle--warmup-skip:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.gameover-banner-root{position:absolute;top:78.5714%;transform:translateY(-50%);left:10px;right:10px;z-index:6;pointer-events:none}.gameover-banner{pointer-events:auto;cursor:pointer;display:block;width:100%;white-space:pre-line;font:inherit;background:var(--surface);color:var(--fg);padding:12px 16px;border:2px solid var(--bar-correct);border-radius:8px;font-size:1rem;font-weight:600;text-align:center;box-shadow:0 6px 18px #00000038}.gameover-banner[data-outcome=lost]{border-color:var(--orange)}.gameover-banner[hidden]{display:none}