/* Defaults for standalone preview; the host overrides every --zc-* token through the SDK theme. */
:root {
  --zc-background: #f4f1e9; --zc-surface: #fcfaf4; --zc-ink: #293b32; --zc-muted: #647366; --zc-accent: #375c47; --zc-accent-ink: #fafcf4;
  --zc-border: #d8ded2; --zc-soft: #e7ebe0; --zc-radius: 12px; --zc-font: Georgia, serif;
  --zc-step1: #eef1e6; --zc-step2: #e2e8d6; --zc-step3: #d4dcc3; --zc-step4: #c3cfae; --zc-step5: #b0c09a; --zc-step6: #9cb087;
  --zc-step7: #86a077; --zc-step8: #6f8f68; --zc-step9: #5b7d5c; --zc-step10: #4a6a4f; --zc-step11: #3b5842; --zc-step12: #2e4636;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --zc-background: #18201c; --zc-surface: #202a25; --zc-ink: #e4eadf; --zc-muted: #a3b0a4; --zc-accent: #9cc4a6; --zc-accent-ink: #13201a;
    --zc-border: #34423a; --zc-soft: #2a3630;
    --zc-step1: #26322c; --zc-step2: #2d3b33; --zc-step3: #35463c; --zc-step4: #3d5145; --zc-step5: #465d4f; --zc-step6: #506a59;
    --zc-step7: #5b7864; --zc-step8: #688770; --zc-step9: #76967e; --zc-step10: #86a58c; --zc-step11: #97b49c; --zc-step12: #aac3ad;
  }
}
:root {
  --zc-wall: color-mix(in oklab, var(--zc-surface) 78%, var(--zc-step4));
  --zc-floor: color-mix(in oklab, var(--zc-soft) 60%, #a07a58 40%);
  --zc-wood: color-mix(in oklab, #b88a5e 70%, var(--zc-surface));
  --zc-paper: color-mix(in oklab, var(--zc-surface) 85%, #e8dcc0);
  color-scheme: light dark;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--zc-background); color: var(--zc-ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden }
button { font: inherit; color: inherit }
button { min-height: 44px; border: 1px solid var(--zc-border); border-radius: calc(var(--zc-radius) * .7); background: var(--zc-surface); padding: 8px 14px; cursor: pointer; touch-action: manipulation }
button:hover:not(:disabled) { background: var(--zc-soft) }
button:disabled { opacity: .5; cursor: default }
.primary { background: var(--zc-accent); color: var(--zc-accent-ink); border-color: var(--zc-accent); font-weight: 600 }
.primary:hover:not(:disabled) { background: var(--zc-accent); filter: brightness(1.07) }
:focus-visible { outline: 3px solid var(--zc-accent); outline-offset: 2px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.muted { color: var(--zc-muted) }
.text-button { border-color: transparent; background: transparent; padding: 8px 6px; color: var(--zc-muted) }

.th { max-width: 1060px; margin: 0 auto; padding: 10px 16px 24px }
.preview-banner { margin: 0 0 8px; padding: 8px 12px; border: 1px dashed var(--zc-border); border-radius: var(--zc-radius); background: var(--zc-soft); color: var(--zc-ink); font-size: 13px; text-align: center }
.top { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: end; margin-bottom: 10px }
.eyebrow { font-size: 10px; letter-spacing: 2.4px; color: var(--zc-muted) }
h1 { margin: 0; font: 400 clamp(21px, 5.6vw, 28px)/1.2 var(--zc-font) }
h2 { margin: 0; font: 600 17px/1.3 var(--zc-font) }
.stats { margin: 0; display: flex; gap: 10px; color: var(--zc-muted); font-size: 13px; font-variant-numeric: tabular-nums; justify-self: end; flex-wrap: wrap; justify-content: flex-end }
.stats span + span::before { content: "\00b7"; margin-right: 10px }
.controls { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px }
.controls button[aria-pressed="true"] { background: var(--zc-soft); border-color: var(--zc-accent) }

.layout { display: grid; gap: 12px }
.stage-col, .work-col { display: grid; gap: 12px; align-content: start; min-width: 0 }
.scene { border: 1px solid var(--zc-border); border-radius: var(--zc-radius); overflow: hidden; background: var(--zc-wall); line-height: 0 }
.room { width: 100%; height: auto; display: block }
.card, .panel { background: var(--zc-surface); border: 1px solid var(--zc-border); border-radius: var(--zc-radius); padding: 14px 16px }
.guest-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.tag { font-size: 11px; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; background: var(--zc-soft); color: var(--zc-ink) }
.dots { display: inline-flex; gap: 4px; margin-left: auto }
.dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--zc-accent) }
.dots i.on { background: var(--zc-accent) }
.role { margin: 2px 0 6px; color: var(--zc-muted); font-size: 13px }
.arrive { margin: 0 0 6px }
.need { margin: 0; padding-left: 10px; border-left: 3px solid var(--zc-accent); font-style: italic }
.lede { margin: 6px 0 10px }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 }
.summary div { background: var(--zc-soft); border-radius: calc(var(--zc-radius) * .6); padding: 6px 8px }
.summary dt { font-size: 11px; color: var(--zc-muted) }
.summary dd { margin: 0; font: 600 18px/1.3 var(--zc-font); font-variant-numeric: tabular-nums }
.keepsake { margin: 10px 0 0; padding: 8px 10px; border-radius: calc(var(--zc-radius) * .6); background: var(--zc-soft); font-size: 14px }

fieldset { border: 0; margin: 0 0 10px; padding: 0; min-width: 0 }
legend { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--zc-muted); margin-bottom: 6px; padding: 0 }
legend .muted { text-transform: none; font-weight: 400; letter-spacing: 0 }
.chips { display: grid; gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.chips.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 6px 4px; min-height: 48px; line-height: 1.2; text-align: center; position: relative; overflow-wrap: anywhere }
.chip b { font-weight: 600; font-size: 13px }
.chip small { font-size: 11px; color: var(--zc-muted) }
.chip[aria-pressed="true"] { background: var(--zc-accent); border-color: var(--zc-accent); color: var(--zc-accent-ink) }
.chip[aria-pressed="true"] small { color: inherit; opacity: .85 }
.chip[aria-pressed="true"]::after { content: ""; position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--zc-accent-ink) }
.chip:disabled { opacity: .65 }
.chip[aria-pressed="true"]:disabled { opacity: 1 }
.serve-row { margin-top: 4px }
.serve { width: 100%; min-height: 50px; font-size: 16px }
.steep-bar { position: relative; height: 50px; border-radius: calc(var(--zc-radius) * .7); background: var(--zc-soft); overflow: hidden; display: flex; align-items: center; justify-content: center }
.steep-bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in oklab, var(--zc-accent) 35%, transparent); animation: steep 2s linear forwards }
.steep-bar em { position: relative; font-style: normal; font-weight: 600 }
@keyframes steep { to { width: 100% } }
.watch-note { margin: 0 0 10px; font-size: 13px; color: var(--zc-muted) }
.outcome .watch-note { margin: 8px 0 0 }
.notes { margin-top: 12px; font-size: 13px }
.notes summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--zc-muted) }
table { width: 100%; border-collapse: collapse; font-size: 13px }
th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--zc-border); vertical-align: top }
thead th { font-size: 11px; color: var(--zc-muted); font-weight: 600 }
tbody th small { display: block; font-weight: 400; color: var(--zc-muted) }
tr.locked { opacity: .55 }

