/* ============================================================================
   yatawara.com — CORE  ·  APPLE × COSMOS
   Premium, cinematic, restrained — the apple.com language — set in deep space.
   Near-black cosmic ground, SF/Inter type, huge clean headlines, Apple blue
   links, big rounded tiles, generous space. The animated universe (cosmos.js)
   lives behind everything. Dark by default. Class names match shell.js + pages.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS  (dark / cosmic default)
   -------------------------------------------------------------------------- */
:root {
  /* space surfaces */
  --bg:    #000206;     /* deep space */
  --bg-2:  #06080f;
  --bg-3:  #0c0f1a;
  --panel:   rgba(255,255,255,0.045);   /* glassy tile */
  --panel-2: rgba(255,255,255,0.075);

  /* hairlines */
  --hair:   rgba(255,255,255,0.09);
  --hair-2: rgba(255,255,255,0.16);
  --hair-3: rgba(255,255,255,0.28);

  /* ink */
  --text:      #f5f7fa;
  --text-soft: #c6ccd8;
  --dim:       #8b92a1;
  --dimmer:    #5d6473;
  --faint:     #3a3f4b;

  /* Apple blue + cosmic accents (UI stays mostly mono+blue) */
  --accent:   #2997ff;   /* Apple link blue */
  --accent-2: #66b5ff;
  --accent-dim: rgba(41,151,255,0.14);
  --violet:  #a98bff;    /* nebula violet (sparingly) */
  --teal:    #4fd6e6;
  --pink:    #ff6aa6;

  --grad-text: linear-gradient(180deg, #ffffff 0%, #c9d3e6 100%);
  --grad-accent: linear-gradient(120deg, var(--accent), var(--violet));
  --grad-line: linear-gradient(90deg, transparent, var(--hair-2), transparent);

  /* type — SF on Apple devices, Inter everywhere else */
  --font-display: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Inter", system-ui, sans-serif;
  --font-code:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-hero:  clamp(2.9rem, 8vw, 6.5rem);
  --fs-h1:    clamp(2.3rem, 5.5vw, 4.2rem);
  --fs-h2:    clamp(1.9rem, 4vw, 3.2rem);
  --fs-h3:    clamp(1.3rem, 2.1vw, 1.7rem);
  --fs-lead:  clamp(1.15rem, 1.9vw, 1.45rem);
  --fs-body:  1.06rem;
  --fs-sm:    0.92rem;
  --fs-xs:    0.82rem;
  --fs-mono:  0.74rem;

  --lh-tight: 1.04;
  --lh-snug:  1.12;
  --lh-body:  1.6;

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:5rem;--space-9:7.5rem;

  /* geometry — Apple's generous rounding */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:980px;
  --maxw:1080px; --maxw-prose:720px; --maxw-wide:1320px;
  --header-h:56px;

  --shadow-1: 0 2px 14px rgba(0,0,0,0.4);
  --shadow-2: 0 24px 60px -24px rgba(0,0,0,0.7);
  --shadow-3: 0 40px 90px -30px rgba(0,0,0,0.8);
  --glow: 0 0 60px -16px rgba(41,151,255,0.5);

  --ease: cubic-bezier(0.28,0.11,0.16,1);     /* Apple-ish */
  --ease-out: cubic-bezier(0.2,0.8,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.4,0.64,1);
  --t-fast:.2s; --t-med:.4s; --t-slow:.8s;

  --z-cosmos:-1; --z-base:1; --z-hud:40; --z-header:60; --z-overlay:80; --z-cmdk:100; --z-boot:120;
  color-scheme: dark;
}

/* ----- LIGHT (Apple daytime — optional toggle) ----- */
[data-theme="light"] {
  --bg:#f5f5f7; --bg-2:#ffffff; --bg-3:#ececef;
  --panel:rgba(0,0,0,0.035); --panel-2:rgba(0,0,0,0.06);
  --hair:rgba(0,0,0,0.1); --hair-2:rgba(0,0,0,0.16); --hair-3:rgba(0,0,0,0.28);
  --text:#1d1d1f; --text-soft:#3a3c42; --dim:#6e7079; --dimmer:#9498a1; --faint:#c4c7cf;
  --accent:#0071e3; --accent-2:#0077ed; --accent-dim:rgba(0,113,227,0.1); --violet:#7a4ff0; --teal:#0fb5c9;
  --grad-text:linear-gradient(180deg,#1d1d1f,#43464d);
  --shadow-1:0 2px 14px rgba(0,0,0,0.08); --shadow-2:0 24px 60px -24px rgba(0,0,0,0.18); --shadow-3:0 40px 90px -30px rgba(0,0,0,0.22); --glow:0 10px 40px -16px rgba(0,113,227,0.3);
  color-scheme: light;
}

/* ----------------------------------------------------------------------------
   2. RESET + COSMIC GROUND
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body {
  background: var(--bg); color: var(--text-soft);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  letter-spacing: -0.011em; min-height:100vh; overflow-x:hidden;
}
img, svg, canvas, video { display:block; max-width:100%; } img { height:auto; }
input, button, textarea, select { font:inherit; color:inherit; }
button { background:none; border:none; cursor:pointer; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent-2); }
ul, ol { padding-left:1.2em; }
::selection { background: rgba(41,151,255,0.32); color:#fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* faint nebula + vignette behind the cosmos canvas (so it's gorgeous even pre-JS) */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(41,151,255,0.10), transparent 60%),
    radial-gradient(55% 50% at 85% 18%, rgba(169,139,255,0.10), transparent 62%),
    radial-gradient(70% 60% at 50% 108%, rgba(79,214,230,0.07), transparent 60%),
    radial-gradient(120% 100% at 50% 0%, transparent 55%, var(--bg) 100%);
}
[data-theme="light"] body::before { background:
  radial-gradient(60% 50% at 18% 12%, rgba(0,113,227,0.06), transparent 60%),
  radial-gradient(55% 50% at 85% 18%, rgba(122,79,240,0.05), transparent 62%); }

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY  (Apple: huge, tight, clean)
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:600; line-height:var(--lh-snug); letter-spacing:-0.022em; color:var(--text); }
h1 { font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:-0.03em; }
h2 { font-size:var(--fs-h2); letter-spacing:-0.028em; }
h3 { font-size:var(--fs-h3); font-weight:600; }
p { color: var(--text-soft); }
.mono { font-family:var(--font-code); }
.lead { font-size:var(--fs-lead); line-height:1.45; color:var(--text-soft); font-weight:400; }

