:root{color-scheme:dark;--ink:#0b2029;--panel:#14323b;--line:#33535a;--paper:#ecede2;--muted:#a5babb;--gold:#edbe66;--mint:#8dd7cc;--coral:#e4a69e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 2%,#24454c,transparent 45%),var(--ink);color:var(--paper);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,select{color:var(--paper);background:#193943;border:1px solid #49636a;border-radius:9px;cursor:pointer}button{padding:10px 15px;transition:background .15s,transform .15s}button:hover{background:#2b5059;border-color:var(--mint)}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}a{color:var(--mint);text-underline-offset:4px}.mast{max-width:1300px;margin:auto;display:flex;align-items:center;gap:22px;padding:24px 42px;border-bottom:1px solid #ffffff16}.brand{color:var(--paper);text-decoration:none;letter-spacing:3px;font-size:14px;font-weight:650;display:flex;align-items:center;gap:11px}.brand-icon{font-size:29px;color:var(--gold);line-height:1}.edition{color:var(--muted);font-size:10px;letter-spacing:2px;margin-left:auto}.small{padding:6px 12px;font-size:12px}.intro{display:grid;grid-template-columns:1fr 390px;align-items:center;gap:50px;margin:43px 0 38px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.2px;color:var(--mint);margin:0 0 9px}main{max-width:1160px;padding:0 28px;margin:auto}h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;margin:0;line-height:1.14}h1{font-size:clamp(34px,4.1vw,53px);letter-spacing:-1.8px}h1 em{color:var(--gold);font-weight:400}h2{font-size:27px}h3{font-size:29px}.lede{color:var(--muted);margin:18px 0 0}.intro-art{height:174px;position:relative;border-radius:12px;overflow:hidden;border:1px solid #7aa59c48}.intro-art img{width:100%;height:100%;object-fit:cover;object-position:center 57%}.intro-art:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#102932db)}.intro-art span{position:absolute;bottom:13px;left:17px;z-index:1;font:italic 15px Georgia;color:#eee9cf}.workspace{display:grid;grid-template-columns:285px 1fr;gap:27px;align-items:start}.fieldnotes{padding:23px 14px 10px 0}.fieldnotes h2{font-size:28px}.fieldnotes>p:not(.eyebrow){color:var(--muted)}.fieldnotes b{color:var(--paper);font-weight:550}.fieldnotes b.li-text,.li-text{color:var(--gold)}.fieldnotes b.na-text,.na-text{color:var(--mint)}.fieldnotes b.mg-text,.mg-text{color:var(--coral)}.species{display:flex;flex-wrap:wrap;gap:9px 17px;margin:20px 0 28px;font-size:12px}.species span{display:flex;align-items:center;gap:6px;color:var(--muted)}.species img{height:27px;width:27px;border-radius:50%}.species b{font-size:12px;color:var(--paper)}.rule-note{display:flex;gap:12px;margin-top:20px}.rule-note p{margin:0;color:var(--muted);font-size:13px}.note-n{color:#91b3ad;border:1px solid var(--line);height:25px;min-width:25px;font:10px/24px monospace;text-align:center;border-radius:50%;margin-top:3px}.gate-key{display:grid;grid-template-columns:55px 1fr;gap:9px 11px;margin:23px 0 20px 37px;font-size:11px;color:var(--muted);align-items:center}.gate-chip{border-radius:4px;font-weight:700;font-size:10px;text-align:center;line-height:21px}.g-li{color:#34270a;background:#dfb865}.g-mono{color:#0a3636;background:#98d5c7}.g-mg{color:#3e1d28;background:#dea5a8}.fine{font-size:11px;line-height:1.8}.text-btn{border:0;background:none;padding:7px 0;font-size:12px;color:var(--mint);text-align:left}.text-btn:hover{background:none;color:var(--paper)}.play-panel{position:relative;padding:22px 28px 17px;border:1px solid #4a696d;background:linear-gradient(130deg,#1a3b42,#112c35);border-radius:18px;box-shadow:0 25px 70px #0003}.level-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px}.level-top h2{font-size:28px}.level-select-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}select{max-width:164px;padding:7px 8px;font-size:11px}.board-wrap{background:linear-gradient(#142e3b44,#10232eaa),url('saltworks.webp') center/cover;border-radius:12px;border:1px solid #6b92966b;padding:22px 22px 12px;overflow:hidden;box-shadow:inset 0 0 80px #03101999}.board{position:relative;width:min(100%,420px);aspect-ratio:1;margin:auto;display:grid;gap:0;touch-action:none;border:1px solid #769a9c70;border-radius:9px;background:#092732b8;box-shadow:0 8px 30px #0005;isolation:isolate}.cell{position:relative;aspect-ratio:1;border:1px solid #76a0a21f;background:linear-gradient(135deg,#35626960,#183f4744)}.cell:first-child{border-radius:7px 0 0}.cell.wall{background:repeating-linear-gradient(135deg,#30474e,#30474e 5px,#364e54 5px,#364e54 7px);box-shadow:inset 0 0 0 5px #243d4599,inset 0 0 18px #03162199}.cell.wall:after{content:"";position:absolute;inset:9px;border:1px solid #72878b35;border-radius:5px}.outlet{display:flex;align-items:center;justify-content:center;flex-direction:column;background:#b28b2a39;box-shadow:inset 0 0 0 2px #e9be6680,inset 0 0 22px #e9be662d;color:var(--gold);font-size:clamp(8px,1vw,11px);line-height:1.5;font-weight:650}.outlet .out-symbol{font:24px Georgia}.outlet.salt{background:#78c6ba1c;box-shadow:inset 0 0 0 2px #8dd7cc70,inset 0 0 20px #8dd7cc23;color:var(--mint)}.ion{position:absolute;inset:9%;border-radius:50%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 4px #0009);z-index:2;animation:arrive .15s ease-out;pointer-events:none}.ion img{position:absolute;width:100%;height:100%;border-radius:50%;object-fit:cover}.ion span{position:relative;color:#18272b;font-weight:800;line-height:1;background:#fbf3dcdd;padding:2px 5px;border-radius:5px;font-size:clamp(11px,1.5vw,17px);box-shadow:0 1px 5px #0003}.ion.Mg span{background:#f4c9bfdf}.ion.Na span{background:#b7eee3e8}.membrane{position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:3px;box-shadow:0 0 0 1px #071c24,0 0 7px #0007}.membrane.vertical{height:66%;width:8px;top:17%;right:-4px}.membrane.horizontal{width:66%;height:8px;left:17%;bottom:-4px}.membrane span{font:700 9px/15px -apple-system,sans-serif;white-space:nowrap;padding:0 3px;border-radius:3px;background:inherit;box-shadow:0 0 0 1px #17343b}.membrane.vertical span{transform:rotate(-90deg)}.outlet-legend{display:flex;justify-content:center;gap:24px;color:#d1e2dc;font-size:10px;margin-top:12px}.outlet-legend span{display:flex;align-items:center;gap:6px}.gold-dot,.blue-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--gold)}.blue-dot{background:var(--mint)}.readout{display:flex;justify-content:center;gap:0;border-bottom:1px solid var(--line);padding:15px 0 12px}.readout>div{flex:1;text-align:center;border-right:1px solid var(--line);display:flex;flex-direction:column;font-size:9px;letter-spacing:1.8px;color:var(--muted)}.readout>div:last-child{border:0}.number{font:24px/1.3 Georgia;color:var(--paper);letter-spacing:0;margin-bottom:3px}.message{min-height:39px;margin:13px 0 7px;font-size:12px;text-align:center;color:var(--mint);display:flex;justify-content:center;align-items:center}.message.warning{color:var(--coral)}.control-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.secondary-controls{display:flex;gap:7px}.secondary-controls button{font-size:16px;padding:8px 10px}.secondary-controls span{font-size:11px;margin-left:3px}.dpad{display:grid;grid-template-columns:repeat(3,39px);grid-template-rows:repeat(2,34px);gap:4px}.dpad button{padding:0;font-size:24px;line-height:1}.dpad button[data-dir=up]{grid-column:2}.dpad button[data-dir=left]{grid-column:1;grid-row:2}.dpad button[data-dir=down]{grid-column:2;grid-row:2}.dpad button[data-dir=right]{grid-column:3;grid-row:2}.dpad button.hinted{background:var(--gold);color:#152a32;border-color:#ffdf9f;box-shadow:0 0 16px #edbe663f}.keyboard-tip{text-align:center;font-size:9px;letter-spacing:.5px;color:#9cb4b7;margin:11px 0 0}.completion{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #c9a45b;background:#29474a;border-radius:12px;padding:20px;margin-top:18px}.completion[hidden]{display:none}.completion p{font-size:12px;color:var(--muted);margin:7px 0 0}.completion h3{font-size:23px}.completion button{background:var(--gold);color:#17323b;font-weight:650;font-size:12px;white-space:nowrap}.stars{color:var(--gold);letter-spacing:4px}.basin-strip{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:40px 0 45px;border-top:1px solid var(--line);padding-top:28px}.basin-strip h2{font-size:25px}.basin-buttons{display:flex;gap:7px}.basin-buttons button{width:45px;padding:8px 0 5px;font-size:13px;line-height:1.4;background:#102c36}.basin-buttons button.active{border-color:var(--gold);color:var(--gold)}.basin-buttons small{display:block;font-size:8px;color:var(--gold);min-height:12px;letter-spacing:1px}footer{border-top:1px solid #ffffff16;max-width:1300px;margin:auto;display:flex;gap:20px;justify-content:space-between;align-items:center;padding:24px 42px;font-size:10px;color:var(--muted)}footer a{color:var(--muted)}dialog{max-width:490px;width:calc(100% - 32px);background:#16333b;border:1px solid #809b96;border-radius:16px;padding:34px;color:var(--paper);box-shadow:0 30px 100px #0009}dialog::backdrop{background:#061820c9;backdrop-filter:blur(4px)}dialog h2{font-size:34px;margin:18px 0}dialog p{font-size:14px;color:#b5c8c5}.dialog-close{float:right;padding:0 8px;font-size:23px;border:0;background:none}.board.bump{animation:bump .22s}.board.won{box-shadow:0 0 25px #edbe6655}.board.paused{filter:blur(3px)}@keyframes arrive{from{transform:scale(.88);opacity:.65}to{transform:scale(1);opacity:1}}@keyframes bump{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}@media(min-width:1400px){.intro{margin-top:38px}}@media(max-width:960px){.workspace{grid-template-columns:230px 1fr;gap:16px}.intro{grid-template-columns:1fr 310px;gap:25px}.play-panel{padding:19px}.fieldnotes{padding-right:4px}.board-wrap{padding:17px 17px 12px}.control-row{gap:9px}.secondary-controls span{display:none}.basin-strip{flex-direction:column;align-items:flex-start}.outlet-legend{gap:12px}}@media(max-width:680px){main{padding:0 16px}.mast{padding:17px 20px;gap:12px}.edition{display:none}.mast .small{margin-left:auto}.brand{font-size:12px;letter-spacing:2px}.intro{grid-template-columns:1fr;gap:18px;margin:28px 0 22px}.intro-art{height:110px}.intro h1{font-size:39px}.intro .lede{font-size:13px;margin-top:12px}.intro .eyebrow{font-size:9px}.workspace{display:flex;flex-direction:column;gap:18px}.play-panel{order:0;width:100%;padding:18px 13px}.fieldnotes{order:1;padding:12px 5px 0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.fieldnotes>h2,.fieldnotes>.eyebrow,.fieldnotes>p,.species,.gate-key,.text-btn{grid-column:1/-1}.fieldnotes>h2{font-size:27px}.fieldnotes>p{font-size:13px;margin:12px 0}.fieldnotes .rule-note{margin:8px 0}.gate-key{grid-template-columns:55px 1fr;margin:18px 0 4px 37px}.species{margin:8px 0 18px}.level-top h2{font-size:24px}.level-top select{max-width:108px}.level-select-label{font-size:0;gap:0}.level-top{margin-bottom:16px}.board-wrap{padding:15px 12px 10px}.membrane span{font-size:8px;padding:0 2px}.control-row{padding:0 4px}.secondary-controls span{display:inline}.secondary-controls button{padding:8px;font-size:16px}.secondary-controls span{font-size:10px;margin-left:1px}.dpad{grid-template-columns:repeat(3,37px);grid-template-rows:repeat(2,34px)}.outlet-legend{font-size:9px;gap:12px}.keyboard-tip{font-size:8px;letter-spacing:0}.basin-strip{margin:28px 0 30px;gap:18px;padding-top:23px}.basin-buttons{gap:5px;width:100%}.basin-buttons button{flex:1;width:auto;min-width:0}.basin-strip h2{font-size:24px}footer{padding:20px;flex-wrap:wrap;gap:8px 17px}footer span:first-child{flex-basis:100%}.completion{padding:15px;flex-wrap:wrap}.completion button{margin-left:auto}.completion h3{font-size:23px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.brand-icon{width:28px;height:28px;font-size:0;background:url('membrane.webp') center/cover;border-radius:50%;box-shadow:0 0 10px #edbe662b}
@media(min-width:681px){.mast{padding-top:16px;padding-bottom:16px}.intro{margin-top:24px;margin-bottom:24px;grid-template-columns:1fr 350px}.intro-art{height:132px}h1{font-size:45px}.intro .lede{margin-top:10px}.play-panel{padding-top:18px}.board{width:min(100%,320px)}.board-wrap{padding-top:16px;padding-bottom:9px}.level-top{margin-bottom:15px}.level-top h2{font-size:26px}.readout{padding-top:11px;padding-bottom:9px}.message{min-height:33px;margin-top:9px;margin-bottom:6px}.fieldnotes{padding-top:17px}.keyboard-tip{margin-top:8px}}