/* A framed room, a guest's words, and a narrow brewing slip on the counter. */
:root{--zc-tea-plaster:color-mix(in srgb,var(--zc-background) 82%,#d6b98c);--zc-tea-timber:#766249;--zc-tea-grain:#b79971;--zc-tea-slip:color-mix(in srgb,var(--zc-surface) 87%,#e1cdb0);--zc-tea-seal:#975b43;--zc-current-tea:transparent;--zc-wall:color-mix(in srgb,var(--zc-surface) 70%,#d1c09c);--zc-floor:color-mix(in srgb,var(--zc-soft) 35%,#b29a78)}
:root[data-mode=dark]{--zc-tea-timber:#514a3e;--zc-tea-grain:#897252;--zc-tea-seal:#c39475}
body{background:var(--zc-tea-plaster);background-image:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--zc-ink) 2%,transparent) 3px 4px)}.th{max-width:1260px;padding:26px 32px}.top{margin-bottom:25px;grid-template-columns:1fr auto;gap:10px;border-bottom:1px solid var(--zc-border);padding-bottom:16px}.title .eyebrow{font-size:8px;letter-spacing:.22em;color:var(--zc-tea-seal)}h1{font:400 clamp(31px,3.8vw,48px)/1.12 var(--zc-font);margin:8px 0 0;letter-spacing:-.04em}.stats{font:10px/1.8 var(--zc-font)}.controls{grid-column:1/-1;gap:6px}.controls button{border:0;border-radius:0;padding:8px 13px 8px 0;font-size:10px;text-decoration:underline;text-decoration-color:var(--zc-border);text-underline-offset:5px}.layout{gap:35px;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr)}.stage-col{position:sticky;top:24px;gap:11px}.room-caption{font-size:7px;letter-spacing:.13em}.scene{border:0;border-radius:0;box-shadow:0 16px 30px -22px #271f16;outline:1px solid var(--zc-tea-timber);outline-offset:5px;margin:6px 0}.room{display:block;aspect-ratio:360/220}.s-frame-wood{fill:var(--zc-tea-timber)}.s-frame-grain{stroke:var(--zc-tea-grain);stroke-width:.7;fill:none;opacity:.65}.s-rug{fill:var(--zc-tea-timber);opacity:.17}.s-rug-edge{fill:none;stroke:var(--zc-tea-timber);stroke-width:.8;opacity:.2}.s-window-light{fill:var(--zc-paper);opacity:.35}.work-col{padding-top:22px}.panel{position:relative;border:0;border-radius:0;background:var(--zc-tea-slip);padding:24px 25px 22px;box-shadow:5px 5px 0 color-mix(in srgb,var(--zc-tea-timber) 9%,transparent),0 18px 30px -25px #33241740}.panel::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--zc-tea-timber)}.tea-slip-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 19px;border-bottom:1px solid var(--zc-border)}.tea-slip-head>div>span{font:7px sans-serif;letter-spacing:.15em;color:var(--zc-tea-seal)}.tea-slip-head h2{font:400 23px/1.15 var(--zc-font);margin:8px 0 7px;letter-spacing:-.025em;max-width:8em}.tea-slip-head small{font:8px sans-serif;letter-spacing:.03em;color:var(--zc-muted)}.tasting-cup{width:70px;height:65px;flex:none}.cup-saucer{fill:var(--zc-soft);stroke:var(--zc-border);stroke-width:.7}.cup-body{fill:var(--zc-surface);stroke:var(--zc-muted);stroke-width:1}.cup-handle{fill:none;stroke:var(--zc-muted);stroke-width:2}.cup-water{fill:var(--zc-current-tea);stroke:var(--zc-border);stroke-width:.7;transition:fill .6s}.cup-steam{fill:none;stroke:var(--zc-muted);stroke-width:1;opacity:0}.tea-slip-head[data-stage=steeping] .cup-steam{opacity:.7;animation:cup-breath 3s ease-in-out infinite}.brew-step{margin:0;border-bottom:1px solid var(--zc-border)}.brew-step summary{font-size:20px;min-height:53px;gap:8px}.step-number{font-size:8px;width:18px;color:var(--zc-tea-seal)}.brew-step summary [data-selected]{font-size:9px}.brew-step summary::after{font-size:18px}.brew-step fieldset{margin:0 0 14px}.chip{border:0;border-bottom:1px solid var(--zc-border);border-radius:0;min-height:57px;background:transparent;padding:10px 7px}.chip[aria-pressed=true]{background:color-mix(in srgb,var(--zc-accent) 8%,transparent);box-shadow:inset 0 -2px var(--zc-accent);border-color:var(--zc-accent)}.chip b{font-size:17px}.chip small{font-size:8px}.chips{gap:5px}.serve-row{margin-top:19px}.serve{border-radius:0;font:17px var(--zc-font);min-height:49px}.notes summary{min-height:42px;font-size:10px}.guest{padding:18px 12px 0 22px;border-left:1px solid var(--zc-tea-grain);margin:15px 0 0}.guest-head h2{font:400 27px/1.2 var(--zc-font)}.role{font-size:10px;margin:6px 0 10px}.need{font:italic 19px/1.7 var(--zc-font);border:0;padding:0;margin:10px 0 9px;max-width:32em}.arrival-note{font-size:11px;color:var(--zc-muted)}.arrival-note summary{cursor:pointer;min-height:40px;display:flex;align-items:center;gap:10px}.arrival-note summary::before{content:'+';font-size:17px}.arrival-note[open] summary::before{content:'−'}.arrival-note .arrive{font:14px/1.8 var(--zc-font);margin:0 0 9px}.outcome .line{font-size:26px}.outcome .tier{font-size:11px}.story{border:0;border-left:2px solid var(--zc-tea-seal);background:transparent;margin:22px 0;padding:4px 0 4px 20px}.story blockquote{font:21px/1.75 var(--zc-font)}.story figcaption{font-size:8px;letter-spacing:.08em}.outcome #next,.evening #open-day{border-radius:0;font:15px var(--zc-font)}.foot{font-size:9px;padding-top:8px;margin-top:24px}.foot button{font-size:10px}.steep-bar{border-radius:0}
@keyframes cup-breath{50%{opacity:.3;transform:translateY(-3px)}}
@media(max-width:859px){.layout{grid-template-columns:1fr;gap:22px}.stage-col{position:static}.work-col{padding:0}.th{max-width:650px}.scene,.room{max-height:none}.guest{margin-top:8px;padding-top:10px}.guest-head h2{font-size:24px}.need{font-size:17px}.tea-slip-head h2{max-width:none}.tea-slip-head{padding-bottom:15px}.panel{padding:22px}.room-caption{font-size:7px}}
@media(max-width:600px){.th{padding:16px}.top{padding-bottom:10px;margin-bottom:15px;gap:5px}.top h1{font-size:30px}.stats{font-size:9px;max-width:80px}.controls button{font-size:9px;min-height:38px;padding:7px 12px 7px 0}.scene,.room{max-height:185px}.room-caption{font-size:6px}.stage-col{gap:7px}.guest{padding:8px 0 0 12px;margin:7px 0 0}.guest-head h2{font-size:22px}.role{font-size:9px;margin:4px 0 4px}.need{font-size:14px;line-height:1.6;margin:6px 0}.arrival-note summary{min-height:36px;font-size:10px}.layout{gap:14px}.panel{padding:18px}.tea-slip-head{padding-bottom:12px}.tea-slip-head h2{font-size:22px;margin:7px 0}.tasting-cup{width:57px;height:48px}.tea-slip-head small{font-size:8px}.brew-step summary{min-height:48px;font-size:20px}.chip{min-height:49px}.chip b{font-size:15px}.chip small{font-size:8px}.serve{min-height:48px}.guest .tag{font-size:8px}.story blockquote{font-size:18px}}
@media(prefers-reduced-motion:reduce){.cup-steam{animation:none!important;transform:none!important}.cup-water{transition:none}}
[data-motion=reduced] .cup-steam{animation:none;transform:none}[data-motion=reduced] .cup-water{transition:none}
@media(max-width:600px){.th{padding:13px 16px}.top{margin-bottom:12px;padding-bottom:7px}.top h1{font-size:28px;margin-top:5px}.controls button{min-height:44px}.scene{height:122px;max-height:none;overflow:hidden;border-top:3px solid var(--zc-tea-timber);border-bottom:3px solid var(--zc-tea-timber)}.room{max-height:none;height:auto;transform:translateY(-28px)}.guest{margin-top:4px;padding-top:5px}.guest-head h2{font-size:21px}.role{margin:3px 0}.need{font-size:13px;line-height:1.55;margin:5px 0}.stage-col{gap:5px}.layout{gap:11px}.tea-slip-head{padding-bottom:9px}.tea-slip-head h2{font-size:20px;margin:5px 0}.panel{padding:15px 17px}.arrival-note summary{min-height:44px}.tasting-cup{height:44px}.tea-slip-head>div>span{font-size:6px}}

.tea-slip-head[data-paused=true] .cup-steam{animation-play-state:paused}