@font-face{font-family:Chunk;src:url('../assets/bucko.woff2')}*{box-sizing:border-box}body{margin:0;background:#faf8f2;color:#214edc;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}header,footer{display:flex;align-items:center;gap:24px;padding:0 36px;font-size:12px;letter-spacing:.02em}header{height:64px}header a{opacity:.45}header a[aria-current],header a:hover{opacity:1}header span{margin-left:auto}footer{height:48px;justify-content:space-between;color:#7a7a81}.grid{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(7,1fr);height:calc(100svh - 112px);min-height:580px;padding:0 28px;position:relative;gap:0}.hero{grid-column:4/7;grid-row:3/6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:1}h1{font-family:Chunk,sans-serif;font-weight:normal;font-size:clamp(76px,9.3vw,150px);line-height:.86;margin:0;letter-spacing:-.045em}.hero p{font-family:inherit;font-size:clamp(22px,2.3vw,34px);line-height:1.18;letter-spacing:-.045em;margin:24px 0 28px}.hero em{font-weight:normal}.actions{display:flex;gap:10px;margin-top:26px}.actions a{height:48px;min-width:104px;display:grid;place-items:center;border:1px solid #214edc30;border-radius:28px;font-size:14px}.actions .primary{background:#214edc;color:#fff;border-color:#214edc}.object{border:0;background:none;padding:10px;display:grid;place-items:center;cursor:pointer;position:relative;min-width:0;min-height:0}.object img{width:min(100%,62px);height:auto;aspect-ratio:1;transition:opacity .2s;pointer-events:none}.object:hover canvas,.object[aria-expanded=true] canvas{filter:none}.object:focus,.grid:focus,.grid canvas:focus{outline:none}.object:focus-visible img{filter:brightness(1.12)}#conversation{position:fixed;z-index:4;width:268px;padding:28px 8px 8px;background:transparent}#conversation[hidden]{display:none}.example{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#707078;margin:0 0 12px 8px}.messages{display:flex;flex-direction:column;gap:8px}.bubble{max-width:94%;font-size:13px;line-height:1.35;padding:10px 13px;border-radius:20px;margin:0;animation:arrive .23s ease-out both;box-shadow:0 2px 5px #00000004}.bubble.user{background:#287bfa;color:white;align-self:flex-end;border-bottom-right-radius:5px}.bubble.bucko{background:#e8e7eb;color:#26262a;align-self:flex-start;border-bottom-left-radius:5px;animation-delay:.12s}.close{position:absolute;right:12px;top:2px;border:0;background:none;font-size:26px;color:#707078;cursor:pointer;width:32px;height:32px}@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@media(max-width:650px){header{padding:0 20px;height:52px;gap:18px}header span{display:none}.grid{padding:0 10px;height:calc(100svh - 96px);min-height:640px;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(8,1fr)}.hero{grid-column:1/6;grid-row:4/6}h1{font-size:clamp(90px,25vw,150px)}.hero p{font-size:23px;margin:16px 0 18px}.hero p br{display:none}.hero em{display:block}.object{padding:8px}.object img{width:44px;max-width:100%}footer{padding:0 20px;height:44px;font-size:10px}footer span:first-child{display:none}footer span:last-child{margin:auto}#conversation{width:min(340px,calc(100vw - 24px));padding:38px 20px 24px;background:#faf8f2b8;border-radius:24px}body.chat-open:after{content:'';position:fixed;inset:0;z-index:3;background:#faf8f240;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.bubble{font-size:17px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(min-width:651px){#conversation{padding-top:8px}.close{display:none}}

/* The wordmark and actions occupy the same row tracks as the illustrations. */
.hero{display:contents}
.hero h1{grid-column:4/7;grid-row:3;align-self:center;justify-self:center;z-index:1;font-size:clamp(76px,8.8vw,140px)}
.hero .actions{grid-column:4/7;grid-row:4;align-self:center;justify-self:center;margin:0;z-index:1}
@media(min-width:651px){.grid{grid-template-rows:repeat(6,1fr)}}
@media(max-width:650px){.hero h1{grid-column:1/6;grid-row:4;font-size:clamp(90px,25vw,150px)}.hero .actions{grid-column:1/6;grid-row:5}}

.object img{transform:translateX(var(--nudge,0px));transition:transform 240ms cubic-bezier(.2,.8,.2,1),opacity .2s}

header .header-signin{margin-left:auto;opacity:1;font-size:14px}.actions .primary{min-width:168px;height:56px;font-size:16px}

body{overflow:hidden}header,footer{position:relative;z-index:2;background:#faf8f2}
.grid{display:block;padding:0;min-height:0!important;height:calc(100svh - 112px);overflow:hidden;touch-action:none;cursor:grab;outline-offset:-3px}
.grid-tile{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(6,1fr);contain:layout paint;will-change:transform}
.grid.dragging,.grid.dragging .object{cursor:grabbing}.grid.dragging .object{pointer-events:none}.grid-tile{user-select:none;-webkit-user-select:none}
@media(max-width:650px){.grid{height:calc(100svh - 96px)}.grid-tile{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(8,1fr)}}

body{position:fixed;inset:0}.grid{overflow:clip}

.object img{transform:translateX(var(--nudge,0px)) scale(var(--growth,1));transition:transform 320ms cubic-bezier(.2,.8,.2,1)}
.object[aria-expanded=true]{--growth:1.08}.grid.moving .object{pointer-events:none}
.object[aria-expanded=true]{--growth:1.22}
.grid,header,footer{transition:opacity 420ms ease}
.detail-open .grid,.detail-open header,.detail-open footer{opacity:0;pointer-events:none}
.usecase{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#214edc;overflow:hidden}
.usecase::backdrop{background:transparent}.detail-close{position:absolute;right:32px;top:22px;width:48px;height:48px;border:1px solid #214edc25;background:#faf8f2;border-radius:50%;color:#214edc;font-size:28px;cursor:pointer;z-index:2}
.detail-art{position:absolute;width:min(32vw,420px);aspect-ratio:1;left:calc(25% - min(16vw,210px));top:50%;transform:translateY(-50%)}
.flying-art{position:fixed;transform-origin:top left;pointer-events:none}
.detail-copy{position:absolute;left:54%;width:min(38%,460px);top:50%;transform:translateY(-50%);animation:copy-in 650ms both cubic-bezier(.22,1,.36,1)}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px}.detail-copy h2{font-family:inherit;font-weight:normal;font-size:clamp(36px,4vw,60px);line-height:1.02;letter-spacing:-.045em;margin:0 0 22px}.description{font-size:17px;line-height:1.55;color:#67666b;margin:0 0 30px}.detail-messages{display:flex;flex-direction:column;gap:10px}.detail-messages .bubble{font-size:16px;padding:13px 18px;animation:none}.detail-note{font-size:11px;color:#88878b;margin-top:20px}.leaving .detail-copy{opacity:0;transition:opacity 180ms;animation:none}
@keyframes copy-in{0%,25%{opacity:0;translate:0 16px}100%{opacity:1;translate:0 0}}
@media(max-width:650px){.usecase{overflow-y:auto}.detail-close{right:16px;top:14px}.detail-art{width:140px;left:calc(50% - 70px);top:70px;transform:none}.detail-copy{position:relative;left:auto;top:auto;transform:none;width:auto;margin:240px 26px 40px}.detail-copy h2{font-size:38px}.description{font-size:15px;margin-bottom:22px}.detail-messages .bubble{font-size:15px}}

@media(max-width:650px){.grid-tile{grid-template-rows:repeat(9,1fr)}}

.layout-picker{display:flex;align-items:center;gap:8px;margin-left:14px;font-size:11px;color:#787782}.layout-picker select{font:inherit;color:#214edc;border:1px solid #214edc22;border-radius:16px;background:transparent;padding:6px 10px}
.grid-tile{contain:layout}.object{transition:translate 500ms cubic-bezier(.22,1,.36,1)}
[data-layout=staggered] .object{translate:var(--stagger) 0}
[data-layout=scattered] .object{translate:var(--scatter-x) var(--scatter-y)}
.object img{object-fit:contain;opacity:var(--art-opacity,1);transform:translateX(var(--nudge,0px)) rotate(var(--rotation,0deg)) scale(var(--growth,1));transition:transform 440ms cubic-bezier(.22,1,.36,1),opacity 350ms ease}
[data-layout=scattered] .object img{--rotation:var(--tilt)}.object[aria-expanded=true]{z-index:2}
#conversation{isolation:isolate}#conversation::before{content:'';position:absolute;inset:-38px;z-index:-1;pointer-events:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:#faf8f24d;mask-image:radial-gradient(ellipse,black 25%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,black 25%,transparent 72%)}
.hero{display:flex;position:relative;grid-column:4/7;grid-row:3/5;flex-direction:column;align-items:center;justify-content:center;gap:22px;margin:12px 0;z-index:1}
.hero-border{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#214edc;stroke-width:1.8;opacity:.65}
.hero h1{font-size:clamp(64px,7.4vw,116px);grid-area:auto}.hero .actions{grid-area:auto;margin:0}.hero .primary{height:50px;min-width:140px}.hero-border path{vector-effect:non-scaling-stroke}
@media(max-width:650px){header{gap:10px}.layout-picker{margin-left:0;font-size:0}.layout-picker select{font-size:11px;max-width:95px;padding:5px}header .header-signin{font-size:12px}.hero{grid-column:1/6;grid-row:4/6;margin:4px 16px;gap:13px}.hero h1{font-size:clamp(64px,19vw,104px)}.hero .primary{height:44px;min-width:130px}.hero-border{stroke-width:1.2}}

.grid>.hero{visibility:hidden}

#conversation{user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}#conversation .bubble{cursor:grab}.grid.dragging~#conversation{pointer-events:none}
[data-layout=staggered] .object img{--rotation:0deg}
@media(max-width:650px){[data-layout=scattered] .object{translate:calc(var(--scatter-x)*.55) calc(var(--scatter-y)*.55)}}

.fixed-wordmark{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;font-size:clamp(110px,24vw,380px);line-height:.9;z-index:0;pointer-events:none;user-select:none;letter-spacing:-.045em;transition:opacity 420ms ease}
.grid{z-index:1;background:transparent}.detail-open .fixed-wordmark{opacity:0}
.header-auth{margin-left:auto;display:flex;align-items:center;gap:18px}.header-auth a{opacity:1;font-size:14px}.header-auth .header-signup{display:grid;place-items:center;min-width:94px;height:40px;border-radius:24px;background:#214edc;color:white}
@media(max-width:650px){.header-auth{gap:10px}.header-auth a{font-size:12px}.header-auth .header-signup{min-width:70px;height:36px}.fixed-wordmark{font-size:26vw}.layout-picker select{max-width:80px}header{padding:0 12px;gap:8px}}
header a{white-space:nowrap}@media(max-width:650px){header>a[href="/"],header>a[href="/page-flip/"]{display:none}}

:root{color-scheme:light dark;--page:#faf8f2;--ink:#214edc;--watermark:#e1e0dd;--muted:#737277;--reply:#e8e7eb;--reply-ink:#26262a;--veil:#faf8f24d}
body,header,footer{background:var(--page);color:var(--ink)}.fixed-wordmark{color:var(--watermark)}footer,.layout-picker,.detail-note{color:var(--muted)}.description{color:var(--muted)}.usecase{color:var(--ink)}.detail-close{background:var(--page);color:var(--ink);border-color:var(--muted)}.bubble.bucko{background:var(--reply);color:var(--reply-ink)}#conversation::before{background:var(--veil)}.layout-picker select{color:var(--ink);background:var(--page);border-color:var(--muted)}
[data-layout=scattered] .object{position:absolute;grid-area:auto;left:var(--scatter-left);top:var(--scatter-top);width:88px;height:88px;translate:-50% -50%}
@media(prefers-color-scheme:dark){:root{--page:#1d1b19;--ink:#91a9ff;--watermark:#34302c;--muted:#aaa49c;--reply:#39342f;--reply-ink:#f4efe7;--veil:#1d1b1966}#conversation{background:transparent}body.chat-open:after{background:#1d1b1940}.header-auth .header-signup{background:#496dea}.bubble.user{background:#326dde}}
@media(max-width:650px){[data-layout=scattered] .object{width:62px;height:62px;translate:-50% -50%}#conversation{background:var(--veil)}}
[data-layout=scattered] .object{grid-area:auto!important}
[data-layout=scattered] .object img{--rotation:calc(var(--tilt)*.45)}

.intro-tagline{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:clamp(28px,3.8vw,52px);line-height:1.1;letter-spacing:-.04em;color:var(--ink);z-index:0;animation:tagline-in 200ms ease both}
.intro-tagline br{display:none}.intro-tagline em{display:block}
.intro-pending .fixed-wordmark,.intro-pending .grid,.intro-pending header,.intro-pending footer{opacity:0;pointer-events:none}
.intro-playing .intro-tagline{animation:tagline-out 300ms 600ms both ease}
.intro-playing .fixed-wordmark{color:#214edc;mask:url(#logo-drawing);-webkit-mask:url(#logo-drawing);animation:logo-settle 500ms 1150ms both ease}
.intro-playing .logo-pencil{stroke-dasharray:1;stroke-dashoffset:1;animation:pencil-in 650ms 600ms both cubic-bezier(.35,0,.2,1)}
.grid.art-entering .object{animation:art-arrives 650ms var(--arrival-delay,0ms) both cubic-bezier(.22,1,.36,1)}
.intro-playing header,.intro-playing footer{animation:controls-arrive 400ms 1600ms both ease}
@keyframes tagline-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes tagline-out{to{opacity:0;filter:blur(3px)}}
@keyframes pencil-in{to{stroke-dashoffset:0}}
@keyframes logo-settle{from{color:#214edc}to{color:var(--watermark)}}
@keyframes art-arrives{from{opacity:0;scale:.72}to{opacity:1;scale:1}}
@keyframes controls-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.intro-tagline{display:none}.intro-pending .fixed-wordmark{opacity:1}}

header{position:fixed;right:24px;top:18px;height:auto;padding:0;background:transparent;z-index:3}.header-auth{gap:10px}.header-auth .header-signin{display:grid;place-items:center;min-width:94px;height:40px;border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:24px;transition:background 180ms ease}.header-auth .header-signin:hover{background:color-mix(in srgb,var(--ink) 10%,var(--page))}.grid{height:calc(100svh - 48px)}
.intro-tagline{gap:12px;padding:24px;text-align:center}.intro-tagline span{font-size:clamp(16px,1.8vw,23px);letter-spacing:-.015em}.intro-tagline strong{font-weight:500;line-height:1.12}
@media(max-width:650px){header{right:16px;top:14px}.header-auth .header-signin,.header-auth .header-signup{height:40px;min-width:78px}.grid{height:calc(100svh - 44px)}.intro-tagline strong{max-width:310px}footer span:first-child{display:block;font-size:10px;max-width:230px}footer span:last-child{display:none}}
.header-auth .header-signin{background:var(--page)}

.grid-tile{inset:auto;left:0;top:0;width:1260px;height:840px;grid-template-columns:repeat(9,140px);grid-template-rows:repeat(6,140px)}

.intro-tagline{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:clamp(15px,1.5vw,20px);line-height:1.5;letter-spacing:-.015em;translate:0 36px;gap:0;animation:none}.intro-tagline br{display:block}
.intro-pending .intro-tagline{opacity:0}
.intro-playing .intro-tagline{animation:intro-description 950ms both ease}
.intro-playing .fixed-wordmark{mask:none;-webkit-mask:none;animation:logo-expand 1100ms 700ms both cubic-bezier(.22,1,.36,1);transition:none}
.intro-playing header,.intro-playing footer{animation:controls-arrive 400ms 1900ms both ease}
@keyframes intro-description{0%{opacity:0}20%,68%{opacity:1}100%{opacity:0}}
@keyframes logo-expand{from{transform:translate(-50%,-50%) translateY(-34px) scale(var(--intro-scale,.18));color:#214edc}to{transform:translate(-50%,-50%) translateY(0) scale(1);color:var(--watermark)}}

.grid{height:100svh}
.intro-tagline{font-size:clamp(22px,2.6vw,34px);line-height:1.4;translate:0 58px;padding:24px;letter-spacing:-.025em}
.intro-playing .intro-tagline{animation:intro-description-readable 3400ms 350ms both ease}
.intro-playing .fixed-wordmark{animation:logo-expand 1100ms 3450ms both cubic-bezier(.22,1,.36,1)}
.intro-playing header{animation:controls-arrive 400ms 4650ms both ease}
@keyframes intro-description-readable{0%{opacity:0;translate:0 66px}12%,88%{opacity:1;translate:0 58px}100%{opacity:0;translate:0 58px}}
@media(max-width:650px){.grid{height:100svh}.intro-tagline{font-size:22px;line-height:1.35}}

.fixed-wordmark::after{content:attr(data-wordmark);position:absolute;inset:0;color:#214edc;clip-path:inset(0 100% 0 0);pointer-events:none}
.intro-playing .fixed-wordmark{color:var(--watermark);animation:logo-expand-timed 1100ms 3750ms both cubic-bezier(.22,1,.36,1)}
.intro-playing .fixed-wordmark::after{animation:reading-fill 3000ms 350ms both linear,reading-reset 300ms 3400ms both ease}
.intro-playing .intro-tagline{animation:intro-description-readable 3550ms 350ms both ease}
@keyframes reading-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes reading-reset{from{opacity:1}to{opacity:0}}
@keyframes logo-expand-timed{from{transform:translate(-50%,-50%) translateY(-34px) scale(var(--intro-scale,.18))}to{transform:translate(-50%,-50%) translateY(0) scale(1)}}
.intro-playing header{animation:controls-arrive 400ms 4950ms both ease}

.intro-playing .fixed-wordmark{animation:small-logo-enter 450ms both cubic-bezier(.22,1,.36,1),logo-expand-timed 1100ms 3750ms both cubic-bezier(.22,1,.36,1)}
@keyframes small-logo-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.intro-playing .fixed-wordmark::after{animation:reading-fill 3000ms 350ms both cubic-bezier(.42,0,.58,1),reading-reset 300ms 3400ms both ease}
.intro-playing .fixed-wordmark{animation:small-logo-enter 450ms both cubic-bezier(.22,1,.36,1),logo-expand-timed 1100ms 3750ms both linear}
@keyframes logo-expand-timed{
 0%{transform:translate(-50%,-50%) translateY(-34px) scale(var(--intro-scale,.18));animation-timing-function:cubic-bezier(.4,0,.6,1)}
 16%{transform:translate(-50%,-50%) translateY(-34px) scale(calc(var(--intro-scale,.18)*.91));animation-timing-function:cubic-bezier(.16,.8,.25,1)}
 100%{transform:translate(-50%,-50%) translateY(0) scale(1)}
}

.intro-tagline{color:var(--reply-ink)}

header.waitlist{display:block;top:auto;right:auto;left:50%;bottom:calc(max(24px,env(safe-area-inset-bottom)) + 28px);transform:translateX(-50%);width:min(340px,calc(100% - 48px));box-sizing:border-box;padding:8px 10px 8px 8px;background:color-mix(in srgb,var(--page) 94%,transparent);color:var(--reply-ink);border:1px solid color-mix(in srgb,var(--reply-ink) 12%,transparent);border-radius:32px;backdrop-filter:blur(20px);box-shadow:0 8px 40px #0000000d;z-index:5}
.waitlist-row{display:flex;align-items:center;gap:8px}.waitlist input{min-width:0;width:100%;height:48px;padding:0 15px;border:1px solid color-mix(in srgb,var(--reply-ink) 16%,transparent);border-radius:12px;background:var(--page);color:var(--reply-ink);font:inherit;font-size:16px;box-sizing:border-box}.waitlist-row input{border:0;border-radius:24px;background:transparent}.waitlist input::placeholder{color:var(--muted);opacity:1}.waitlist input[type="tel"]:focus{outline:none}.waitlist button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.waitlist-row button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:#214edc;color:white;font:inherit;cursor:pointer}.waitlist-row button:hover{background:#1940bc}.waitlist h2{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:25px;letter-spacing:-.035em;line-height:1.15;margin:0 0 10px;outline:none}.waitlist p{color:var(--muted);font-size:15px;line-height:1.4;margin:0 0 18px}.waitlist-back{display:block;background:none;border:0;padding:14px 0 0;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}.waitlist [hidden]{display:none!important}#waitlist-next{padding:12px;animation:waitlist-reveal 300ms both ease-out}@keyframes waitlist-reveal{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:420px){header.waitlist{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 28px)}}

html{height:100%;overflow:hidden;overscroll-behavior:none}body{overscroll-behavior:none}.grid{-webkit-user-select:none;user-select:none;overscroll-behavior:none}
@media(max-width:650px){.grid-tile{width:1080px;height:720px;grid-template-columns:repeat(9,120px);grid-template-rows:repeat(6,120px)}header.waitlist{touch-action:none}.waitlist input{touch-action:manipulation}}

.copyright{position:absolute;top:calc(100% + 10px);left:0;width:100%;text-align:center;font-size:11px;line-height:16px;letter-spacing:0;color:var(--muted)}
.copyright a{color:inherit;text-underline-offset:2px}
@media(max-width:650px){.fixed-wordmark{top:calc(50% - 16px)}}

.usecase,.usecase .detail-close{color:var(--reply-ink)}.usecase .description{color:var(--muted)}
@media(max-width:650px){.detail-copy h2{text-align:center;font-weight:700}}

.glass-surface{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1}.glass-surface canvas{position:absolute;left:-32px;top:-32px}.waitlist.glass-ready{isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;box-shadow:0 6px 18px #00000010}.glass-ready .waitlist-row input{background:transparent}

.waitlist-row button{background:color-mix(in srgb,var(--reply-ink) 8%,transparent);color:var(--muted);border:1px solid color-mix(in srgb,var(--reply-ink) 15%,transparent);box-shadow:inset 0 1px 1px #ffffff65,inset 0 -1px 1px #ffffff18;transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease}.waitlist-row button:disabled{cursor:default;background:color-mix(in srgb,var(--reply-ink) 5%,transparent);color:var(--muted)}.waitlist-row button:not(:disabled){background:#214edc99;color:white;border-color:#8da5ff60;box-shadow:inset 0 1px 2px #ffffff99,inset 0 -1px 1px #ffffff25,0 2px 8px #00000012}.waitlist-row button:not(:disabled):hover{background:#214edcbb}

/* A light frost softens busy artwork while keeping the refractive rim. */
.glass-surface::after{content:"";position:absolute;inset:0;border-radius:inherit;background:color-mix(in srgb,var(--glass-tint,#fffefa) 32%,transparent);pointer-events:none}

/* Vertical rim light — iOS 27 liquid glass, not the older diagonal catchlight. */
.waitlist.glass-ready::after,.about-info.glass-ready::after,.nav-signin.glass-ready::after,.view-switch.glass-ready::after,.glass-close.glass-ready::after,.detail-composer.glass-ready::after,.waitlist-row button::after{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;z-index:1;background:linear-gradient(90deg,#ffffffc4,#ffffff24 14%,#ffffff10 50%,#ffffff24 86%,#ffffffb0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.waitlist-row button{position:relative}

.about-info.glass-ready,.waitlist-row button,.waitlist-row button:not(:disabled){border-color:transparent;box-shadow:none}

@media(prefers-color-scheme:dark){.glass-surface{--glass-tint:#3e3832}}

#waitlist-form button:disabled{background:#eeece8f5;color:#77787e}
#waitlist-form button:not(:disabled){background:#214edcf5}
#waitlist-form button:not(:disabled):hover{background:#1940bcfa}
@media(prefers-color-scheme:dark){#waitlist-form button:disabled{background:#4b443df5;color:#c8bfb4}}

:is(.about-close,.detail-close,.signup-close).glass-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:50%;color:var(--reply-ink);background:color-mix(in srgb,var(--page) 70%,transparent);font:300 28px/1 system-ui;cursor:pointer;box-shadow:none}
:is(.about-close,.detail-close,.signup-close).glass-ready{isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

@media(max-width:650px){
 body::before,body::after{content:"";position:fixed;inset:auto 0 0;height:calc(200px + env(safe-area-inset-bottom));z-index:4;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--page) 92%);mask-image:linear-gradient(to bottom,transparent,#000 65%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 65%);transition:opacity 300ms ease}
 body::after{inset:0 0 auto;height:calc(160px + env(safe-area-inset-top));transform:rotate(180deg)}
 body:is(.intro-pending,.intro-playing,.detail-open,.signup-open)::before,body:is(.intro-pending,.intro-playing,.detail-open,.signup-open)::after{opacity:0}
}

:is(.about-close,.detail-close,.signup-close){display:grid;place-items:center;padding:0}
:is(.about-close,.detail-close,.signup-close) svg{display:block;flex:none;pointer-events:none}
dialog[open] :is(.about-close,.detail-close,.signup-close){animation:close-button-in 300ms ease-out both}
dialog:is(.closing,.leaving) :is(.about-close,.detail-close,.signup-close){animation:close-button-out 250ms ease-in both;pointer-events:none}
@keyframes close-button-in{from{opacity:0}to{opacity:1}}
@keyframes close-button-out{from{opacity:1}to{opacity:0}}

.nav-signin{text-decoration:none;isolation:isolate;overflow:hidden;position:fixed;top:max(18px,env(safe-area-inset-top));right:20px;z-index:6;display:flex;align-items:center;justify-content:center;min-width:96px;height:46px;padding:0 18px;border:1px solid color-mix(in srgb,var(--reply-ink) 16%,transparent);border-radius:23px;color:var(--reply-ink);background:color-mix(in srgb,var(--page) 42%,transparent);box-shadow:0 6px 18px #00000014;font:500 14px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer;transition:opacity 250ms ease,transform 360ms cubic-bezier(.22,1.35,.36,1)}
.nav-signin-label{position:relative;z-index:1}
.nav-signin.glass-ready{background:color-mix(in srgb,var(--page) 12%,transparent);border-color:transparent}
.nav-signin:focus-visible{outline:2px solid var(--muted);outline-offset:4px}
:is(.intro-pending,.intro-playing,.detail-open,.signup-open) .nav-signin{opacity:0;pointer-events:none}
@media(max-width:650px){.nav-signin{right:16px}}

.view-switch,.mobile-pages{display:none}
@media(max-width:650px){
 .nav-signin{min-width:72px;padding-inline:12px}
 .view-switch{isolation:isolate;overflow:hidden;position:fixed;z-index:6;top:max(18px,env(safe-area-inset-top));left:calc(50% - 48px);width:96px;height:46px;padding:4px;display:grid;grid-template-columns:1fr 1fr;border:1px solid color-mix(in srgb,var(--reply-ink) 16%,transparent);border-radius:23px;color:var(--reply-ink);background:color-mix(in srgb,var(--page) 42%,transparent);box-shadow:0 6px 18px #00000014;transition:opacity 250ms ease}
 .view-switch.glass-ready{background:transparent;border-color:transparent}
 .view-switch::before{content:"";position:absolute;left:4px;top:4px;width:calc((100% - 8px)/2);height:calc(100% - 8px);border-radius:19px;background:color-mix(in srgb,var(--reply-ink) 14%,transparent);box-shadow:inset 0 1px #ffffff35;transition:translate 320ms cubic-bezier(.22,1,.36,1)}
 .view-switch.list-selected::before{translate:100% 0}
 .view-switch button{position:relative;display:grid;place-items:center;padding:0;border:0;background:none;border-radius:18px;color:inherit;opacity:.5;cursor:pointer}
 .view-switch button[aria-pressed=true]{opacity:1}
 .view-switch svg{width:20px;height:20px;pointer-events:none}
 .view-switch button:focus-visible{outline:2px solid var(--muted);outline-offset:1px}
 .mobile-pages{display:flex;position:fixed;inset:calc(88px + env(safe-area-inset-top)) 0 calc(140px + env(safe-area-inset-bottom));z-index:2;flex-direction:column;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;touch-action:pan-x pan-y;opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;transition:opacity 350ms ease,transform 450ms cubic-bezier(.22,1,.36,1)}
 .mobile-pages::-webkit-scrollbar{display:none}
 .mobile-art-track{display:flex;flex:none;width:100%;height:clamp(180px,30svh,250px);padding-inline:18%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-top:auto}
 .mobile-art-track::-webkit-scrollbar{display:none}
 .mobile-page{flex:0 0 64vw;min-width:0;display:grid;place-items:center;scroll-snap-align:center;scroll-snap-stop:always}
 .mobile-page-art{display:grid;place-items:center;flex:none;width:clamp(160px,26svh,220px);height:clamp(160px,26svh,220px);padding:0;border:0;background:none;cursor:pointer}
 .mobile-page-art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:.55;scale:.9;transition:opacity 250ms ease,scale 350ms ease}
 .mobile-page[aria-current=true] img{opacity:1;scale:1}
 .mobile-page-description{margin:0;text-align:center;color:var(--muted);font-size:15px;line-height:1.45}
 .mobile-page-art:focus{outline:none}.mobile-page-art:focus-visible img{filter:brightness(1.12)}
 .mobile-page-copy{display:flex;flex-direction:column;gap:12px;flex:none;padding:8px 30px 24px;margin-bottom:auto;color:var(--reply-ink)}
 .mobile-page-copy h2{margin:0;text-align:center;font:700 24px/1.15 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;letter-spacing:-.035em}
 .mobile-page-messages{display:flex;flex-direction:column;gap:8px;width:100%;max-width:350px;margin-bottom:auto}
 .mobile-page-messages .bubble{font-size:14px;line-height:1.4;animation:none;flex:none}
 .grid{transition:opacity 350ms ease,transform 450ms cubic-bezier(.22,1,.36,1)}
 .mobile-paged .grid{opacity:0;transform:scale(.96);pointer-events:none}
 .mobile-paged .fixed-wordmark{opacity:.16}
 .mobile-paged .mobile-pages{opacity:1;transform:none;pointer-events:auto}
 :is(.intro-pending,.intro-playing,.detail-open,.signup-open) :is(.view-switch,.mobile-pages){opacity:0;pointer-events:none}
}

/* The live shader owns tint and rim; CSS is only the non-WebGL fallback. */
.glass-ready > .glass-surface::after,.glass-ready::after,.waitlist.glass-ready .waitlist-row button::after{display:none}
.waitlist.glass-ready .waitlist-row button{background-clip:padding-box}

body :is(.about-info,.detail-close,.signup-close):focus,.creator-letter h2:focus{outline:none}

.glass-interactive{scale:var(--glass-scale,1);transition:scale 360ms cubic-bezier(.22,1.35,.36,1),opacity 250ms ease}
header.waitlist.glass-interactive{scale:1;transform:translateX(-50%) scale(var(--glass-scale,1));transition:transform 360ms cubic-bezier(.22,1.35,.36,1),opacity 250ms ease}
@media(prefers-reduced-motion:reduce){.glass-interactive{scale:1;transition:opacity 150ms}header.waitlist.glass-interactive{transform:translateX(-50%);transition:opacity 150ms}}

#waitlist-form button{transition:scale 300ms cubic-bezier(.22,1.35,.36,1),background-color 180ms}
#waitlist-form button:not(:disabled):active{scale:1.09;background-image:radial-gradient(circle at var(--glass-pointer-x,50%) var(--glass-pointer-y,50%),#ffffff40,transparent 75%)}
@media(hover:hover) and (pointer:fine){#waitlist-form button:not(:disabled):hover:not(:active){scale:1.05;background-image:radial-gradient(circle at var(--glass-pointer-x,50%) var(--glass-pointer-y,50%),#ffffff25,transparent 75%)}}
@media(prefers-reduced-motion:reduce){#waitlist-form button:not(:disabled):is(:hover,:active){scale:1}}
#waitlist-form button.glass-ready{isolation:isolate}

.usecase{overflow-y:auto;padding:80px 40px 52px;box-sizing:border-box}
.detail-layout{min-height:calc(100% - 20px);width:min(1080px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:80px;position:relative;height:100%;min-height:0}
.detail-copy{position:static;width:auto;transform:none;margin:0;text-align:center;animation:none}
.detail-art{position:relative;left:auto;top:auto;transform:none;width:clamp(170px,20vw,250px);margin:0 auto 22px}
.detail-copy h2{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:clamp(30px,3.3vw,44px);font-weight:700;font-kerning:normal;font-optical-sizing:auto;letter-spacing:-.015em;line-height:1.12;text-align:center;margin:0 0 16px}
.detail-copy .description{max-width:380px;margin:0 auto;text-align:center;font-size:16px;line-height:1.55}
.detail-chat{min-width:0;width:100%;max-width:480px;margin:auto;height:100%;display:flex;flex-direction:column;min-height:0;position:relative}
.detail-messages{gap:12px;overflow:auto;padding:28px 2px;overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0;max-height:none;display:flex;flex-direction:column;mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent);scroll-behavior:smooth}
.detail-messages .bubble{flex:none;font-size:15px;line-height:1.45;animation:detail-bubble-in 500ms var(--bubble-delay,0ms) both cubic-bezier(.22,1,.36,1);transform-origin:bottom left;max-width:calc(85% - 24px);width:fit-content;box-sizing:border-box;overflow-wrap:anywhere}
.detail-messages .bubble.user{transform-origin:bottom right}
.detail-messages .bubble a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@keyframes detail-bubble-in{from{opacity:0;transform:translateY(18px) scale(.88)}to{opacity:1;transform:none}}
.detail-composer{display:flex;align-items:flex-end;gap:10px;margin-top:12px;border:1px solid color-mix(in srgb,var(--reply-ink) 17%,transparent);border-radius:26px;padding:7px 7px 7px 18px;background:color-mix(in srgb,var(--page) 88%,var(--reply-ink) 5%);flex:none}
.detail-composer textarea{flex:1;min-width:0;resize:none;box-sizing:border-box;min-height:34px;max-height:122px;overflow-y:auto;overflow-wrap:anywhere;white-space:pre-wrap;scrollbar-width:thin;background:none;border:0;color:var(--reply-ink);font:16px/1.4 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;padding:5px 0;outline:none;transition:height 200ms cubic-bezier(.22,1,.36,1)}
.detail-composer textarea::placeholder{color:var(--muted);opacity:1}
.detail-composer:focus-within{border-color:var(--muted)}
.detail-composer button{display:grid;place-items:center;flex:none;width:36px;height:36px;margin-bottom:0;border:0;border-radius:50%;background:#214edc;color:white;cursor:pointer}
.detail-composer button:disabled{background:var(--reply);color:var(--muted);cursor:default}
.detail-chat-status{font:12px/1.4 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--muted);min-height:17px;text-align:center;flex:none;margin:8px 12px 0}
.detail-messages .single-line.bucko{border-radius:var(--bubble-radius) var(--bubble-radius) var(--bubble-radius) 5px}
.detail-messages .single-line.user{border-radius:var(--bubble-radius) var(--bubble-radius) 5px var(--bubble-radius)}
.detail-messages .typing{display:flex;align-items:center;gap:6px;min-height:48px;padding:16px 20px;letter-spacing:0;animation:detail-bubble-in 350ms both}
.detail-messages .typing span{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.45;animation:thinking-dot 1100ms calc(var(--dot)*140ms) infinite cubic-bezier(.45,0,.25,1)}
@keyframes thinking-dot{0%,60%,100%{transform:translateY(0) scale(.85);opacity:.35}30%{transform:translateY(-5px) scale(1.15);opacity:.85}}
.leaving .detail-chat{opacity:0;transition:opacity 180ms}
.detail-layout::after{content:"";position:fixed;left:50%;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--reply-ink) 12%,transparent);animation:detail-divider-in 500ms ease both}
@keyframes detail-divider-in{from{opacity:0}to{opacity:1}}
.leaving .detail-layout::after{animation:none;opacity:0;transition:opacity 180ms}
.detail-composer.glass-ready{position:relative;isolation:isolate;background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.detail-composer.glass-ready textarea,.detail-composer.glass-ready button{position:relative;z-index:1}
@media(min-width:651px){.usecase{padding-bottom:24px}.detail-chat-status{position:absolute;bottom:60px;left:0;right:0;margin:0;pointer-events:none}.detail-chat-status:empty{display:none}}
@media(max-width:650px){.usecase{padding:74px 24px 36px}.detail-layout{display:flex;flex-direction:column;gap:28px;min-height:0;height:auto;padding-bottom:90px}.detail-layout::after{display:none}.detail-art{width:150px;margin-bottom:16px}.detail-copy h2{font-size:30px;letter-spacing:-.01em}.detail-copy .description{font-size:15px;max-width:330px}.detail-chat{max-width:420px;height:auto}.detail-close{position:fixed}.detail-messages{max-height:none;overflow:visible;flex:none;mask-image:none;-webkit-mask-image:none}.detail-messages .bubble{font-size:14px}.detail-composer{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:24px;right:24px;z-index:3;background:var(--page)}.detail-composer.glass-ready{position:fixed}.detail-chat-status{position:fixed;bottom:0;left:24px;right:24px;background:var(--page)}}
@media(prefers-reduced-motion:reduce){.detail-messages .bubble{animation:none}.detail-messages{scroll-behavior:auto}.detail-composer textarea{transition:none}.detail-layout::after{animation:none}.detail-messages .typing span{animation:none}}
@media(prefers-color-scheme:light){.glass-surface{--glass-tint:#d6d1c8}}