.kicker { font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; letter-spacing:0; text-transform:none; color:var(--accent);
  display:inline-flex; align-items:center; gap:.5em; }
.kicker .dot { display:none; }

.gradient-text { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5)}
.wrap-prose{width:100%;max-width:var(--maxw-prose);margin:0 auto;padding:0 var(--space-5)}
.wrap-wide{width:100%;max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--space-5)}
main{display:block}
.section{padding:var(--space-9) 0;position:relative}
.section-sm{padding:var(--space-8) 0}
.page-head{padding:calc(var(--header-h) + var(--space-9)) 0 var(--space-6);position:relative;text-align:center}
.page-head .kicker{margin-bottom:var(--space-4)}
.page-head h1{font-size:var(--fs-h1);margin-bottom:var(--space-4)}
.page-head .lead{max-width:680px;margin-left:auto;margin-right:auto}
.grid{display:grid;gap:var(--space-5)}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.divider{height:1px;background:var(--grad-line);border:0;margin:var(--space-7) 0}
.mt-0{margin-top:0}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}
.mb-0{margin-bottom:0}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}
.text-center{text-align:center}.text-dim{color:var(--dim)}.text-soft{color:var(--text-soft)}

/* ----------------------------------------------------------------------------
   5. SCROLL PROGRESS
   -------------------------------------------------------------------------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--accent);z-index:calc(var(--z-header)+1);box-shadow:0 0 10px var(--accent);transition:width .1s linear;pointer-events:none}

/* ----------------------------------------------------------------------------
   6. SKIP / SR
   -------------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-60px;left:var(--space-4);z-index:var(--z-cmdk);background:var(--bg-2);border:1px solid var(--hair-2);padding:var(--space-2) var(--space-4);border-radius:var(--r-pill);font-size:var(--fs-sm);transition:top var(--t-med) var(--ease)}
.skip-link:focus{top:var(--space-4)}

/* ----------------------------------------------------------------------------
   7. HEADER / NAV  (Apple translucent bar)
   -------------------------------------------------------------------------- */
