:root{color-scheme:dark;--ink:#eef3df;--muted:#a9c6c1;--teal:#123e45;--accent:#f5cf87}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 0,#245c61,transparent 60%),#0a2931;color:var(--ink);font:15px/1.6 ui-sans-serif,system-ui,sans-serif}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:#234a50;border:1px solid #537176;border-radius:8px;padding:8px 13px;touch-action:manipulation}button:hover{background:#34626a}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.45;cursor:default}a{color:var(--accent)}header{max-width:1240px;margin:auto;padding:24px 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1b;font-size:11px;letter-spacing:2px}.wordmark{font:28px Georgia,serif;text-decoration:none;color:var(--ink);letter-spacing:-1px}main{max-width:1180px;margin:auto;padding:0 36px}.intro{display:flex;align-items:center;justify-content:space-between;padding:34px 36px 34px 0;gap:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent);margin:0 0 8px}h1{font:clamp(32px,4vw,52px)/1.08 Georgia,serif;letter-spacing:-1px;margin:8px 0 16px}.intro p:not(.eyebrow){color:var(--muted);margin:0}.portrait{position:relative;width:190px;flex-shrink:0;text-align:center}.portrait img{width:150px;height:150px;border-radius:50%;border:1px solid #8cb2a766;box-shadow:0 12px 30px #071d2566}.portrait span{display:block;font:italic 15px Georgia;color:#bdd4cb;margin-top:6px}.layout{display:grid;grid-template-columns:245px 1fr;gap:42px;align-items:start;padding-bottom:35px}h2{font:25px Georgia,serif;margin:0 0 18px}aside{padding-top:10px}#levels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:30px}#levels button{padding:8px 0;background:transparent;font-variant-numeric:tabular-nums}#levels button.current{background:var(--accent);color:#16383f;border-color:var(--accent)}#levels button.solved:after{content:' ·';color:#9ed9ba}#levels button.current.solved:after{color:#245448}summary{cursor:pointer;font-weight:650;color:var(--ink)}details p,details li{font-size:12px;color:var(--muted)}ol{padding-left:20px}li{margin-bottom:10px}.play{background:#12383f;border:1px solid #59747266;border-radius:20px;padding:24px;box-shadow:0 24px 60px #001b2533}.board-head{display:flex;justify-content:space-between;align-items:center}.board-head h2{margin:0}.board-head #size{font-size:12px;color:var(--muted)}.tools{display:flex;gap:6px;margin:18px 0}.tools button{flex:1;font-size:12px;padding:9px 4px}.tools button[aria-pressed=true]{background:var(--accent);color:#16383f;border-color:var(--accent)}#board{display:grid;gap:0;max-width:510px;margin:auto;border:4px solid #c8c9a7;border-radius:5px;overflow:hidden;background:#b5c2a1}button.cell{position:relative;min-width:0;aspect-ratio:1;padding:0;border-radius:0;border:1px solid #afc4bc44;background:var(--pool);overflow:hidden;display:flex;align-items:center;justify-content:center}button.cell:focus-visible{z-index:2;outline:3px solid #ffd592;outline-offset:-5px}button.cell img{width:90%;height:90%;object-fit:contain;border-radius:40%;mix-blend-mode:normal;pointer-events:none;animation:arrive .2s ease-out}.cell .water{font-size:22px;color:#bbd6c7;opacity:.8}.cell .rid{position:absolute;top:2px;left:5px;font-size:9px;color:#e4edda;z-index:1;line-height:1.2}.cell.hinted{box-shadow:inset 0 0 0 4px var(--accent)}.cell.bad{box-shadow:inset 0 0 0 4px #e99a83}.cell.paired img{filter:drop-shadow(0 1px 3px #e5b87199)}#pool-counts{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0}.count{font-size:10px;border:1px solid #6d8b87;border-radius:4px;padding:1px 6px;color:#c6d8d2}.count.full{border-color:#a9cfa3;color:#d8edbf;background:#46644655}.count.over{border-color:#ed9d87;color:#ed9d87}#status{min-height:48px;font-size:13px;color:#d7dfc9;margin:14px 0}.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.actions button{padding:8px 3px;font-size:11px}.keyboard{color:#9ab7b2;font-size:10px;text-align:center;margin:18px 0 0}#win{margin-top:20px;border:1px solid #b6c898;border-radius:10px;padding:22px;text-align:center;background:#294f4a}#win h3{font:28px Georgia;margin:6px}#win p{font-size:12px}#win button{background:var(--accent);color:#173e43}footer{padding:20px 0 40px;border-top:1px solid #ffffff1b;max-width:800px}footer summary{font-size:12px}footer p{max-width:700px}@keyframes arrive{from{transform:scale(.7);opacity:.2}to{transform:scale(1);opacity:1}}@media(max-width:760px){header{padding:18px 20px}header>span:nth-child(2){display:none}main{padding:0 16px}.intro{padding:26px 0;gap:8px}.intro h1{font-size:32px}.intro p:not(.eyebrow){font-size:12px}.intro .eyebrow{font-size:8px;letter-spacing:1px}.portrait{width:90px}.portrait img{width:85px;height:85px}.portrait span{display:none}.layout{display:flex;flex-direction:column;gap:22px}.play{width:100%;padding:15px;order:0}aside{width:100%;order:1}aside h2{font-size:22px}#levels{grid-template-columns:repeat(10,1fr);gap:5px;margin-bottom:20px}#levels button{font-size:11px}.cell .rid{font-size:8px;left:3px}.tools{margin:14px 0}.actions{gap:4px}.actions button{font-size:10px}.keyboard{font-size:9px}.portrait img{border-radius:50%}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