.outcome .tier { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 18px/1.3 var(--zc-font) }
.tier .tip { margin-left: auto; font: 500 13px/1 -apple-system, "Segoe UI", sans-serif; color: var(--zc-muted); font-variant-numeric: tabular-nums }
.leaf { width: 14px; height: 14px; border-radius: 0 70% 0 70%; background: var(--zc-accent); flex: none }
.tier-0 .leaf, .tier-1 .leaf { background: transparent; border: 2px solid var(--zc-accent) }
.outcome .line { margin: 0 0 6px; font-size: 16px }
.outcome .chat { margin: 0 0 6px; color: var(--zc-muted) }
.outcome .hint { margin: 0 0 10px; font-size: 14px; color: var(--zc-muted) }
.outcome .hint::before { content: "Next time: "; font-weight: 600 }
.story { margin: 10px 0 12px; padding: 12px 14px; background: var(--zc-soft); border-radius: var(--zc-radius) }
.story figcaption { font-size: 12px; letter-spacing: .5px; color: var(--zc-muted); margin-bottom: 4px }
.story blockquote { margin: 0; font: 16px/1.6 var(--zc-font) }
.story .keepsake { background: var(--zc-surface) }
.outcome #next, .evening #open-day { width: 100%; min-height: 50px; margin-top: 4px }

.shop { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 8px }
.shop li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--zc-border); border-radius: calc(var(--zc-radius) * .7) }
.shop li div { display: flex; flex-direction: column; min-width: 0 }
.shop small { color: var(--zc-muted); font-size: 12px }
.shop li.owned { background: var(--zc-soft) }
.shop button { flex: none; min-width: 96px }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--zc-muted) }

dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); border: 1px solid var(--zc-border); border-radius: var(--zc-radius); background: var(--zc-surface); color: var(--zc-ink); padding: 0 }
dialog::backdrop { background: rgb(0 0 0 / .35) }
.journal { padding: 14px 16px 18px }
.journal header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px }
.tabs [aria-selected="true"] { background: var(--zc-accent); color: var(--zc-accent-ink); border-color: var(--zc-accent) }
.regulars { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.regulars > li { border: 1px solid var(--zc-border); border-radius: calc(var(--zc-radius) * .7); padding: 4px 12px }
.regulars > li.unmet { padding: 10px 12px; display: flex; flex-direction: column; opacity: .7 }
.regulars small { color: var(--zc-muted) }
.regulars summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.regulars ol { margin: 4px 0 10px; padding-left: 20px; font: 15px/1.6 var(--zc-font) }
.regulars ol li + li { margin-top: 6px }

/* Scene */
.s-line { fill: none; stroke: var(--zc-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.s-line.thin { stroke-width: 1 }
.s-line.faint { stroke-width: .8; opacity: .35 }
.s-wall { fill: var(--zc-wall) }
.s-floor { fill: var(--zc-floor) }
.s-wood { fill: var(--zc-wood) }
.s-paper { fill: var(--zc-paper) }
.s-sky { fill: color-mix(in oklab, var(--zc-surface) 55%, #a9cde0) }
.s-dusk { fill: #eaa06d }
.s-night { fill: #1f2c4a; opacity: 0; transition: opacity .8s }
.s-moon { fill: #f4e7b6; opacity: 0 }
.is-evening .s-night { opacity: .72 }
.is-evening .s-moon { opacity: 1 }
.s-far { fill: color-mix(in oklab, var(--zc-step6) 60%, #8a9aa8) ; opacity: .7 }
.s-water { fill: color-mix(in oklab, #6f9fb0 70%, var(--zc-surface)) }
.s-leaf-line { fill: none; stroke: #6f9a64; stroke-width: 1.2; stroke-linecap: round }
.s-leaf { fill: #7fa86f }
.s-pot { fill: #c07a52 }
.s-skin { fill: #ecd2b4 }
.s-hair { fill: #3a302a }
.s-grey { fill: #b9b4ad; stroke: #b9b4ad; stroke-width: 1 }
.s-straw { fill: #dcc48d }
.s-band { fill: #c85d4a }
.s-cap { fill: #4d6b8a }
.s-glass { fill: #cfe3ea }
.s-metal { fill: color-mix(in oklab, #8f9aa1 70%, var(--zc-surface)) }
.s-cup { fill: #f3efe6 }
.s-cushion { fill: #b85c4c }
.s-qin { fill: #6a4330 }
.s-stamp { fill: #d6c15e }
.s-lantern { fill: #cf5b44 }
.s-inkfill { fill: var(--zc-ink) }
.s-veil { fill: var(--zc-background); opacity: .55 }
.pause-mark text { font: 600 16px var(--zc-font); fill: var(--zc-ink) }
.glow { fill: #ffcf7a; opacity: 0; transition: opacity .8s }
.is-evening .glow { opacity: .45 }
.steam { opacity: 0 }
.is-steeping .steam { opacity: .6; animation: steam 1.6s ease-in-out infinite }
.waves { animation: drift 9s ease-in-out infinite alternate }
.boat { animation: boat 60s linear infinite }
.figure { animation: arrive .6s ease-out }
@keyframes steam { 0% { transform: translateY(2px); opacity: .1 } 50% { opacity: .7 } 100% { transform: translateY(-5px); opacity: 0 } }
@keyframes drift { to { transform: translateX(-8px) } }
@keyframes boat { from { transform: translateX(-40px) } to { transform: translateX(130px) } }
@keyframes arrive { from { opacity: 0; transform: translateY(3px) } }
@media (prefers-reduced-motion: reduce) { .waves, .boat, .figure, .is-steeping .steam, .steep-bar span { animation: none } .is-steeping .steam { opacity: .6 } .steep-bar span { width: 100% } }
[data-motion="reduced"] .waves, [data-motion="reduced"] .boat, [data-motion="reduced"] .figure, [data-motion="reduced"] .is-steeping .steam, [data-motion="reduced"] .steep-bar span { animation: none }
[data-motion="reduced"] .steep-bar span { width: 100% }

@media (max-width: 380px) {
  .chips.snacks, .chips.teas { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .summary { grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 860px) {
  .th { padding: 18px 24px 28px }
  .top { grid-template-columns: 1fr auto auto; align-items: center }
  .controls { grid-column: auto; grid-template-columns: repeat(3, auto); margin: 0 }
  .layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start }
}

[hidden]{display:none!important}

/* One guest, one cup: a canal-side room and a brewing ritual in four folds. */
body{background-image:repeating-linear-gradient(0deg,transparent 0 47px,color-mix(in srgb,var(--zc-border) 12%,transparent) 47px 48px)}.th{max-width:1260px;padding:30px}.top{margin-bottom:28px;gap:14px}.eyebrow{font-size:9px}h1{font-size:clamp(32px,4vw,53px);letter-spacing:-.04em;margin-top:9px;font-weight:400}.stats{font-size:11px;line-height:1.8}.controls{gap:4px}.controls button{background:transparent;border-radius:99px;font-size:11px;padding:8px 15px}.layout{gap:30px}.stage-col{gap:14px}.room-caption{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:.13em;color:var(--zc-muted)}.scene{border-radius:calc(var(--zc-radius)*1.5);box-shadow:0 18px 55px -38px var(--zc-ink)}.s-window-light{fill:var(--zc-paper);opacity:.18}.s-plaster{fill:none;stroke:var(--zc-ink);stroke-width:.7;opacity:.08}.guest{background:transparent;border:0;border-radius:0;padding:14px 0}.guest-head h2{font:400 29px/1.2 var(--zc-font);letter-spacing:-.02em}.role{font-size:11px;margin:7px 0 12px}.arrive{font-size:13px;line-height:1.8}.need{font:italic 18px/1.7 var(--zc-font);border-left-width:1px;padding-left:16px;margin-top:13px}.tag{font-size:9px;background:transparent;border:1px solid var(--zc-border)}.dots i{width:7px;height:7px}.panel{padding:24px;background:var(--zc-surface);border-radius:calc(var(--zc-radius)*1.25);box-shadow:0 15px 50px -42px var(--zc-ink)}.brew-step{border-bottom:1px solid var(--zc-border);margin-bottom:4px}.brew-step summary{display:flex;gap:9px;align-items:center;min-height:59px;cursor:pointer;list-style:none;font:23px var(--zc-font)}.brew-step summary::-webkit-details-marker{display:none}.step-number{font:10px sans-serif;color:var(--zc-muted);width:23px}.brew-step summary [data-selected]{margin-left:auto;font:10px sans-serif;color:var(--zc-muted);max-width:45%;text-align:right}.brew-step summary::after{content:'+';font:20px var(--zc-font);color:var(--zc-muted);margin-left:5px}.brew-step[open] summary::after{content:'-'}
.brew-step fieldset{margin:4px 0 18px}.chip{border-radius:calc(var(--zc-radius)*.6);min-height:64px;background:transparent;gap:6px}.chip b{font-family:var(--zc-font);font-size:17px;font-weight:400}.chip small{font-size:9px}.chips.teas{grid-template-columns:repeat(2,minmax(0,1fr))}.serve-row{margin-top:19px}.serve{border-radius:99px;font:20px var(--zc-font);min-height:54px}.notes{margin-top:8px}.notes summary{font-size:11px}.outcome .line{font:25px/1.5 var(--zc-font)}.outcome .chat{font-size:14px;line-height:1.8}.story{margin:20px 0;padding:20px}.story blockquote{font-size:19px;line-height:1.7}.foot{font-size:10px;margin-top:24px;border-top:1px solid var(--zc-border);padding-top:10px}.foot button{font-size:11px}.journal{padding:24px}.journal h2{font-size:29px}.regulars ol{line-height:1.9}.s-line{stroke-width:1.2}.s-line.thin{stroke-width:.8}
@media(min-width:860px){.layout{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:40px}.work-col{padding-top:22px}.stage-col{position:sticky;top:24px}.top{grid-template-columns:1fr auto}.controls{grid-column:1 / -1;justify-self:start;grid-template-columns:repeat(3,auto)}.stats{align-self:center}}
@media(max-width:600px){.th{padding:16px}.top{margin-bottom:16px;gap:10px}.top h1{font-size:31px;margin-top:6px}.stats{font-size:9px;max-width:95px;gap:3px;align-items:flex-end}.stats span+span::before{display:none}.controls button{min-height:40px;padding:7px 10px;font-size:10px}.room-caption{font-size:7px;letter-spacing:.06em}.stage-col{gap:8px}.scene{max-height:205px}.room{max-height:205px}.guest{padding:10px 0 0}.guest-head h2{font-size:24px}.role{font-size:10px;margin:4px 0 7px}.arrive{font-size:12px;line-height:1.6}.need{font-size:15px;line-height:1.6;margin-top:8px;padding-left:12px}.layout{gap:18px}.panel{padding:17px}.brew-step summary{min-height:50px;font-size:21px}.chip{min-height:52px}.chip b{font-size:16px}.serve{min-height:49px}.story{padding:16px}.story blockquote{font-size:17px}.foot{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
[data-motion=reduced] *,[data-motion=reduced] *::before,[data-motion=reduced] *::after{animation:none!important;transition:none!important}
.controls button{min-height:44px}