: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]{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-scene{position:relative;width:min(360px,46vh,55vw);height:min(225px,28vh);margin:4px 0 0;filter:drop-shadow(0 20px 35px rgba(0,0,0,.22));animation:demo-puff-breathe 5.8s ease-in-out infinite}
.demo-puff{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:52% 76%}
.demo-puff-next{opacity:0}
.demo-puff-scene[data-pose="sleepy"]{animation:demo-puff-sway 5.2s ease-in-out infinite}
.demo-puff-scene[data-pose="very-sleepy"]{animation:demo-puff-droop 4.6s ease-in-out infinite}
.demo-puff-scene[data-pose="lying-down"],.demo-puff-scene[data-pose="curled-up"]{animation-duration:6.3s}
.demo-puff-scene[data-pose="sleepy"] .demo-puff{filter:saturate(.96) brightness(.98)}
.demo-puff-scene[data-pose="very-sleepy"] .demo-puff{filter:saturate(.92) brightness(.95)}
.demo-puff-scene[data-pose="lying-down"] .demo-puff{filter:saturate(.94) brightness(.96)}
@keyframes demo-puff-breathe{50%{transform:translateY(3px) scale(1.015)}}
@keyframes demo-puff-sway{50%{transform:rotate(-2deg) translateY(3px)}}
@keyframes demo-puff-droop{50%{transform:rotate(-3deg) translateY(5px)}}
.demo-choice{position:relative;width:min(420px,86vw);height:272px;margin-top:0}
.demo-trace{display:block;width:100%;height:210px;overflow:visible;touch-action:none;cursor:crosshair;outline:none}
.demo-trace:focus-visible{filter:drop-shadow(0 0 10px rgba(255,242,215,.7))}
.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}
.demo-arc-hit{fill:none;stroke:transparent;stroke-width:58}
.demo-trace-start-halo{fill:rgba(255,242,215,.18);pointer-events:none}
.demo-trace-start{fill:#f2ddbc;filter:drop-shadow(0 0 9px rgba(255,232,185,.55));transform-box:fill-box;transform-origin:center;animation:demo-start-pulse 1.5s ease-in-out infinite alternate;pointer-events:none}
.demo-overlay.is-tracing .demo-trace-start,.demo-overlay.is-tracing .demo-trace-start-halo{opacity:0;animation:none}
@keyframes demo-start-pulse{50%{transform:scale(1.45);opacity:.75}}
.demo-trace-guide-halo{fill:rgba(255,242,215,.23);stroke:rgba(255,242,215,.38);stroke-width:2;pointer-events:none;filter:drop-shadow(0 0 9px rgba(255,232,185,.55))}
.demo-trace-glow{fill:#fff2d7;filter:drop-shadow(0 0 9px rgba(255,232,185,.55));pointer-events:none}
.demo-go-bed{position:absolute;top:133px;left:20%;width:60%;min-height:58px;border:1px solid #e7d1a9;border-radius:999px;background:var(--cream);color:#152037;padding:12px 16px;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{position:absolute;top:215px;inset-inline:0;min-height:22px;margin:0;color:#c7c2c2;font-size:15px;letter-spacing:.01em}
.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-scene{width:min(260px,53vw);height:min(180px,24vh)}.demo-choice{width:min(360px,90vw);height:235px}.demo-trace{height:185px}.demo-go-bed{top:117px;min-height:52px}.demo-trace-label{top:190px;font-size:13px}.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-scene{height:110px}.demo-choice{height:200px}.demo-trace{height:160px}.demo-go-bed{top:98px;min-height:48px}.demo-trace-label{top:160px}.demo-footnote{display:none}.demo-goodnight img{height:150px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.signup button,.demo-blackout{transition:none}.demo-trace-start,.demo-phone-art,.demo-puff-scene{animation:none}.demo-puff-next{opacity:0!important}.demo-puff-current{opacity:1!important;transform:none!important}}