.site-header{position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:var(--z-header);display:flex;align-items:center;
  background:color-mix(in srgb, var(--bg) 64%, transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color var(--t-med) var(--ease),background var(--t-med) var(--ease)}
.site-header.scrolled{border-bottom-color:var(--hair);background:color-mix(in srgb, var(--bg) 82%, transparent)}
.site-header .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--text);flex-shrink:0;letter-spacing:-.01em}
.brand:hover{color:var(--text)}
.brand .glyph{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.66rem;font-weight:700;color:#fff;background:var(--grad-accent);box-shadow:var(--glow)}
.brand .name b{font-weight:600}.brand .name span{color:var(--dim)}
.nav{display:flex;align-items:center;gap:.1rem}
.nav-link{position:relative;font-family:var(--font-body);font-size:.82rem;font-weight:400;letter-spacing:0;color:var(--text-soft);padding:.5rem .7rem;border-radius:var(--r-sm);transition:color var(--t-fast) var(--ease)}
.nav-link:hover{color:var(--text)}
.nav-link.active{color:var(--text)}
.header-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.icon-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--text-soft);border:1px solid transparent;transition:all var(--t-fast) var(--ease)}
.icon-btn:hover{color:var(--text);background:var(--panel)}
.icon-btn svg{width:17px;height:17px}
.cmdk-trigger{display:inline-flex;align-items:center;gap:.5rem;height:34px;padding:0 .7rem;border:1px solid var(--hair);border-radius:var(--r-pill);background:var(--panel);color:var(--text-soft);font-family:var(--font-body);font-size:var(--fs-xs);transition:all var(--t-fast) var(--ease)}
.cmdk-trigger:hover{color:var(--text);border-color:var(--hair-2)}
.cmdk-trigger .kbd{font-size:.62rem;padding:.12rem .34rem;border-radius:5px;background:var(--panel-2);border:1px solid var(--hair);color:var(--dim)}
.cmdk-trigger .search-ico{width:14px;height:14px}
.nav-toggle{display:none}
.mobile-menu{position:fixed;inset:0;z-index:var(--z-overlay);background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med);display:flex;flex-direction:column;padding:calc(var(--header-h) + var(--space-6)) var(--space-5) var(--space-6);overflow-y:auto}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a.m-link{font-family:var(--font-display);font-size:1.9rem;font-weight:600;color:var(--text-soft);padding:var(--space-3) 0;border-bottom:1px solid var(--hair);display:flex;align-items:baseline;gap:.8rem}
.mobile-menu a.m-link .idx{font-size:.8rem;color:var(--accent)}
.mobile-menu a.m-link:hover{color:var(--text)}
.mobile-menu .m-socials{display:flex;gap:var(--space-4);margin-top:var(--space-6)}
.mobile-menu .m-socials a{color:var(--dim)}.mobile-menu .m-socials a:hover{color:var(--accent)}

/* ----------------------------------------------------------------------------
   8. FOOTER  (Apple: small, quiet)
   -------------------------------------------------------------------------- */
.site-footer{position:relative;margin-top:var(--space-9);border-top:1px solid var(--hair);padding:var(--space-7) 0 var(--space-6)}
.site-footer .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-6)}
.site-footer h4{font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-transform:none;color:var(--dim);margin-bottom:var(--space-4)}
.site-footer .foot-links{display:flex;flex-direction:column;gap:.55rem}
.site-footer .foot-links a{color:var(--text-soft);font-size:var(--fs-sm)}
.site-footer .foot-links a:hover{color:var(--text)}
.site-footer .foot-brand .name{font-family:var(--font-display);font-weight:600;font-size:1.2rem;color:var(--text)}
.site-footer .foot-brand p{font-size:var(--fs-sm);color:var(--dim);margin-top:var(--space-3);max-width:36ch}
.site-footer .foot-socials{display:flex;gap:.6rem;margin-top:var(--space-4)}
.site-footer .foot-socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--hair);color:var(--text-soft);transition:all var(--t-fast) var(--ease)}
.site-footer .foot-socials a:hover{color:var(--text);border-color:var(--hair-2);background:var(--panel);transform:translateY(-2px)}
.site-footer .foot-socials svg{width:18px;height:18px}
.site-footer .foot-bottom{margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--dimmer)}
.site-footer .foot-bottom .caret{display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--accent);vertical-align:middle;margin-left:.2em}

/* ----------------------------------------------------------------------------
   9. COMMAND PALETTE
   -------------------------------------------------------------------------- */
