:root{--paper:#fff;--ink:#111112;--grey:#86868b;--faint:#efeef0;--card:#fff;--shadow:0 0 0 .5px #00000014, 0 1px 3px #0000000d, 0 18px 44px -14px #280a1942;--v0:#b0154f;--v1:#e8336f;--v2:#ff9cbc;--glow:none}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#07080b;--ink:#eef0f5;--grey:#7c8090;--faint:#161921;--card:#0f1117;--shadow:0 18px 50px -18px #000c, 0 0 0 1px #1d212b;--v0:#3b2bd9;--v1:#ff4fa3;--v2:#27d8ff;--glow:drop-shadow(0 0 10px #ff4fa347);color-scheme:dark}}:root[data-theme=dark]{--paper:#07080b;--ink:#eef0f5;--grey:#7c8090;--faint:#161921;--card:#0f1117;--shadow:0 18px 50px -18px #000c, 0 0 0 1px #1d212b;--v0:#3b2bd9;--v1:#ff4fa3;--v2:#27d8ff;--glow:drop-shadow(0 0 10px #ff4fa347);color-scheme:dark}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--grey);font:400 17px/1.55 var(--sans);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));margin:0;padding-block:0 72px;transition:background-color .5s,color .5s}b,strong{color:var(--ink);font-weight:500}a{color:var(--ink);text-decoration:none;transition:color .15s}a:hover{color:var(--grey)}canvas:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:2px}.mono{color:var(--grey)}.dish{max-width:640px;margin:72px auto 0;position:relative}#org{touch-action:pan-y;cursor:crosshair;width:100%;filter:var(--glow);display:block}.fig{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;max-width:640px;margin:26px auto 0;font-size:14px;line-height:1.45;display:flex}.fig .what{align-items:baseline;gap:10px;display:flex}.fig .no{color:var(--ink)}.fig .dot{background:var(--v1);width:7px;height:7px;box-shadow:0 0 0 0 var(--v1);border-radius:50%;flex:none;align-self:center;animation:2.8s ease-out infinite pulse}@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--v1) 45%, transparent)}70%,to{box-shadow:0 0 0 7px #0000}}.fig .what b{font-variant-numeric:tabular-nums}.fig .hint{opacity:.55;gap:12px;transition:opacity .3s;display:flex}.fig .hint span{align-items:center;gap:6px;display:inline-flex}.fig .hint i{border:1px solid var(--faint);min-width:18px;height:18px;font-style:normal;font:400 10px/1 var(--mono);color:var(--ink);border-radius:5px;place-items:center;padding:0 5px;display:inline-grid}.dish:hover+.fig .hint{opacity:1}@media (prefers-reduced-motion:reduce){.fig .dot{animation:none}}.col{max-width:640px;margin:0 auto}.intro{letter-spacing:-.015em;text-wrap:pretty;margin-top:88px;font-size:24px;line-height:1.4}.intro p{margin:0}.intro p+p{margin-top:20px}section.list{margin-top:72px}h2{font:500 15px/1.4 var(--sans);color:var(--ink);letter-spacing:-.006em;margin:0 0 14px}.list ul{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.list li{border-top:1px solid var(--faint);grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:10px 0;display:grid;position:relative}.list li:last-child{border-bottom:1px solid var(--faint)}.list li:has(>span:only-child){grid-template-columns:minmax(0,1fr)}.list li .mono{text-align:right}.list li:has(.mono) span:first-child>strong:first-child{margin-right:.3em}.row{display:contents}.list a.row{color:var(--grey)}.list a.row span:first-child{transition:color .15s}.list a.row:hover span:first-child{color:var(--ink)}.list a.row .mono{transition:transform .45s var(--ease-answer), color .15s ease}.list a.row:hover .mono{color:var(--ink);transform:translate(-18px)}.list a.row:after{content:"↗";font:400 12px/1 var(--mono);color:var(--v1);opacity:0;transition:opacity .15s ease, transform .45s var(--ease-answer);position:absolute;top:50%;right:0;transform:translate(-6px,-50%)}.list a.row:hover:after{opacity:1;transform:translateY(-50%)}.list a.row[href^=mailto\:] .mono{font:inherit;letter-spacing:inherit;color:var(--ink);cursor:pointer}.list a.row[href^=mailto\:]:hover .mono{color:var(--grey);transform:none}.list a.row[href^=mailto\:]:after{content:none}.peek{z-index:20;pointer-events:none;opacity:0;filter:blur(4px);transform-origin:0 0;background:var(--card);width:300px;box-shadow:var(--shadow);transition:opacity .15s var(--ease-fade), transform .2s var(--ease-fade), filter .15s var(--ease-fade);border-radius:14px;padding:6px;position:fixed;top:0;left:0;overflow:hidden;transform:scale(.96)}.peek.on{opacity:1;filter:blur();transition:opacity .3s var(--ease-fade), transform .45s var(--ease-answer), filter .35s var(--ease-arrive);transform:scale(1)}.peek .shot{aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--faint);border-radius:9px;width:100%;display:block}.peek .tile{aspect-ratio:16/10;background:var(--faint);border-radius:9px;flex-direction:column;justify-content:flex-end;gap:4px;padding:16px;display:flex}.peek .tile strong{font:600 22px/1.1 var(--sans);color:var(--ink);letter-spacing:-.02em}.peek .tile canvas{width:100%;height:auto;margin-bottom:auto}.peek .meta{flex-direction:column;gap:2px;padding:10px 8px 7px;display:flex}.peek .meta b{font-size:14px}.peek .meta span{font-size:13px;line-height:1.4}.rise{animation:rise-fade 1.2s var(--ease-fade) both, rise-move 1.1s var(--ease-arrive) both}@keyframes rise-fade{0%{opacity:0}}@keyframes rise-move{0%{transform:translateY(12px)}}.dish.rise{animation:rise-fade 1.4s var(--ease-fade) both, focus 1.2s var(--ease-arrive) backwards}@keyframes focus{0%{filter:blur(10px)}}.intro .w{animation:rise-fade 1.1s var(--ease-fade) backwards, focus-sm .9s var(--ease-arrive) backwards;animation-delay:calc(.7s + var(--i) * 45ms);display:inline-block}@keyframes focus-sm{0%{filter:blur(6px)}}.js .reveal h2,.js .reveal li{opacity:0;filter:blur(4px);transform:translateY(14px)}.js .reveal.in h2,.js .reveal.in li{opacity:1;filter:blur();transition:opacity 1.1s var(--ease-fade), transform 1s var(--ease-arrive), filter .9s var(--ease-arrive);transition-delay:calc(var(--i,0) * 60ms);transform:none}.edge{z-index:5;pointer-events:none;height:11vh;transition:opacity .6s var(--ease-fade);position:fixed;bottom:0;left:0;right:0}.edge span{backdrop-filter:blur(var(--b));-webkit-mask-image:linear-gradient(transparent var(--a), #000 var(--z));mask-image:linear-gradient(transparent var(--a), #000 var(--z));position:absolute;inset:0}.edge:after{content:"";background:linear-gradient(transparent, color-mix(in srgb, var(--paper) 85%, transparent));position:absolute;inset:0}.end .edge{opacity:0}@media (prefers-reduced-motion:reduce){.rise,.dish.rise,.intro .w{animation:none}.js .reveal h2,.js .reveal li{opacity:1;filter:none;transform:none}body{transition:none}}@media (width<=560px){.intro{font-size:21px}.dish{margin-top:56px}}
