:root{color-scheme:dark;--ink:#eaf3de;--muted:#9ebbb2;--gold:#ffbc76;--teal:#9de0cb}*{box-sizing:border-box}body{margin:0;background:#102f31 url('laboratory.webp') center/cover fixed;color:var(--ink);font-family:ui-sans-serif,system-ui,sans-serif;min-height:100vh}body:before{content:'';position:fixed;inset:0;background:linear-gradient(90deg,#102b2de8,#102b2d88 55%,#102b2d66);z-index:-1}button,select{font:inherit}button,select,summary,a{touch-action:manipulation}button,select{border:1px solid #b0d6c233;background:#244847;color:var(--ink);border-radius:10px;padding:10px 15px;cursor:pointer}button:hover{background:#38605a}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}header{max-width:1320px;margin:auto;padding:28px 42px;display:flex;justify-content:space-between;align-items:center}.brand{font-family:Georgia,serif;font-size:32px;color:var(--ink);text-decoration:none;letter-spacing:-1.2px}.brand span{display:block;font-family:system-ui;font-size:9px;letter-spacing:3px;margin-top:5px}main{max-width:1220px;margin:25px auto 40px;display:grid;grid-template-columns:1fr 590px;gap:70px;padding:0 36px;align-items:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--teal)}h1{font:clamp(38px,4.5vw,66px)/1.08 Georgia,serif;letter-spacing:-2px;margin:22px 0}p{color:var(--muted);line-height:1.7;font-size:14px}.intro>p{font-size:16px}.legend{display:flex;flex-direction:column;gap:13px;margin:30px 0;font-size:12px;color:#cee1d5}.legend span{display:flex;align-items:center;gap:10px}.legend i{display:inline-block;width:15px;height:15px;border-radius:50%;box-shadow:inset -3px -3px 3px #0003}.warm{background:var(--gold)}.cool{background:var(--teal)}details{max-width:400px}summary{cursor:pointer;font-size:12px;color:var(--ink);padding:10px 0}.progress{font-size:11px;color:#abd0ba;margin-top:23px;letter-spacing:1px}.lab{padding:24px;background:#0c262bee;border:1px solid #a6d6bb33;box-shadow:0 20px 90px #071d2277;border-radius:24px;backdrop-filter:blur(12px)}.labtop{display:flex;justify-content:space-between;align-items:center;gap:10px}h2{font:26px Georgia,serif;margin:8px 0}.labtop select{max-width:145px;font-size:11px;padding:9px}.meters{display:flex;gap:30px;padding:18px 0 14px}.meters div{display:flex;flex-direction:column;gap:5px}.meters span{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.meters strong{font:23px Georgia,serif}.meters div:nth-child(2) strong{color:var(--gold)}.boardwrap{position:relative;border:1px solid #c6ead420;border-radius:14px;background:radial-gradient(ellipse at center,#21484a99,#0f2c32bb);overflow:hidden;aspect-ratio:1}#board{position:relative;display:grid;grid-template-columns:repeat(7,1fr);width:100%;height:100%;z-index:2;padding:0}#links{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.cell{position:relative;background:transparent!important;border:0;border-radius:0;padding:0;display:grid;place-items:center;min-width:0}.cell:after{content:'';width:5px;height:5px;border-radius:50%;background:#a6cdb12b}.cell.possible:after{width:25px;height:25px;border:1px solid #9de0cb77;background:#9de0cb13;box-shadow:0 0 12px #9de0cb16}.cell.possible:hover:after{background:#9de0cb55}.bead{position:absolute;width:66%;height:66%;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#704025;box-shadow:inset 3px 4px 7px #fff6,inset -5px -6px 9px #703c2b44,0 4px 7px #0005;background:radial-gradient(circle at 32% 25%,#ffdfab,#e6a46a 70%);border:1px solid #ffd4a7}.bead.mint{background:radial-gradient(circle at 32% 25%,#d7f3df,#72baa6 70%);border-color:#baedd2;color:#285d51}.bead.last{outline:2px solid #fff9;outline-offset:4px}.cell.hinted:after{background:#ffd39799;box-shadow:0 0 20px #ffbc7688}.seqbead{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;font-size:9px;color:#62452a;background:var(--gold);margin-right:6px}.seqbead.mint{background:var(--teal);color:#285d51}.seqbead.done{opacity:.3}.seqbead.current{outline:2px solid #fff9;outline-offset:3px}#sequence{margin:18px 0 9px;display:flex;justify-content:center}#message{min-height:42px;margin:8px 0;font-size:12px;color:#dce9d9;text-align:center;line-height:1.5}.actions{display:flex;gap:8px;justify-content:center}.actions button{font-size:12px;padding:10px 17px}#note{font-size:11px;text-align:center;margin-bottom:0}#celebrate{position:absolute;inset:0;z-index:4;background:#103737ed;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}#celebrate[hidden]{display:none}#celebrate span{font-size:9px;letter-spacing:3px;color:var(--gold)}#celebrate h2{font-size:35px}#celebrate button{margin-top:12px}#next{background:var(--gold);color:#463520}footer{max-width:1220px;margin:20px auto;padding:0 36px 25px;font-size:10px;color:#a6c5b4}footer details{max-width:900px;margin-top:10px}footer p{font-size:11px}a{color:var(--teal)}@media(max-width:1000px){main{gap:25px;grid-template-columns:1fr 53%;padding:0 24px}.lab{padding:18px}h1{font-size:45px}.labtop select{max-width:100px}.meters{gap:22px}}@media(max-width:700px){header{padding:20px 23px}.brand{font-size:27px}main{display:flex;flex-direction:column;gap:22px;margin-top:8px;padding:0 16px}.intro{width:100%;padding:0 8px}h1{font-size:38px;margin:15px 0}h1 br{display:none}.intro>p{font-size:13px}.intro>p br{display:none}.legend{flex-direction:row;gap:16px;margin:17px 0;font-size:10px}.legend i{width:10px;height:10px}.intro details{max-width:none}.progress{margin-top:10px}.lab{width:100%;max-width:590px;padding:16px}.labtop h2{font-size:23px}.meters{padding:14px 0;gap:30px}.bead{font-size:9px}footer{padding:0 24px 20px}.seqbead{width:18px;height:18px;margin-right:5px}#celebrate h2{font-size:28px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.bead{background: url('amber.webp') center/100% 100% no-repeat;border:0;box-shadow:0 4px 8px #0004;text-shadow:0 1px 2px #ffe7bd}.bead.mint{background:url('mint.webp') center/100% 100% no-repeat;border:0;text-shadow:0 1px 2px #d7f3df}

#board{grid-template-rows:repeat(7,1fr)}