.cmdk-backdrop{position:fixed;inset:0;z-index:var(--z-cmdk);background:rgba(0,2,6,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med);display:flex;align-items:flex-start;justify-content:center;padding:12vh var(--space-4) var(--space-4)}
.cmdk-backdrop.open{opacity:1;visibility:visible}
.cmdk{width:100%;max-width:640px;background:color-mix(in srgb,var(--bg-2) 88%,transparent);border:1px solid var(--hair-2);border-radius:var(--r-lg);box-shadow:var(--shadow-3);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);overflow:hidden;transform:translateY(-10px) scale(.99);opacity:0;transition:transform var(--t-med) var(--ease-out),opacity var(--t-med)}
.cmdk-backdrop.open .cmdk{transform:none;opacity:1}
.cmdk-input-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--hair)}
.cmdk-input-row .prompt{color:var(--accent);font-size:1rem}
.cmdk-input{flex:1;background:none;border:none;outline:none;font-family:var(--font-body);font-size:1.05rem;color:var(--text)}
.cmdk-input::placeholder{color:var(--dimmer)}
.cmdk-esc{font-size:.6rem;color:var(--dimmer);border:1px solid var(--hair);border-radius:5px;padding:.15rem .4rem}
.cmdk-list{max-height:52vh;overflow-y:auto;padding:var(--space-2)}
.cmdk-group-label{font-size:.66rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--dim);padding:var(--space-3) var(--space-3) var(--space-2)}
.cmdk-item{display:flex;align-items:center;gap:var(--space-3);padding:.6rem var(--space-3);border-radius:var(--r-sm);color:var(--text-soft);font-size:var(--fs-sm);cursor:pointer;scroll-margin:8px}
.cmdk-item .ci-ico{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--hair);color:var(--dim)}
.cmdk-item .ci-ico svg{width:15px;height:15px}
.cmdk-item .ci-main{flex:1;min-width:0}.cmdk-item .ci-title{color:var(--text)}.cmdk-item .ci-sub{font-size:var(--fs-xs);color:var(--dimmer)}
.cmdk-item .ci-hint{font-size:.6rem;color:var(--dimmer)}
.cmdk-item.active,.cmdk-item:hover{background:var(--panel)}
.cmdk-item.active .ci-ico{border-color:var(--accent);color:var(--accent)}
.cmdk-empty{padding:var(--space-6);text-align:center;color:var(--dimmer);font-size:var(--fs-sm)}
.cmdk-foot{display:flex;gap:var(--space-4);padding:var(--space-3) var(--space-5);border-top:1px solid var(--hair);font-size:.62rem;color:var(--dimmer)}
.cmdk-foot .k{border:1px solid var(--hair);border-radius:5px;padding:.05rem .3rem;margin-right:.3rem}

/* ----------------------------------------------------------------------------
   10. SYSTEM HUD
   -------------------------------------------------------------------------- */
.hud{position:fixed;bottom:var(--space-4);right:var(--space-4);z-index:var(--z-hud);display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-code);font-size:.62rem;letter-spacing:.02em;color:var(--dimmer);pointer-events:none;user-select:none}
.hud .hud-cell{display:inline-flex;align-items:center;gap:.4rem;background:color-mix(in srgb,var(--bg-2) 64%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--hair);border-radius:var(--r-pill);padding:.3rem .65rem}
.hud .live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:blip 2.4s infinite}
.hud .hud-cell b{color:var(--dim);font-weight:500}
@media (max-width:720px){.hud{display:none}}

/* ----------------------------------------------------------------------------
   11. BOOT
   -------------------------------------------------------------------------- */
.boot{position:fixed;inset:0;z-index:var(--z-boot);background:var(--bg);display:grid;place-items:center;transition:opacity .7s var(--ease);padding:var(--space-5)}
.boot.done{opacity:0;pointer-events:none}
.boot-inner{width:100%;max-width:440px;text-align:center}
.boot-logo{font-family:var(--font-display);font-weight:600;font-size:1.4rem;margin-bottom:var(--space-5);display:flex;align-items:center;justify-content:center;gap:.6rem}
.boot-logo .glyph{width:34px;height:34px;border-radius:50%;background:var(--grad-accent);display:grid;place-items:center;font-size:.78rem;color:#fff;font-weight:700;box-shadow:var(--glow)}
.boot-lines{font-family:var(--font-code);font-size:var(--fs-sm);color:var(--dim);min-height:7.5em;text-align:left}
.boot-lines .ln{opacity:0}.boot-lines .ln.show{opacity:1}
.boot-lines .ok{color:var(--accent)}.boot-lines .accent{color:var(--teal)}
.boot-bar{height:2px;background:var(--panel-2);border-radius:2px;margin-top:var(--space-5);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0%;background:var(--grad-accent);transition:width .2s linear}
.boot-skip{margin-top:var(--space-4);font-family:var(--font-code);font-size:var(--fs-xs);color:var(--dimmer)}

/* ----------------------------------------------------------------------------
   12. ANIMATIONS + REVEAL
   -------------------------------------------------------------------------- */
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
/* Apple-style reveal: fade up + slight scale */
[data-reveal]{opacity:0;transform:translateY(30px) scale(.98);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.1s}[data-reveal][data-delay="2"]{transition-delay:.2s}[data-reveal][data-delay="3"]{transition-delay:.3s}[data-reveal][data-delay="4"]{transition-delay:.4s}[data-reveal][data-delay="5"]{transition-delay:.5s}
@media (prefers-reduced-motion:no-preference){::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}}

