:root{--paper: oklch(.985 .006 285);--paper-sunk: oklch(.965 .008 285);--ink: oklch(.28 .08 285);--ink-soft: oklch(.46 .06 285);--ink-faint: oklch(.66 .04 285);--line: oklch(.86 .03 285);--line-major: oklch(.7 .05 285);--fill: oklch(.35 .08 290);--cross: oklch(.65 .05 285);--cross-auto: oklch(.8 .02 285);--accent: oklch(.48 .1 285);--accent-soft: color-mix(in oklch, var(--accent) 16%, var(--paper));--shadow: 0 1px 2px oklch(.5 .04 285 / .1), 0 8px 24px oklch(.5 .04 285 / .1);--dot: oklch(.5 .02 70 / .022);--ui: "Hanken Grotesk", system-ui, sans-serif;--mono: "DM Mono", ui-monospace, monospace}:root[data-theme=dark],:root[data-theme=system][data-system-dark]{--paper: oklch(.14 .01 285);--paper-sunk: oklch(.11 .008 285);--ink: oklch(.93 .012 285);--ink-soft: oklch(.7 .022 285);--ink-faint: oklch(.48 .016 285);--line: oklch(.25 .028 285);--line-major: oklch(.37 .042 285);--fill: oklch(.72 .11 285);--cross: oklch(.44 .042 285);--cross-auto: oklch(.31 .018 285);--accent: oklch(.64 .16 285);--shadow: 0 1px 2px oklch(0 0 0 / .3), 0 8px 24px oklch(0 0 0 / .35);--dot: oklch(.75 .01 285 / .045)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body{margin:0;height:100%;text-size-adjust:100%;-webkit-text-size-adjust:100%}body{font-family:var(--ui);color:var(--ink);background:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:4px 4px;overflow:hidden;overscroll-behavior:none}#root{height:100%}button{font-family:inherit;color:inherit;cursor:pointer}.noselect{user-select:none;-webkit-user-select:none}.app{height:100%;height:100dvh;display:flex;flex-direction:column}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 16px 10px;gap:12px;flex:none;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:9px}.logo{width:16px;height:16px;border-radius:3px;background:var(--accent);box-shadow:inset 0 0 0 2px var(--paper),0 0 0 1.5px var(--accent)}.topbar h1{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0}.seg{display:flex;background:var(--paper-sunk);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}.seg-btn{border:none;background:transparent;font-size:13px;font-weight:600;color:var(--ink-soft);padding:6px 11px;border-radius:7px;font-family:var(--mono)}.seg-btn.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}.seg-btn:active:not(.on){background:var(--paper-sunk);color:var(--ink)}@media(max-width:519px){.topbar h1{display:none}}@media(max-width:440px){.seg-x{display:none}.seg-btn{padding:6px 18px}}@media(min-width:900px){.topbar{padding:16px 24px 12px}.topbar h1{font-size:22px}.logo{width:20px;height:20px;border-radius:4px}.seg-btn{font-size:15px;padding:8px 14px}.settings-btn{width:42px;height:42px;border-radius:12px}.toolbar{padding:14px 24px calc(10px + env(safe-area-inset-bottom));gap:12px}.mode-btn{font-size:16px;padding:11px 18px}.act{font-size:16px;padding:11px 20px}.act.big{padding:14px 28px;font-size:17px}.act-group{gap:10px}.hint-note{font-size:13px}}.size-roller{display:flex;align-items:center;gap:2px}.size-arrow{width:38px;height:38px;border:none;background:transparent;color:var(--ink-soft);border-radius:8px;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s,background .15s}@media(hover:hover){.size-arrow:hover:not(:disabled){background:var(--paper-sunk);color:var(--ink)}}.size-arrow:active:not(:disabled){background:var(--paper-sunk);color:var(--ink)}.size-arrow:disabled{opacity:.25;cursor:default}.size-track-wrap{overflow:hidden;position:relative;touch-action:none;cursor:grab;height:38px;-webkit-mask-image:linear-gradient(to right,transparent,black 20%,black 80%,transparent);mask-image:linear-gradient(to right,transparent,black 20%,black 80%,transparent)}.size-track-wrap.dragging{cursor:grabbing}.size-track{display:flex;height:100%;will-change:transform}.size-center-indicator{position:absolute;top:2px;bottom:2px;left:50%;transform:translate(-50%);border-radius:8px;pointer-events:none;z-index:3;border:1.5px solid color-mix(in oklch,var(--accent) 40%,var(--line))}.size-item{flex-shrink:0;height:100%;display:flex;align-items:center;justify-content:center;gap:1px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink-faint);border-radius:8px;transition:color .15s}.size-item.on{color:var(--ink)}.size-x{font-size:.82em;opacity:.7}@media(max-width:351px){.size-arrow{width:38px}}@media(min-width:900px){.size-item{font-size:15px}.size-track-wrap{height:42px}.size-arrow{width:42px;height:42px;border-radius:10px}.size-x{font-size:.85em}}.settings-btn{border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);width:38px;height:38px;border-radius:10px;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:color .15s,background .15s,border-color .15s;flex-shrink:0;justify-self:end}.settings-btn:active:not(.open){background:var(--paper-sunk);color:var(--ink)}.settings-btn.open{color:var(--ink);background:var(--accent-soft);border-color:color-mix(in oklch,var(--accent) 40%,var(--line))}.settings-panel-wrap{position:fixed;top:62px;left:0;right:0;overflow:hidden;max-height:0;transition:max-height .26s cubic-bezier(.4,0,.2,1);z-index:110}.settings-panel-wrap.open{max-height:360px}@media(min-width:640px){.settings-panel-wrap{top:70px;left:auto;right:24px;width:360px;border-radius:14px}.settings-panel-wrap.open{max-height:480px}.settings-panel{border-radius:14px;border:1px solid var(--line);box-shadow:0 4px 6px #60607a0f,0 12px 40px #60607a24}.setting-row{padding:10px 16px}}.theme-seg .seg-btn{font-size:11.5px;padding:5px 9px;font-family:var(--ui);display:flex;align-items:center;gap:4px}@media(max-width:359px){.theme-label{display:none}}.settings-panel{background:var(--paper-sunk);border-bottom:1px solid var(--line)}.setting-row{display:flex;align-items:center;gap:12px;padding:8px 16px}.setting-row+.setting-row{border-top:1px solid var(--line)}.setting-text{flex:1;display:flex;flex-direction:column;gap:1px}.setting-label{font-size:14px;font-weight:600;color:var(--ink)}.setting-desc{font-size:11.5px;color:var(--ink-faint);font-family:var(--mono)}.toggle{width:40px;height:24px;border-radius:12px;border:none;padding:0;background:var(--line-major);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}.toggle.on{background:var(--accent)}.toggle:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--paper);top:3px;left:3px;transition:transform .2s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #45446240}.toggle.on:after{transform:translate(16px)}.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:14px;position:relative;overflow:hidden}.board{align-items:stretch}.col-clues{display:grid;align-items:end}.row-clues{display:grid}.clue-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;padding-bottom:calc(var(--cell) * .28);font-family:var(--mono);font-size:var(--clue-font);color:var(--ink-soft);line-height:1.18}.clue-row{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--cu) * .42);padding-right:calc(var(--cell) * .35);font-family:var(--mono);font-size:var(--clue-font);color:var(--ink-soft)}.clue-col.major{box-shadow:inset -1px 0 0 var(--line-major)}.clue-row.major{box-shadow:inset 0 -1px 0 var(--line-major)}.clue-col.done,.clue-row.done{color:color-mix(in oklch,var(--ink-faint) 55%,transparent)}.cells{display:grid;position:relative;background:var(--paper);overflow:hidden}.cells:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--line-major);pointer-events:none;z-index:20}.cell{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.cell.last-col{border-right:none}.cell.last-row{border-bottom:none}.cell.mr{border-right:1px solid var(--line-major)}.cell.mb{border-bottom:1px solid var(--line-major)}.x-line{position:absolute;left:50%;top:50%;width:48%;height:2px;border-radius:2px;background:var(--cross);will-change:transform;z-index:10}.x1{transform:translate(-50%,-50%) rotate(45deg);animation:xdraw1 .12s ease-out both}.x2{transform:translate(-50%,-50%) rotate(-45deg);animation:xdraw2 .12s ease-out both;animation-delay:.03s}.x-line.auto{background:var(--cross-auto);width:34%;height:1.5px}.cell.hint{animation:hintflash .9s ease;z-index:2}@keyframes hintflash{0%,to{box-shadow:none}35%{box-shadow:inset 0 0 0 3px var(--accent)}}.ink{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--fill);transform-origin:var(--io, 50% 50%);animation:inkin .19s cubic-bezier(.2,.75,.25,1) both}@keyframes inkin{0%{transform:scale(var(--fx,0),var(--fy,0))}to{transform:scale(1)}}@keyframes xdraw1{0%{transform:translate(-50%,-50%) rotate(45deg) scaleX(0);opacity:0}to{transform:translate(-50%,-50%) rotate(45deg) scaleX(1);opacity:1}}@keyframes xdraw2{0%{transform:translate(-50%,-50%) rotate(-45deg) scaleX(0);opacity:0}to{transform:translate(-50%,-50%) rotate(-45deg) scaleX(1);opacity:1}}.x-burst{position:absolute;width:max(112px,calc(var(--cell) * 2.4));height:max(112px,calc(var(--cell) * 2.4));transform:translate(-50%,-50%);pointer-events:none;z-index:30}.x-burst:before,.x-burst:after{content:"";position:absolute;left:50%;top:50%;width:78%;height:max(6px,calc(var(--cell) * .18));background:var(--accent);border-radius:999px;transform-origin:center;box-shadow:0 1px 6px color-mix(in oklch,var(--accent) 35%,transparent)}.x-burst:before{animation:xburst1 .3s ease both}.x-burst:after{animation:xburst2 .3s ease both;animation-delay:.03s}@keyframes xburst1{0%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:0}12%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:1}to{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:0}}@keyframes xburst2{0%{transform:translate(-50%,-50%) rotate(-45deg) scale(1);opacity:0}12%{transform:translate(-50%,-50%) rotate(-45deg) scale(1);opacity:1}to{transform:translate(-50%,-50%) rotate(-45deg) scale(1);opacity:0}}.cells.solved .ink{animation:pop .5s ease both;animation-delay:calc(var(--d) * 38ms)}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(.62);background:var(--accent)}to{transform:scale(1)}}.toolbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 16px calc(6px + env(safe-area-inset-bottom));position:relative;z-index:10}.mode{display:flex;background:var(--paper-sunk);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}.mode-btn{display:flex;align-items:center;gap:7px;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--ink-soft);padding:9px 14px;border-radius:8px}.mode-btn.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}.mode-btn:active:not(.on){background:var(--paper-sunk);color:var(--ink)}.swatch{width:15px;height:15px;position:relative;display:inline-block}.fill-ico{background:var(--fill);border-radius:2px}.x-ico:before,.x-ico:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:var(--cross);transform:translate(-50%,-50%) rotate(45deg)}.x-ico:after{transform:translate(-50%,-50%) rotate(-45deg)}.spacer{flex:1}.act-group{display:flex;gap:8px}.act{border:1px solid var(--line);background:var(--paper);color:var(--ink);white-space:nowrap;font-size:14px;font-weight:600;padding:9px 16px;border-radius:9px;box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;gap:5px}.act:active:not(:disabled){background:var(--paper-sunk)}.act:disabled{opacity:.4;box-shadow:none;cursor:default}.act.primary{background:var(--accent);color:var(--paper);border-color:transparent}.act.big{padding:12px 22px;font-size:15px}.hint-note{margin:0;font-size:11.5px;color:var(--ink-faint);font-family:var(--mono);z-index:10;text-align:center;pointer-events:none}.hn-part{display:inline-flex;align-items:center;gap:2px 5px;vertical-align:middle}.hn-sep{vertical-align:middle}@media(min-width:560px){.hint-note{flex:1;min-width:0}}@media(max-width:560px){.hint-note{order:-1;flex:0 0 100%;position:static;transform:none;pointer-events:auto}.toolbar{padding-left:12px;padding-right:12px}.mode-label{display:none}.mode-btn{padding:9px 13px}.act{padding:9px 11px}}.win{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:color-mix(in oklch,var(--paper) 62%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20;animation:fade .4s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.win-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;min-width:230px;box-shadow:var(--shadow);padding:30px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;animation:rise .5s cubic-bezier(.2,.9,.3,1.2) both}@keyframes rise{0%{transform:translateY(14px) scale(.92);opacity:0}to{transform:none;opacity:1}}.win-mark{width:34px;height:34px;border-radius:9px;background:var(--accent);margin-bottom:6px;box-shadow:inset 0 0 0 4px var(--paper),0 0 0 2px var(--accent)}.win-card h2{margin:0;font-size:26px;font-weight:700;letter-spacing:-.01em}.win-card p{margin:0 0 10px;font-family:var(--mono);font-size:13px;color:var(--ink-soft)}.win-card .act.big{width:100%}.win-alt-sizes{display:flex;width:100%;gap:8px}.win-alt-sizes .act{flex:1}.clue-col-overlay{position:absolute;top:0;left:0;right:0;overflow:hidden;pointer-events:none;z-index:6;opacity:0;background:linear-gradient(to bottom,var(--paper) 70%,transparent)}.clue-row-overlay{position:absolute;top:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:5;opacity:0;background:linear-gradient(to right,var(--paper) 70%,transparent)}.ov-col-item{position:absolute;top:0;height:100%;width:var(--cell);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:calc(var(--cell) * .1);font-family:var(--mono);font-size:var(--clue-font);color:var(--ink);line-height:1.18;text-shadow:0 0 6px var(--paper),0 0 3px var(--paper);transform:translate(-50%)}.ov-col-item.done{color:var(--ink-faint);opacity:.55}.ov-row-item{position:absolute;left:0;width:100%;height:var(--cell);display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--cu) * .42);padding-right:calc(var(--cell) * .2);font-family:var(--mono);font-size:var(--clue-font);color:var(--ink);text-shadow:0 0 6px var(--paper),0 0 3px var(--paper);transform:translateY(-50%)}.ov-row-item.done{color:var(--ink-faint);opacity:.55}.handoff-open-btn{font-size:13px;padding:5px 11px;border-radius:7px;box-shadow:none;flex-shrink:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:color-mix(in oklch,var(--paper) 45%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:12px;animation:fade .18s ease}.modal-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px 24px;max-width:min(500px,100%);width:100%;display:flex;flex-direction:column;gap:14px;max-height:calc(100dvh - 24px);overflow-y:auto;animation:rise .28s cubic-bezier(.2,.9,.3,1.2) both}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.modal-header h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}.modal-close{border:1px solid var(--line);background:var(--paper);color:var(--ink-faint);width:28px;height:28px;border-radius:7px;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.modal-close:hover{color:var(--ink);background:var(--paper-sunk)}.modal-desc{margin:0;font-size:12.5px;color:var(--ink-soft);font-family:var(--mono);line-height:1.5}.handoff-body{display:flex;flex-direction:column;align-items:center;gap:14px}.handoff-qr{border-radius:10px;overflow:hidden;border:1px solid var(--line);line-height:0;background:#fff;padding:8px}.handoff-actions{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.handoff-link-btn{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--paper-sunk);border-radius:10px;padding:11px 20px;cursor:pointer;transition:background .15s,border-color .15s;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);width:100%}.handoff-link-btn:hover{background:var(--accent-soft);border-color:color-mix(in oklch,var(--accent) 40%,var(--line))}.handoff-link-btn.copied{color:#267d30;border-color:#267d3059}.handoff-share-btn{font-size:13px;padding:7px 12px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:none;width:100%}.import-boards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.import-board-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}.import-board-label{font-size:11px;font-weight:600;color:var(--ink-faint);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}.mini-board{border-radius:4px;border:1px solid var(--line-major);background:var(--paper);display:block}.import-actions{display:flex;gap:8px}.import-actions .act{flex:1;text-align:center}.confirm-card{max-width:320px;align-items:center;text-align:center}.confirm-icon-wrap{width:52px;height:52px;border-radius:50%;background:#fff3e42e;background:oklch(.97 .06 75 / .18);color:#bb7400;color:oklch(.62 .14 68);display:flex;align-items:center;justify-content:center;flex-shrink:0}[data-theme=dark] .confirm-icon-wrap{background:#bb740026;background:oklch(.62 .14 68 / .15);color:#f2a548}.confirm-message{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em}.confirm-actions{display:flex;gap:8px;width:100%}.confirm-actions .act{flex:1;text-align:center}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.cf{position:absolute;top:-14px;border-radius:2px;animation-name:confall;animation-timing-function:cubic-bezier(.3,.6,.6,1);animation-iteration-count:1;animation-fill-mode:both}.cf.tone0{background:var(--accent)}.cf.tone1{background:var(--fill)}.cf.tone2{background:color-mix(in oklch,var(--accent) 50%,var(--paper))}@keyframes confall{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--drift),360px) rotate(var(--rot));opacity:0}}.toast{position:fixed;left:50%;bottom:calc(32px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:10px 16px;font-family:var(--mono);font-size:12.5px;color:var(--ink);z-index:200;max-width:calc(100% - 24px);text-align:center;animation:toast-in .2s ease both;cursor:pointer}@keyframes toast-in{0%{transform:translate(-50%,8px);opacity:0}to{transform:translate(-50%);opacity:1}}