/* Sunstate · shared brand layer for the launch page, web manual and app screens.
   Tokens follow the Sunstate Manual design system; usage follows SUNSTATE-REDESIGN.md:
   quiet ink chrome, one pink accent, the sunset ramp only inside picture moments. */
@font-face{font-family:Anton;src:url(assets/fonts/Anton-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/Barlow-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:Yellowtail;src:url(assets/fonts/Yellowtail-Regular.woff) format("woff");font-weight:400;font-display:swap}

:root{
 --ink-950:#0B0710;--ink-900:#130D1C;--ink-800:#1D1529;--ink-700:#2A2038;--ink-600:#3C3050;
 --paper-100:#FFF6EC;--paper-200:#F6E8D8;--paper-300:#E8D3BD;
 --sun-gold:#FFC94A;--sun-tangerine:#FF8A3D;--sun-flamingo:#FF3E9A;--sun-orchid:#C23CC8;--sun-dusk:#6B2FA0;--sun-night:#2A1458;
 --neon-pink:#FF2E88;--neon-cyan:#2EE6E6;--teal:#13B5A6;--success:#2FD08A;
 --grad-sunset:linear-gradient(180deg,#FFC94A 0%,#FF8A3D 22%,#FF3E9A 52%,#C23CC8 74%,#2A1458 100%);
 --font-display:Anton,Impact,"Arial Narrow",sans-serif;
 --font-ui:"Barlow Condensed","Arial Narrow",sans-serif;
 --font-body:Barlow,"Helvetica Neue",Arial,sans-serif;
 --font-script:Yellowtail,cursive;
 --ease:cubic-bezier(.16,1,.3,1);--fast:120ms;--base:220ms;--slow:480ms;
 --r-control:12px;--r-card:20px;--r-phone:44px;
 /* theme roles (dark) */
 --page:var(--ink-950);--card:var(--ink-900);--raised:var(--ink-800);--line:rgba(255,246,236,.10);--line-strong:rgba(255,246,236,.22);
 --text:#FFF6EC;--text-2:#C9BCD6;--text-3:#8F82A2;--accent:var(--neon-pink);--accent-press:#E0186F;--on-accent:var(--ink-950);--focus:var(--neon-cyan);
 --cap-bg:var(--paper-100);--cap-fg:var(--ink-950);--cap-edge:var(--paper-300);
}
[data-theme=light]{
 --page:#FFF6EC;--card:#FFFFFF;--raised:#FBEEDF;--line:rgba(29,21,41,.12);--line-strong:rgba(29,21,41,.28);
 --text:#1D1529;--text-2:#4A3D5C;--text-3:#6E6180;--accent:#D4106A;--accent-press:#B80D5B;--on-accent:#FFF6EC;--focus:#0E8F84;
 --cap-bg:#1D1529;--cap-fg:#FFF6EC;--cap-edge:#0B0710;
}

/* Keycap marker · the signature. One letter per mission, same everywhere. */
.keycap{--k:32px;display:inline-grid;place-items:center;flex:none;width:var(--k);height:var(--k);border-radius:8px;background:var(--cap-bg);color:var(--cap-fg);box-shadow:inset 0 -2px 0 var(--cap-edge),0 1px 0 rgba(0,0,0,.35);font:400 calc(var(--k)*.53)/1 var(--font-display);padding-bottom:2px;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.keycap.lg{--k:48px;border-radius:12px}
.keycap.sm{--k:24px;border-radius:6px}
.keycap[data-state=selected],.keycap.selected{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 -2px 0 rgba(0,0,0,.28),0 1px 0 rgba(0,0,0,.35)}
.keycap[data-state=locked]{background:var(--raised);color:var(--text-3);box-shadow:inset 0 0 0 1px var(--line-strong)}

/* Material plates · content icons painted with the sunset ramp. */
.plate{--p1:#FFE29A;--p2:#FF8A3D;--p3:#7A2E12;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(155deg,var(--p1),var(--p2));color:var(--p3);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.18)}
.plate svg{width:22px;height:22px;stroke-width:2.1}
.plate.gold{--p1:#FFE7A6;--p2:#FFC94A;--p3:#6B3A00}
.plate.tangerine,.plate.amber{--p1:#FFC08F;--p2:#FF8A3D;--p3:#6A2208}
.plate.flamingo,.plate.rose{--p1:#FF9CCB;--p2:#FF3E9A;--p3:#5A0730}
.plate.orchid,.plate.violet{--p1:#E7A4EB;--p2:#C23CC8;--p3:#3B0B47}
.plate.teal,.plate.lagoon{--p1:#8EF1EA;--p2:#13B5A6;--p3:#053B3A}

/* Status dot · the only place semantic colour appears. */
.status{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.status[data-status=ready]::before{background:var(--accent)}
.status[data-status=completed]::before{background:var(--success)}

/* Phone frame for app screens on the website and the design board. */
.phone{--s:.72;position:relative;flex:none;width:calc(422px*var(--s));height:calc(894px*var(--s));border-radius:calc(64px*var(--s));background:#07040B;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 70px -20px rgba(0,0,0,.7)}
.phone>.screen{position:absolute;left:calc(10px*var(--s));top:calc(10px*var(--s));width:402px;height:874px;transform:scale(var(--s));transform-origin:0 0;border-radius:54px;overflow:hidden}

/* iOS app screens (402 × 874 pt), mirrored 1:1 in SwiftUI. */
.ios{position:relative;height:100%;background:var(--page);color:var(--text);font:400 17px/1.35 var(--font-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow:hidden;text-align:left}
.ios svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ios-status{display:flex;justify-content:space-between;align-items:center;height:54px;padding:6px 32px 0 40px;font:600 17px/1 -apple-system,"SF Pro Text",var(--font-body)}
.ios-status i{display:flex;gap:6px;align-items:center}.ios-status b{display:block;width:26px;height:12px;border-radius:4px;border:1.5px solid currentColor;position:relative}.ios-status b::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:currentColor;border-radius:1.5px}
.ios-island{position:absolute;top:11px;left:50%;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000}
.ios-body{padding:4px 20px 120px;display:flex;flex-direction:column;gap:28px}
.ios-nav{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 16px;margin-bottom:4px}
.ios-round{display:grid;place-items:center;width:44px;height:44px;border-radius:22px;background:var(--raised);color:var(--text)}
.ios-round svg{width:20px;height:20px}
.ios-back{display:flex;align-items:center;gap:2px;height:44px;padding:0 14px 0 8px;border-radius:22px;background:var(--raised);font:600 17px/1 var(--font-ui)}
.ios-title{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ios-title h1,.ios-title h2{margin:0;font:400 44px/.9 var(--font-display);text-transform:uppercase;letter-spacing:0}
.ios-sub{margin:-18px 0 0;color:var(--text-2);font-size:16px}
.ios-section{display:flex;flex-direction:column;gap:12px}
.ios-head{display:flex;justify-content:space-between;align-items:baseline}
.ios-head h3{margin:0;font:600 22px/1.1 var(--font-ui)}
.ios-head a{color:var(--accent);font:600 17px/1 var(--font-ui)}
.ios-group{background:var(--card);border-radius:20px;overflow:hidden}
.ios-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:72px;padding:12px 16px}
.ios-row+.ios-row{border-top:1px solid var(--line);border-image:linear-gradient(90deg,transparent 74px,var(--line) 74px) 1}
.ios-row strong{display:block;font-weight:600;font-size:17px;line-height:1.25}
.ios-row small{display:block;margin-top:3px;color:var(--text-3);font-size:14px}
.ios-row .chev{width:14px;height:14px;color:var(--text-3)}
.ios-row .value{color:var(--text-2);font-size:16px}
.ios-note{margin:0;color:var(--text-3);font-size:13px;line-height:1.4}
.ios-feature{position:relative;height:236px;border-radius:20px;overflow:hidden;background:#2A1458 center/cover no-repeat;color:var(--paper-100)}
.ios-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,7,16,0) 30%,rgba(11,7,16,.82) 100%)}
.ios-feature div{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:flex;flex-direction:column;gap:6px}
.ios-feature b{font:400 32px/.92 var(--font-display);text-transform:uppercase}
.ios-feature div>span{font-size:15px;color:rgba(255,246,236,.82)}
.ios-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:12px;background:var(--raised);font:600 15px/1 var(--font-ui)}
.ios-seg>span{display:grid;place-items:center;height:32px;border-radius:9px;color:var(--text-2)}
.ios-seg .on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
[data-theme=light] .ios-seg .on{background:#fff}
.ios-button{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:14px;font:600 18px/1 var(--font-ui)}
.ios-button.primary{background:var(--accent);color:var(--on-accent)}
.ios-button.secondary{background:var(--raised);color:var(--text)}
.ios-map{position:relative;height:388px;border-radius:20px;overflow:hidden;background-color:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.ios-map .keycap{position:absolute;transform:translate(-50%,-50%)}
.ios-map .ring{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:1.5px solid var(--accent)}
.ios-map .tag{position:absolute;left:14px;bottom:12px;color:var(--text-3);font-size:12px}
.ios-sheet{background:var(--card);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:16px}
.ios-sheet-head{display:flex;gap:14px;align-items:center}
.ios-sheet-head b{display:block;font:400 28px/.92 var(--font-display);text-transform:uppercase}
.ios-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:14px;overflow:hidden}
.ios-facts div{background:var(--raised);padding:12px 14px}
.ios-facts dt{color:var(--text-3);font-size:13px}.ios-facts dd{margin:4px 0 0;font-weight:600;font-size:17px}
.ios-tabbar{position:absolute;left:20px;right:20px;bottom:24px;height:64px;display:grid;grid-template-columns:repeat(4,1fr);padding:4px;border-radius:32px;background:rgba(29,21,41,.78);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.35)}
[data-theme=light] .ios-tabbar{background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(29,21,41,.08),0 10px 30px rgba(42,20,88,.14)}
.ios-tabbar>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:28px;color:var(--text);font:600 11px/1 var(--font-body)}
.ios-tabbar svg{width:24px;height:24px}
.ios-tabbar>.on{background:var(--line);color:var(--accent)}
.ios-home{position:absolute;bottom:8px;left:50%;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:var(--text);opacity:.9}

/* Theme switch · sun and moon in one key. The knob carries the active symbol and snaps with a small overshoot. */
:root{--toggle-on:var(--neon-cyan)}
[data-theme=light]{--toggle-on:#0E8F84}
.theme-switch{position:relative;flex:none;width:68px;height:36px;padding:0;border:0;border-radius:18px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-2);cursor:pointer;transition:background-color var(--base) var(--ease)}
.theme-switch::before,.theme-switch::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;background:currentColor;opacity:.5;-webkit-mask:var(--glyph) center/contain no-repeat;mask:var(--glyph) center/contain no-repeat}
.theme-switch::before{left:11px;--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.theme-switch::after{right:11px;--glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z'/%3E%3C/svg%3E")}
.theme-knob{position:absolute;z-index:1;top:3px;left:3px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper-100);color:var(--ink-950);box-shadow:0 1px 3px rgba(0,0,0,.3);transform:translateX(32px);transition:transform 380ms cubic-bezier(.34,1.4,.64,1)}
.theme-switch[aria-checked=true] .theme-knob{transform:none}
.theme-knob svg{position:absolute;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--base) var(--ease),transform 380ms var(--ease)}
.theme-switch[aria-checked=true] .theme-moon,.theme-switch:not([aria-checked=true]) .theme-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
@media (hover:hover){.theme-switch:hover{background:var(--ink-700)}[data-theme=light] .theme-switch:hover{background:#F3E2CF}}
/* The page change is revealed from the switch by theme.mjs; the default cross-fade is switched off. */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){.theme-knob,.theme-knob svg{transition:none}}