:root{--bg-top: #f6f8fc;--bg-bottom: #eef1f8;--surface: #ffffff;--ink: #0f172a;--ink-soft: #475569;--hairline: #e2e8f0;--grid-line: #cbd5e1;--cage-border: #0f172a;--accent: #4338ca;--accent-ink: #ffffff;--accent-soft: #c7d2fe;--selected-ink: #0f172a;--cage-fill: #f1f5f9;--constraint-ink: #334155;--success-ink: #166534;--success-bg: #dcfce7;--failure-ink: #991b1b;--failure-bg: #fee2e2;--neutral-ink: #334155;--neutral-bg: #e2e8f0;--shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);--radius-card: 14px;--radius-control: 12px;--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;color-scheme:light dark}@media (prefers-color-scheme: dark){:root{--bg-top: #0b1120;--bg-bottom: #0b1120;--surface: #111827;--ink: #e5e7eb;--ink-soft: #94a3b8;--hairline: #1f2937;--grid-line: #334155;--cage-border: #e5e7eb;--accent: #a5b4fc;--accent-ink: #0f172a;--accent-soft: #3730a3;--selected-ink: #e5e7eb;--cage-fill: #1e293b;--constraint-ink: #cbd5e1;--success-ink: #86efac;--success-bg: #14532d;--failure-ink: #fca5a5;--failure-bg: #7f1d1d;--neutral-ink: #cbd5e1;--neutral-bg: #334155;--shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35)}}.App{text-align:center;min-height:100vh;display:flex;flex-direction:column;align-items:center;gap:8px;box-sizing:border-box;padding:16px 16px 32px;font-family:var(--font-sans);font-size:1rem;line-height:1.5;color:var(--ink)}.Title{margin:0;padding-top:8px;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}.App>p:last-child{margin:8px 0 0}.App a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:8px;color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.App a:hover{text-decoration-thickness:2px}.App a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.App>ul{box-sizing:border-box;width:min(92vw,520px);margin:8px 0 0;padding:12px 16px 12px 32px;text-align:left;font-family:var(--font-mono);font-size:.75rem;line-height:1.6;color:var(--ink-soft);background:var(--surface);border:1px solid var(--hairline);border-radius:10px;overflow-wrap:anywhere}.Cell{box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;border:0 solid var(--grid-line);border-right-width:1px;border-bottom-width:1px;margin:0;background-color:var(--surface);color:var(--constraint-ink);display:flex;align-items:flex-start;justify-content:flex-start;padding:2px 4px;overflow:hidden;white-space:nowrap;font-size:clamp(.6rem,2.2vw,.8rem);font-weight:600;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;transition:background-color .12s ease;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none}.isGreyedOut{background-color:var(--cage-fill)}.Cell.isSelected{background-color:var(--accent-soft);color:var(--selected-ink);box-shadow:inset 0 0 0 2px var(--accent)}.borderLeft{border-left-width:0}.borderTop{border-top-width:0}.borderRight{border-right:2px solid var(--cage-border)!important}.borderBottom{border-bottom:2px solid var(--cage-border)!important}.App[data-solve-state="3"] .Cell{align-items:center;justify-content:center;padding:0;font-size:clamp(1rem,calc(var(--cell-size) * .5),2.25rem);color:var(--ink);animation:CellAnswerIn .24s ease-out both}@keyframes CellAnswerIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.Cell{transition:none}.App[data-solve-state="3"] .Cell{animation:none}}.BoardContainer{--board-width: min(92vw, 520px);--cell-size: calc(var(--board-width) / var(--board-size, 5));position:relative;box-sizing:border-box;width:var(--board-width);aspect-ratio:1 / 1;margin-inline:auto;margin-block:8px 4px;text-align:center;align-items:center;background:var(--surface);border:1px solid var(--hairline);border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden}.BoardContainer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--cage-border);border-radius:11px;pointer-events:none;transition:opacity .2s ease}.BoardContainer>div{position:absolute;top:0;left:0}.Board{box-sizing:border-box;width:100%;height:100%;display:grid;grid-auto-rows:minmax(0,1fr);text-align:center;border-top:2px solid var(--cage-border);border-left:2px solid var(--cage-border);overflow:hidden;transition:opacity .2s ease}.App[data-solve-state="2"] .Board,.App[data-solve-state="2"] .BoardContainer:after{opacity:.45}.BoardSlider{text-align:center;display:grid}.App>div>p:has(>input[type=range]){display:inline-flex;align-items:center;gap:12px;box-sizing:border-box;max-width:min(92vw,520px);min-height:52px;margin:8px 0 0;padding:6px 18px 6px 16px;background-color:var(--surface);border:1px solid var(--hairline);border-radius:999px;box-shadow:var(--shadow-card);color:var(--ink-soft);font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.App input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:clamp(140px,40vw,220px);height:44px;margin:0;padding:0;background:transparent;cursor:pointer;accent-color:var(--accent)}.App input[type=range]:focus{outline:none}.App input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--hairline)}.App input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;width:28px;height:28px;margin-top:-11px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 1px 3px #0f172a4d}.App input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent);outline-offset:2px}.App input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--hairline)}.App input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent-soft)}.App input[type=range]::-moz-range-thumb{box-sizing:border-box;width:28px;height:28px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 1px 3px #0f172a4d}.App input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--accent);outline-offset:2px}.ButtonWrapper .btn.btn--blue{color:var(--ink);background-color:var(--surface);box-shadow:inset 0 0 0 2px var(--hairline),var(--shadow-card)}.ButtonWrapper .btn.btn--blue:hover{background-color:var(--cage-fill);box-shadow:inset 0 0 0 2px var(--ink-soft),var(--shadow-card)}.ButtonWrapper .btn.btn--blue:active{box-shadow:inset 0 0 0 2px var(--ink-soft)}@keyframes rl-spinner{0%{opacity:1}to{opacity:0}}@-webkit-keyframes rl-spinner{0%{opacity:1}to{opacity:0}}.rl-spinner{position:relative;display:inline-block;width:var(--rl-spinner-size)!important;height:var(--rl-spinner-size)!important;-webkit-transform:translate(calc(var(--rl-spinner-translate) * -1),calc(var(--rl-spinner-translate) * -1)) scale(var(--rl-spinner-scale)) translate(var(--rl-spinner-translate),var(--rl-spinner-translate));transform:translate(calc(var(--rl-spinner-translate) * -1),calc(var(--rl-spinner-translate) * -1)) scale(var(--rl-spinner-scale)) translate(var(--rl-spinner-translate),var(--rl-spinner-translate))}.rl-spinner div{left:94px;top:48px;position:absolute;-webkit-animation:rl-spinner linear var(--rl-spinner-speed) infinite;animation:rl-spinner linear var(--rl-spinner-speed) infinite;background:var(--rl-spinner-color);width:12px;height:24px;border-radius:40%;-webkit-transform-origin:6px 52px;transform-origin:6px 52px}.rl-spinner div:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0);-webkit-animation-delay:-.916666666666667s;animation-delay:-.916666666666667s}.rl-spinner div:nth-child(2){-webkit-transform:rotate(30deg);transform:rotate(30deg);-webkit-animation-delay:-.833333333333333s;animation-delay:-.833333333333333s}.rl-spinner div:nth-child(3){-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-delay:-.75s;animation-delay:-.75s}.rl-spinner div:nth-child(4){-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation-delay:-.666666666666667s;animation-delay:-.666666666666667s}.rl-spinner div:nth-child(5){-webkit-transform:rotate(120deg);transform:rotate(120deg);-webkit-animation-delay:-.583333333333333s;animation-delay:-.583333333333333s}.rl-spinner div:nth-child(6){-webkit-transform:rotate(150deg);transform:rotate(150deg);-webkit-animation-delay:-.5s;animation-delay:-.5s}.rl-spinner div:nth-child(7){-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-animation-delay:-.416666666666667s;animation-delay:-.416666666666667s}.rl-spinner div:nth-child(8){-webkit-transform:rotate(210deg);transform:rotate(210deg);-webkit-animation-delay:-.333333333333333s;animation-delay:-.333333333333333s}.rl-spinner div:nth-child(9){-webkit-transform:rotate(240deg);transform:rotate(240deg);-webkit-animation-delay:-.25s;animation-delay:-.25s}.rl-spinner div:nth-child(10){-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-animation-delay:-.166666666666667s;animation-delay:-.166666666666667s}.rl-spinner div:nth-child(11){-webkit-transform:rotate(300deg);transform:rotate(300deg);-webkit-animation-delay:-.083333333333333s;animation-delay:-.083333333333333s}.rl-spinner div:nth-child(12){-webkit-transform:rotate(330deg);transform:rotate(330deg);-webkit-animation-delay:0s;animation-delay:0s}.LoadingSpinner{z-index:10;color:var(--accent);justify-content:center;display:flex;align-items:center;width:100%;height:100%}.Modal{display:none;position:fixed;z-index:20;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:20px;overflow:auto;background-color:#0f172a;background-color:#0f172a73;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.ModalOn{display:flex!important;align-items:center;justify-content:center}.ModalContent{position:relative;box-sizing:border-box;width:100%;max-width:360px;margin:auto;padding:48px 24px 24px;background-color:var(--surface);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius-card);box-shadow:0 1px 2px #0f172a14,0 24px 48px #0f172a3d;font-family:var(--font-sans);animation:ModalIn .16s ease-out both}@keyframes ModalIn{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}.ModalInput{box-sizing:border-box;width:100%;min-height:56px;padding:8px 12px;font-family:inherit;font-size:clamp(1.5rem,6vw,2rem);font-weight:600;font-variant-numeric:tabular-nums;text-align:center;color:var(--ink);background-color:var(--surface);border:2px solid var(--hairline);border-radius:var(--radius-control);outline:none;transition:border-color .12s ease,box-shadow .12s ease}.ModalInput:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.ModalButtons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;gap:8px;margin-top:16px}.ModalButtons .btn{box-sizing:border-box;width:100%;max-width:56px;height:52px;min-width:0;margin:0;padding:0;font-family:inherit;font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:0;text-shadow:none;color:var(--ink);background-color:var(--surface);border:2px solid var(--hairline);border-radius:var(--radius-control);box-shadow:0 1px 2px #0f172a0f;transition:background-color .12s ease,border-color .12s ease}.ModalButtons .btn:hover{border-color:var(--accent);background-color:var(--cage-fill)}.ModalButtons .btn:active{margin:0;padding:0;background-color:var(--accent-soft);box-shadow:none}.ModalButtons .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.Close{position:absolute;top:4px;right:4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:10px;background:transparent;color:var(--ink-soft);font-family:inherit;font-size:28px;font-weight:400;line-height:1;cursor:pointer}.Close:hover,.Close:focus{color:var(--ink);background-color:var(--cage-fill);text-decoration:none;cursor:pointer}.Close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){.ModalContent{animation:none}}.ButtonWrapper{margin:16px 0 0}.ButtonWrapper .btn{box-sizing:border-box;min-width:160px;min-height:48px;padding:10px 32px;font-family:var(--font-sans);font-size:1.125rem;font-weight:600;line-height:1.5;letter-spacing:0;text-shadow:none;border-radius:var(--radius-control);box-shadow:var(--shadow-card);transition:background-color .12s ease,box-shadow .12s ease,transform .12s ease}.ButtonWrapper .btn:active{margin-top:0;padding-bottom:10px;transform:translateY(1px);box-shadow:0 1px 2px #0f172a14}.ButtonWrapper .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ButtonWrapper .btn.btn--green{color:var(--accent-ink);background-color:var(--accent)}.ButtonWrapper .btn.btn--green:hover{background-color:color-mix(in srgb,var(--accent) 88%,var(--ink))}.ButtonWrapper.ButtonWrapperDisabled .btn,.ButtonWrapper.ButtonWrapperDisabled .btn:hover,.ButtonWrapper.ButtonWrapperDisabled .btn:active{color:var(--ink-soft);background-color:var(--hairline);box-shadow:none;transform:none;cursor:not-allowed;opacity:.8}@media (prefers-reduced-motion: reduce){.ButtonWrapper .btn{transition:none}}.btn{display:inline-block;border:none;border-radius:.3em;box-shadow:inset 0 0 0 1px #0000001a,inset 0 -.25em #00000040,0 .25em .25em #0000000d;color:#fff;cursor:pointer;font-family:var(--font-sans);font-weight:300;line-height:1.5;letter-spacing:1px;padding:.5em 1.5em .75em;position:relative;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.25);vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:active{box-shadow:inset 0 0 0 1px #0003,inset 0 2px #ffffff1a,inset 0 .25em .5em #0000000d;margin-top:.25em;padding-bottom:.5em}.btn:active,.btn:focus{outline:none}.btn--blue{background-color:#3498db}.btn--green{background-color:#1abc9c}.btn--red{background-color:#e65d4f}.btn--lg{font-size:1.5em}.btn--df{font-size:1.25em}.btn--md{font-size:1em}.btn--sm{font-size:.75em}.TooltipContainer{z-index:10;color:var(--neutral-ink);justify-content:center;display:flex;align-items:center;width:100%;height:100%}.Tooltip{max-width:calc(100% - 48px);padding:12px 20px;margin:24px;border-radius:var(--radius-card);box-shadow:var(--shadow-card);color:var(--neutral-ink);font-size:1.05rem;font-weight:600;line-height:1.35;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.Tooltip p{margin:0}.App[data-solve-state="1"] .Tooltip{color:var(--neutral-ink);background-color:var(--neutral-bg)!important}.App[data-solve-state="3"] .Tooltip{color:var(--success-ink);background-color:var(--success-bg)!important}.App[data-solve-state="4"] .Tooltip{color:var(--failure-ink);background-color:var(--failure-bg)!important}.Tooltip-enter{opacity:0}.Tooltip-enter-active{opacity:1;transition:opacity .2s}.Tooltip-exit{opacity:1}.Tooltip-exit-active{opacity:0;transition:opacity .2s}.Tooltip-exit-done{display:none}@media (prefers-reduced-motion: reduce){.Tooltip-enter-active,.Tooltip-exit-active{transition:none}}
