:root{--zc-background:#f1eee5;--zc-surface:#f8f5ed;--zc-ink:#283b32;--zc-muted:#69786a;--zc-accent:#47664b;--zc-accent-ink:#fffef6;--zc-border:#cfd4c6;--zc-soft:#e4e6d9;--zc-ceramic:#e9e2d2;--zc-shadow:#28372b22}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:14px/1.65 system-ui,sans-serif}main{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.25fr .8fr;gap:24px 60px;padding:28px 38px 38px}header{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--zc-muted)}.eyebrow,.edition,.table-caption{font-size:10px;letter-spacing:.18em}.intro{grid-column:1;grid-row:2;text-align:center;padding-top:18px;z-index:1;pointer-events:none}.edition{color:var(--zc-muted)}h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.15}h1{font-size:clamp(35px,4.5vw,58px);margin:13px 0}h2{font-size:30px;margin:10px 0 16px}.intro p{font-family:Georgia,serif;font-style:italic;font-size:17px;color:var(--zc-muted);margin:0}.table{grid-column:1;grid-row:3;position:relative;display:grid;place-items:center;aspect-ratio:1.1}.linen{position:absolute;width:75%;height:88%;background:repeating-linear-gradient(0deg,transparent,transparent 3px,var(--zc-border) 4px);opacity:.35;transform:rotate(-11deg);border:1px solid var(--zc-border)}.saucer{position:relative;width:90%;aspect-ratio:1;border-radius:50%;padding:8%;background:radial-gradient(circle,var(--zc-background) 52%,var(--zc-ceramic) 53%,var(--zc-surface) 59%,var(--zc-ceramic) 69%,var(--zc-surface) 70%);box-shadow:8px 18px 28px var(--zc-shadow),inset 1px 2px 2px var(--zc-surface)}.cup{position:relative;width:100%;height:100%;background:var(--zc-ceramic);border-radius:50%;box-shadow:3px 7px 10px var(--zc-shadow),inset 0 1px 4px var(--zc-surface)}canvas,#touch{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}#touch{touch-action:none;cursor:grab}#touch:active{cursor:grabbing}#touch:focus-visible{outline:3px solid var(--zc-accent);outline-offset:8px}.table-caption{position:absolute;bottom:-8px;font-size:9px;color:var(--zc-muted);text-align:center}.controls{grid-column:2;grid-row:2/4;align-self:center}.heading{margin-bottom:24px}.heading p,.note{color:var(--zc-muted)}button,select{font:inherit;min-height:48px;border:1px solid var(--zc-border);border-radius:5px;color:var(--zc-ink);background:var(--zc-surface);padding:10px 14px}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}.primary{width:100%;background:var(--zc-accent);color:var(--zc-accent-ink);border-color:var(--zc-accent);margin:14px 0 10px}.tea-label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--zc-muted)}.row{display:flex;gap:10px}.row button{flex:1}.progress{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--zc-muted);margin-top:24px;font-variant-numeric:tabular-nums}.track{height:3px;background:var(--zc-border);margin:10px 0 16px}#fill{height:100%;width:0;background:var(--zc-accent)}.note{font-size:11px}#status{font-size:12px;min-height:20px}.remembered{font-size:10px;letter-spacing:.06em;color:var(--zc-muted)}@media(max-width:650px){main{padding:18px 20px 30px;display:flex;flex-direction:column;gap:18px}header{font-size:9px}.intro{padding-top:6px}.intro p{font-size:15px}h1{font-size:38px;margin:8px 0}.table{width:100%;max-width:440px;align-self:center;aspect-ratio:1.18}.controls{width:100%;margin-top:8px}.heading{margin-bottom:16px}h2{font-size:27px}.heading p{font-size:13px;margin-bottom:0}.saucer{width:83%}.table-caption{bottom:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* The tea table is a small ceremony: linen, ceramic, water, then the instruction. */
body{background:radial-gradient(circle at 6% 4%,var(--zc-surface),transparent 45%),var(--zc-background)}
header{border-bottom:1px solid var(--zc-border);padding-bottom:13px;text-transform:uppercase}
main{column-gap:clamp(38px,5vw,85px)}
.intro{text-align:left;padding:12px 0 0 7%}
.intro h1{font-size:clamp(40px,4.8vw,65px)}
.intro p{font-size:19px}
.table{min-height:450px;aspect-ratio:1.2;background:linear-gradient(135deg,color-mix(in srgb,var(--zc-soft) 75%,transparent),var(--zc-surface));border:1px solid var(--zc-border);border-radius:4px;box-shadow:0 18px 45px color-mix(in srgb,var(--zc-ink) 9%,transparent)}
.table::before{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--zc-border) 70%,transparent);pointer-events:none}
.linen{width:73%;height:82%;transform:rotate(-9deg);background:repeating-linear-gradient(90deg,transparent 0 5px,color-mix(in srgb,var(--zc-border) 55%,transparent) 6px 7px),repeating-linear-gradient(0deg,transparent 0 5px,color-mix(in srgb,var(--zc-border) 48%,transparent) 6px 7px)}
.saucer{width:min(77%,470px);padding:7%;box-shadow:16px 25px 45px color-mix(in srgb,var(--zc-ink) 17%,transparent),inset 1px 2px 3px var(--zc-surface)}
.cup{box-shadow:6px 9px 18px var(--zc-shadow),inset 0 0 0 6px color-mix(in srgb,var(--zc-ceramic) 75%,var(--zc-surface)),inset 0 1px 6px var(--zc-surface)}
.table-caption{bottom:17px;color:var(--zc-ink);font-size:9px}
.controls{position:relative;border-top:3px solid var(--zc-accent);padding-top:24px}
.controls::before{content:"THE CEREMONY / 01";position:absolute;right:0;top:-21px;color:var(--zc-muted);font-size:9px;letter-spacing:.17em}
.heading h2{font-size:clamp(29px,2.8vw,38px)}
.primary{border-radius:999px;min-height:56px;box-shadow:0 11px 22px color-mix(in srgb,var(--zc-accent) 16%,transparent)}
.row button{border-radius:999px}
.track{height:6px;border-radius:99px;overflow:hidden;background:var(--zc-soft)}
#fill{border-radius:inherit;transition:width .2s linear}
@media(max-width:650px){main{padding:12px 14px 24px;gap:10px}header{padding-bottom:6px}.intro{padding:0;text-align:center}.intro h1{font-size:34px;margin:2px 0}.intro p{font-size:12px;line-height:1.3}.table{height:250px;min-height:250px;aspect-ratio:auto;max-width:none}.linen{width:67%;height:84%}.saucer{width:230px;max-width:70%;padding:6%}.table-caption{bottom:5px;font-size:8px}.controls{margin-top:11px;padding-top:12px}.controls::before{top:-18px;font-size:8px}.heading{margin-bottom:9px}.heading h2{font-size:23px;margin:3px 0 5px}.heading p{font-size:11px;line-height:1.3;margin:0}.tea-label{font-size:10px;gap:3px}.tea-label select{min-height:42px;padding:7px}.primary{min-height:48px;margin:8px 0 6px}.row button{min-height:44px}.progress{margin-top:13px}}
@media(prefers-reduced-motion:reduce){#fill{transition:none!important}}
[data-motion=reduced] #fill{transition:none!important}

/* Round two: one cup on a dark tea table, one step at a time. */
:root{--zc-tea-table:#574332;--zc-tea-table-deep:#34291f;--zc-tea-linen:#b7a585;--zc-tea-card:#eee8d9;--zc-tea-ink:#332f27;--zc-tea-warm:#aa7a46;--zc-tea-room:#e5dfd0}
body{background:radial-gradient(circle at 50% 0%,var(--zc-tea-linen),var(--zc-tea-room) 56%)}
main{max-width:1240px;grid-template-columns:minmax(0,1.45fr) minmax(315px,.7fr);column-gap:0;row-gap:0;padding:0 28px 38px}
header{padding:15px 8px;border-bottom:0}
.intro{grid-column:1;grid-row:2;position:relative;z-index:2;align-self:start;text-align:center;padding:35px 20px 0;color:var(--zc-tea-card)}
.intro .edition,.intro p{color:var(--zc-tea-card)}
.intro h1{font-size:clamp(38px,4.3vw,59px);letter-spacing:-.055em;margin:3px 0}
.intro p{font-size:13px;line-height:1.35;letter-spacing:.04em;font-family:Georgia,serif}
.table{grid-column:1;grid-row:2;min-height:610px;aspect-ratio:auto;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--zc-tea-table) 77%,var(--zc-tea-linen)),var(--zc-tea-table) 54%,var(--zc-tea-table-deep));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--zc-tea-linen) 38%,transparent),0 22px 42px color-mix(in srgb,var(--zc-tea-table-deep) 30%,transparent)}
.table::before{inset:15px;border:1px solid color-mix(in srgb,var(--zc-tea-linen) 27%,transparent)}
.linen{width:75%;height:66%;top:29%;transform:rotate(-7deg);border:0;background:repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--zc-tea-linen) 27%,transparent) 4px 5px),repeating-linear-gradient(90deg,transparent 0 3px,color-mix(in srgb,var(--zc-tea-linen) 25%,transparent) 4px 5px),var(--zc-tea-linen);opacity:.64;box-shadow:8px 12px 20px color-mix(in srgb,var(--zc-tea-table-deep) 34%,transparent)}
.saucer{width:min(65%,400px);margin-top:105px;padding:7%;background:radial-gradient(circle,var(--zc-tea-card) 51%,var(--zc-ceramic) 52% 56%,var(--zc-tea-card) 58% 63%,var(--zc-ceramic) 70%);box-shadow:12px 25px 27px color-mix(in srgb,var(--zc-tea-table-deep) 55%,transparent),inset 0 2px 9px var(--zc-tea-card)}
.cup{box-shadow:5px 9px 11px color-mix(in srgb,var(--zc-tea-table-deep) 32%,transparent),inset 0 0 0 6px var(--zc-ceramic)}
.table-caption{bottom:21px;color:var(--zc-tea-card);letter-spacing:.24em}
.controls{grid-column:2;grid-row:2;align-self:stretch;background:var(--zc-tea-card);color:var(--zc-tea-ink);border:1px solid color-mix(in srgb,var(--zc-tea-table) 45%,transparent);border-top:0;padding:68px 32px 25px;box-shadow:8px 22px 38px color-mix(in srgb,var(--zc-tea-table-deep) 18%,transparent)}
.controls::before{content:"THE CEREMONY     ·     WATER / LEAF / REST";top:25px;left:32px;right:auto;color:var(--zc-tea-ink)}
.heading{margin-bottom:33px}
.heading h2{color:var(--zc-tea-ink);font-size:clamp(29px,3vw,40px);line-height:1.05}
.heading p,.note,.progress,.tea-label,.remembered{color:var(--zc-tea-ink)}
.controls button,.controls select{background:transparent;border-color:color-mix(in srgb,var(--zc-tea-table) 45%,transparent);color:var(--zc-tea-ink);border-radius:2px}
.controls .primary{background:var(--zc-tea-table-deep);border-color:var(--zc-tea-table-deep);color:var(--zc-tea-card);border-radius:2px;box-shadow:none}
.track{height:3px;background:var(--zc-tea-linen)}
#fill{background:var(--zc-tea-warm)}
@media(max-width:650px){main{display:flex;flex-direction:column;padding:0 12px 22px;gap:0}header{padding:9px 2px}.intro{position:relative;z-index:2;order:1;align-self:stretch;background:var(--zc-tea-table-deep);padding:13px 8px 4px}.intro h1{font-size:32px}.intro p{font-size:11px}.table{order:2;height:252px;min-height:252px}.linen{height:80%;top:8%;width:68%}.saucer{width:205px;max-width:62%;margin-top:0;padding:6%}.table-caption{bottom:7px;font-size:8px}.controls{order:3;padding:24px 17px 17px;box-shadow:none}.controls::before{top:8px;left:17px;font-size:7px}.heading{margin-bottom:9px}.heading h2{font-size:23px}.heading p{font-size:11px}.primary{margin:8px 0 6px}.row button{min-height:40px}}
body,header{color:var(--zc-tea-ink)}

