:root{color-scheme:dark;--bg:#101e31;--panel:#172b40;--ink:#e8f3f6;--muted:#a8becb;--line:#31495c;--accent:#a3e7c4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0,#234a58 0,transparent 43%),var(--bg);color:var(--ink);min-height:100vh}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:4px}button,select{min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);cursor:pointer;padding:10px 16px;font-weight:650}button:hover:not(:disabled){background:#29475b;border-color:#769dad}button:disabled{opacity:.42;cursor:default}:focus-visible{outline:3px solid #d9fda7;outline-offset:4px}button.primary{background:var(--accent);color:#132e2b;border-color:var(--accent)}button.primary:hover{background:#c7f1d8;color:#132e2b}.site-header{max-width:1050px;margin:auto;padding:24px 36px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:800;letter-spacing:-.8px;text-decoration:none}.brand svg{width:31px;height:31px;fill:var(--bg);stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.site-header>a:last-child{color:#c3d7dd}main{max-width:590px;margin:12px auto 0;padding:0 20px}.heading{text-align:center;margin:0 0 23px}.heading h1{font-size:clamp(26px,4vw,37px);font-weight:750;letter-spacing:-1.4px;margin:0}.heading p{color:var(--muted);font-size:15px;margin:9px 0 0}.game{width:100%}.game-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 17px}.modes{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:#0c1929}.modes button{border:0;min-height:38px;background:transparent;padding:7px 17px;color:var(--muted);border-radius:7px}.modes button[aria-pressed=true]{background:#e0ecee;color:#163b43}.size-label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}select{padding:8px 10px;font-size:14px}.board-info{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin:0 2px 11px;color:var(--muted);font-variant-numeric:tabular-nums}.board-info span:first-child{color:var(--ink)}.board-shell{padding:12px;border-radius:23px;background:#304e5e;box-shadow:0 18px 60px #06142255,inset 0 1px #7594a144}.board{position:relative;aspect-ratio:1;background:#edf3f2;border-radius:13px;overflow:hidden;touch-action:none;user-select:none}.cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr)}.cell{position:relative;border:0;border-right:1px solid #203e4b0d;border-bottom:1px solid #203e4b0d;border-radius:0;background:transparent!important;padding:0;min-height:0;min-width:0;display:grid;place-items:center;touch-action:none;color:#142f39;font-weight:800;font-size:clamp(16px,3.3vw,24px);z-index:2;transition:background .12s}.cell:hover{box-shadow:inset 0 0 0 99px #18384808}.cell:focus-visible{outline:3px solid #182b3e;outline-offset:-4px;z-index:3}.endpoint{width:53%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:4px solid var(--path);background:#f7faf8;box-shadow:0 2px 0 #14323f10;font-variant-numeric:tabular-nums}.cell.active .endpoint{box-shadow:0 0 0 5px color-mix(in srgb,var(--path) 18%,transparent)}.cell.tip:not(.endpoint-cell)::after{content:"";position:absolute;width:19%;aspect-ratio:1;border-radius:50%;background:#f7faf8;border:3px solid var(--path)}.cell.hinted{box-shadow:inset 0 0 0 4px #152d3c;z-index:3}.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}.lines path{fill:none;stroke-width:.21;stroke-linecap:round;stroke-linejoin:round}.progress-track{height:3px;margin:17px 4px 9px;background:#31495c;overflow:hidden;border-radius:3px}.progress-track span{display:block;width:0;height:100%;background:var(--accent);transition:width .18s}.under-board{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:0 3px;font-variant-numeric:tabular-nums}.status{min-height:42px;margin:17px 3px 9px;font-size:14px;line-height:1.45}.status.complete{color:var(--accent);font-weight:650}.actions{display:grid;grid-template-columns:1fr 1fr 1fr 1.55fr;gap:8px}.actions button{font-size:14px;padding:10px 8px;white-space:nowrap}.controls{margin:22px 3px;color:var(--muted);font-size:13px;line-height:1.6}.controls summary{cursor:pointer;width:fit-content;min-height:32px}.controls p{margin:8px 0}.hint-box,.storage-error{border-left:3px solid var(--accent);background:#1b3448;padding:14px 16px;margin:15px 0;border-radius:0 8px 8px 0;font-size:14px;line-height:1.5}.hint-box p,.storage-error p{margin:0 0 12px}.hint-box button,.storage-error button{font-size:13px;margin-right:5px;margin-bottom:4px}.storage-error{border-color:#ffc39f;background:#3b3437}.quiet{border-color:transparent;background:transparent}.confirm-dialog{width:calc(100% - 32px);max-width:430px;border:1px solid #56778a;border-radius:16px;background:#172b40;color:var(--ink);padding:25px;box-shadow:0 20px 100px #0008}.confirm-dialog::backdrop{background:#061422bf;backdrop-filter:blur(4px)}.confirm-dialog h2{margin:0 0 12px;font-size:22px}.confirm-dialog p{line-height:1.6;color:#bfced7}.confirm-dialog form>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.confirm-dialog [data-action]{color:#142f39;background:#a3e7c4}footer{display:flex;justify-content:center;gap:28px;font-size:12px;color:var(--muted);padding:12px 20px 32px}.skip{position:fixed;top:-100px;left:16px;background:#edf3f2;color:#142f39;padding:12px;z-index:10}.skip:focus{top:10px}[hidden]{display:none!important}.rules{max-width:740px;margin:22px auto;padding-bottom:26px}.rules h1{font-size:clamp(29px,6vw,43px);letter-spacing:-1.5px;margin:0 0 17px}.rules h2{font-size:23px;margin:34px 0 13px}.rules p,.rules li{line-height:1.75;color:#c8d9df;font-size:16px}.rules li{padding-left:5px;margin-bottom:10px}.rules a.play{display:inline-block;border-radius:9px;background:var(--accent);color:#143831;padding:12px 19px;text-decoration:none;font-weight:700;min-height:46px}.example{background:#edf3f2;border-radius:18px;padding:16px;max-width:345px;margin:22px 0}.example svg{width:100%;display:block}.example-caption{font-size:14px!important}.rules dl dt{font-weight:700;margin:20px 0 5px}.rules dl dd{margin:0;color:#c8d9df;line-height:1.65}.rule-note{border-left:3px solid #709faf;padding-left:18px}@media(max-width:600px){.site-header{padding:16px 20px}.brand{font-size:20px}.brand svg{width:27px}main{margin-top:5px;padding:0 16px;max-width:480px}.heading{margin-bottom:17px}.heading h1{font-size:28px;letter-spacing:-1px}.heading p{font-size:13px;margin-top:6px}.game-top{margin-bottom:12px}.board-shell{padding:9px;border-radius:19px}.board-info{font-size:12px;margin-bottom:8px}.modes button{padding:7px 13px}.status{margin:12px 2px 8px;min-height:40px;font-size:13px}.progress-track{margin-top:13px}.endpoint{border-width:3px}.actions{gap:6px}.actions button{font-size:12px;padding:10px 4px;min-height:45px}.controls{margin-top:17px}.rules{margin-top:25px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Keep compact controls usable without changing the puzzle cell geometry. */
.modes button{min-height:44px}.controls summary{min-height:44px;padding-block:10px}.site-header>a:last-child{display:inline-flex;align-items:center;min-height:44px}
