:root{--bg: #57575f;--text: #f4f0ff;--app-pad: clamp(12px, 3vmin, 28px);--solved-hue: #f0b429;--playfield-shadow: 0 8px 30px rgba(0, 0, 0, .35);--panel: #34343d;--inset-border: rgba(244, 240, 255, .22);--inset-fill: rgba(0, 0, 0, .28);--board-card: #33343d;--board-card-edge: clamp(6px, 1.8vmin, 12px);--controls-inset: var(--board-card-edge);--drawer-tab-height: 38px;--drawer-card-peek: 8px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#root{min-height:100%;display:flex;justify-content:center}.app{width:100%;max-width:min(92vmin,560px);padding:var(--app-pad);padding-bottom:calc(var(--drawer-tab-height) + var(--drawer-card-peek) + clamp(10px,2vmin,18px));display:flex;flex-direction:column;gap:clamp(12px,2vmin,14px);align-items:center}.play{display:contents}.header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.title{margin:0;font-size:clamp(1.4rem,5vmin,2.2rem)}.header-actions{display:flex;align-items:center;gap:clamp(6px,1.6vmin,10px)}.header-actions .pill-button,.level-box__top .pill-button{border:1px solid color-mix(in srgb,var(--text) 45%,transparent);background:transparent;color:var(--text)}.playfield{position:relative;width:100%;padding:var(--board-card-edge);border-radius:clamp(8px,2vmin,16px);background:var(--board-card);box-shadow:var(--playfield-shadow);line-height:0}.playfield--square{border-radius:0}.board-cover{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;background:#1e1e249e;line-height:normal}.board-cover__title{margin:0 0 4px;color:var(--text);font-size:1.15rem;font-weight:600}.board-cover__line{max-width:28ch;margin:0;color:var(--text);font-size:.95rem;text-align:center;text-wrap:balance}.board-cover__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}.board-cover__button{min-width:200px;min-height:44px;padding:0 24px;border:2px solid var(--text);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer}.board-cover__button--primary{background:var(--text);color:var(--panel)}.board-cover__button:focus-visible{outline:2px solid var(--text);outline-offset:3px}.playfield--solved{outline:5px solid transparent;outline-offset:7px;animation:solved-ring 1.1s ease-out var(--ring-delay, 0ms) forwards}@keyframes solved-ring{0%,12%{outline-color:transparent;box-shadow:0 0 0 transparent,var(--playfield-shadow)}40%{outline-color:var(--solved-hue);box-shadow:0 0 30px color-mix(in srgb,var(--solved-hue) 70%,transparent),var(--playfield-shadow)}to{outline-color:var(--solved-hue);box-shadow:0 0 7px color-mix(in srgb,var(--solved-hue) 45%,transparent),var(--playfield-shadow)}}@media (prefers-reduced-motion: reduce){.playfield--solved{animation:none;outline-color:var(--solved-hue);box-shadow:0 0 7px color-mix(in srgb,var(--solved-hue) 45%,transparent),var(--playfield-shadow)}}.svg-board{display:block;width:100%;height:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.svg-board .anim{transform-box:fill-box;transform-origin:center}.svg-board .cell{cursor:pointer;outline:none}.svg-board[aria-readonly=true] .cell{cursor:default}.svg-board .press-hint{transform-box:fill-box;transform-origin:center;animation-name:press-grow;animation-timing-function:linear;animation-fill-mode:both}@keyframes press-grow{0%{transform:scale(.25);opacity:.2}to{transform:scale(1);opacity:1}}@media (prefers-reduced-motion: reduce){.svg-board .press-hint{animation:none}}.tool-picker{display:flex;gap:12px;justify-content:center}.tool-picker__tool{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:96px;min-height:44px;padding:0 18px;border:2px solid color-mix(in srgb,var(--text) 35%,transparent);border-radius:999px;color:var(--text);font-weight:600;cursor:pointer}.tool-picker__tool--picked{border-color:var(--text);background:var(--text);color:var(--bg)}.tool-picker__tool:has(input:disabled){opacity:.4;cursor:default}.tool-picker__tool:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px}.tool-picker__tool input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}.tool-picker__icon{width:20px;height:20px}.level-box{display:grid;width:100%;padding:clamp(10px,2.4vmin,16px) clamp(14px,3.2vmin,22px);border-radius:10px;border:1px solid var(--inset-border);background:var(--inset-fill);line-height:normal}.level-box__face{grid-area:1 / 1;transition:opacity .22s ease}.level-box__face[inert]{opacity:0}.level-box__play{display:flex;flex-direction:column;gap:clamp(6px,1.6vmin,10px)}.level-box__top{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2.6vmin,16px)}.level-box__label{font-size:clamp(1rem,3.5vmin,1.2rem);font-weight:600}.level-box__meter{display:flex;align-items:center;gap:clamp(10px,2.6vmin,16px)}.level-box__track{flex:1;height:clamp(8px,1.8vmin,12px);border-radius:999px;background:#00000047;overflow:hidden}.level-box__fill{height:100%;border-radius:inherit;background:var(--text);transition:width .28s ease}.level-box__count{font-size:clamp(.85rem,3vmin,1rem);font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}.level-box__solved{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,3vmin,22px)}.next-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font:inherit;font-size:clamp(.9rem,3vmin,1.1rem);font-weight:600;color:var(--bg);background:var(--text);padding:.5em 1.4em;border-radius:999px;white-space:nowrap;flex-shrink:0;transition:transform .08s ease;animation:solved-button 1.1s ease-out var(--ring-delay, 0ms) both}@keyframes solved-button{0%,12%{background:var(--text)}40%,to{background:var(--solved-hue)}}.next-button:active{transform:scale(.96)}.next-button:focus-visible{outline:3px solid var(--text);outline-offset:3px}.controls{width:100%;display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vmin,12px);padding-inline:var(--controls-inset)}.controls__group{display:flex;gap:clamp(8px,2vmin,12px)}.pill-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;font:inherit;font-size:clamp(.72rem,2.2vmin,.85rem);font-weight:600;color:var(--bg);background:var(--text);padding:.4em 1.1em;border-radius:999px;transition:transform .08s ease}.pill-button:active:not(:disabled){transform:scale(.96)}.pill-button:disabled{opacity:.4;cursor:default}.pill-button:focus-visible{outline:2px solid var(--text);outline-offset:2px}@media (prefers-reduced-motion: reduce){.next-button{animation:none;background:var(--solved-hue)}.level-box__fill,.level-box__face{transition:none}}.drawer{--drawer-peek: calc( var(--drawer-tab-height) + var(--drawer-card-peek) + env(safe-area-inset-bottom, 0px) );position:fixed;left:50%;bottom:0;z-index:25;width:100%;max-width:min(92vmin,560px);display:flex;flex-direction:column;align-items:center;pointer-events:none;transform:translate(-50%) translateY(calc(100% - var(--drawer-peek)));transition:transform .24s ease,z-index 0s linear .24s}.drawer.is-open{z-index:27;transform:translate(-50%) translateY(0);transition:transform .24s ease,z-index 0s}.drawer-tab{--drawer-seam-ink: rgba(244, 240, 255, .55);touch-action:none;pointer-events:auto;transition:transform .08s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:var(--drawer-tab-height);padding:0 1.2em;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--inset-border);border-bottom:none;cursor:pointer;font:inherit;font-size:1rem;font-weight:600;font-variant:small-caps;line-height:1;color:var(--text);background:var(--panel);border-radius:12px 12px 0 0;transform-origin:bottom center}.drawer--right .drawer-tab{align-self:flex-end;margin-right:var(--app-pad);min-width:8rem}.drawer--left .drawer-tab{align-self:flex-start;margin-left:var(--app-pad);padding:0 1.1rem}.settings-tab__gear{width:16px;height:16px;flex-shrink:0}.settings-tab__label{display:inline-flex;align-items:center}.settings-tab__mark{width:7px;height:7px;border-radius:50%;background:currentColor;margin-left:.55em;flex-shrink:0}.drawer-grip{width:100%;height:2px;margin-bottom:4px;border-radius:999px;background:var(--drawer-seam-ink)}.drawer-tab:active{transform:scale(.96)}.drawer-card{width:100%;pointer-events:auto;display:flex;flex-direction:column;gap:0;padding:clamp(14px,3.2vmin,22px);padding-bottom:calc(clamp(14px,3.2vmin,22px) + env(safe-area-inset-bottom,0px));background:var(--panel);border-radius:0;max-height:calc(100dvh - var(--drawer-tab-height) - 8px);overflow-y:auto;overscroll-behavior:contain}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#00000080;opacity:0;pointer-events:none;transition:opacity .24s ease,z-index 0s linear .24s}.drawer-backdrop.is-open{z-index:26;opacity:1;pointer-events:auto;transition:opacity .24s ease,z-index 0s}.drawer-section-label{font-size:clamp(.72rem,2.2vmin,.82rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.6}.settings-controls{display:flex;flex-direction:column;gap:clamp(14px,3.2vmin,22px)}.settings-controls:empty{display:none}.settings-update{display:flex}.settings-update__reload{flex:1 1 auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit;font-size:clamp(.9rem,2.8vmin,1.05rem);font-weight:600;color:var(--text);background:#00000047;border:1px solid var(--inset-border);border-radius:10px;padding:.6em .4em;text-align:center;transition:transform .08s ease}.settings-update__reload:active{transform:scale(.97)}.settings-update__reload:focus-visible,.settings-theme-option:focus-visible,.settings-scheme-option:focus-visible,.settings-error-checking-option:focus-visible{outline:2px solid var(--text);outline-offset:2px}.settings-theme,.settings-error-checking{display:flex;flex-direction:column;gap:clamp(6px,1.6vmin,10px)}.settings-theme-options,.settings-error-checking-options{display:flex;flex-wrap:wrap;gap:clamp(8px,2vmin,12px)}.settings-theme-option,.settings-error-checking-option,.settings-scheme-option{flex:1 1 0;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit;font-size:clamp(.9rem,2.8vmin,1.05rem);font-weight:600;color:var(--text);background:#00000047;border:1px solid var(--inset-border);border-radius:10px;padding:.6em .4em;text-align:center;transition:transform .08s ease}.settings-theme-option:active,.settings-error-checking-option:active,.settings-scheme-option:active{transform:scale(.97)}.settings-theme-option.is-current,.settings-error-checking-option.is-current,.settings-scheme-option.is-current{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}.settings-scheme,.settings-scheme-options{display:flex;flex-direction:column;gap:clamp(6px,1.6vmin,10px)}.settings-scheme-option{flex:none;padding-inline:.8em;text-align:left}.settings-auto-cross{display:flex;flex-direction:column;gap:clamp(6px,1.6vmin,10px);margin:0;padding:0;border:none;min-width:0}.settings-auto-cross legend{padding:0;margin-bottom:clamp(6px,1.6vmin,10px)}.settings-auto-cross__hint,.settings-error-checking__about{margin:0;opacity:.7}.settings-error-checking__about{font-size:clamp(.78rem,2.4vmin,.9rem)}.settings-auto-cross__option{display:flex;align-items:center;gap:.6em;cursor:pointer}.settings-auto-cross__option input{width:1.15em;height:1.15em;margin:0;accent-color:currentColor}.settings-about{display:flex;flex-direction:column;gap:clamp(6px,1.6vmin,10px);font-size:clamp(.78rem,2.4vmin,.9rem);line-height:1.35}.settings-controls:not(:empty)+.settings-about{margin-top:clamp(14px,3.2vmin,22px)}.settings-about__title{margin:0;font-weight:600;font-size:1.1em}.settings-about__people,.settings-about__acknowledgements{margin:0;padding:0;list-style:none}.settings-about__acknowledgements,.settings-about__note,.settings-about__copyright{margin:0;opacity:.7}.menu{--muted: #b9b4c8;--badge-field: #111114;--badge-ink: #fff}.menu .drawer-card{gap:clamp(10px,2.4vmin,14px)}.menu-head{display:flex;align-items:center;gap:12px;min-height:36px}.menu-head .drawer-section-label{margin-right:auto}.menu-pages{display:flex;align-items:center;gap:.75em;min-width:0}.menu-pages__label{flex-shrink:0;white-space:nowrap;min-width:7ch;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.menu-pages__control{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}.menu-pages__picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit;font-size:16px;font-weight:600;color:var(--text);background:var(--inset-fill);border:1px solid var(--inset-border);border-radius:10px;padding:.35em 2em .35em .7em;width:100%;min-width:0}.menu-pages__decor{position:absolute;right:.7em;pointer-events:none}.menu-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.menu-levels--paged{grid-template-rows:repeat(4,1fr)}.menu-level{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:6px 4px 4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);background:var(--inset-fill);border:1px solid var(--inset-border);border-radius:10px;transition:transform .08s ease}.menu-level:active{transform:scale(.96)}.level-thumbnail{display:block;width:100%;max-width:54px;height:auto;border-radius:3px}.menu-level--skipped{border-style:dashed;color:var(--muted);background:transparent}.menu-level--skipped>.level-thumbnail{filter:grayscale(.8);opacity:.55}.menu-level.is-current{outline:2px solid var(--text);outline-offset:2px}.menu-level:focus-visible,.menu-pages__picker:focus-visible{outline:3px solid var(--text);outline-offset:2px}.menu-pages__picker.is-pointer-focused:focus-visible{outline:none}.levels-badge{position:absolute;top:-7px;right:-7px;z-index:1;display:grid;place-items:center;width:21px;height:21px;border:2px solid var(--panel);border-radius:50%;box-shadow:0 0 0 1px #f4f0ff73;font-size:12px;font-weight:800;line-height:1;color:var(--badge-ink);background:var(--badge-field)}.levels-badge--in-progress{background:linear-gradient(90deg,var(--badge-ink) 50%,var(--badge-field) 50%)}.levels-badge--under{top:16px}.menu-more{margin:0;color:var(--muted);font-size:14px;text-align:center}@media (prefers-reduced-motion: reduce){.drawer,.drawer.is-open,.drawer-backdrop,.drawer-backdrop.is-open{transition:none}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.hint-panel{position:relative;width:100%;padding:14px 16px;border:1px solid var(--inset-border);border-radius:12px;background:var(--panel);line-height:1.45}.hint-name{margin:0 0 6px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--text) 70%,transparent)}.hint-quote{margin:0;font-size:1.1rem;font-style:italic}.hint-explanation{margin:10px 0 0;font-size:.95rem}.hint-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:12px}.hint-actions button,.board-cover__pill{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.4em 1.1em;border:1px solid color-mix(in srgb,var(--text) 45%,transparent);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:clamp(.72rem,2.2vmin,.85rem);font-weight:600;cursor:pointer;transition:transform .08s ease}.hint-actions button:active,.board-cover__pill:active{transform:scale(.96)}.hint-actions .hint-primary,.board-cover__pill--primary{border-color:var(--text);background:var(--text);color:var(--bg)}.hint-actions button:focus-visible,.board-cover__pill:focus-visible{outline:2px solid var(--text);outline-offset:2px}
