:root{--ink:#282826;--ink-50:rgba(40,40,38,.5);--ink-40:rgba(40,40,38,.4);--grey:#868686;--grey-2:#5c5c5c;--line:#d9d9d9;--white:#fff;--frost:hsla(0,0%,100%,.82);--frost-r:22px;--frost-sat:1.4;--page:#000;--tint-1:#eaeae8;--track:#e0dfd9;--accent:#5faf5a;--brew-wash:#bbdca6;--brew-tint:0.55;--brew-shade:0;--fit:1;--serif:"EB Garamond",Georgia,serif;--pad:16px;--label-size:8px;--label-track:0.1em;--label-inset:6px;--label-ink:var(--ink);--label-drop:8px;--e:cubic-bezier(0.22,0.61,0.36,1);--t-fast:120ms;--t-mid:220ms;--t-slow:420ms;--e-fan:cubic-bezier(0.16,1,0.30,1);--t-fan:520ms;--t-fan-out:420ms}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden}body{font-family:var(--serif);color:var(--ink);letter-spacing:-.002em;-webkit-font-smoothing:antialiased}.viewport,body{background:var(--page)}.viewport{position:fixed;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center}.frame{position:relative;width:1440px;height:840px;flex:none;transform:scale(var(--fit))}.webgl-layer{z-index:12}.grain,.webgl-layer{position:fixed;inset:0;pointer-events:none}.grain{z-index:40;background-image:var(--grain);background-repeat:repeat;opacity:.055;mix-blend-mode:overlay;animation:grain .7s step-end infinite}@keyframes grain{0%{background-position:0 0}12.5%{background-position:-37px 17px}25%{background-position:23px -41px}37.5%{background-position:-53px -29px}50%{background-position:47px 13px}62.5%{background-position:-19px 43px}75%{background-position:31px -11px}87.5%{background-position:-43px 37px}}@media (prefers-reduced-motion:reduce){.grain{animation:none}}.scrim{position:absolute;inset:-1400px;z-index:16;background:rgba(0,0,0,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity var(--t-mid) var(--e)}.scrim.open{opacity:1;pointer-events:auto}.panel{position:absolute;top:12px;width:699px;height:816px;border-radius:32px;overflow:hidden;transition:left var(--t-slow) var(--e)}.panel.sky{left:15px;background-color:#aecef3;background-image:url(/assets/sky.webp),linear-gradient(180deg,#b0cff4,#a8ccf4)}.panel.paper,.panel.sky{background-size:cover;background-position:50%;background-repeat:no-repeat}.panel.paper{left:726px;isolation:isolate;background-color:#dee0d4;background-image:url(/assets/words.webp),linear-gradient(105deg,#f2ead6,#e5e5d7 55%,#bccbc9)}.panel.paper:before{mix-blend-mode:color;opacity:var(--brew-tint);transition:background-color var(--t-slow) var(--e)}.panel.paper:after,.panel.paper:before{content:"";position:absolute;inset:0;background-color:var(--brew-wash);pointer-events:none}.panel.paper:after{mix-blend-mode:multiply;opacity:var(--brew-shade);transition:background-color var(--t-slow) var(--e),opacity var(--t-slow) var(--e)}.sky-layer{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .6s var(--e)}.panel.sky-live .sky-layer{opacity:1}.frame.intro .sky-layer{transition:none}.frame.mirrored .panel.sky{left:726px}.frame.mirrored .panel.paper{left:15px}.teapot-zone{--pot-grow:1.15;--pot-w:calc(556px * var(--pot-grow));--pot-h:calc(471px * var(--pot-grow));--pot-dx:calc((var(--pot-w) - 556px) / 2);--pot-dy:calc((var(--pot-h) - 471px) / 2);position:absolute;left:calc(112px - var(--pot-dx));top:calc(169px - var(--pot-dy));width:var(--pot-w);height:var(--pot-h);cursor:-webkit-grab;cursor:grab;touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;transition:left var(--t-slow) var(--e)}.teapot-zone:active{cursor:-webkit-grabbing;cursor:grabbing}.teapot-zone[data-phase=cooling]{cursor:default}.teapot-zone canvas{display:block;width:100%;height:100%;mix-blend-mode:multiply}.frame.mirrored .teapot-zone{left:calc(772px - var(--pot-dx))}.steam{left:300px;top:150px;width:0;height:0;pointer-events:none;z-index:6}.steam,.wisp{position:absolute}.wisp{bottom:0;left:-14px;width:26px;height:54px;border-radius:50%;background:radial-gradient(ellipse at center,hsla(0,0%,100%,.9),hsla(0,0%,100%,0));filter:blur(7px);opacity:0;animation:rise 9s ease-in-out infinite}.wisp:nth-child(2){animation-delay:3s;left:-3px}.wisp:nth-child(3){animation-delay:6s;left:-24px}@keyframes rise{0%{transform:translateY(8px);opacity:0}25%{opacity:.12}60%{opacity:.08}to{transform:translateY(-80px) translateX(8px) scaleX(1.5);opacity:0}}.w{z-index:20;background:var(--frost);backdrop-filter:blur(var(--frost-r)) saturate(var(--frost-sat));-webkit-backdrop-filter:blur(var(--frost-r)) saturate(var(--frost-sat))}.lbl,.w{position:absolute}.lbl{font-size:var(--label-size);line-height:1;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--label-ink);white-space:nowrap;padding-left:var(--label-track)}.lbl-b{bottom:var(--label-inset)}.lbl-c{transform:translateX(-50%)}.pot-name,.wlabel{font-size:var(--label-size);line-height:1;letter-spacing:var(--label-track);padding-left:var(--label-track);text-transform:uppercase;color:var(--label-ink);white-space:nowrap}.wlabel{position:absolute;z-index:20;transform:translateX(-50%)}.wlabel.at-puck{left:518px}.wlabel.at-clock,.wlabel.at-puck{top:calc(148px + var(--label-drop))}.wlabel.at-clock{left:638px}.wlabel.at-hand{left:638px;bottom:calc(100px + var(--label-drop))}.list-row:focus-visible,.tea:focus-visible,.w:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.puck{left:458px;top:28px;width:120px;height:120px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:-webkit-grab;cursor:grab;touch-action:none}.puck:active{cursor:-webkit-grabbing;cursor:grabbing}.puck canvas{width:92.547px;height:92.547px;margin:-8px;display:block}.puck .dot{position:absolute;right:7.52px;top:8.51px;width:5.103px;height:5.103px;border-radius:50%;background:var(--ink);opacity:.35;transition:opacity var(--t-mid) var(--e),background-color var(--t-mid) var(--e)}.puck[data-active=true] .dot{opacity:1;background:var(--accent)}.clock{left:578px;top:28px;width:120px;height:120px;border-radius:13.608px;overflow:hidden}.clock svg{position:absolute;inset:0}.clock .time{position:absolute;inset:0;line-height:.8;font-size:29.025px;color:var(--grey);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;z-index:2}.clock .time,.date{display:flex;flex-direction:column;align-items:center;justify-content:center}.date{left:742px;top:28px;width:40px;height:39px;border-radius:8px;gap:4px;overflow:hidden}.date .d{font-size:var(--label-size);line-height:10px;letter-spacing:var(--label-track);text-transform:uppercase;padding-left:var(--label-track);color:var(--ink)}.date .n{line-height:12px}.counter,.date .n{font-size:18px;font-weight:500;color:var(--ink)}.counter{left:1144px;top:28px;width:265px;height:39px;border-radius:4px 16px 4px 4px;overflow:hidden;display:flex;align-items:center;gap:6px;padding:0 0 0 12px;line-height:normal;white-space:nowrap;cursor:pointer;border:0;font-family:inherit;letter-spacing:inherit;text-align:left;transition:left var(--t-mid) var(--e),width var(--t-mid) var(--e)}.counter[aria-expanded=true]{left:1037px;width:372px}.counter .muted{color:var(--ink-50)}.counter .handle{position:absolute;right:12px;top:12px;width:16px;height:16px;display:grid;grid-template-columns:repeat(3,3px);grid-template-rows:repeat(3,3px);grid-gap:3.5px;gap:3.5px;align-content:center;justify-content:center;transition:opacity var(--t-mid) var(--e)}.counter .handle i{width:3px;height:3px;border-radius:50%;background:var(--ink)}.counter:hover .handle{opacity:.6}.counter[aria-expanded=true] .handle{opacity:.4}.list-open{position:absolute;left:742px;top:75px;width:667px;height:737px;background:var(--white);border-radius:4px;z-index:30;overflow:hidden;transform-origin:top right;opacity:0;transform:scale(.98) translateY(-6px);pointer-events:none;transition:opacity var(--t-mid) var(--e),transform var(--t-mid) var(--e),left var(--t-slow) var(--e)}.list-open.open{opacity:1;transform:none;pointer-events:auto}.list-scroll{height:100%;overflow-y:auto;padding:24px}.list-scroll::-webkit-scrollbar{width:4px}.list-scroll::-webkit-scrollbar-track{background:var(--line);border-radius:8px}.list-scroll::-webkit-scrollbar-thumb{background:#000;border-radius:8px}.list-row{display:block;width:100%;text-align:left;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:none;font-family:inherit;font-size:18px;line-height:1.5;letter-spacing:inherit;color:rgba(40,40,38,.72);cursor:pointer;transition:color var(--t-fast) var(--e)}.list-row:last-child{border-bottom:0}.list-row.current,.list-row:hover{color:var(--ink)}.tea-col{--goo:12px;left:1391px;top:50%;transform:translateY(-50%);width:34px;height:161px;border-radius:17px 0 0 17px;background:var(--page);display:flex;flex-direction:column;align-items:center;gap:13px;padding:12px 0}.tea-col:after,.tea-col:before{content:"";position:absolute;right:0;width:var(--goo);height:var(--goo);pointer-events:none}.tea-col:before{bottom:100%;background:radial-gradient(circle at 0 0,transparent calc(var(--goo) - .5px),var(--page) var(--goo))}.tea-col:after{top:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--goo) - .5px),var(--page) var(--goo))}.tea{width:12px;height:12px;flex:none;border-radius:50%;padding:0;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;border:1px solid hsla(0,0%,100%,.38);opacity:.45;transition:transform var(--t-fast) var(--e),opacity var(--t-fast) var(--e),border-color var(--t-fast) var(--e)}.tea:hover{opacity:.8}.tea{position:relative}.tea:after{content:"";position:absolute;inset:-6px;border-radius:50%}.tea:hover{transform:scale(1.25)}.tea.sel{opacity:1;border-color:#fff}.readout{position:absolute;left:816px;top:210px;width:520px;height:420px;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;--act-gap:22px;gap:var(--act-gap);text-align:center;transition:left var(--t-slow) var(--e)}.frame.mirrored .readout{left:104px}.poured{width:100%;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.2;color:#000}.poured.ghost{position:absolute;margin:0;height:auto;pointer-events:none}.poured .ch,.poured .word{display:inline-block}.poured .word{white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.handed{left:578px;top:740px;width:120px;height:72px;border-radius:16px;overflow:hidden;cursor:pointer;border:0;font-family:inherit}.handed .hand{--icon-art:32px 40px;position:absolute;top:14px;width:44px;height:44px;background-color:var(--line);-webkit-mask:var(--src) no-repeat center /var(--icon-art);mask:var(--src) no-repeat center /var(--icon-art);transition:background-color var(--t-mid) var(--e)}.handed .hand.l{left:10px;--src:url(/assets/hand-l.svg)}.handed .hand.r{left:66px;--src:url(/assets/hand-r.svg)}.handed .hand.on{background-color:var(--ink)}@supports not ((-webkit-mask-image:url("/assets/hand-l.svg")) or (mask-image:url("/assets/hand-l.svg"))){.handed .hand{background-color:transparent;background:var(--src) no-repeat center /var(--icon-art);opacity:.25}.handed .hand.on{opacity:1}}.handed .lr b{font-weight:400;color:var(--ink-40);transition:color var(--t-mid) var(--e)}.handed .lr .l{left:32px}.handed .lr .r{left:88px}.handed .lr b.on{color:var(--ink)}.teapots{position:absolute;left:31px;bottom:28px;width:96px;height:100px;z-index:22;cursor:pointer;transition:width var(--t-fan-out) var(--e-fan),height var(--t-fan-out) var(--e-fan)}.teapots:focus-within,.teapots:hover,.teapots[data-open=true]{width:212px;height:226px;transition-duration:var(--t-fan),var(--t-fan)}.pot-tile{position:absolute;left:0;bottom:0;width:71px;height:71px;padding:5.644px;border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--frost);backdrop-filter:blur(var(--frost-r)) saturate(var(--frost-sat));-webkit-backdrop-filter:blur(var(--frost-r)) saturate(var(--frost-sat));border:1px solid hsla(0,0%,100%,.9)}.pot-tile.sel{border-width:2px}.teapots .pot-tile.opt:hover{--lift:-10px;--pop:1.04;z-index:12;transition-duration:.18s,.18s;transition-delay:0ms}.pot-tile.base{z-index:10}.pot-tile.opt{z-index:calc(9 - var(--k));transform-origin:50% 92%;opacity:1;transform:translate(calc(var(--k) * 4px),calc(var(--k) * -5px)) rotate(calc(var(--k) * -2deg)) scale(1);pointer-events:none;transition:opacity var(--t-fan-out) var(--e-fan),transform var(--t-fan-out) var(--e-fan);transition-delay:calc((4 - var(--k)) * 40ms)}.teapots:focus-within .pot-tile.opt,.teapots:hover .pot-tile.opt,.teapots[data-open=true] .pot-tile.opt{opacity:1;pointer-events:auto;transform:translate(var(--tx),calc(-1 * var(--ty) + var(--lift, 0px))) rotate(var(--rot)) scale(var(--pop,1));transition-duration:var(--t-fan),var(--t-fan);transition-delay:calc(var(--k) * 55ms)}.pot-name{position:absolute;left:84px;top:50%;transform:translateY(-50%) rotate(calc(-1 * var(--rot, 0deg)));pointer-events:none;opacity:0;transition:opacity var(--t-fan-out) var(--e-fan)}.teapots:focus-within .pot-name,.teapots:hover .pot-name,.teapots[data-open=true] .pot-name{opacity:1;transition-duration:var(--t-fan);transition-delay:calc(var(--k) * 55ms + .11s)}.pot-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pot-tile img{width:100%;height:100%;object-fit:cover;border-radius:11px;opacity:0;transition:opacity .38s var(--e)}.pot-tile img.in{opacity:1}.pot-tile .ph{width:100%;height:100%;border-radius:11px;background:var(--tint-1);display:flex;align-items:center;justify-content:center}.pot-tile .ph svg{width:34px;height:34px;color:var(--ink);opacity:.35}.byline{position:absolute;left:1026px;top:796px;font-size:12px;font-weight:500;line-height:normal;color:var(--ink);z-index:20}.byline a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:opacity var(--t-fast) var(--e)}.byline a:hover{opacity:.6}.byline a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.frame.intro .panel{z-index:2;opacity:0}.frame.intro .panel.sky{z-index:3}.frame.intro .teapot-zone{z-index:14}.frame.intro .panel.sky{transform:translateX(calc(50% + 6px)) rotate(-5deg) scale(.52)}.frame.intro .panel.paper{transform:translateX(calc(-50% - 6px)) rotate(5deg) scale(.52)}.frame.intro .byline,.frame.intro .readout,.frame.intro .teapots,.frame.intro .title,.frame.intro .w,.frame.intro .wlabel{opacity:0}@media (prefers-reduced-motion:reduce){.wisp{animation:none}.counter .handle,.handed .hand,.handed .lr b,.list-open,.list-row,.panel,.readout,.scrim,.tea,.teapot-zone{transition-duration:1ms!important}}.title{position:absolute;left:31px;top:28px;z-index:20;font-size:18px;font-weight:500;line-height:1.3;color:var(--ink);pointer-events:none}.title span{display:block;white-space:nowrap}.pot-hint{position:absolute;left:0;top:0;z-index:21;pointer-events:none;will-change:transform;opacity:0;transition:opacity var(--t-mid) var(--e)}.pot-hint.on{opacity:1}.pot-hint span{display:block;transform:translate(16px,15px);background:var(--white);padding:7px 11px 7px calc(11px + var(--label-track));border-radius:8px;font-size:var(--label-size);line-height:1;letter-spacing:var(--label-track);text-transform:uppercase;white-space:nowrap;color:var(--ink)}.thought-actions{order:-1;display:flex;gap:14px;justify-content:center;opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity var(--t-slow) var(--e),transform var(--t-slow) var(--e)}.thought-actions.on{opacity:1;transform:none;pointer-events:auto}.thought-actions button{width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:10px;cursor:pointer;background:var(--frost);backdrop-filter:blur(var(--frost-r)) saturate(var(--frost-sat));-webkit-backdrop-filter:blur(var(--frost-r)) saturate(var(--frost-sat));border:0;color:var(--ink-50);transition:color var(--t-fast) var(--e),background-color var(--t-fast) var(--e)}.thought-actions button:hover{color:var(--ink);background:hsla(0,0%,100%,.86)}.thought-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.thought-actions svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4}.thought-actions .done{color:var(--ink)}.wlabel.at-brew{left:auto;right:31px;top:509px;transform:none}.wlabel.at-brew .swap{transition:opacity var(--t-fast) var(--e)}@media (max-width:768px){:root{--m-pad:16px;--m-pad-t:max(var(--m-pad),env(safe-area-inset-top,0px));--m-pad-b:max(var(--m-pad),env(safe-area-inset-bottom,0px));--m-gap:10px;--m-in:12px;--m-sky-btm:calc(50% + var(--m-gap) / 2);--m-paper-top:calc(50% + var(--m-gap) / 2);--m-brew-h:32px;--m-counter-h:44px;--m-fan-k:0.62;--label-size:8px;--frost-r:16px}.viewport{display:block;padding:var(--m-pad-t) var(--m-pad) var(--m-pad-b) var(--m-pad)}.frame{width:100%;height:100%;transform:none;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-gap:var(--m-gap);gap:var(--m-gap);padding:0}.panel{position:relative;left:auto;top:auto;width:auto;height:auto;border-radius:24px}.frame.mirrored .panel.sky,.panel.sky{grid-row:1;grid-column:1;left:auto}.frame.mirrored .panel.paper,.panel.paper{grid-row:2;grid-column:1;left:auto}.frame.mirrored .teapot-zone,.teapot-zone{position:relative;left:auto;top:auto;grid-row:1;grid-column:1;width:auto;height:auto;margin:var(--m-in);z-index:14;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.steam{left:50%;top:32%}.frame.intro .panel.sky{transform:translateY(calc(50% + var(--m-gap) / 2)) rotate(-5deg) scale(.52)}.frame.intro .panel.paper{transform:translateY(calc(-50% - var(--m-gap) / 2)) rotate(5deg) scale(.52)}.date,.handed,.puck,.wlabel.at-hand,.wlabel.at-puck{display:none}.clock{position:absolute;left:var(--m-in);top:var(--m-in);right:auto;width:var(--m-counter-h);height:var(--m-counter-h);border-radius:8px;z-index:22}.clock .time{font-size:10px}.wlabel.at-clock{display:none}.counter{position:absolute;left:auto;right:var(--m-in);top:var(--m-in);width:auto;height:var(--m-counter-h);padding:0 32px 0 12px;font-size:15px;z-index:32}.counter>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.counter[aria-expanded=true]{left:auto;width:auto}.counter .handle{right:10px;top:50%;transform:translateY(-50%)}.teapots{left:var(--m-in);bottom:calc(var(--m-sky-btm) + var(--m-in));top:auto;right:auto;z-index:24;width:60px;height:62px}.teapots:focus-within,.teapots:hover,.teapots[data-open=true]{width:132px;height:140px}.teapots .pot-tile,.teapots .pot-tile.opt{width:var(--m-counter-h);height:var(--m-counter-h);padding:2px;border-radius:10px}.teapots .pot-tile .ph,.teapots .pot-tile img{border-radius:8px}.teapots .pot-tile .ph svg{width:24px;height:24px}.teapots .pot-tile.opt{transform:translate(calc(var(--k) * 2.5px),calc(var(--k) * -3px)) rotate(calc(var(--k) * -2deg))}.teapots:focus-within .pot-tile.opt,.teapots:hover .pot-tile.opt,.teapots[data-open=true] .pot-tile.opt{transform:translate(calc(var(--tx) * var(--m-fan-k)),calc((-1 * var(--ty) + var(--lift, 0px)) * var(--m-fan-k))) rotate(var(--rot)) scale(var(--pop,1))}.pot-name{display:none}.tea-col{left:50%;right:auto;bottom:auto;top:var(--m-paper-top);transform:translateX(-50%);width:auto;height:auto;flex-direction:row;align-items:center;background:var(--page);border-radius:0 0 16px 16px;padding:8px;gap:18px;z-index:23}.tea-col:after,.tea-col:before{bottom:auto;top:0;width:var(--goo);height:var(--goo)}.tea-col:before{right:100%;left:auto;background:radial-gradient(circle at 0 100%,transparent calc(var(--goo) - .5px),var(--page) var(--goo))}.tea-col:after{left:100%;right:auto;background:radial-gradient(circle at 100% 100%,transparent calc(var(--goo) - .5px),var(--page) var(--goo))}.tea{width:16px;height:16px;position:relative}.tea:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%}.wlabel.at-brew{display:none}.title{position:absolute;left:50%;right:auto;transform:translateX(-50%);top:calc(var(--m-paper-top) + var(--m-brew-h) + 12px);z-index:22;font-size:13px;line-height:1.25;text-align:center}.frame.mirrored .readout,.readout{position:relative;left:auto;top:auto;grid-row:2;grid-column:1;width:auto;height:auto;padding:calc(var(--m-brew-h) + 52px) var(--m-in) 46px;--act-gap:14px;z-index:15}.poured{font-size:clamp(15px,4.8vw,21px)}.byline{left:50%;right:auto;top:auto;bottom:var(--m-in);transform:translateX(-50%);text-align:center;font-size:11px;white-space:nowrap;z-index:21}.scrim{position:fixed;inset:0}.list-open{position:fixed;left:var(--m-pad);right:var(--m-pad);top:calc(var(--m-pad-t) + var(--m-in) + var(--m-counter-h) + 10px);bottom:var(--m-pad-b);width:auto;height:auto;border-radius:20px;transform-origin:top center}.list-scroll{padding:20px;-webkit-overflow-scrolling:touch}.list-row{font-size:16px;padding:14px 0;min-height:44px}}