/* The first screen: a live, paintable system in the develob navy palette. */
.hero{--hero-accent:#68adff;min-height:0;background:radial-gradient(ellipse at 67% 41%,#10264160,transparent 52%),#060c18}
.hero:before{display:none}.hero-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-layout{position:relative;padding-top:151px}.hero-kicker{min-height:44px;gap:18px}.hero-kicker .eyebrow{font-size:.75rem;letter-spacing:.1em;color:#a1b3cf}.hero-kicker .eyebrow:before{background:var(--hero-accent)}
.hero-play-controls{display:flex;align-items:center;gap:9px}.hero-palette{display:flex;gap:0;padding:0 5px;border:1px solid #adc9f020;border-radius:100px;background:#09101dd9}.accent-dot{width:40px;height:40px;display:grid;place-items:center;background:transparent;border-radius:50%;position:relative}.accent-dot:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--swatch);transition:box-shadow .2s,transform .2s}.accent-dot[aria-pressed=true]:before{box-shadow:0 0 0 4px #fff1,0 0 16px var(--swatch);transform:scale(1.15)}.accent-dot:hover:before{transform:scale(1.35)}
.motion-toggle{display:grid;place-items:center;height:42px;width:42px;border:1px solid #adc9f024;border-radius:50%;background:#09101dd9;color:#b5c9e4;font-size:1rem}.motion-toggle:hover{border-color:var(--hero-accent)}
.hero h1{margin-top:28px;line-height:1;width:100%;font-size:inherit;letter-spacing:normal}.hero-type{display:block;width:100%;height:auto;overflow:visible;color:var(--hero-accent);user-select:none;-webkit-user-select:none;touch-action:pan-y}.hero-type text{font-family:'Segoe UI',Arial,sans-serif;font-size:146px;font-weight:650;letter-spacing:-7px}.type-outline{fill:#08101d;stroke:var(--hero-accent);stroke-width:1.15;paint-order:stroke;stroke-opacity:.9}.type-painted{fill:var(--hero-accent);stroke:none}.hero-interactive .hero-type{cursor:crosshair}
.hero-subline{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:18px}.hero-subline>span{font:500 .75rem/1.6 Consolas,monospace;letter-spacing:.075em;color:#92aacb}.paint-controls{display:flex;align-items:center;gap:20px}.paint-hint,.paint-reset{display:flex;align-items:center;gap:10px;background:transparent;padding:9px 0;color:#95accb;font-size:.8125rem;line-height:1.5;text-align:left;min-height:40px}.paint-hint svg{width:21px;height:21px;flex:none;color:var(--hero-accent)}.paint-hint:hover,.paint-reset:hover{color:#e2eeff}.paint-reset{font-size:.75rem;border-bottom:1px solid #6985ad50;padding-block:5px;min-height:32px}.paint-reset:disabled{opacity:.35;cursor:default}.brush-cursor{pointer-events:none}
.hero-bottom-grid{margin-top:47px;align-items:center}.hero-summary{max-width:525px}.hero-summary>p{color:#c0cce0;font-size:1.0625rem;text-shadow:0 2px 12px #060c18}.hero-summary .hero-happiness{font-size:1.1875rem;color:#fff;margin-top:12px}.hero-actions{max-width:none}.hero-actions .button{font-size:.875rem;min-height:56px;padding-inline:26px}.hero-actions .button-light{background:var(--hero-accent);color:#060e1c;box-shadow:0 0 28px #0003}.hero-actions .button-outline{background:#070e1ccc;backdrop-filter:blur(6px)}.hero-system{margin-top:76px;padding-block:22px 25px;border-color:#7faadb26}.hero-system>span{color:#a0b6d4;text-shadow:0 1px 7px #060c18}.hero-system .scroll-link{color:var(--hero-accent);background:#08111fb0}.hero-system .system-nodes>span{background:#0a172adc}.hero.motion-paused .system-nodes i:after{animation-play-state:paused}
@media(min-width:1600px){.hero-layout{padding-top:176px}.hero h1{margin-top:35px}.hero-system{margin-top:90px}.hero-bottom-grid{margin-top:54px}}
@media(max-width:1200px){.hero-layout{padding-top:145px}.hero-actions{max-width:365px}.hero-bottom-grid{gap:25px}.hero-subline{align-items:flex-start}.paint-hint{max-width:280px}.hero-system{margin-top:62px}}
@media(max-width:1000px){.hero-layout{padding-top:132px}.hero-bottom-grid{align-items:flex-start;gap:26px;margin-top:35px}.hero-actions{max-width:none}.hero-subline{flex-direction:column;gap:8px}.hero-system{margin-top:49px}.hero-kicker .eyebrow{font-size:.6875rem;letter-spacing:.07em}.hero h1{margin-top:25px}.hero-type text{font-weight:650}.type-outline{stroke-width:1.5}}
@media(max-width:760px){.hero-layout{padding-top:114px}.hero-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.hero-kicker .eyebrow{font-size:.6875rem;line-height:1.6;margin:0}.hero-play-controls{margin-left:auto}.hero h1{margin-top:29px}.hero-type{min-height:0}.type-outline{stroke-width:2}.hero-subline{margin-top:19px;gap:10px}.hero-subline>span{font-size:.6875rem;letter-spacing:.04em}.paint-controls{gap:18px;width:100%;justify-content:space-between}.paint-hint{font-size:.75rem;max-width:none}.paint-hint svg{width:19px;height:19px}.paint-reset{font-size:.75rem}.hero-bottom-grid{margin-top:30px;gap:24px}.hero-summary>p{font-size:1rem;line-height:1.75}.hero-summary .hero-happiness{font-size:1.125rem;margin-top:13px}.hero-actions{gap:12px}.hero-actions .button{font-size:.8125rem;min-height:50px;padding:15px 20px;gap:17px}.hero-system{margin-top:42px;padding-block:23px}.hero-system>span{font-size:.75rem}.hero-palette{padding-inline:3px}.accent-dot{width:34px;height:36px}.motion-toggle{width:38px;height:38px}.hero-play-controls{gap:7px}}
@media(max-width:480px){.hero-kicker .eyebrow{width:100%;font-size:.6875rem}.hero-play-controls{margin-left:0}.hero h1{margin-top:25px}.paint-hint-text{max-width:216px}.hero-actions .button{font-size:.8125rem;padding-inline:18px;gap:15px}.hero-bottom-grid{margin-top:25px}.hero-system{margin-top:33px}.hero-subline>span{font-size:.6875rem}.hero-layout{padding-top:118px}.hero-type{width:100%}.brush-cursor{display:none}}
@media(max-width:480px){.type-outline{stroke-width:3.5;fill:#0d1b2e}}
@media(max-width:360px){.hero-actions .button{font-size:.8125rem;padding-inline:16px;gap:12px}.paint-controls{gap:11px}.paint-hint{gap:7px}.paint-hint-text{max-width:184px}.hero-subline>span{font-size:.625rem}.hero-kicker .eyebrow{font-size:.625rem}.hero-system .system-nodes{font-size:.625rem}}
@media(prefers-reduced-motion:reduce){.brush-cursor{display:none}}
@media print{.hero-scene,.hero-play-controls,.paint-controls{display:none!important}.hero{background:white!important}.type-outline{fill:#142542;stroke:none}.type-painted{display:none}.hero h1{max-width:600px}.hero-layout{padding-top:20px}}