:root{--paper:#f2efe8;--ink:#292722;--muted:#79766f;--rule:#d8d4cb;--coffee:#684431;--sage:#68745f;--sans:"DM Sans",Arial,sans-serif;--serif:"Playfair Display",Georgia,serif;--mono:"DM Mono",monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--sans)}body{min-height:100svh}.app-shell{min-height:100svh;padding:0 clamp(22px,5.4vw,84px);display:flex;flex-direction:column}.topbar{height:74px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark{color:var(--ink);text-decoration:none;font-size:17px;font-weight:700;letter-spacing:.2em;display:flex;gap:9px;align-items:baseline}.wordmark span{font:10px var(--mono);letter-spacing:.14em;color:var(--muted)}.edition,.site-link,.eyebrow,.control-label,.step-number,.cup-caption,.footer,.status-row,.pour-hint{font:10px var(--mono);letter-spacing:.09em}.edition{color:var(--muted);display:flex;align-items:center;gap:12px}.edition i{height:3px;width:3px;border-radius:50%;background:var(--sage)}.site-link{color:var(--ink);text-decoration:none}.site-link span{color:var(--sage);margin-left:4px}.workspace{width:min(1250px,100%);margin:auto;display:grid;grid-template-columns:minmax(190px,.76fr) minmax(350px,1.42fr) minmax(240px,.86fr);align-items:center;gap:clamp(24px,4vw,68px);padding:58px 0 45px}.intro{align-self:center;margin-top:-24px}.eyebrow{color:var(--muted);margin:0;display:flex;align-items:center;gap:8px}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--sage)}.intro h1{font:500 clamp(34px,4vw,54px)/1.08 var(--serif);letter-spacing:-.035em;margin:24px 0 17px}.intro h1 em{color:var(--coffee);font-weight:500}.intro-copy{max-width:245px;color:#716d66;font-size:14px;line-height:1.65;margin:0}.status-row{display:flex;align-items:center;gap:8px;color:#807d74;margin-top:29px;font-size:9px}.status-dot{width:6px;height:6px;background:#9c988f;border-radius:50%}.status-dot.pouring{background:#8d5638;box-shadow:0 0 0 3px #8d56381c}.cup-column{min-width:0}.cup-stage{position:relative;width:min(100%,540px);margin:auto;aspect-ratio:1.08;display:grid;place-items:center;isolation:isolate}.saucer{position:absolute;width:98%;height:79%;border-radius:50%;background:linear-gradient(150deg,#f9f7f1,#ded9cf 65%,#c9c1b5);box-shadow:0 25px 45px #4d38221a,0 7px 14px #4d38221a;transform:translateY(7%);z-index:-1}.cup-rim{position:relative;width:88%;aspect-ratio:1.22;border-radius:50%;padding:clamp(10px,1.55vw,18px);background:linear-gradient(140deg,#fffdf8,#e5ded1 28%,#fffdf7 58%,#d8d0c4);box-shadow:inset 0 1px 3px #fff,0 15px 27px #44311c24;z-index:2}.surface-wrap{height:100%;width:100%;overflow:hidden;border-radius:50%;position:relative;background:radial-gradient(ellipse at 48% 35%,#946849,#70452f 58%,#4a2c20);box-shadow:inset 0 0 0 2px #3f271d80,inset 0 8px 16px #29170f58;touch-action:none;cursor:crosshair}#fluidCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%;touch-action:none}.surface-glint{pointer-events:none;position:absolute;inset:1.5%;border-radius:50%;border:1px solid #fff3;box-shadow:inset 0 2px 8px #fff1;z-index:2}.cup-shadow{position:absolute;width:49%;height:9%;bottom:6%;border-radius:50%;background:#4b34201c;filter:blur(13px);z-index:-2}.pour-hint{position:absolute;z-index:3;bottom:4%;color:#71695d;background:#f2efe8dc;border:1px solid #fff9;border-radius:30px;padding:8px 12px;font-size:8px;transition:opacity .25s}.cup-stage.is-pouring .pour-hint,.cup-stage.has-art .pour-hint{opacity:0}.cup-caption{display:flex;justify-content:space-between;color:#8b877e;font-size:8px;margin:17px 6% 0}.controls{border-left:1px solid var(--rule);padding-left:clamp(18px,2.3vw,34px);align-self:center}.control-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.control-head .eyebrow{color:var(--ink)}.step-number{color:#aaa69d;font-size:9px}.control-group{margin:0 0 25px}.control-label{color:#8b877f;font-size:9px;display:block;margin-bottom:10px}.segmented{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid #d8d3c9;border-radius:6px;gap:3px}.segment{border:0;background:transparent;border-radius:4px;padding:11px 8px;font:10px var(--mono);color:#827e75;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}.segment.active{background:#fffdf8;color:var(--ink);box-shadow:0 1px 4px #41301a14}.height-icon{width:8px;height:12px;border:1px solid currentColor;border-radius:5px;display:inline-block;position:relative}.height-icon:after{content:"";position:absolute;width:2px;height:4px;background:currentColor;bottom:-5px;left:2px}.high-icon{transform:translateY(-3px)}.micro-copy{color:#868178;font-size:12px;line-height:1.5;margin:8px 0 0}.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool-button{border:1px solid var(--rule);background:#f7f5ef;border-radius:5px;padding:10px;display:flex;align-items:center;text-align:left;gap:9px;cursor:pointer;color:#807c74;min-width:0}.tool-button.active{border-color:#94785f;background:#fbf9f3;color:var(--ink);box-shadow:inset 0 0 0 1px #94785f22}.tool-button b{display:block;font-size:12px;font-weight:600}.tool-button small{display:block;font-size:10px;color:#918c82;margin-top:3px}.milk-drop{width:12px;height:16px;background:#e7e1d5;border:1px solid #c8c0b4;border-radius:70% 40% 70% 45%;transform:rotate(45deg);flex:none}.pick-mark{width:15px;height:18px;position:relative;flex:none}.pick-mark:before{content:"";height:17px;width:1px;background:#845a3e;position:absolute;left:7px;top:0;transform:rotate(38deg)}.pick-mark:after{content:"";position:absolute;width:7px;height:4px;border:1px solid #845a3e;border-radius:50%;left:3px;top:3px;transform:rotate(38deg)}.keyboard-help{padding-top:1px}.key-row{display:flex;align-items:center;gap:10px;margin:8px 0;color:#79756e;font-size:12px}.key-row kbd{height:23px;min-width:50px;padding:4px 6px;border:1px solid #d2cdc3;border-radius:4px;background:#faf8f3;text-align:center;font:9px var(--mono);color:#6e6a62;box-shadow:0 1px 0 #d2cdc3}.control-actions{border-top:1px solid var(--rule);padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}.reset-button,.save-button{font:9px var(--mono);letter-spacing:.035em;cursor:pointer;border:0;background:none;color:#716d64;padding:8px 0}.reset-button span{font:16px var(--sans);vertical-align:-1px;margin-right:4px}.save-button{color:var(--coffee)}.save-button span{margin-left:3px}.reset-button:hover,.save-button:hover{color:#2b241e}.mobile-note{display:none}.footer{border-top:1px solid var(--rule);height:48px;display:flex;justify-content:space-between;align-items:center;color:#a09b91;font-size:8px;letter-spacing:.08em}.surface-wrap.toothpick-cursor{cursor:cell}button:focus-visible,a:focus-visible{outline:2px solid #86704d;outline-offset:3px}@media(max-width:980px){.workspace{grid-template-columns:minmax(150px,.72fr) minmax(300px,1.25fr) minmax(220px,.88fr);gap:24px}.controls{padding-left:20px}.intro h1{font-size:40px}.cup-stage{width:110%}.control-group{margin-bottom:20px}.segment{font-size:9px}}@media(max-width:760px){.app-shell{padding:0 22px}.topbar{height:61px}.edition{display:none}.workspace{grid-template-columns:1fr;gap:0;padding:28px 0 24px;width:min(520px,100%)}.intro{margin:0;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:10px}.intro .eyebrow{grid-column:1/-1}.intro h1{font-size:35px;margin:14px 0 0}.intro-copy{font-size:12px;line-height:1.5;max-width:165px;margin-bottom:3px}.status-row{display:none}.cup-column{margin:10px -12px 14px}.cup-stage{width:min(100%,470px);aspect-ratio:1.1}.cup-caption{font-size:7px;margin-top:10px}.controls{border-left:0;border-top:1px solid var(--rule);padding:18px 0 0;display:grid;grid-template-columns:1fr 1fr;column-gap:15px;align-items:start}.control-head{grid-column:1/-1;margin-bottom:15px}.control-group{margin-bottom:15px}.keyboard-help{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:10px;padding-top:4px}.keyboard-help .control-label{grid-column:1/-1}.control-actions{grid-column:1/-1}.mobile-note{display:block;grid-column:1/-1;text-align:center;margin:12px 0 0;color:#9a958b;font-size:10px}.footer{height:41px;flex:none}.footer span:nth-child(2){display:none}}@media(max-width:390px){.app-shell{padding:0 17px}.intro h1{font-size:31px}.intro-copy{font-size:11px;max-width:145px}.cup-column{margin-inline:-10px}.controls{column-gap:10px}.tool-button{padding:8px;gap:7px}.tool-button b{font-size:11px}.tool-button small{font-size:9px}.segment{padding:10px 4px}}