/* ══════════════════════════════════════════════════════════════════
   about.css — the public intro page (about.html) for Happy Light 3D Builder.
   Same token set as app.css (so theme.js drives it), but a normal scrolling
   page: app.css pins the body to the viewport for the editor.
   The CSP is style-src 'self': nothing in the markup sets a style attribute.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0b0a0d; --bg-2:#16131a;
  --panel:rgba(29,25,34,.88); --panel-solid:#1d1922;
  --line:rgba(184,175,164,.20); --line-hot:rgba(245,158,11,.45);
  --ink:#f5f1ea; --ink-dim:#b8afa4; --ink-faint:#6b635a;
  --brand:#f59e0b; --brand-2:#a78bfa;
  --ok:#4ee8a5; --warn:#fbbf24; --bad:#f87171;
  --surf:rgba(43,37,51,.72);
  --shadow:4px 4px 0 rgba(0,0,0,.45);
  --logo-glow:1; --logo-glow-color:#f59e0b; --logo-bulb:#d9a441;
  --logo-glass-hi:#fffdf6; --logo-glass-lo:#f8e3b6; --logo-face:#8a6a3b;
  --font:"Inter Variable","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:12px;

  /* 3D view */
  --vp-bg:#100d16;
  --plate:#1f1a27;
  --grid-minor:#4a4252;
  --grid-major:#7a6f84;
  --axis-x:#e05b7a; --axis-y:#9ec95a; --axis-z:#48c8dd;
  --ruler-bg:rgba(22,19,26,.92); --ruler-ink:#b8afa4;
  --body:#d9a441; --body-sel:#f59e0b; --body-alt:#7fb8d8;
  --sketch:#48c8dd; --sketch-sel:#f59e0b; --measure:#f07ccf;
}
:root[data-theme="light"]{
  --bg:#faf8f4; --bg-2:#f1ece2;
  --panel:rgba(255,253,247,.94); --panel-solid:#fffdf7;
  --line:rgba(90,74,54,.22); --line-hot:rgba(180,83,9,.42);
  --ink:#241f18; --ink-dim:#5b5145; --ink-faint:#7d7264;
  --brand:#b45309; --brand-2:#6d28d9;
  --ok:#047857; --warn:#8c6510; --bad:#b91c1c;
  --surf:rgba(241,236,226,.80);
  --shadow:4px 4px 0 rgba(90,74,54,.22);
  --logo-glow:0; --logo-bulb:#a86f18;
  --logo-glass-hi:#fffaec; --logo-glass-lo:#f2d79c; --logo-face:#6b4d22;

  --vp-bg:#efe9de;
  --plate:#fbf8f2;
  --grid-minor:#d6ccbb;
  --grid-major:#a89a84;
  --axis-x:#c0264f; --axis-y:#4d7a1a; --axis-z:#0e7c90;
  --ruler-bg:rgba(255,253,247,.94); --ruler-ink:#5b5145;
  --body:#c89a52; --body-sel:#b45309; --body-alt:#2b6c8f;
  --sketch:#0e7c90; --sketch-sel:#b45309; --measure:#a8288a;
}

*{box-sizing:border-box}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100dvh}
a{color:var(--brand)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--panel-solid);color:var(--ink);padding:.6rem .9rem;z-index:80;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.top{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;background:var(--panel-solid);border-bottom:1px solid var(--line)}
.home{text-decoration:none;color:inherit;display:flex;align-items:center}
.wordmark{font-weight:700;letter-spacing:-.03em;line-height:1;display:inline-flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.85rem}
.wordmark .hl-lockup{height:1.7em;width:auto;display:inline-block;color:var(--ink);flex:none}
.wm-b{color:var(--ink-dim);font-size:.55rem;font-weight:700;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;line-height:1}
.btn{appearance:none;font:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);background:var(--surf);border:1px solid var(--line);border-radius:999px;padding:.38rem .9rem;text-decoration:none}
.btn:hover{border-color:var(--line-hot)}
.btn.primary{background:var(--brand);border-color:transparent;color:#1a1206;font-weight:600}
:root[data-theme="light"] .btn.primary{color:#fff}
/* ══════════════════════════════════════════════════════════════════
   landing.css — the public page a signed-out visitor sees at "/".
   Uses app.css's tokens (--bg, --ink, --brand, --panel, --line), so
   theme.js drives light and dark here too. The CSP is style-src 'self'
   with no 'unsafe-inline': nothing in the markup sets a style attribute.
   ══════════════════════════════════════════════════════════════════ */
.lp-nav{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.lp-nav .btn{text-decoration:none}
.lp{max-width:62rem;margin:0 auto;padding:1.5rem 1rem 2.5rem}
.lp section{margin:0 0 2.6rem}
.lp h1{font-size:clamp(1.7rem,4.6vw,2.6rem);line-height:1.12;letter-spacing:-.025em;margin:1.2rem 0 .8rem;max-width:22ch}
.lp h2{font-size:1.35rem;letter-spacing:-.015em;margin:0 0 .9rem}
.lp h3{font-size:1rem;margin:0 0 .3rem}
.lp p{margin:0 0 .8rem;color:var(--ink-dim)}
.lp-lead{font-size:1.1rem;max-width:44rem;color:var(--ink) !important}
.lp-cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1.2rem 0 .6rem}
.lp .btn{font-size:1rem;padding:.6rem 1.3rem;text-decoration:none}
.lp-note{font-size:.85rem;color:var(--ink-faint) !important}
.lp-shot{margin:1.6rem 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel-solid);box-shadow:var(--shadow)}
.lp-shot img{display:block;width:100%;height:auto}
.lp-shot figcaption{padding:.55rem .9rem;font-size:.82rem;color:var(--ink-faint);border-top:1px solid var(--line)}
.lp-shots{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.lp-shots .lp-shot{margin:0}
.lp-cards{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
.lp-card{padding:1rem 1.05rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.lp-card p{margin:0;font-size:.92rem}
.lp-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.lp-steps li{counter-increment:s;padding:1rem 1.05rem 1rem 3.1rem;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.lp-steps li::before{content:counter(s);position:absolute;left:.9rem;top:.95rem;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--brand);color:#1a1206;font-weight:700;font-size:.85rem;display:grid;place-items:center}
:root[data-theme="light"] .lp-steps li::before{color:#fff}
.lp-steps p{margin:0;font-size:.92rem}
.lp-faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:.7rem 1rem;margin:0 0 .6rem}
.lp-faq summary{cursor:pointer;font-weight:600}
.lp-faq details p{margin:.6rem 0 0}
.lp-end{text-align:center;padding:1.6rem 1rem;border:1px solid var(--line-hot);border-radius:var(--r);background:var(--panel)}
.lp-end .lp-cta{justify-content:center}
.lp-foot{text-align:center;font-size:.85rem;color:var(--ink-faint);padding:0 1rem 2rem}
.lp-foot a{color:var(--ink-dim)}
@media (max-width:560px){.lp-nav .btn:not(.primary){display:none}}