:root{color-scheme:dark;--night:#111827;--ink:#f5f1e8;--cream:#eee1c7;--muted:#bac0ca;--line:#333b4d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:radial-gradient(ellipse at 50% 28%,#1b263b 0%,#111827 48%,#0c1220 100%);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
main,footer{max-width:980px;margin-inline:auto;padding-inline:clamp(20px,4vw,44px)}
.site-header{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);font-size:21px;font-weight:600;letter-spacing:-.04em;text-decoration:none}
.brand img{border-radius:10px}
.header-note{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#aeb6c4}
.hero{text-align:center;padding:clamp(30px,6vh,72px) 0 78px}
.mascot{display:block;width:clamp(170px,24vw,215px);height:145px;object-fit:contain;margin:0 auto 24px;filter:drop-shadow(0 16px 28px rgba(0,0,0,.15))}
h1{font-size:clamp(56px,9vw,95px);line-height:.98;font-weight:500;letter-spacing:-.07em;margin:0}
.intro{font-size:clamp(16px,2vw,18px);line-height:1.6;color:var(--muted);margin:25px auto 0;max-width:510px}
.signup{display:flex;gap:8px;width:min(100%,500px);margin:34px auto 0}
.signup input[type=email]{flex:1;min-width:0;min-height:52px;padding:0 17px;border:1px solid #485265;border-radius:12px;background:#192237;color:var(--ink);font:inherit;font-size:16px}
.signup input[type=email]::placeholder{color:#a5adbb}
.signup button{min-height:52px;padding:0 21px;border:0;border-radius:12px;background:var(--cream);color:#172033;font:inherit;font-size:15px;font-weight:650;white-space:nowrap;cursor:pointer;transition:background .2s ease,transform .2s ease}
.signup button:hover{background:#f8ecd7;transform:translateY(-1px)}
.signup button:disabled{opacity:.65;cursor:wait;transform:none}
.signup input:focus-visible,.signup button:focus-visible,a:focus-visible{outline:2px solid #f7e9c9;outline-offset:3px}
.form-status{min-height:20px;margin:13px auto 0;font-size:14px;color:#e8d9bc}
.form-status[data-state=error]{color:#ffbcb3}
.form-note{margin:4px auto 0;font-size:12px;line-height:1.5;color:#a4adbb}
.form-note a,footer a{color:#d9caaa;text-underline-offset:3px}
.demo{padding:24px 0 70px;border-top:1px solid var(--line)}
.demo-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.demo h2{font-size:18px;font-weight:500;letter-spacing:-.02em;margin:0}
.demo-heading span{font-size:13px;color:#aab3c3}
.demo-space{min-height:clamp(230px,38vw,360px);margin-top:18px;border:1px solid #414d62;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#d9dfeb;text-align:center;background:radial-gradient(circle at 50% 12%,#26354e 0%,#182238 42%,#111a2c 100%)}
.demo-space img{width:130px;height:85px;object-fit:contain}
.demo-space p{font-size:18px;margin:0}
.demo-space small{font-size:12px;color:#a4adbb}
.demo-space button{border:1px solid #d8c5a1;background:var(--cream);color:#182235;border-radius:12px;padding:13px 18px;font:inherit;font-weight:650;cursor:pointer}
.demo-space button:hover{background:#f8ecd7}
footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:25px 34px;border-top:1px solid var(--line);color:#aab3c3;font-size:12px}
.demo-overlay[hidden],.demo-stage[hidden],.demo-trace-glow[hidden]{display:none!important}
body.demo-open{overflow:hidden}
.demo-overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 22%,#263653 0%,#151e32 43%,#0b1120 100%);color:var(--ink);isolation:isolate}
.demo-overlay.is-expanding .demo-topbar,.demo-overlay.is-expanding .demo-stage{opacity:0}
.demo-topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:14px clamp(18px,3vw,38px)}
.demo-brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:650;letter-spacing:-.04em}
.demo-brand img{border-radius:8px}
.demo-brand span{font-size:13px;font-weight:450;color:#aeb8c9;letter-spacing:0}
.demo-exit{border:1px solid #637087;background:#1d2a42;color:#f5f1e8;border-radius:999px;padding:9px 14px;font:inherit;font-size:13px;cursor:pointer}
.demo-exit span{font-size:18px;line-height:0;margin-left:6px}
.demo-exit:hover{background:#2b3a55}
.demo-stage{position:relative;z-index:1;flex:1;min-height:0}
.demo-bedtime{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px 27px}
.demo-kicker{margin:0;color:#decda9;font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase}
.demo-bedtime h2,.demo-goodnight h2{font-size:clamp(48px,7vw,88px);font-weight:500;line-height:1;letter-spacing:-.065em;margin:13px 0 0}
.demo-puff{width:min(360px,46vh,55vw);height:min(225px,28vh);object-fit:contain;margin:4px 0 0;filter:drop-shadow(0 20px 35px rgba(0,0,0,.22))}
.demo-choice{position:relative;width:min(300px,85vw);height:180px;margin-top:0}
.demo-trace{width:100%;height:180px;overflow:visible;touch-action:none;cursor:crosshair}
.demo-arc-track{fill:none;stroke:rgba(240,220,181,.16);stroke-width:18;stroke-linecap:round}
.demo-arc-line{fill:none;stroke:#e9d8b7;stroke-width:6;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .08s linear}
.demo-arc-hit{fill:none;stroke:transparent;stroke-width:58}
.demo-trace-start{fill:#f2ddbc;filter:drop-shadow(0 0 7px #f5db9a);transform-box:fill-box;transform-origin:center;animation:demo-start-pulse 1.7s ease-in-out infinite}
.demo-overlay.is-tracing .demo-trace-start{animation:none;opacity:.35}
@keyframes demo-start-pulse{50%{transform:scale(1.45);opacity:.75}}
.demo-trace-glow{fill:#fff6e2;filter:drop-shadow(0 0 12px #f5db9a)}
.demo-go-bed{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);border:1px solid #e7d1a9;border-radius:999px;background:var(--cream);color:#152037;padding:12px 24px;font:inherit;font-size:16px;font-weight:700;white-space:nowrap;cursor:pointer;box-shadow:0 10px 30px #0004}
.demo-go-bed:hover{background:#fff0d3}
.demo-trace-label{min-height:22px;margin:0;color:#e3d5ba;font-size:14px}
.demo-footnote{position:absolute;bottom:14px;left:20px;right:20px;margin:0;color:#9cabc1;font-size:11px}
.demo-feed{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding:6px 20px 22px}
.demo-feed h2{margin:7px 0 0;font-size:clamp(36px,5vw,58px);font-weight:500;letter-spacing:-.055em;line-height:1}
.demo-feed-note{color:#aeb9c9;font-size:13px;margin:9px 0 15px}
.demo-phone{position:relative;width:min(205px,31vh);height:min(340px,50vh);min-height:208px;padding:7px;border:2px solid #70809a;border-radius:29px;background:#0a1020;box-shadow:0 22px 65px #0008;overflow:hidden}
.demo-phone-notch{position:absolute;z-index:2;top:9px;left:50%;transform:translateX(-50%);width:43%;height:12px;border-radius:0 0 11px 11px;background:#0a1020}
.demo-phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:21px;background:linear-gradient(160deg,#1e3853,#3e6581 55%,#8e8893);text-align:left}
.demo-phone-art{position:absolute;inset:-20% -50%;background:radial-gradient(circle at 58% 32%,#f8dbaf 0 7%,transparent 7.5%),radial-gradient(circle at 50% 45%,#a5c7c6 0 15%,transparent 15.5%),radial-gradient(circle at 47% 55%,#4b7190 0 25%,transparent 25.5%);animation:demo-phone-drift 7s ease-in-out infinite alternate}
.demo-phone-orbit{position:absolute;left:25%;top:32%;width:48%;aspect-ratio:1;border:1px solid #e1e5dc88;border-radius:50%;transform:rotate(-25deg) scaleY(.5)}
.demo-phone-star{position:absolute;left:67%;top:32%;color:#fff2d9;font-size:32px}
.demo-phone-copy{position:absolute;left:13px;right:34px;bottom:21px;display:flex;flex-direction:column;gap:4px;text-shadow:0 1px 7px #0009}
.demo-phone-copy small{font-size:8px;letter-spacing:.08em}.demo-phone-copy strong{font-size:16px}.demo-phone-copy span{font-size:10px;line-height:1.25}
.demo-phone-actions{position:absolute;right:10px;bottom:23px;display:grid;gap:13px;font-size:20px;text-shadow:0 1px 7px #0009}
.demo-phone-home{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:35%;height:3px;border-radius:3px;background:#f3eadcbb}
@keyframes demo-phone-drift{to{transform:translateY(-9%) scale(1.06)}}
.demo-mini-timer{display:flex;align-items:baseline;gap:9px;margin-top:12px;color:#b8c2d2;font-size:12px}
.demo-mini-timer strong{font-variant-numeric:tabular-nums;color:var(--ink);font-size:25px;font-weight:500}
.demo-feed-bed{margin-top:8px;border:1px solid #bcb29e;background:transparent;color:var(--ink);border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;cursor:pointer}
.demo-goodnight{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 20px 45px;background:radial-gradient(circle at 50% 28%,#1b2940,#0b1020 70%)}
.demo-goodnight img{width:min(370px,68vw);height:min(250px,32vh);object-fit:contain}
.demo-goodnight p{margin:17px 0 22px;color:#c1cad8;font-size:17px}
.demo-end-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.demo-end-actions button{border:1px solid #8e98a8;background:transparent;color:var(--ink);border-radius:12px;padding:13px 18px;font:inherit;cursor:pointer}
.demo-end-actions button:first-child{background:var(--cream);border-color:var(--cream);color:#172033;font-weight:650}
.demo-goodnight small{margin-top:20px;color:#9cabc1;font-size:11px}
.demo-blackout{position:absolute;inset:0;z-index:3;background:#020408;opacity:0;pointer-events:none;transition:opacity .65s ease}
.demo-overlay.is-blackout .demo-blackout{opacity:1}
.demo-overlay :focus-visible{outline:2px solid #f7e9c9;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.privacy{max-width:670px;margin:55px auto 110px;line-height:1.75;color:#d3d8df}
.privacy h1{font-size:clamp(38px,6vw,58px);line-height:1.1;margin-bottom:28px;color:#f5f1e8}
.privacy h2{font-size:19px;font-weight:600;margin:32px 0 7px;color:#f5f1e8}
.privacy p{margin:0 0 16px}
@media(max-width:540px){.site-header{min-height:75px}.header-note{font-size:10px}.hero{padding-top:44px;padding-bottom:66px}.mascot{margin-bottom:19px}.signup{flex-direction:column}.signup button{width:100%}.demo-heading{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:540px){.demo-topbar{min-height:61px}.demo-brand{font-size:17px}.demo-exit{padding:8px 10px}.demo-bedtime{justify-content:center;padding-bottom:25px}.demo-puff{width:min(260px,53vw);height:min(180px,24vh)}.demo-choice{height:150px}.demo-trace{height:150px}.demo-go-bed{bottom:2px}.demo-footnote{bottom:8px}.demo-feed{padding-bottom:15px}.demo-feed h2{font-size:32px}.demo-mini-timer strong{font-size:22px}.demo-goodnight img{height:min(220px,28vh)}}
@media(max-height:620px){.demo-bedtime h2{font-size:45px}.demo-puff{height:110px}.demo-choice{height:142px}.demo-trace{height:142px}.demo-go-bed{bottom:0}.demo-footnote{display:none}.demo-goodnight img{height:150px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.signup button,.demo-blackout,.demo-arc-line{transition:none}.demo-trace-start,.demo-phone-art{animation:none}}