:root{--accent:#8a4b2a;--bg:#f6efe6;--ink:#24170f;--ink-soft:#5d4a3c;--porcelain:#fff;--line:color-mix(in srgb, var(--ink) 16%, transparent);--wash:color-mix(in srgb, var(--accent) 18%, var(--porcelain));--focus:color-mix(in srgb, var(--accent) 75%, black);--font-display:"GFS Didot", "Palatino", "Georgia", serif;--font-text:"Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--radius:14px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font-text);overflow-wrap:anywhere;margin:0}img{max-width:100%;height:auto;display:block}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.screen{max-width:560px;padding:12px 16px max(40px, env(safe-area-inset-bottom));flex-direction:column;gap:20px;margin:0 auto;display:flex}.topbar{z-index:10;max-width:560px;padding:max(10px, env(safe-area-inset-top)) 16px 10px;background:var(--bg);justify-content:space-between;align-items:center;margin:0 auto;display:flex;position:sticky;top:0}.ai-badge{background:var(--ink);color:var(--porcelain);font:600 13px/1.4 var(--font-text);border-radius:999px;padding:3px 10px}.wordmark{font:600 15px/1 var(--font-text);color:var(--accent);margin:0}.disclosure{color:var(--ink-soft);margin:0;font-size:14px}.display{font:400 clamp(48px, 15vw, 72px)/1 var(--font-display);letter-spacing:-.01em;margin:8px 0 0}.title{font:400 34px/1.1 var(--font-display);margin:0}.reading-title{font:400 32px/1.15 var(--font-display);margin:4px 0 0}.lede{color:var(--ink);margin:0;font-size:19px;line-height:1.5}p{margin:0}.screen-welcome{justify-content:flex-end;gap:16px;min-height:calc(100svh - 52px)}.emblem{width:min(64%,260px);height:auto;margin:auto 0 8px}.screen-welcome .button{margin-top:12px}.actions{flex-direction:column;gap:10px;display:flex}.button{border-radius:var(--radius);width:100%;min-height:54px;font:600 17px/1.2 var(--font-text);text-align:center;cursor:pointer;border:0;justify-content:center;align-items:center;padding:12px 20px;display:inline-flex}.button-primary{background:var(--accent);color:var(--porcelain)}.button-primary:active{filter:brightness(.92)}.button-quiet{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);background:0 0}.stack{flex-direction:column;gap:22px;display:flex}.field{border:0;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;display:flex}.field>label,legend{margin-bottom:2px;padding:0;font-size:16px;font-weight:600}input[type=text],textarea{border:1.5px solid var(--line);background:var(--porcelain);width:100%;color:var(--ink);font:inherit;border-radius:12px;padding:12px 14px}textarea{resize:vertical;min-height:88px}textarea:disabled{opacity:.45}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{position:relative}.chip input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.chip span{background:var(--porcelain);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:999px;padding:9px 16px;display:inline-block}.chip input:checked+span{background:var(--ink);color:var(--porcelain);box-shadow:none}.chip input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.check{align-items:center;gap:10px;font-size:16px;display:flex}.check input{width:20px;height:20px;accent-color:var(--accent)}.framing{width:132px;height:auto}.cup-rim,.cup-bottom,.cup-handle{fill:none;stroke:var(--ink);stroke-width:2px}.cup-bottom{stroke-dasharray:3 4;opacity:.6}.cup-grounds{fill:var(--accent);stroke:var(--accent);stroke-width:2.4px;stroke-linecap:round}path.cup-grounds{fill:none;opacity:.75}.emblem .cup-rim,.emblem .cup-handle{stroke-width:1.6px}.cup{background:var(--ink);box-shadow:0 1px 0 var(--porcelain), 0 12px 32px color-mix(in srgb, var(--ink) 22%, transparent);border-radius:22px;margin:0;position:relative;overflow:hidden}.cup img{width:100%}.pin-layer{position:absolute;inset:0}.cup.is-looking:after{content:"";background:conic-gradient(from 0deg, transparent 0deg 300deg, color-mix(in srgb, var(--porcelain) 45%, transparent) 345deg, transparent 360deg);pointer-events:none;animation:2.8s linear infinite look-around;position:absolute;inset:-40%}@keyframes look-around{to{transform:rotate(1turn)}}.pin{border:2px solid var(--porcelain);background:var(--ink);width:28px;height:28px;color:var(--porcelain);font:600 13px/24px var(--font-text);text-align:center;cursor:pointer;border-radius:50%;margin:0;padding:0;animation:.32s cubic-bezier(.22,1,.36,1) backwards pin-in;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 6px #00000073}.pin.is-active{background:var(--accent);transform:translate(-50%,-50%)scale(1.18)}@keyframes pin-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.seeing{color:var(--ink-soft);flex-direction:column;gap:4px;margin:0;padding:0;font-size:18px;list-style:none;display:flex}.parts{flex-direction:column;gap:6px;display:flex}.part{border-radius:12px;margin:0 -12px;padding:10px 12px;line-height:1.6}.part[tabindex]{cursor:pointer}.part.is-active{background:var(--wash)}.part-pins{vertical-align:2px;gap:4px;margin-right:8px;display:inline-flex}.pin-ref{background:var(--ink);width:20px;height:20px;color:var(--porcelain);font:600 11px/20px var(--font-text);text-align:center;border-radius:50%;display:inline-block}.part.is-active .pin-ref{background:var(--accent)}.screen-reading .button{margin-top:8px}.helpline{font-size:18px;font-weight:600}@media (prefers-reduced-motion:reduce){.cup.is-looking:after{animation:none;display:none}.pin{animation:none}}