/* The tea table fills the remaining viewport; ceremony notes stay in the side scroll. */
html,body{height:100%;overflow:hidden}
main{height:100dvh;max-height:100dvh;grid-template-rows:auto minmax(0,1fr);overflow:hidden;padding-bottom:10px}
header{grid-row:1}
.intro,.table,.controls{min-height:0}
.table{height:100%}
.controls{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.controls:focus-visible{outline:2px solid var(--zc-tea-table-deep);outline-offset:-2px}
@media(max-width:650px){main{display:flex;flex-direction:column;padding:0 10px 5px}.intro{flex:none;padding:7px 8px 3px}.intro h1{font-size:clamp(26px,8vw,31px)}.intro p{line-height:1.2}.table{flex:1 1 0;height:auto;min-height:0}.saucer{width:min(205px,52dvh)}.controls{flex:0 1 auto;max-height:min(42dvh,320px);padding:19px 13px 9px}.heading{margin-bottom:5px}.heading h2{font-size:21px}.note{margin:5px 0}}
@media(min-width:651px) and (max-height:760px){.intro{padding-top:14px}.intro p{line-height:1.2}}

/* Flagship pass: steam over the table, warm light on the ceramic, a sound toggle, and layouts that keep the cup whole. */
#steam{position:absolute;inset:0;width:100%;height:100%;border-radius:0;pointer-events:none;z-index:1}
.intro{z-index:3}
.table-caption{z-index:2}
#water{animation:tea-in 1.4s cubic-bezier(.2,.7,.2,1) both}
#steam{animation:tea-in 3s ease-out both}
@keyframes tea-in{from{opacity:0}}
.table{background:radial-gradient(ellipse 60% 48% at 42% 44%,color-mix(in srgb,#ffd9a0 13%,transparent),transparent 70%),radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--zc-tea-table) 77%,var(--zc-tea-linen)),var(--zc-tea-table) 54%,var(--zc-tea-table-deep))}
.saucer::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 24%,#fffaf026,transparent 38%),conic-gradient(from 200deg,transparent 0 6%,#ffffff40 12%,transparent 22% 70%,#00000010 82%,transparent 92%);-webkit-mask:radial-gradient(circle,transparent 63%,#000 64%);mask:radial-gradient(circle,transparent 63%,#000 64%)}
.cup::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(from 215deg,transparent 0 4%,#fffdf6aa 10%,transparent 19% 62%,#5a412418 76%,transparent 88%);-webkit-mask:radial-gradient(circle,transparent 92.6%,#000 93.4%);mask:radial-gradient(circle,transparent 92.6%,#000 93.4%)}
#touch{z-index:1}
.choose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.controls .sound{min-height:48px;padding:10px 14px;font-size:12px;letter-spacing:.04em;white-space:nowrap}
.controls .sound[aria-pressed=true]{background:color-mix(in srgb,var(--zc-tea-warm) 18%,transparent);border-color:var(--zc-tea-warm)}
@media(max-width:650px){.controls .sound{min-height:42px;padding:7px 11px;font-size:11px}}
/* Short screens: the title shrinks and the cup is sized by the height that is left, so it never runs off the table. */
@media(min-width:651px) and (max-height:760px){.saucer{width:min(65%,400px,calc(100dvh - 300px));margin-top:clamp(70px,14dvh,105px)}}
@media(min-width:651px) and (max-height:560px){header{padding:8px 8px}.intro{padding-top:12px}.intro .edition,.intro p{display:none}.intro h1{font-size:clamp(26px,3.4vw,34px)}.saucer{width:min(62%,calc(100dvh - 150px));margin-top:clamp(34px,10dvh,60px);padding:6%}.table-caption{display:none}.controls{padding:44px 24px 16px}.controls::before{top:16px;left:24px}.heading{margin-bottom:12px}.heading h2{font-size:24px}}
@media(max-width:650px) and (max-height:600px){header{padding:5px 2px;font-size:8px}.intro{padding:5px 8px 2px}.intro .edition,.intro p{display:none}.intro h1{font-size:22px;margin:0}.table-caption{display:none}.saucer{width:min(205px,62%,calc(100dvh - 250px));padding:5%}.controls{max-height:48dvh;padding:16px 11px 8px}.controls::before{top:5px;left:11px}.heading{margin-bottom:4px}.heading h2{font-size:17px}.heading p{display:none}}
@media(max-width:650px) and (max-height:600px) and (max-width:330px){header #connection{display:none}}
[data-motion=reduced] #water,[data-motion=reduced] #steam{animation:none}
@media(prefers-reduced-motion:reduce){#water,#steam{animation:none}}