/* ----------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1080px){.nav{gap:0}.nav-link{padding:.5rem .55rem}.cmdk-trigger .label{display:none}}
@media (max-width:900px){.nav,.cmdk-trigger .kbd{display:none}.nav-toggle{display:grid}.site-footer .foot-grid{grid-template-columns:1fr 1fr}.site-footer .foot-brand{grid-column:1 / -1}}
@media (max-width:640px){:root{--header-h:52px}.section{padding:var(--space-8) 0}.cols-2,.cols-3{grid-template-columns:1fr}.site-footer .foot-grid{grid-template-columns:1fr}.site-footer .foot-bottom{flex-direction:column;align-items:flex-start}}

/* ----------------------------------------------------------------------------
   14. REDUCED MOTION + PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}.boot{display:none!important}
}
@media print{.site-header,.hud,.scroll-progress,.boot,.cmdk-backdrop,#cosmos,#hero-canvas,.site-footer .foot-socials{display:none!important}body::before{display:none!important}body{background:#fff;color:#000}}

/* ----------------------------------------------------------------------------
   15. LEGACY ALIASES — old token names map onto Apple×Cosmos so per-page
        <style> + feature CSS inherit it untouched.
   -------------------------------------------------------------------------- */
:root, [data-theme="light"] {
  --void:var(--bg); --void-2:var(--bg-2); --void-3:var(--bg-3); --canvas:var(--bg); --canvas-2:var(--bg-2); --canvas-3:var(--bg-3); --paper:var(--bg); --paper-2:var(--bg-2); --paper-3:var(--bg-3);
  --surface:var(--panel); --surface-2:var(--panel-2); --surface-3:var(--panel-2);
  --border:var(--hair); --border-2:var(--hair-2); --border-3:var(--hair-3); --line:var(--hair-2); --line-soft:var(--hair);
  --ink:var(--text); --ink-2:var(--text-soft); --ink-soft:var(--dim); --star:var(--text); --star-soft:var(--text-soft);
  --cyan:var(--accent); --ion:var(--accent); --aurora:var(--accent); --green:var(--teal); --success:var(--teal); --blue:var(--accent); --klein:var(--accent);
  --atmos:var(--violet); --indigo:var(--violet); --magenta:var(--pink); --flame:var(--accent); --acid:var(--teal); --gold:#ffd479; --warn:#ffd479; --danger:var(--pink); --red:var(--pink); --rose:var(--pink); --amber:#ffd479; --yellow:#ffd479; --teal:var(--teal);
  --cyan-dim:var(--accent-dim); --ion-dim:var(--accent-dim); --aurora-dim:var(--accent-dim); --green-dim:rgba(79,214,230,0.14); --violet-dim:rgba(169,139,255,0.14); --atmos-dim:rgba(169,139,255,0.14); --amber-dim:rgba(255,212,121,0.14); --pink-dim:rgba(255,106,166,0.14); --rose-dim:rgba(255,106,166,0.14); --success-dim:rgba(79,214,230,0.14); --warn-dim:rgba(255,212,121,0.14); --danger-dim:rgba(255,106,166,0.14);
  --grad-primary:var(--grad-accent); --grad-aurora:var(--grad-accent); --grad-riot:var(--grad-accent); --grad-veil:none;
  --glow-aurora:var(--glow); --glow-ion:var(--glow); --glow-violet:var(--glow); --glow-cyan:var(--glow); --node-glow:0 0 10px var(--accent);
  --bw:1px; --bw-2:1.5px; --shadow-ink:var(--shadow-2); --shadow-ink-sm:var(--shadow-1); --ease-spring:var(--ease-spring);
  --stone-50:var(--bg-2); --stone-100:var(--bg-3); --font-hand:var(--font-display);
}