/* Tend — design system. "A dusk-warm cocoon": golden-hour calm, soft, layered, alive.
THEMING: the warm pastel "happy place" is the default (:root). The dark option lives
under [data-theme="dark"] — a deep cozy dusk — and the app toggles it on
(document.documentElement.dataset.theme). Explicit [data-theme] always wins over the
prefers-color-scheme media fallbacks below. Every custom-property NAME is preserved so
app.js + all activities keep working — only the VALUES change per theme.
WCAG-checked: body text >=4.5:1, non-text accents >=3:1, in BOTH themes. */
/* ---------- self-hosted type (no third-party requests — nothing leaves the page) ----------
Fraunces (soft optical serif, opsz+wght axes) for the wordmark + headings; Hanken Grotesk
(friendly grotesque) for body. Both SIL OFL 1.1, latin variable woff2 in /assets/fonts/.
font-display:swap so a refined system stack paints instantly and never blocks. The CSP
default-src 'self' already permits these (same-origin); no font-src override needed. */
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 300 700;
font-stretch: normal;
font-display: swap;
src: url("/assets/fonts/fraunces-latin-opsz.woff2") format("woff2");
/* lean on the soft optical end so the serif reads warm, not bookish */
font-variation-settings: "opsz" 60, "SOFT" 40, "WONK" 0;
size-adjust: 100%;
}
@font-face {
font-family: "Hanken Grotesk";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/fonts/hanken-grotesk-latin-wght.woff2") format("woff2");
}
:root {
/* fonts as tokens so headings/body can reference one source of truth */
--font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
--font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
/* —— DUSK-WARM DEFAULT: golden-hour cream page, warm peaceful "happy place" ——
Warmer and a touch deeper than flat pastel: the cream has a honey undertone,
surfaces glow rather than sit flat, and the accent leans rose/peach. */
--bg: #fbf3e9; /* warm honeyed cream */
--bg-2: #f3e7d6; /* sunlit sand */
--surface: rgba(255, 250, 242, 0.55); /* soft warm near-white card, translucent for glass */
--surface-2: rgba(246, 235, 220, 0.7); /* warm raised surface */
--line: rgba(255, 255, 255, 0.6); /* hairline (decorative), translucent */
--ink: #3b3138; /* deep warm cocoa-plum text (11.6:1 on surface) */
--muted: #6c6068; /* muted text (5.6:1 on surface) */
--muted-2: #786b73; /* secondary muted (4.7:1 on surface) */
--rose: #b8456a; /* rose-peach accent — readable as link/eyebrow (4.9:1) */
--lav: #8a57b0; /* warm orchid accent (4.7:1) */
--blue: #2f6f8f; /* dusk-teal-blue accent (4.9:1) */
--sky: #2f7d6f; /* sage accent (4.8:1) */
--gold: #9a6512; /* warm amber accent (4.7:1) */
--danger: #c0344a; /* clear, calm alert red (5.4:1) */
--peach: #e98c6e; /* warm peach — decorative glow only (never carries text) */
--primary: linear-gradient(135deg, #f6b69a 0%, #ef9ec0 52%, #d9a6e6 100%); /* peach→rose→orchid dusk wash */
--radius: 18px;
--radius-lg: 26px;
--radius-sm: 12px;
--shadow: 0 22px 60px rgba(150,98,72,.18);
--shadow-soft: 0 10px 28px rgba(150,98,72,.13);
--maxw: 760px;
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ring: rgba(138,87,176,.55);
/* fluid type scale — gentle, readable, scales down to 380px */
--step--1: clamp(12.5px, 1.6vw, 13.5px);
--step-0: clamp(15.5px, 3.4vw, 17px);
--step-1: clamp(17px, 3.8vw, 19px);
--step-2: clamp(20px, 4.5vw, 26px);
/* themeable accents used by hardcoded spots (topbar fade, overlay scrim, brand glow) */
--bg-soft: rgba(251,243,233,.6); /* topbar fade-to-transparent (matches --bg) */
--scrim: rgba(59,49,56,.44); /* overlay backdrop — warm, not black */
--glow: rgba(233,140,110,.42); /* brand-dot / soft glows — warm peach */
/* ambient living wash behind everything — golden-hour dusk: warm sun-haze at the top,
rose + peach blooms, a sage breath at the foot. Sits behind near-opaque surfaces, so
it never touches text contrast. This is the soul of the "cocoon" depth. */
--ambient:
radial-gradient(1500px 850px at 90% -22%, rgba(248,196,140,.18), transparent 70%),
radial-gradient(1000px 680px at 6% -8%, rgba(240,158,192,.30), transparent 58%),
radial-gradient(1100px 800px at 18% 116%, rgba(150,196,150,.20), transparent 62%),
radial-gradient(900px 620px at 96% 112%, rgba(233,140,110,.24), transparent 60%),
radial-gradient(1400px 900px at 50% 44%, rgba(255,244,228,.30), transparent 70%);
/* subtle warm grain overlay (inline SVG, low opacity) for paper-like depth, set on
body::before. Tuned so it adds tooth without ever harming legibility. */
--grain-opacity: .055;
}
/* —— DARK OPTION: deep cozy dusk — a warm cocoon after sundown, lit by embers ——
Not flat charcoal: the base is a deep warm aubergine-brown, surfaces glow faintly
amber, and accents stay peach/rose/amber so it feels held, not clinical. */
[data-theme="dark"] {
--bg: #181219;
--bg-2: #211823;
--surface: rgba(40, 29, 41, 0.65);
--surface-2: rgba(50, 37, 53, 0.7);
--line: rgba(255, 255, 255, 0.1);
--ink: #f4ebec; /* warm off-white text (13.4:1 on surface) */
--muted: #b8a8b2; /* muted (6.4:1) */
--muted-2: #ab9ba5; /* secondary muted (5.4:1) */
--rose: #f3a9c0; /* rose (8.1:1) */
--lav: #c7aef0; /* orchid (7.9:1) */
--blue: #9ecbe6; /* dusk-teal (8.6:1) */
--sky: #a9dccb; /* sage (10.0:1) */
--gold: #f4cf8e; /* warm amber (11.3:1) */
--danger: #ff97a3; /* alert (7.5:1) */
--peach: #f0a587; /* warm peach glow */
--primary: linear-gradient(135deg, #f3b09a 0%, #ee9fc0 52%, #c8a8ee 100%);
--shadow: 0 24px 64px rgba(0,0,0,.5);
--shadow-soft: 0 10px 28px rgba(0,0,0,.3);
--ring: rgba(199,174,240,.6);
--bg-soft: rgba(24,18,25,.6);
--scrim: rgba(10,6,10,.76);
--glow: rgba(240,165,135,.6);
--grain-opacity: .06;
--ambient:
radial-gradient(1300px 800px at 80% -14%, rgba(243,176,154,.14), transparent 60%),
radial-gradient(1000px 680px at 6% -8%, rgba(238,159,192,.10), transparent 58%),
radial-gradient(1100px 800px at 16% 116%, rgba(169,220,203,.07), transparent 62%),
radial-gradient(900px 620px at 96% 112%, rgba(199,168,238,.10), transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* the welcome glow bleeds full-viewport-width; clip horizontally at the root so it can
never create a horizontal scrollbar (body already hides x; html needs it too). */
html { overflow-x: clip; }
body {
background: var(--ambient), var(--bg);
color: var(--ink);
font: var(--step-0)/1.62 var(--font-body);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background-attachment: fixed;
display: flex; flex-direction: column;
overflow-x: hidden;
position: relative;
/* peaceful cursor — a small drifting leaf; falls back to the system pointer if the
data-URI can't load. Set on body so the page feels alive; interactive elements
restore their own affordance cursors below (clickability + focus untouched). */
cursor: url('data:image/svg+xml;utf8,') 6 6, auto;
}
/* warm grain overlay — a whisper of paper tooth over the whole page for cocoon depth.
Inline data-URI SVG fractal noise (CSP img-src 'self' data: allows it). Fixed,
non-interactive, sits above the ambient wash but below all content/surfaces. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: var(--grain-opacity);
/* NOTE: a full-viewport mix-blend-mode over the animated ambient forced continuous
page-wide recompositing (renderer stall + phone jank). Dropped it — at this opacity
a plain grain reads the same and composites once. */
background-image: url('data:image/svg+xml;utf8,');
background-size: 160px 160px;
}
/* every screen + chrome layer sits above the grain */
.topbar, .app, .footnote, .overlay { position: relative; z-index: 1; }
.topbar { z-index: 20; }
.overlay { z-index: 60; }
/* keep every affordance: links/buttons stay a pointer, text fields a caret, etc. */
a, button, .btn, .tile, .modebtn, .joy-card, .line, .swatch, .help-now, .linkbtn,
summary, label, [role="button"], select, input[type="range"], input[type="checkbox"],
input[type="radio"] { cursor: pointer; }
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
input[type="url"], input[type="number"], input[type="password"], textarea, .field {
cursor: text;
}
:disabled, [aria-disabled="true"] { cursor: not-allowed; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--surface); padding: 8px 12px;
border-radius: 10px; z-index: 50; border: 1px solid var(--lav); box-shadow: var(--shadow-soft); }
/* ---------- top bar ---------- */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 16px clamp(16px, 5vw, 40px); position: sticky; top: 0; z-index: 20;
backdrop-filter: blur(8px);
background: linear-gradient(var(--bg), var(--bg-soft));
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .2px; }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary);
box-shadow: 0 0 20px var(--glow); animation: pulse 4s var(--ease) infinite; }
.brand-name { font-family: var(--font-display); font-size: 23px; font-weight: 600;
letter-spacing: -.2px; font-variation-settings: "opsz" 40, "SOFT" 50, "WONK" 0;
line-height: 1; }
/* lowercase house style; the tagline is a calm whisper beside the wordmark.
Hidden on small screens so it never crowds the sacrosanct "Need help now" button. */
.brand-tagline { font-size: 12px; font-weight: 500; color: var(--muted);
letter-spacing: .2px; white-space: nowrap; opacity: .85;
padding-left: 10px; border-left: 1px solid var(--line); }
.help-now {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
background: rgba(255,143,156,.12); color: var(--danger);
border: 1px solid rgba(255,143,156,.35); padding: 8px 14px; border-radius: 999px;
font-size: 14px; font-weight: 600;
transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.help-now:hover { background: rgba(255,143,156,.2); border-color: rgba(255,143,156,.55); transform: translateY(-1px); }
.help-now:active { transform: translateY(0); }
.help-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
animation: pulse 2.4s var(--ease) infinite; }
/* ---------- layout ---------- */
.app { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto;
padding: clamp(20px, 5vw, 48px) clamp(18px, 5vw, 40px); outline: none; }
.footnote { text-align: center; color: var(--muted-2); font-size: 12.5px;
padding: 18px; display: flex; gap: 12px; align-items: center; justify-content: center;
flex-wrap: wrap; }
.footnote .footlink { color: var(--muted); text-decoration: underline;
text-underline-offset: 2px; }
.footnote .footlink:hover { color: var(--lav); }
.screen { display: flex; flex-direction: column; gap: 18px; }
.screen.center { align-items: center; justify-content: center; min-height: 50vh; text-align: center; }
/* ---------- type ---------- */
.eyebrow { color: var(--rose); text-transform: lowercase; letter-spacing: 1.8px;
font-size: 12.5px; font-weight: 600; margin: 0; }
.h1 { font-family: var(--font-display); font-size: clamp(30px, 6.4vw, 47px);
line-height: 1.08; margin: 0; font-weight: 500; letter-spacing: -.4px;
font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-size: clamp(23px, 4.6vw, 31px); margin: 0;
font-weight: 540; letter-spacing: -.2px;
font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-size: var(--step-1); margin: 18px 0 4px;
color: var(--ink); letter-spacing: -.1px; font-weight: 560;
font-variation-settings: "opsz" 40, "SOFT" 40; }
.h4 { font-family: var(--font-display); margin: 0 0 4px; font-size: 17px; font-weight: 560;
font-variation-settings: "opsz" 30, "SOFT" 40; }
.lede { font-size: var(--step-1); color: var(--muted); margin: 0; max-width: 56ch; text-wrap: pretty; }
.muted { color: var(--muted); }
.muted.small, .small { font-size: var(--step--1); color: var(--muted-2); }
/* the tailored close — set in the warm display serif so the kind words land softly */
.message { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.42;
margin: 6px 0; font-weight: 460; max-width: 52ch; text-wrap: balance; letter-spacing: -.1px;
font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 0; }
.bridge { max-width: 52ch; text-wrap: pretty; }
/* ---------- buttons ---------- */
.btn { font: inherit; cursor: pointer; border: 1px solid var(--line);
background: var(--surface); color: var(--ink); padding: 12px 22px;
border-radius: 999px; font-weight: 600; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
transition: transform .18s var(--ease-out),
background .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { transform: translateY(-1px); border-color: var(--lav); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.btn.primary { background: var(--primary); color: #3a1f24; border: none;
font-weight: 650; letter-spacing: .1px;
box-shadow: 0 12px 30px rgba(233,140,110,.32); }
.btn.primary:hover { box-shadow: 0 16px 38px rgba(233,140,110,.46); transform: translateY(-2px); }
.btn.primary:active { transform: translateY(0) scale(.985); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: rgba(185,168,232,.08); }
.btn.big { font-size: var(--step-1); padding: 15px 36px; align-self: flex-start; }
/* the Begin CTA carries a soft, always-present warm halo so the eye lands on it.
Implemented as a ::before glow (NOT an animation) so it never collides with the
hero's staggered reveal, and it simply fades in with its parent. */
.btn.primary.big { position: relative; isolation: isolate; }
.btn.primary.big::before {
content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: inherit;
background: var(--primary); filter: blur(18px); opacity: .42;
transition: opacity .3s var(--ease);
}
.btn.primary.big:hover::before { opacity: .62; }
.btn.small { padding: 8px 14px; font-size: 14px; }
.linkbtn { background: none; border: none; color: var(--rose); cursor: pointer;
font: inherit; text-decoration: underline; text-underline-offset: 2px; padding: 0;
border-radius: 4px; transition: color .2s var(--ease); }
.linkbtn:hover { color: var(--lav); }
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
/* focus visibility everywhere — soft glow ring, not a hard line */
:focus-visible { outline: 3px solid var(--lav); outline-offset: 2px; border-radius: 8px; }
.btn:focus-visible, .tile:focus-visible, .line:focus-visible, .joy-card:focus-visible,
.help-now:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--ring); }
/* ---------- fields ---------- */
.field { width: 100%; background: var(--surface); border: 1px solid var(--line);
color: var(--ink); padding: 14px 16px; border-radius: 14px; font: inherit;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); }
.field::placeholder { color: var(--muted-2); }
.field:hover { border-color: var(--muted-2); }
.field:focus { border-color: var(--lav); outline: none; box-shadow: 0 0 0 3px rgba(185,168,232,.18); }
.field.area { resize: vertical; min-height: 88px; line-height: 1.55; }
.namewrap { display: flex; gap: 10px; align-items: center; max-width: 520px; }
.namewrap .field { flex: 1; }
.disclaimer { font-size: 13.5px; color: var(--muted-2); max-width: 56ch; display: block; }
.notebox { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
padding: 6px 14px; }
.notebox summary { cursor: pointer; padding: 8px 0; color: var(--muted);
transition: color .2s var(--ease); border-radius: 6px; }
.notebox summary:hover { color: var(--ink); }
.notebox .field { margin: 8px 0; }
/* ---------- trust strip (welcome) ---------- */
.trust-strip { display: inline-block; align-self: flex-start; margin: 2px 0 4px;
color: var(--sky); font-size: var(--step--1); font-weight: 600; letter-spacing: .2px;
background: rgba(168,216,212,.10); border: 1px solid rgba(168,216,212,.28);
border-radius: 999px; padding: 8px 16px; max-width: 60ch; }
/* ---------- mode toggle (welcome) ---------- */
.modelabel { margin: 6px 0 -6px; }
.modepick { display: flex; gap: 12px; flex-wrap: wrap; }
.modebtn { flex: 1 1 200px; cursor: pointer; text-align: left; font: inherit;
background: var(--surface); border: 1px solid var(--line); color: var(--ink);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
transition: transform .18s var(--ease-out), border-color .2s var(--ease),
background .2s var(--ease), box-shadow .25s var(--ease); }
.modebtn:hover { transform: translateY(-1px); border-color: var(--lav); box-shadow: var(--shadow-soft); }
.modebtn.on { border-color: var(--rose); background: rgba(232,163,192,.14);
box-shadow: 0 0 0 2px var(--rose) inset; }
.modebtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--ring); }
.modebtn-lab { font-weight: 700; }
.modebtn-sub { color: var(--muted); font-size: var(--step--1); }
/* ---------- tools-mode private log card ---------- */
.tools-log { gap: 14px; }
.logcard { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px 20px; margin: 4px 0; }
.logcard dt { color: var(--muted); font-size: var(--step--1); font-weight: 600;
text-transform: lowercase; letter-spacing: .3px; align-self: baseline; }
.logcard dd { margin: 0; color: var(--ink); font-weight: 600; }
.copy-fallback { position: absolute; left: -9999px; top: 0; }
.forget-msg:empty { display: none; }
.forget-msg { color: var(--sky); }
/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.tiles.small { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tiles.big { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.tile { cursor: pointer; background: var(--surface); border: 1px solid var(--line);
color: var(--ink); padding: 18px 16px; border-radius: var(--radius); font: inherit;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
font-weight: 600; text-align: center; transition: transform .18s var(--ease-out),
border-color .2s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease); }
.tile:hover { transform: translateY(-2px); border-color: var(--lav); box-shadow: var(--shadow-soft); }
.tile:active { transform: translateY(0) scale(.99); }
.tile.on { position: relative; border-color: var(--rose); background: rgba(232,163,192,.16);
box-shadow: 0 0 0 2px var(--rose) inset; }
.tile.on::after { content: "\2713"; position: absolute; top: 5px; right: 9px;
font-size: 13px; font-weight: 800; color: var(--rose); line-height: 1; }
.tile.interest { display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 26px 16px; }
.tile-emo { font-size: 30px; transition: transform .3s var(--ease-out); transform-origin: 50% 60%; }
.tile:hover .tile-emo { transform: scale(1.12); }
/* ---------- timer / activity ---------- */
.activity { gap: 14px; }
.act-top { display: flex; align-items: center; justify-content: space-between; }
.timer { font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700;
color: var(--lav); letter-spacing: 1px; }
.timebar { height: 4px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.timebar-fill { height: 100%; width: 0; background: var(--primary); border-radius: 4px;
transition: width .5s linear; box-shadow: 0 0 12px rgba(185,168,232,.35); }
.stage { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
min-height: 360px; padding: 22px; display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.act-hint { color: var(--muted); text-align: center; margin: 0 0 8px; }
/* breathing */
.act-breathe { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.breathe-orb { width: 170px; height: 170px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(185,168,232,.9), rgba(158,199,232,.35));
display: flex; align-items: center; justify-content: center; color: #1a1320; font-weight: 700;
transform: scale(.7); transition: transform var(--dur, 4000ms) var(--ease);
box-shadow: 0 0 60px rgba(185,168,232,.35); }
.breathe-orb[data-phase="in"] { transform: scale(1.1); }
.breathe-orb[data-phase="hold"] { transform: scale(1.1); }
.breathe-orb[data-phase="out"] { transform: scale(.7); }
.breathe-count { color: var(--muted); margin: 0; }
/* smash */
.act-smash { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.smash-field { position: relative; width: 100%; height: 300px; border-radius: var(--radius);
background: radial-gradient(circle at 50% 50%, var(--surface), var(--bg-2)); }
.orb { position: absolute; width: 54px; height: 54px; border: none; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, hsl(var(--h,300) 70% 75%), hsl(var(--h,300) 60% 50%));
cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s, opacity .2s; }
.orb:hover { transform: scale(1.06); }
.orb.pop { transform: scale(1.6); opacity: 0; }
/* reading */
.act-read { max-width: 56ch; display: flex; flex-direction: column; gap: 18px; }
.read-page { font-size: 19px; line-height: 1.7; color: var(--ink); min-height: 160px; }
.read-nav { display: flex; align-items: center; justify-content: space-between; }
.read-dots { color: var(--muted); letter-spacing: 4px; }
/* art */
.act-art { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.art-tools { display: flex; gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
transition: transform .18s var(--ease-out), border-color .2s var(--ease); }
.swatch:hover { transform: scale(1.12); }
.swatch.on { border-color: var(--ink); transform: scale(1.12); }
.swatch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 5px var(--ring); }
.art-canvas { width: 100%; max-width: 640px; background: #f7f3ee; border-radius: var(--radius);
touch-action: none; cursor: crosshair; }
.art-row { display: flex; gap: 12px; }
/* move */
.act-move { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.move-pulse { width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(circle, rgba(168,216,212,.7), transparent 70%);
animation: breathe 6s var(--ease) infinite; }
.move-prompt { font-size: 22px; max-width: 24ch; }
/* watch */
.act-watch { width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px; width: 100%; }
.joy-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
cursor: pointer; color: var(--ink); font: inherit;
transition: transform .2s var(--ease-out), border-color .2s var(--ease), background .2s var(--ease); }
.joy-card:hover { transform: translateY(-2px); border-color: var(--lav); }
.joy-card:active { transform: translateY(0) scale(.99); }
.joy-card.open { background: rgba(185,168,232,.12); border-color: var(--lav); }
.joy-e { font-size: 38px; }
.joy-e.anim { animation: float 5s var(--ease) infinite; }
.joy-t { font-size: 13px; color: var(--muted); }
/* ---------- reflect ---------- */
.reflect { gap: 16px; }
.why { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 16px; }
.why summary { cursor: pointer; padding: 10px 0; color: var(--muted);
transition: color .2s var(--ease); border-radius: 6px; }
.why summary:hover { color: var(--ink); }
.why ul { margin: 4px 0 12px; padding-left: 18px; color: var(--muted); }
.breath-dot { width: 60px; height: 60px; border-radius: 50%; background: var(--primary);
animation: breathe 3.4s var(--ease) infinite; }
/* ---------- support / lines ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
padding: 16px; }
.card.therapist { position: relative; }
.sample-badge { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 700;
color: var(--gold); background: rgba(240,207,138,.12); border: 1px solid rgba(240,207,138,.35);
padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.lines { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.line { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink);
background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px;
transition: border-color .2s var(--ease), background .2s var(--ease), transform .18s var(--ease-out); }
.line:hover { border-color: var(--sky); background: var(--surface-2); transform: translateX(2px); }
.line .num { color: var(--sky); font-weight: 700; font-variant-numeric: tabular-nums; }
.line.dir b { color: var(--lav); }
/* ---------- overlay ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
justify-content: center; padding: 20px; background: var(--scrim); backdrop-filter: blur(6px);
animation: overlayIn .25s var(--ease); }
.overlay[hidden] { display: none; }
.overlay-card { position: relative; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 28px; max-width: 520px; width: 100%; box-shadow: var(--shadow);
max-height: 86vh; overflow: auto; animation: cardIn .35s var(--ease-out); }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.overlay-card h2 { margin: 0 0 6px; font-size: 22px; }
.overlay-close { position: absolute; top: 10px; right: 12px; background: none; border: none;
color: var(--muted); font-size: 26px; cursor: pointer; line-height: 1;
width: 40px; height: 40px; border-radius: 999px; display: inline-flex;
align-items: center; justify-content: center;
transition: background .2s var(--ease), color .2s var(--ease); }
.overlay-close:hover { background: var(--surface-2); color: var(--ink); }
/* ---------- animations ---------- */
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .6; } }
@keyframes breathe { 0%,100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.fade { animation: fadeIn .5s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ---------- mobile responsiveness (verified at 380px) ---------- */
@media (max-width: 560px) {
.topbar { padding: 12px clamp(14px, 4vw, 20px); }
.brand-name { font-size: 16px; }
.brand-tagline { display: none; } /* keep the topbar uncrowded on phones */
.help-now { padding: 7px 12px; font-size: 13px; }
.row { gap: 10px; }
.row .btn { flex: 1 1 auto; } /* buttons fill the row, easier tap targets */
.btn.big { align-self: stretch; text-align: center; }
.stage { min-height: 320px; padding: 16px; }
.smash-field { height: 240px; }
.breathe-orb { width: 140px; height: 140px; }
.move-pulse { width: 100px; height: 100px; }
.namewrap { flex-wrap: wrap; }
.namewrap .field { flex: 1 1 100%; }
.tiles, .tiles.small, .tiles.big { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.watch-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.overlay { padding: 12px; }
.overlay-card { padding: 22px 18px; border-radius: var(--radius); }
}
@media (max-width: 380px) {
.tiles, .tiles.small, .tiles.big { grid-template-columns: 1fr 1fr; }
.tile { padding: 16px 10px; }
.tile.interest { padding: 20px 10px; }
.tile-emo { font-size: 26px; }
.joy-e { font-size: 32px; }
.timer { font-size: 20px; }
.read-page { font-size: 17px; }
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important; }
html { scroll-behavior: auto; }
.breathe-orb { transition: transform 1.2s linear; }
.overlay, .overlay-card, .fade { animation: none; }
}
/* ---------- system preference fallbacks (only when no explicit [data-theme]) ----------
The pastel :root IS already the light/happy default, so the light fallback is a no-op
refinement. The dark fallback gives system-dark users the dark palette automatically —
but an explicit data-theme on always wins (selectors below are scoped to
:root:not([data-theme]), so a chosen theme is never overridden by the OS setting). */
/* PASTEL is the intentional default "happy place" for everyone (the originator was
emphatic that dark "doesn't suit"). We deliberately do NOT auto-apply dark for
OS-dark users — dark is an explicit, persistent opt-in via the topbar toggle
([data-theme="dark"]). This honors the vision while still giving dark-preferrers
a one-tap, remembered choice. */
@media (prefers-color-scheme: light) {
/* explicit, gentle pastel reaffirmation for OS-light users (skipped if a theme is set) */
:root:not([data-theme]) { --bg: #fbf6ef; --bg-2: #f3ebe0; --surface: #fffdf9;
--surface-2: #f6eee3; --line: #e7ddce; --ink: #3a3340; --muted: #6b6275; --muted-2: #766d80; }
}
/* ---------- topbar controls: theme + sound toggles ---------- */
.topctl { display: flex; align-items: center; gap: 8px; }
.iconbtn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface); color: var(--ink); cursor: pointer; font-size: 16px; line-height: 1;
display: grid; place-items: center; padding: 0;
transition: transform .15s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.iconbtn:hover { transform: translateY(-1px); border-color: var(--lav); }
.iconbtn.off { color: var(--muted-2); }
.iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--ring); }
/* ---------- welcome ambient hero — the living "happy place" first impression ----------
NO bordered box, NO hard rectangle, NO stray side-lines. The scene is a soft full-bleed
glow that bleeds past the content column and feathers out on every edge via a radial
mask — so it reads as atmosphere behind the hero, not a framed widget. It sits BEHIND
the welcome copy (negative z within the screen), letting the hero breathe over it. */
.welcome { position: relative; }
.welcome-ambient {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
margin: 0;
border: 0;
box-shadow: none;
background: transparent;
border-radius: 0;
overflow: hidden;
pointer-events: none;
z-index: 0; /* behind the hero copy (which is lifted to z-index:1) */
opacity: 1;
}
/* lift the hero's actual content above the ambient glow */
.welcome > :not(.welcome-ambient) { position: relative; z-index: 1; }
/* ---------- compact welcome layout so "Begin" lands above the fold ----------
The screen overrides the looser default .screen gap and pulls the copy up over the
glow. Tuned so on a ~800px-tall viewport the brand, hero line, trust strip, mode
toggle, name field and the Begin button are all visible without scrolling. */
.screen.welcome {
gap: clamp(6px, 1vh, 12px);
padding-top: clamp(10px, 2vh, 20px);
max-width: 600px;
}
.screen.welcome .eyebrow { margin-bottom: -4px; }
.screen.welcome .h1 { max-width: 15ch; font-size: clamp(26px, 5.5vw, 40px); line-height: 1.05; text-shadow: 0 4px 20px rgba(255, 255, 255, 0.4); }
[data-theme="dark"] .screen.welcome .h1 { text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
.screen.welcome .lede { font-size: 15px; line-height: 1.45; max-width: 50ch; }
.screen.welcome .trust-strip { margin: 0; }
.screen.welcome .modelabel { margin: 0; }
.screen.welcome .modepick { gap: 10px; }
.screen.welcome .modebtn { padding: 10px 14px; }
.screen.welcome .namewrap { margin-top: 2px; }
.screen.welcome .disclaimer { margin: 0; font-size: 13px; }
.screen.welcome .btn.primary.big { margin-top: 6px; padding: 14px 32px; font-size: 16px; }
/* slow, staggered fade-up reveal of the hero on load (cohesive, never jarring).
Each direct child rises gently in sequence via animation-delay. The ambient layer is
excluded (it has its own fade). Honors reduced-motion below. */
@media (prefers-reduced-motion: no-preference) {
.screen.welcome { animation: none; } /* the children animate, not the container */
.screen.welcome > :not(.welcome-ambient) {
opacity: 0;
animation: heroRise .9s var(--ease-out) both;
}
.screen.welcome > :not(.welcome-ambient):nth-child(2) { animation-delay: .10s; }
.screen.welcome > :not(.welcome-ambient):nth-child(3) { animation-delay: .20s; }
.screen.welcome > :not(.welcome-ambient):nth-child(4) { animation-delay: .32s; }
.screen.welcome > :not(.welcome-ambient):nth-child(5) { animation-delay: .44s; }
.screen.welcome > :not(.welcome-ambient):nth-child(6) { animation-delay: .54s; }
.screen.welcome > :not(.welcome-ambient):nth-child(7) { animation-delay: .64s; }
.screen.welcome > :not(.welcome-ambient):nth-child(8) { animation-delay: .74s; }
.screen.welcome > :not(.welcome-ambient):nth-child(9) { animation-delay: .84s; }
.screen.welcome > :not(.welcome-ambient):nth-child(10) { animation-delay: .94s; }
}
@keyframes heroRise {
from { opacity: 0; transform: translateY(14px); filter: blur(2px); }
to { opacity: 1; transform: none; filter: none; }
}
/* activity top: extend ("stay longer") + try-something-else sit together */
.act-top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#extend-btn { border-color: var(--sky); color: var(--sky); }