:root{--page:#050505;--bg:#0a0908;--card:#12100c;--card2:#18201c;--sel:#10261d;--line:#24302b;--text:#f0faf5;--muted:#9fb3aa;--faint:#7f938a;--accent:#7cf5c4;--accentHi:#b5fbe0;--accentDeep:#3fbf8f;--onAccent:#03261b;--warn:#f2c879;--glow:rgba(124,245,196,.18);--atmosphere:radial-gradient(120% 55% at 50% 0%, rgba(124,245,196,.08), transparent 62%)}
/* Shell screens (DESIGN §10.1 tokens, §10.2 motion, §13 states). Tokens come from brand.css (generated). */
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--page);color:var(--text);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overflow:hidden}
body{background:var(--page) var(--atmosphere) no-repeat}
:root{--ease:cubic-bezier(.2,.7,.2,1);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
#app{height:100%}
.screen{display:none;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b));text-align:center;opacity:0;transition:opacity .22s var(--ease)}
body[data-screen="splash"] [data-for="splash"],body[data-screen="down"] [data-for="down"],body[data-screen="offline"] [data-for="offline"],
body[data-screen="captive"] [data-for="captive"],body[data-screen="forced"] [data-for="forced"],body[data-screen="paused"] [data-for="paused"]{display:flex;opacity:1}
h1{font-size:20px;font-weight:700;letter-spacing:.1px;max-width:22em}
.body{color:var(--muted);max-width:24em}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13px}.tiny{font-size:11px;letter-spacing:.4px}
.hint{color:var(--faint);font-size:13px;min-height:1.4em}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.row.end{justify-content:flex-end}
button{font:inherit;border:0;border-radius:14px;min-height:48px;padding:0 22px;cursor:pointer;transition:transform .18s var(--ease),opacity .18s var(--ease)}
button:active{transform:scale(.97)}
.primary{background:linear-gradient(135deg,var(--accentHi),var(--accent));color:var(--onAccent);font-weight:700;min-width:200px}
.ghost{background:var(--card2);color:var(--text);border:1px solid var(--line)}
.chip{background:var(--card);color:var(--text);border:1px solid var(--line);min-height:40px;padding:0 16px;border-radius:999px;font-size:14px}
button:focus-visible{outline:2px solid var(--accentHi);outline-offset:3px}

/* gnome: Amca loop (video) or still; BirSpin has no mascot → icon */
.hero{width:168px;height:168px;position:relative;display:grid;place-items:center}
.hero video,.hero img{width:100%;height:100%;object-fit:contain}
.hero::after{content:"";position:absolute;inset:14%;border-radius:50%;box-shadow:0 0 0 0 var(--glow);animation:pulse 2.6s var(--ease) infinite;pointer-events:none;opacity:0}
.hero.calm::after{opacity:1}
.hero.logo img{width:96px;height:96px;border-radius:22px}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 26px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* leaf loader: 2.8 s draw → hold → fade; slow network 4.2 s; done = filled */
.lrow{display:flex;align-items:center;gap:10px;justify-content:center}
.leaf{width:44px;height:42px;overflow:visible}
.leaf path{fill:none;stroke:var(--accent);stroke-width:14;stroke-linejoin:round;stroke-dasharray:6600;stroke-dashoffset:6600;animation:draw 2.8s var(--ease) infinite}
.leaf.slow path{animation-duration:4.2s}
.leaf.done path{animation:none;stroke-dashoffset:0;fill:var(--glow);transition:fill .4s}
@keyframes draw{0%{stroke-dashoffset:6600;opacity:1}62%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* dice gnome rig — download page (P2b) and future in-shell use */
/* dice gnome rig (site HomeWheelShowcase): one image, three clip-path layers */
.dice{width:64px;height:64px;position:relative;flex:none}
.dice span{position:absolute;inset:0;background:var(--dice) center/contain no-repeat}
.dice .b{clip-path:inset(30% 0 0 0);animation:bob 3.6s ease-in-out infinite}
.dice .l{clip-path:inset(0 50% 62% 0);transform-origin:35% 22%;animation:toss 2.4s ease-in-out infinite}
.dice .r{clip-path:inset(0 0 62% 50%);transform-origin:65% 22%;animation:toss 2.4s ease-in-out .6s infinite}
@keyframes bob{50%{transform:translateY(-4%) rotate(2deg)}}
@keyframes toss{0%{transform:translateY(0) rotate(0)}20%{transform:translateY(-16%) rotate(-150deg)}38%{transform:translateY(-3%) rotate(-330deg)}46%{transform:translateY(-6%) rotate(-360deg)}55%,100%{transform:translateY(0) rotate(-360deg)}}

.progress{width:min(280px,80%);height:6px;border-radius:6px;background:var(--card2);overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accentDeep),var(--accentHi));transition:width .25s linear}

/* landscape (B6): two columns */
@media (orientation:landscape) and (max-height:520px){.screen{flex-direction:row;flex-wrap:wrap;align-content:center;column-gap:32px}.hero{width:132px;height:132px}}

/* reduced motion (OS setting or low-RAM device): no loops, leaf fully drawn, no fades */
html.rm *,html.rm *::after{animation:none!important;transition:none!important}
html.rm .leaf path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}.leaf path{stroke-dashoffset:0}}

/* iPhone launcher additions on top of shell/shell.css (same tokens, same calm screens). */
body[data-screen="connected"] [data-for="connected"],body[data-screen="updating"] [data-for="updating"],
body[data-screen="install"] [data-for="install"],body[data-screen="other"] [data-for="other"],body[data-screen="inapp"] [data-for="inapp"],
body[data-screen="android"] [data-for="android"],body[data-screen="desktop"] [data-for="desktop"],body[data-screen="moved"] [data-for="moved"]{display:flex;opacity:1}

/* safe areas on every side (notch / Dynamic Island / home bar / landscape) */
.screen{padding:calc(24px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px))}
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
[hidden]{display:none!important}

/* iOS: no VP9-alpha WebM (DESIGN §10.2) → the still gnome with a soft bob */
.hero img{animation:gbob 4.4s var(--ease) infinite}
.hero.calm img{animation-duration:6.6s}
.hero.small{width:112px;height:112px}
@keyframes gbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}

/* guides scroll inside the screen, never the page (no rubber-band of the whole app) */
.screen.guide{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-user-select:text;user-select:text}
.screen.guide>*{flex:none}
.screen.guide h1{margin-top:4px}
.steps{list-style:none;padding:0;margin:4px 0 2px;display:grid;gap:10px;width:min(360px,100%);text-align:left}
.steps li{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;min-height:56px}
.steps b{display:block;font-weight:600}
.steps small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--sel);display:grid;place-items:center}
.ico svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.app{background:none}
.ico.app img{width:36px;height:36px;border-radius:9px}
.addr{font-weight:600;color:var(--accentHi);word-break:break-all}
.ghost{min-width:200px}

/* D1 push soft-ask sheet */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:5}
.sheet-card{width:min(480px,100%);background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.sheet-card h2{font-size:18px}

@media (orientation:landscape) and (max-height:520px){.screen.guide{flex-direction:column;flex-wrap:nowrap}.steps{width:min(520px,100%);grid-template-columns:1fr 1fr}}
html.rm .hero img{animation:none}
@media (prefers-reduced-motion:reduce){.hero img{animation:none}}