:root {
  color-scheme: dark;
  --base: #0c0d12;
  --panel: #14161e;
  --ink: #f7f3ef;
  --muted: #bcbac6;
  --line: #343643;
  --pink: #f4afc7;
  --cyan: #9de0eb;
  --mono: ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--base); color: var(--ink); font: 16px/1.6 system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
h1,h2,h3,p,figure { margin: 0; }
.wrap { width: min(1320px, calc(100% - 80px)); margin: auto; }
.top,.bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.top { min-height: 74px; border-bottom: 1px solid var(--line); }
.bottom { padding: 24px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.logo { font-size: 29px; font-weight: 850; letter-spacing: -.085em; }
.logo span, h1 em { color: var(--pink); }
nav { display: flex; gap: clamp(12px, 3vw, 28px); font-size: 14px; color: var(--muted); }
nav a:hover,nav [aria-current] { color: var(--pink); }
.micro { font: 650 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: minmax(0,.77fr) minmax(0,1.23fr); gap: 32px; align-items: center; padding: 46px 0; border-bottom: 1px solid var(--line); }
.signal { color: var(--cyan); }
.signal span { margin: 0 4px; color: var(--muted); }
h1 { font-size: clamp(50px,7.8vw,115px); line-height: .93; letter-spacing: -.085em; margin: 20px 0; }
h1 em { font-style: normal; }
.intro { color: var(--muted); font-size: clamp(17px,1.7vw,21px); max-width: 37ch; }
.cta { display: inline-flex; gap: 24px; align-items: center; background: var(--pink); color: #211520; font-weight: 750; padding: 11px 16px; border-radius: 4px; margin-top: 24px; }
.cta:hover { background: #ffd7e3; }
.viewer { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); box-shadow: 0 22px 70px #07080caa; }
.viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.viewer-head .micro { color: var(--muted); }
.viewer-head h2 { font-size: 20px; letter-spacing: -.035em; }
.viewer-head .live { border: 1px solid #53747e; padding: 3px 8px; border-radius: 2px; color: var(--cyan); }
.stage { position: relative; overflow: hidden; height: clamp(300px,36vw,510px); background: radial-gradient(ellipse at 51% 51%, #3a373e, #23242c 62%, #141720 100%); }
.stage:focus-visible { outline-offset: -3px; }
.stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.fallback { display: block; width: 100%; height: 100%; object-fit: contain; }
.view-toolbar,.inspection,.tool-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.view-toolbar { padding: 9px 12px; border-block: 1px solid var(--line); justify-content: space-between; }
button,select { font: 650 12px/1.4 var(--mono); background: #191b26; border: 1px solid #444654; border-radius: 4px; color: var(--ink); padding: 7px 9px; min-height: 34px; }
button { cursor: pointer; }
button:hover,button[aria-pressed=true] { color: var(--pink); border-color: var(--pink); background: #342337; }
figcaption { padding: 12px 15px; display: grid; gap: 8px; }
.selection { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.selection span,.hint,.inspection label { color: var(--muted); font-size: 13px; }
.inspection button { border-color: #53747e; color: var(--cyan); }
.section { padding: 37px 0 43px; border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 16px; }
.section-head h2,.about h2 { font-size: clamp(28px,4vw,45px); line-height: 1.1; letter-spacing: -.055em; }
.section-head .micro { color: var(--cyan); }
.text-link,.article-body a { color: var(--pink); }
.text-link:hover,.article-body a:hover { text-decoration: underline; text-underline-offset: .2em; }
.cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.card { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 19px 21px; background: linear-gradient(130deg,#251d2c,#151720 75%); }
.card h3 { font-size: clamp(20px,2.3vw,28px); line-height: 1.14; letter-spacing: -.04em; }
.card .micro { color: var(--pink); }
.card p,.card > span:not(.micro),.about p { color: var(--muted); }
.news-card:hover { border-color: var(--pink); }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.news-page { padding: 34px 0 54px; min-height: 65vh; }
.news-page h1 { font-size: clamp(43px,7vw,86px); max-width: 16ch; }
.news-page .intro { max-width: 65ch; margin-bottom: 24px; }
.article-body { max-width: 74ch; }
.article-body h2 { margin: 24px 0 6px; line-height: 1.2; letter-spacing: -.035em; }
.article-body p { margin: 0 0 13px; }
.article-body a { text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
@media(max-width: 850px) {
  .wrap { width: calc(100% - 38px); }
  .hero { grid-template-columns: 1fr; gap: 25px; padding: 30px 0; }
  .stage { height: clamp(300px,62vw,485px); }
}
@media(max-width: 540px) {
  .top { min-height: 62px; }
  nav { font-size: 13px; }
  .cards,.about { grid-template-columns: 1fr; }
  .section { padding: 28px 0 32px; }
  .section-head .text-link { font-size: 14px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }