:root{color-scheme:dark;--cream:#f5e7d5;--muted:#bdb0bd;--gold:#e8bd7e;--line:#65505d;--mint:#8de0ce}*{box-sizing:border-box}body{margin:0;background:#191320;color:var(--cream);font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px;background-image:linear-gradient(#18112055,#191320ef 900px),url('workshop.webp');background-size:cover;background-position:center top;background-attachment:fixed}main{max-width:1100px;margin:auto;padding:30px 32px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:750;color:var(--gold)}h1{font:64px Georgia,serif;line-height:1;margin:9px 0 0;letter-spacing:-2px}h1 span{display:inline-block;font:italic 19px Georgia,serif;letter-spacing:0;margin-left:20px;color:#d2b6c3}h2{font:30px Georgia,serif;margin:9px 0}h3{font-size:12px;letter-spacing:.6px;margin:0}button{font:inherit;color:inherit;background:#302330;border:1px solid #806271;border-radius:9px;padding:11px 17px;cursor:pointer;transition:background .15s,transform .15s}button:hover:not(:disabled){background:#503948;transform:translateY(-1px)}button:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:disabled{opacity:.4;cursor:default}button[hidden]{display:none}nav{display:flex;gap:8px}nav button{flex:1;padding:9px 2px;background:#201923cc;font-size:12px}nav button.active{border-color:var(--gold);color:var(--gold);background:#594131}nav button.done:after{content:' ✓';color:var(--mint)}.intro{display:flex;align-items:center;justify-content:space-between;margin:26px 0 18px}#progress{font-size:12px;color:var(--muted)}.workbench{display:grid;grid-template-columns:1fr 1.03fr;gap:18px}.still,.orders{border:1px solid #80657588;background:#211a27ef;border-radius:18px;padding:24px;box-shadow:0 15px 50px #08050c50}.sectionhead,.heathead{display:flex;justify-content:space-between;align-items:center}.sectionhead span,.heathead span{font-size:11px;color:var(--muted)}.muted{font-size:12px;color:var(--muted);line-height:1.6}.ingredients{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 26px}.ingredient{text-align:center;background:#312632;border:1px solid #594552;border-radius:12px;padding:10px 4px}.ingredient img{width:58px;height:58px;object-fit:cover;border-radius:50%}.ingredient strong{display:block;font:25px Georgia,serif;margin:3px}.ingredient small{font-size:10px;color:var(--muted)}.heathead{margin-bottom:12px}#heats{display:flex;gap:8px}#heats button{flex:1;padding:12px 6px;font-size:13px}#heats button span{display:block;font-size:10px;color:var(--muted);margin-top:6px}#heats .selected{background:#604331;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.preview{margin-top:21px;padding:16px;background:#15121ccc;border-radius:11px}#preview{display:flex;gap:14px;margin-top:12px}.dose{display:flex;align-items:center;gap:6px;font-size:16px}.dose img{width:28px;height:28px;border-radius:50%}#batchnote{color:var(--muted);font-size:11px;min-height:15px;margin-bottom:0}.vial{margin-top:20px;border:1px solid #5e475d;border-radius:13px;background:linear-gradient(115deg,#49314955,#211b2b);padding:16px}.vial h4{margin:0 0 13px;font:20px Georgia,serif;display:flex;justify-content:space-between}.vial h4 small{font:10px system-ui;color:var(--muted);align-self:center}.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.meter{font-size:11px}.meter label{display:flex;align-items:center;gap:5px;white-space:nowrap}.meter img{width:22px;height:22px;border-radius:50%}.meter strong{font-size:16px}.track{height:5px;border-radius:6px;background:#100e16;margin:9px 0 14px;overflow:hidden}.track i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s}.meter:nth-child(2) .track i{background:var(--mint)}.meter:nth-child(3) .track i{background:#be9ae8}.meter.over{color:#ff9d9d}.vial button{width:100%;padding:10px;color:var(--gold);background:#382b35}.vial.complete{border-color:var(--mint)}#message{min-height:48px;margin-top:16px;border-left:2px solid var(--gold);padding:10px 14px;font-size:13px;line-height:1.6;background:#18131bba}.toolbar{display:flex;gap:10px;margin:14px 0}.toolbar button{font-size:12px}#next{background:#31574e;color:#e2fff3;margin-left:auto}footer{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-top:24px}footer button{font-size:11px;border:0;background:transparent}dialog{max-width:540px;width:calc(100% - 28px);border:1px solid #a47a8c;border-radius:20px;background:#241c2b;color:var(--cream);padding:28px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#0d0914bb;backdrop-filter:blur(4px)}dialog h2{font-size:32px}dialog p,dialog li{font-size:14px;line-height:1.8;color:#dacbd8}dialog #close{float:right}a{color:var(--mint)}@media(max-width:720px){main{padding:22px 16px}h1{font-size:48px}h1 span{display:block;margin:9px 0 0;font-size:17px}header button{font-size:12px;padding:9px}.workbench{grid-template-columns:1fr}.intro{align-items:start;gap:12px}h2{font-size:25px}#progress{max-width:65px;text-align:right}.still,.orders{padding:18px}.ingredients{margin:15px 0}.ingredient img{width:46px;height:46px}.toolbar{flex-wrap:wrap}.toolbar button{flex:1;white-space:nowrap}footer{gap:10px}nav{gap:5px}#message{min-height:64px}body{background-size:auto 1100px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
