/* Hallmark · shape: Product story · genre: playful · theme: Coral adapted to existing NEURO Skumring identity · job: try · draw: b59e29 (Stat-Led replaced: no verified metrics)
 * hero: Stage · nav: wordmark and destinations · footer: colophon · imagery: six actual prototype captures · signature: real NEURO small-step screen
 * axes: light+dark/grotesk-sans/plum-blush · posture: committed · modes: light+dark · contrast: checked numerically · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, removed decorative movement outside the requested intro */
/* Hallmark · waive 1 · preflight prototype uses system-ui · NEURO keeps its existing prototype typography across the website and app */
/* Hallmark · answered F3 · The full heading remains one readable phrase; no forced balance is needed. */
@import url("./tokens.css");
@font-face { font-family:"NEURO Brush"; src:url("assets/neuro-brush.woff2") format("woff2"); font-display:swap; }
* { box-sizing:border-box; }
html,body { overflow-x:clip; }
html { scroll-padding-top:var(--space-lg); scrollbar-color:var(--color-muted) var(--color-paper); -webkit-hyphens:manual; hyphens:manual; }
body { margin:0; background:var(--color-paper); color:var(--color-ink); font:400 17px/1.6 var(--font-body); caret-color:var(--color-accent); }
::selection { background:var(--color-accent); color:var(--color-accent-ink); }
:focus-visible { outline:3px solid var(--color-focus); outline-offset:4px; }
a { color:inherit; text-underline-offset:.22em; }
button,select,input { font:inherit; }
button,a,summary,select,input { -webkit-tap-highlight-color:var(--color-transparent); }
button,select,summary { cursor:pointer; }
button { color:inherit; }
h1,h2,h3 { margin:0; font-family:var(--font-display); font-weight:700; line-height:1.08; letter-spacing:var(--tracking-display); min-width:0; overflow-wrap:break-word; }
h1 { font-size:var(--text-display); max-width:12ch; }
h2 { font-size:var(--text-section); max-width:17ch; }
h3 { font-size:var(--text-title); line-height:1.3; letter-spacing:-.02em; }
p { margin:0; max-width:60ch; text-wrap:pretty; }
img { display:block; max-width:100%; height:auto; }
[hidden] { display:none!important; }
.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.skip { position:absolute; transform:translateY(-200%); margin:var(--space-md); z-index:1000; padding:var(--space-md); background:var(--color-accent); color:var(--color-accent-ink); }
.skip:focus { transform:none; }
.notice { padding:var(--space-xs) var(--space-lg); text-align:center; background:var(--color-stage); color:var(--color-stage-ink); font-size:var(--text-sm); }
.header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); padding-block:var(--space-md); }
.logo { display:flex; align-items:center; min-height:48px; }
.logo img { width:132px; height:auto; }
nav { display:flex; align-items:center; gap:var(--space-lg); }
nav a { min-height:48px; display:inline-flex; align-items:center; text-decoration:none; font-size:1rem; }
nav a:hover { text-decoration:underline; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-md); }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:var(--space-sm) var(--space-lg); border:1px solid var(--color-accent); border-radius:var(--radius-input); background:var(--color-accent); color:var(--color-accent-ink); text-decoration:none; font-weight:600; line-height:1.4; transition:transform var(--dur-micro) var(--ease-out); }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(1px); }
.button:disabled { cursor:not-allowed; opacity:.75; transform:none; }
.button.quiet { background:var(--color-transparent); color:var(--color-ink); border-color:var(--color-control); }
.textlink { display:inline-flex; align-items:center; min-height:48px; }
.theme-toggle { border:1px solid var(--color-control); border-radius:var(--radius-input); background:var(--color-transparent); min-height:48px; min-width:88px; padding:var(--space-xs) var(--space-md); }
.theme-toggle:hover { background:var(--color-paper-2); }
.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--gap-columns); align-items:center; min-height:calc(100svh - 136px); padding-block:var(--space-xl); }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-lg); }
.lead { font-size:1.2rem; line-height:1.6; max-width:35ch; }
.hero-visual { color:var(--color-ink); background:var(--color-paper-3); padding:var(--space-lg); border-radius:var(--radius-card); display:flex; justify-content:center; align-items:center; margin:0; position:relative; }
.screen { width:auto; height:540px; max-width:100%; object-fit:contain; border-radius:var(--radius-card); box-shadow:var(--shadow-visual); }
.hero-visual figcaption { position:absolute; right:0; bottom:var(--space-lg); background:var(--color-sticker); color:var(--color-ink); border-radius:var(--radius-input); padding:var(--space-sm) var(--space-md); max-width:17ch; font-size:var(--text-sm); }
.section { padding-block:var(--space-4xl); }
.section-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--gap-columns); margin-bottom:var(--space-2xl); }
.section-head p { max-width:31ch; color:var(--color-muted); }
.split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap-columns); align-items:center; }
.moments { display:grid; gap:var(--space-md); }
.moment { width:100%; text-align:left; background:var(--color-transparent); border:0; border-bottom:1px solid var(--color-rule); padding:var(--space-lg) var(--space-md); min-height:80px; display:grid; grid-template-columns:32px minmax(0,1fr); gap:var(--space-md); align-items:start; border-radius:var(--radius-input); }
.moment[aria-pressed="true"] { background:var(--color-paper-2); border-color:var(--color-control); }
.moment:hover { background:var(--color-paper-2); }
.moment strong { display:block; font-size:1.2rem; margin-bottom:var(--space-xs); }
.moment span { display:block; color:var(--color-muted); }
.moment svg,.icon { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.example { margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--space-lg); }
.example img { width:300px; border-radius:var(--radius-card); box-shadow:var(--shadow-visual); }
figcaption { color:var(--color-muted); font-size:var(--text-sm); }
.blush-section { background:var(--color-paper-2); color:var(--color-ink); }
.community-copy { display:grid; gap:var(--space-lg); align-content:center; }
.community-copy p { max-width:35ch; }
.intent { display:inline-block; border:1px solid var(--color-control); border-radius:var(--radius-input); padding:var(--space-xs) var(--space-md); font-size:1rem; width:fit-content; }
.settings-section { padding-block:var(--space-3xl); border-block:1px solid var(--color-rule); }
.preferences { display:flex; flex-wrap:wrap; gap:var(--space-xl); align-items:center; margin-top:var(--space-xl); }
.preferences label { display:flex; align-items:center; gap:var(--space-sm); min-height:48px; }
.preferences select { min-height:48px; padding:var(--space-xs) var(--space-md); border:1px solid var(--color-control); border-radius:var(--radius-input); color:var(--color-ink); background:var(--color-surface); }
input[type="checkbox"] { width:24px; height:24px; accent-color:var(--color-accent); }
.settings-section p { margin-top:var(--space-lg); color:var(--color-muted); }
.about { align-items:center; }
.portrait { margin:0; width:100%; max-width:400px; }
.portrait img { width:100%; height:auto; border-radius:var(--radius-card); }
.about-name { font-family:var(--font-brand); font-size:clamp(2rem,3vw,2.75rem); line-height:1.2; letter-spacing:0; margin-top:var(--space-lg); margin-bottom:var(--space-lg); }
.story { display:grid; gap:var(--space-lg); padding-top:var(--space-sm); }
.story .pending { padding:var(--space-lg); background:var(--color-paper-2); border-radius:var(--radius-input); color:var(--color-muted); }
.download { border-radius:var(--radius-card); background:var(--color-paper-2); padding:var(--space-2xl); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap-columns); align-items:center; }
.download p { margin-top:var(--space-lg); max-width:35ch; }
.platforms { display:grid; gap:var(--space-md); }
.platforms .button { justify-content:space-between; }
.platforms small { font-size:var(--text-sm); }
.footer { display:flex; justify-content:space-between; gap:var(--space-lg); align-items:center; padding-block:var(--space-xl); border-top:1px solid var(--color-rule); font-size:var(--text-sm); color:var(--color-muted); }
.footer img { width:100px; }
.footer-links { display:flex; flex-wrap:wrap; gap:var(--space-lg); align-items:center; }
.intro { position:fixed; inset:0; z-index:900; background:var(--color-stage); color:var(--color-stage-ink); display:none; place-items:center; padding:var(--space-xl); }
.intro.is-open { display:grid; }
.intro-content { display:flex; flex-direction:column; gap:var(--space-lg); align-items:center; }
.intro img { width:min(520px,75%); animation:welcome 850ms var(--ease-out) both; }
.intro p { font-size:1.2rem; text-align:center; }
.intro button { background:var(--color-transparent); border:1px solid var(--color-stage-ink); color:var(--color-stage-ink); min-height:48px; padding:var(--space-sm) var(--space-lg); border-radius:var(--radius-input); }
.intro :focus-visible { outline-color:var(--color-stage-ink); }
@keyframes welcome { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
html[data-simple="true"] .screen,html[data-simple="true"] .example img { box-shadow:none; }
html[data-simple="true"] .hero-visual figcaption { display:none; }
html[data-simple="true"] .about-name { font-family:var(--font-body); font-size:2.5rem; }
html[data-motion="off"] *,html[data-simple="true"] * { animation:none!important; transition:none!important; }
html[data-motion="off"] .button:hover,html[data-simple="true"] .button:hover { transform:none; }
html:not(.js) .js-only { display:none; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .button:hover,.button:active { transform:none; } }
@media(min-width:1600px) { .hero { min-height:780px; } }
@media(max-width:900px) { nav { gap:var(--space-md); } .header { flex-wrap:wrap; } .hero { gap:var(--space-lg); } h1 { font-size:clamp(3rem,6vw,4rem); } .screen { width:260px; } .hero-visual figcaption { position:static; margin-top:var(--space-lg); } .hero-visual { flex-direction:column; } .section { padding-block:var(--space-3xl); } }
@media(max-width:650px) { body { font-size:17px; } .header { gap:var(--space-xs); } .header .logo img { width:112px; } nav { order:3; width:100%; justify-content:space-between; border-top:1px solid var(--color-rule); padding-top:var(--space-xs); } nav a { font-size:1rem; } .header>.actions { margin-left:auto; } .header>.actions>a { display:none; } .hero { grid-template-columns:minmax(0,1fr); min-height:0; padding-top:var(--space-xl); padding-bottom:var(--space-3xl); gap:var(--space-xl); } h1 { font-size:clamp(2.8rem,10vw,3.6rem); max-width:13ch; } .hero-copy { gap:var(--space-lg); } .hero-visual figcaption { position:absolute; bottom:var(--space-lg); right:0; } .hero .screen { width:260px; height:auto; } .section-head,.split { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-xl); } .section-head { margin-bottom:var(--space-xl); } .section-head p { max-width:45ch; } .community-visual { order:2; } .example img { width:280px; } .preferences { display:grid; gap:var(--space-md); } .preferences label { flex-wrap:wrap; } .download { grid-template-columns:minmax(0,1fr); padding:var(--space-lg); gap:var(--space-xl); } .footer { align-items:flex-start; flex-direction:column; } .section { padding-block:var(--space-3xl); } .settings-section { padding-block:var(--space-2xl); } }