:root { color-scheme:dark; --bg:#0c1725; --text:#f4f7fa; --muted:#b9c4d0; --mint:#3be8b0; --sky:#79cfff; --line:#314356; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:radial-gradient(ellipse at 15% 15%,#183345 0,transparent 45%),radial-gradient(ellipse at 90% 50%,#242943 0,transparent 50%),var(--bg); min-height:100vh; line-height:1.6; }
[hidden] { display:none !important; }
a { color:var(--sky); text-underline-offset:4px; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid var(--sky); outline-offset:5px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(2.5rem,7vw,4.2rem); line-height:1.08; letter-spacing:-.055em; margin:18px 0 22px; }
h2 { font-size:clamp(2rem,5.5vw,3.2rem); line-height:1.15; letter-spacing:-.04em; margin:18px 0 22px; }
h3 { font-size:1.15rem; margin-bottom:10px; }
header,footer { max-width:980px; margin:auto; padding:24px; }
.header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-size:1.2rem; font-weight:700; }
.mark { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; color:var(--bg); background:linear-gradient(135deg,var(--mint),var(--sky),#9c8cff); font-size:1.9rem; line-height:1; }
.preview-label { font-size:.78rem; color:var(--muted); border:1px solid var(--line); padding:5px 10px; border-radius:20px; }
main { max-width:680px; margin:24px auto; padding:0 24px; }
.card { padding:38px; border:1px solid var(--line); border-radius:30px; background:#102033e8; box-shadow:0 24px 80px #0003; }
.eyebrow { color:var(--mint); font-size:.8rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.lede { color:var(--muted); font-size:1.15rem; }
.quiet { color:var(--muted); font-size:.98rem; }
.small { color:var(--muted); font-size:.82rem; margin:14px 0; }
.primary { display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px; padding:17px 20px; margin-top:25px; background:linear-gradient(110deg,var(--mint),var(--sky)); color:#061923; border:0; border-radius:16px; font-weight:750; text-decoration:none; line-height:1.4; }
.primary:hover { filter:brightness(1.08); }
.secondary { padding:12px 20px; min-height:48px; background:#1b3046; color:var(--text); border:1px solid #496078; border-radius:12px; }
.text-button { padding:12px; min-height:48px; color:var(--muted); background:transparent; border:0; text-decoration:underline; text-underline-offset:4px; }
.text-link { font-size:.95rem; }
.wave { height:120px; display:grid; align-items:center; overflow:hidden; margin:12px 0; }
.wave svg { width:100%; overflow:visible; }
.wave path { fill:none; stroke:var(--mint); stroke-width:2.5; opacity:.7; }
.wave path+path { stroke:var(--sky); opacity:.3; }
.session:not(.paused) .wave svg { animation:drift 6s ease-in-out infinite; }
.session-top { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.time { font-variant-numeric:tabular-nums; white-space:nowrap; }
.session .lede { min-height:100px; }
progress { width:100%; height:6px; accent-color:var(--mint); border:0; border-radius:6px; overflow:hidden; background:var(--line); display:block; }
progress::-webkit-progress-bar { background:var(--line); }
progress::-webkit-progress-value { background:linear-gradient(90deg,var(--mint),var(--sky)); }
progress::-moz-progress-bar { background:var(--mint); }
.status { margin:24px 0 12px; min-height:3.2em; }
.actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px; }
.next-steps { padding-left:22px; margin:24px 0; color:var(--text); }
.next-steps li { padding:4px 0; }
.app-note { padding-top:24px; border-top:1px solid var(--line); }
.app-note p { color:var(--muted); }
.privacy { text-align:center; color:var(--muted); font-size:.8rem; margin:22px 8px; }
footer { text-align:center; color:var(--muted); font-size:.82rem; padding-top:8px; }
footer p { max-width:540px; margin:16px auto; }
.skip { position:absolute; top:-100px; left:16px; padding:12px; background:var(--bg); z-index:1; }
.skip:focus { top:10px; }
@keyframes drift { 0%,100% { transform:translateY(4px); opacity:.6; } 50% { transform:translateY(-4px); opacity:1; } }
@media(max-width:480px) { header,footer { padding:20px; } main { padding:0 16px; margin-top:10px; } .card { padding:28px 24px; border-radius:24px; } .preview-label { font-size:.7rem; padding:4px 8px; } .session-top { flex-wrap:wrap; } .session .lede { min-height:125px; } }
@media(prefers-reduced-motion:reduce) { .session:not(.paused) .wave svg { animation:none; } }