@font-face {
  font-family: Montserrat;
  src: url("assets/fonts/Montserrat-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --red:#e6382a;--ink:#393d3d;--muted:#898989;
  --header-height:88px;--brand-height:34px;
  --gutter:clamp(18px,3.5vw,56px);
  color:var(--ink);background:#fff;font-family:Montserrat,Arial,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0;width:100%;min-width:280px;height:100%; }
body { height:100vh;height:100svh;height:100dvh;display:grid;grid-template-rows:var(--header-height) minmax(0,1fr);overflow:hidden;-webkit-font-smoothing:antialiased;background:#fff; }
button { font:inherit; }
img { display:block; }
::selection { background:#f9c4be;color:var(--ink); }
.site-header { position:relative;z-index:2;background:#fff;border-bottom:1px solid #eceee9; }
.header-inner { height:100%;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px; }
.header-identity { display:flex;align-items:center;gap:clamp(16px,2.1vw,30px);min-width:0; }
.brand { display:flex;align-items:center;gap:12px;flex:0 0 auto; }
.brand-name { height:var(--brand-height);width:auto; }
.brand-fractal { height:var(--brand-height);width:auto; }
h1 { margin:0;white-space:nowrap;font-size:calc(var(--brand-height)*1.38);line-height:1.05;letter-spacing:-.047em;font-weight:900;color:var(--ink); }
h1 span { display:inline; }
h1 .accent { color:var(--red); }
.language-switch { display:flex;align-items:center;gap:2px;flex:0 0 auto; }
.language-switch button { min-width:38px;min-height:44px;padding:8px 5px;border:0;background:transparent;color:var(--ink);font-size:11px;font-weight:500;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent; }
.language-switch button[aria-pressed="true"] { font-weight:700; }
.language-switch button[aria-pressed="true"]::after { content:"";position:absolute;bottom:6px;left:11px;right:11px;height:2px;background:var(--red); }
.language-switch>span { color:var(--muted);font-size:10px; }
button:focus-visible { outline:2px solid var(--red);outline-offset:3px; }
.stage { position:relative;min-height:0;overflow:hidden;isolation:isolate;background:#fff; }
#space-canvas { position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:auto;touch-action:none; }
.static-scene { position:absolute;inset:0;display:grid;place-items:center;background-image:url("assets/fractal-field-tile.svg");background-size:74px 74px;pointer-events:none; }
#fractal-fallback { width:clamp(95px,13vw,185px);height:auto;filter:drop-shadow(0 6px 18px rgba(230,56,42,.08));background:rgba(255,255,255,.9); }
.scene-ready .static-scene { visibility:hidden; }
.motion-controls { position:absolute;z-index:3;right:var(--gutter);bottom:22px;display:flex;align-items:center;gap:5px;padding:5px;border:1px solid rgba(90,100,100,.22);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 14px rgba(57,61,61,.035); }
.motion-controls[hidden] { display:none; }
.motion-toggle { display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:#606866;cursor:pointer;-webkit-tap-highlight-color:transparent; }
.motion-toggle:hover { background:#f0f2ee; }
.motion-toggle .play-symbol { display:none; }
.motion-toggle.is-paused .pause-symbol { display:none; }
.motion-toggle.is-paused .play-symbol { display:block; }
@media(max-width:760px) {
  :root { --header-height:72px;--brand-height:27px;--gutter:22px; }
  .header-inner { gap:14px; }.header-identity { gap:18px; }.brand { gap:9px; }
  .language-switch button { min-width:32px; }
}
@media(max-width:600px) {
  :root { --header-height:64px;--brand-height:clamp(16px,4.7vw,26px);--gutter:16px; }
  .header-inner { gap:10px; }.header-identity { gap:12px; }.brand { gap:7px; }
  .language-switch { gap:1px; }
  .language-switch button { min-width:27px;font-size:10px;padding-inline:3px; }
  .language-switch button[aria-pressed="true"]::after { left:7px;right:7px; }
  .motion-controls { bottom:18px; }.static-scene { background-size:55px 55px; }
}
@media(max-width:360px) {
  :root { --brand-height:15.5px;--gutter:12px; }
  .header-inner { gap:8px; }.header-identity { gap:10px; }.brand { gap:6px; }
  .language-switch button { min-width:25px; }
}
@media(max-width:310px) {
  :root { --brand-height:13.5px;--gutter:10px; }
  .header-identity { gap:8px; }.brand { gap:5px; }
}
@media(max-height:430px) and (min-width:600px) {
  :root { --header-height:64px;--brand-height:25px; }
  .motion-controls { bottom:14px; }
}