: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);--ui: "Hanken Grotesk", system-ui, sans-serif;--mono: "DM Mono", ui-monospace, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{font-family:var(--ui);color:var(--ink);background:var(--paper);background-image:radial-gradient(oklch(.5 .02 70 / .022) 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%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;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)}.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) * .1);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) * .2);font-family:var(--mono);font-size:var(--clue-font);color:var(--ink-soft)}.clue-col.major{box-shadow:inset -1px 0 0 var(--line)}.clue-row.major{box-shadow:inset 0 -1px 0 var(--line)}.clue-col.done,.clue-row.done{color:var(--ink-faint);opacity:.55}.cells{display:grid;position:relative;background:var(--paper);border-top:1px solid var(--line);border-left:1px solid var(--line);box-shadow:0 0 0 2px var(--line-major);border-radius:2px;overflow:visible}.cell{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:visible}.cell.mr{border-right:2px solid var(--line-major)}.cell.mb{border-bottom:2px solid var(--line-major)}.cell.cross:before,.cell.cross:after{content:"";position:absolute;left:50%;top:50%;width:48%;height:2px;border-radius:2px;background:var(--cross);transform:translate(-50%,-50%) rotate(45deg);animation:xdraw1 .36s cubic-bezier(.34,.82,.45,.96) both;will-change:transform;z-index:10}.cell.cross:after{transform:translate(-50%,-50%) rotate(-45deg);animation:xdraw2 .36s cubic-bezier(.34,.82,.45,.96) both;animation-delay:.08s}.cell.auto:before,.cell.auto:after{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) scale(.08);opacity:.15}40%{transform:translate(-50%,-50%) rotate(55deg) scaleX(.3) scale(5);opacity:1}65%{transform:translate(-50%,-50%) rotate(38deg) scaleX(.7) scale(1.15);opacity:1}to{transform:translate(-50%,-50%) rotate(45deg) scaleX(1) scale(1);opacity:1}}@keyframes xdraw2{0%{transform:translate(-50%,-50%) rotate(-45deg) scaleX(0) scale(.08);opacity:.15}40%{transform:translate(-50%,-50%) rotate(-55deg) scaleX(.3) scale(5);opacity:1}65%{transform:translate(-50%,-50%) rotate(-38deg) scaleX(.7) scale(1.15);opacity:1}to{transform:translate(-50%,-50%) rotate(-45deg) scaleX(1) scale(1);opacity:1}}@media (pointer: fine){@keyframes xdraw1{0%{transform:translate(-50%,-50%) rotate(45deg) scaleX(0) scale(.25);opacity:.35}50%{transform:translate(-50%,-50%) rotate(48deg) scaleX(.6) scale(1.5);opacity:1}75%{transform:translate(-50%,-50%) rotate(44deg) scaleX(.85) scale(.95);opacity:1}to{transform:translate(-50%,-50%) rotate(45deg) scaleX(1) scale(1);opacity:1}}@keyframes xdraw2{0%{transform:translate(-50%,-50%) rotate(-45deg) scaleX(0) scale(.25);opacity:.35}50%{transform:translate(-50%,-50%) rotate(-48deg) scaleX(.6) scale(1.5);opacity:1}75%{transform:translate(-50%,-50%) rotate(-44deg) scaleX(.85) scale(.95);opacity:1}to{transform:translate(-50%,-50%) rotate(-45deg) scaleX(1) scale(1);opacity:1}}}.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;gap:8px;padding:10px 16px 6px;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)}.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{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)}.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{flex:none;text-align:center;margin:0 0 10px;font-size:11.5px;color:var(--ink-faint);font-family:var(--mono);position:relative;z-index:10}.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)}.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}}