:root{--ink:#eef2f6;--ink-2:#c3ccd6;--muted:#8d99a6;--panel:#1d2733e6;--panel-edge:#ffffff12;--well:#ffffff0f;--well-hover:#ffffff1c;--duck:#ffc81a;--duck-deep:#f0a500;--beak:#ff7a1a;--teal:#0fa3b5;--good:#1f9d55;--bad:#c2412d;--radius:16px;--shadow:0 10px 30px #14181e24, 0 2px 6px #14181e14;color:var(--ink);font-family:Instrument Sans,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:#cfe3ee;height:100%;margin:0;overflow:hidden}#view{outline:none;width:100%;height:100%;display:block;position:fixed;inset:0}#app{pointer-events:none;position:fixed;inset:0}#app>*{pointer-events:auto}.panel{background:var(--panel);-webkit-backdrop-filter:blur(14px)saturate(1.2);border:1px solid var(--panel-edge);border-radius:var(--radius);box-shadow:var(--shadow);position:absolute}.controls{width:330px;max-height:calc(100% - 32px);padding:18px 18px 16px;top:16px;left:16px;overflow-y:auto}.brand{align-items:center;gap:10px;margin-bottom:4px;display:flex}.brand h1{letter-spacing:.04em;color:var(--duck);margin:0;font-family:Big Shoulders Stencil,sans-serif;font-size:27px;font-weight:800;line-height:1}.brand .logo{filter:drop-shadow(0 2px 2px #00000026);font-size:28px}.tagline{color:var(--muted);margin:0 0 14px;font-size:12.5px;line-height:1.4}.section{margin-top:14px}.section-label{color:var(--ink);justify-content:space-between;align-items:baseline;margin-bottom:7px;font-size:13px;font-weight:600;display:flex}.section-label span:last-child{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;font-weight:400}.grid{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.choice{background:var(--well);text-align:left;cursor:pointer;font:inherit;color:inherit;border:1.5px solid #0000;border-radius:9px;min-width:0;padding:6px 8px;transition:background .15s,border-color .15s,transform .1s}.choice:hover{background:var(--well-hover)}.choice:active{transform:scale(.98)}.choice.on{border-color:var(--duck);background:#ffc81a21}.choice .t{font-size:12.5px;font-weight:600;line-height:1.25;display:block}.choice .s{color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px;font-size:11.5px;display:block}.desc{color:var(--ink-2);margin:7px 2px 0;font-size:12px;line-height:1.45}.seg{background:var(--well);border-radius:9px;gap:2px;padding:3px;display:flex}.seg button{font:inherit;color:var(--ink-2);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:1;padding:6px 4px;font-size:12.5px;font-weight:500}.seg button.on{color:#1d2733;background:#eef2f6;font-weight:600;box-shadow:0 1px 3px #0000004d}.actions{background:linear-gradient(transparent, var(--panel) 18%);gap:8px;margin:16px -18px -16px;padding:12px 18px 16px;display:flex;position:sticky;bottom:-16px}.btn{font:inherit;cursor:pointer;background:var(--well);color:var(--ink);border:0;border-radius:12px;padding:11px 14px;font-size:14px;font-weight:600}.btn:hover{background:var(--well-hover)}.btn:focus-visible,.choice:focus-visible,.seg button:focus-visible{outline:2px solid var(--duck);outline-offset:2px}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:linear-gradient(180deg, #ffd43b, var(--duck-deep));color:#3a2600;letter-spacing:.06em;flex:1;font-family:Big Shoulders Stencil,sans-serif;font-size:21px;font-weight:800;box-shadow:0 3px #c98700,0 6px 14px #f0a50059}.btn.primary:hover{filter:brightness(1.05)}.btn.primary:active{transform:translateY(2px);box-shadow:0 1px #c98700}.results{width:340px;padding:18px;top:16px;right:16px}.phase{color:var(--ink-2);align-items:center;gap:7px;font-size:12px;font-weight:600;display:inline-flex}.phase .dot{background:var(--muted);border-radius:50%;width:8px;height:8px}.phase[data-phase=pouring] .dot{background:var(--duck-deep);animation:1s infinite pulse}.phase[data-phase=settling] .dot{background:var(--teal);animation:1.4s infinite pulse}.phase[data-phase=shaking] .dot{background:var(--beak);animation:.35s infinite pulse}.phase[data-phase=done] .dot{background:var(--good)}@keyframes pulse{50%{opacity:.3}}.big{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--duck);margin:10px 0 4px;font-family:Big Shoulders Stencil,sans-serif;font-size:64px;font-weight:800;line-height:.95}.big small{color:var(--ink-2);letter-spacing:0;margin-top:4px;font-family:Instrument Sans,sans-serif;font-size:14px;font-weight:500;display:block}.pm{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}.bar{background:var(--well);border-radius:99px;height:6px;margin:12px 0 4px;overflow:hidden}.bar>div{background:linear-gradient(90deg, var(--duck), var(--beak));width:0;height:100%;transition:width .3s}.kv{grid-template-columns:1fr auto;gap:5px 10px;margin-top:12px;font-size:13px;display:grid}.kv dt{color:var(--muted);white-space:nowrap}.kv dd{text-align:right;font-variant-numeric:tabular-nums;margin:0;font-weight:500}.compare{border-top:1px solid var(--panel-edge);margin-top:14px;padding-top:12px}.compare h3{color:var(--ink);margin:0 0 8px;font-size:13px;font-weight:600}.cmp-row{justify-content:space-between;align-items:baseline;gap:8px;margin:5px 0;font-size:13px;display:flex}.cmp-row .v{font-variant-numeric:tabular-nums;font-weight:600}.cmp-row .v.off{color:#f08a72;text-decoration:line-through;text-decoration-thickness:1px}.cmp-row .v.sim{color:var(--duck)}.cmp-row .n{color:var(--ink-2)}.cmp-row .x{color:var(--muted);margin-left:4px;font-size:11px;font-weight:500}.method{color:var(--ink-2);border-left:2px solid #34d3e6;margin-top:12px;padding:2px 0 2px 10px;font-size:12px;line-height:1.5}.method b{color:var(--ink)}.toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;display:flex}.toggle input{accent-color:var(--duck-deep)}.hud:empty{display:none}.idle{color:var(--ink-2);margin:10px 0 0;font-size:13.5px;line-height:1.5}.hud{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;gap:14px;padding:7px 14px;font-size:12px;display:flex;bottom:16px;left:50%;transform:translate(-50%)}.hud b{color:var(--ink);font-weight:600}.error{color:#f08a72;margin-top:8px;font-size:12px}@media (max-width:860px){.controls{width:auto;max-height:44%;top:auto;bottom:16px;right:16px}.results{width:auto;padding:12px 14px;top:16px;left:16px;right:16px}.results .kv,.results .method,.results .compare{display:none}.big{font-size:34px}.hud{display:none}}[hidden]{display:none!important}@media (prefers-reduced-motion:reduce){.phase .dot{animation:none!important}.bar>div{transition:none}}