:root{--bg:#152124;--panel:#1c2c30;--ink:#f4efdf;--muted:#bbc9c8;--accent:#ffc579;--tube:#9aadae;--empty:#1c2c30;font-family:"Trebuchet MS","Segoe UI",sans-serif;background:var(--bg);color:var(--ink);color-scheme:dark;line-height:1.5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:4px}button,select{font:inherit;color:inherit}button,select{min-height:44px}button{border:1px solid #7f9294;background:#243a3f;padding:8px 13px;border-radius:4px;cursor:pointer;touch-action:manipulation}button:hover:not(:disabled){background:#365259}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ffe0a5;outline-offset:3px}.skip{position:fixed;left:15px;top:-80px;background:#152124;z-index:50;padding:12px}.skip:focus{top:12px}header{display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:auto;padding:16px 0}header a{display:inline-flex;min-height:44px;align-items:center}.brand{font-family:Georgia,serif;text-decoration:none;font-size:1.6rem;letter-spacing:-.04em;gap:9px}.brand svg{width:25px;height:32px;stroke:var(--accent);stroke-width:2;fill:none}.brand svg path+path{stroke-width:3}header>a:not(.brand){font-size:.88rem}main,footer{max-width:1000px;margin:auto}.title{display:flex;align-items:baseline;gap:25px;border-bottom:1px solid #496267;padding:7px 0 19px}.title h1{font:500 clamp(1.9rem,4vw,2.8rem)/1.15 Georgia,serif;letter-spacing:-.045em;margin:0}.title p{margin:0;color:var(--muted);font-size:.91rem}.game{display:grid;grid-template-columns:minmax(0,1fr) 284px;gap:40px;padding-top:19px}.play-area{min-width:0}.settings{display:flex;justify-content:space-between;align-items:center;gap:10px}.mode{display:flex;gap:2px;background:#101a1c;padding:3px;border:1px solid #526b70}.mode button{border:0;background:transparent;padding:5px 13px}.mode [aria-pressed=true]{background:#385055;color:#fff7e8}label{display:flex;align-items:center;gap:8px;font-size:.85rem}select{border:1px solid #7f9294;border-radius:3px;background:#1c2c30;padding:6px}.puzzle-label{display:flex;justify-content:space-between;font-size:.79rem;color:var(--muted);margin:13px 0 8px}.instrument{display:grid;grid-template-columns:minmax(0,1fr) 35px;grid-template-rows:34px auto;background:#10191c;border:1px solid #678084;border-radius:10px;padding:12px;box-shadow:0 7px 0 #091315;max-width:560px;margin:auto}.col-totals{grid-column:1;grid-row:1;display:flex;gap:2px}.row-totals{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:2px}.total{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,"Courier New",monospace;font-size:1.1rem;color:#e3e9df}.total.matched{color:#bde5c1;font-size:1rem}.total.bad{color:#ffc1ae}.board{grid-row:2;grid-column:1;display:flex;flex-direction:column;aspect-ratio:1;background:#759096;border:1px solid #759096;gap:1px;border-radius:2px;overflow:hidden;outline:none}.grid-row{display:flex;flex:1;min-height:0;gap:1px}.cell{position:relative;flex:1;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:var(--panel);isolation:isolate;outline-offset:-4px!important}.cell:hover:not(:disabled){background:#2a4247}.cell svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}.tube{stroke:var(--tube);stroke-width:28;fill:none;stroke-linecap:round;stroke-linejoin:round}.liquid{stroke:var(--empty);stroke-width:17;fill:none;stroke-linecap:round;stroke-linejoin:round}.bulb{fill:var(--empty);stroke:var(--tube);stroke-width:5}.join{fill:var(--empty);stroke:none}.filled .liquid{stroke:var(--accent)}.filled .bulb,.filled .join{fill:var(--accent)}.cell.selected{box-shadow:inset 0 0 0 3px #c4e3e8}.cell:focus-visible{outline:3px dashed #ffffff}.cell.hinted{box-shadow:inset 0 0 0 3px #fbdab1}.cell.conflict{box-shadow:inset 0 0 0 3px #ff9e86}.bulb-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#f7f2e8;font:700 clamp(12px,2vw,17px) ui-monospace,monospace;z-index:2;pointer-events:none}.filled .bulb-label{color:#293036}.mark{position:absolute;top:4px;right:6px;color:#fff3d6;font:700 16px/1 ui-monospace,monospace;z-index:3;pointer-events:none}.empty .mark{top:50%;right:auto;left:50%;transform:translate(-50%,-50%);background:#1c2c30;border-radius:50%;padding:0 3px;font-size:27px;line-height:1}.empty .bulb-label{display:none}.flag{display:none;position:absolute;bottom:3px;left:3px;background:#ffc1ae;color:#43221a;border-radius:2px;padding:1px 4px;font:bold 12px/1.2 Arial;z-index:4}.conflict .flag{display:block}.status{font-size:.95rem;min-height:1.8em;margin:21px 0 12px}.status.complete{color:#bde5c1}.status.error{color:#ffc1ae}.actions{display:flex;flex-wrap:wrap;gap:7px}.actions button{flex:1;white-space:nowrap;font-size:.88rem}.primary{background:#ffc579;border-color:#ffc579;color:#242c2e}.primary:hover:not(:disabled){background:#ffdcab}.game aside{padding-top:5px}.game h2{font:500 1.4rem Georgia,serif;margin:0 0 10px}.controls{border-bottom:1px solid #526c70;padding-bottom:19px}#selected-cell{color:var(--muted);font-size:.84rem;margin:0 0 14px;min-height:3em}.mark-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mark-buttons button{font-size:.87rem;padding:7px 8px}.navigator{display:flex;justify-content:center;gap:9px;margin-top:14px}.navigator button{min-width:48px;height:46px;font-size:20px;padding:4px}.small{font-size:.8rem;color:var(--muted);margin-bottom:0}.rule-note{margin:22px 0}.rule-note p{color:var(--muted);font-size:.89rem}.hint-box{margin:19px 0;padding:10px 13px;border-left:3px solid #ffc579;background:#334144;font-size:.88rem}.hint-box>div,.save-problem>div{display:flex;gap:7px;flex-wrap:wrap}.hint-box button,.save-problem button{flex:1;font-size:.84rem}.save-problem{background:#49302a;border-left:3px solid #ffc1ae;padding:10px 13px;font-size:.85rem;margin:20px 0}.keyboard{border-top:1px solid #526c70;padding-top:9px}summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:.85rem}details p{font-size:.85rem;color:var(--muted)}pre{font:12px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.new-day{border-left:3px solid var(--accent);padding:10px 13px;margin-top:15px;background:#26383c;font-size:.85rem}.new-day p{margin-top:0}footer{display:flex;gap:24px;padding:20px 0 26px;color:var(--muted);font-size:.84rem}footer a{min-height:44px;display:flex;align-items:center}dialog{max-width:470px;width:calc(100% - 32px);background:#24363b;color:var(--ink);border:1px solid #99abad;border-radius:8px;padding:25px}dialog::backdrop{background:#020a0cdd}dialog h2{font:500 1.65rem Georgia,serif;margin:0 0 15px}dialog p{font-size:.94rem}dialog form>div{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}dialog [data-action]{color:#ffd7ae;border-color:#d5a878}.rules{max-width:730px;padding:5px 0 25px}.rules h1{font:500 clamp(2rem,5vw,3rem)/1.15 Georgia,serif;letter-spacing:-.04em}.rules h2{font:500 1.5rem Georgia,serif;margin-top:30px}.rules li{margin:10px 0}.rules p,.rules li{color:#d0dcd8}.example{margin:24px 0;border-block:1px solid #526c70;padding:23px 0;display:flex;gap:24px;align-items:center}.example svg{width:280px;max-width:45%;flex-shrink:0}.example figcaption{font-size:.9rem;color:var(--muted)}.play-link{display:inline-flex;padding:11px 17px;min-height:46px;background:var(--accent);color:#242c2e;border-radius:4px;text-decoration:none}[hidden]{display:none!important}
@media(max-width:1060px){header,main,footer{margin-left:30px;margin-right:30px}.game{gap:25px;grid-template-columns:minmax(0,1fr) 260px}}
@media(max-width:780px){header,main,footer{margin-left:14px;margin-right:14px}header{padding:9px 0 4px}.brand{font-size:1.4rem}.title{display:block;padding:5px 0 12px}.title h1{font-size:1.95rem}.title p{font-size:.84rem;margin-top:5px}.game{display:block;padding-top:10px}.instrument{padding:7px;grid-template-columns:minmax(0,1fr) 28px;grid-template-rows:29px auto}.puzzle-label{margin:9px 0 6px;font-size:.74rem}.total{font-size:.95rem}.total.matched{font-size:.83rem}.status{font-size:.89rem;margin:18px 0 10px}.actions button{padding:8px;font-size:.83rem}.actions{gap:5px}.game aside{margin-top:24px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.controls h2{grid-column:1;font-size:1.3rem}#selected-cell{grid-column:1;min-height:0}.mark-buttons{grid-column:2;grid-row:1/3}.navigator,.controls .small{grid-column:1/-1}.navigator{margin-top:8px}.controls .small{text-align:center}.rule-note{margin:17px 0}.rule-note p{font-size:.86rem}.example{gap:15px}.example figcaption{font-size:.83rem}}
@media(max-width:390px){.controls{display:block}.mark-buttons{margin:10px 0}.instrument{padding:5px}.mark{font-size:13px;top:3px;right:3px}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .12s}}