:root {
  color-scheme: dark;
  --bg: #0d0b0a;
  --panel: #15110f;
  --cream: #f5ece3;
  --muted: #c0aea0;
  --dim: #a69082;
  --ember: #ff784b;
  --line: #392a23;
  --display: Impact, Haettenschweiler, "Arial Narrow", "Liberation Sans Narrow", sans-serif;
  --body: "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --header: 68px;
  --gutter: clamp(24px, 4.6vw, 84px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: thin; scrollbar-color: #623b2b #100d0c; }
body { margin: 0; color: var(--cream); font: 16px/1.5 var(--body); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button, a { -webkit-tap-highlight-color: transparent; }
figure, h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #ffb192; outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: fixed; z-index: 10; left: 16px; top: 12px; padding: 10px 16px; background: var(--ember); color: var(--bg); transform: translateY(-160%); }
.skip:focus { transform: none; }

.topbar { min-height: var(--header); padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); background: #100d0c; position: sticky; top: 0; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; font-size: 13px; line-height: 1.1; font-weight: 800; letter-spacing: .1em; }
.brand > span:nth-child(2) > span { color: var(--ember); }
.brand small { display: block; margin-top: 6px; color: var(--dim); font: 9px/1 var(--mono); letter-spacing: .17em; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: #201410; border: 1px solid #583225; color: var(--ember); }
.brand-mark svg { width: 22px; height: 22px; }
.top-nav { display: flex; gap: clamp(24px, 3vw, 46px); align-self: stretch; }
.top-nav a { position: relative; display: flex; gap: 8px; align-items: center; font-weight: 650; font-size: 13px; color: var(--muted); }
.top-nav a[aria-current], .top-nav a:hover { color: var(--cream); }
.top-nav a[aria-current]::after { content: ""; height: 2px; position: absolute; bottom: -1px; inset-inline: 0; background: var(--ember); }
.top-nav a span { color: var(--ember); font: 10px var(--mono); }
.about { justify-self: end; position: relative; }
.about summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px; padding: 8px 12px; border: 1px solid var(--line); font-size: 13px; font-weight: 650; white-space: nowrap; }
.about summary::-webkit-details-marker { display: none; }
.about summary:hover, .about[open] summary { border-color: var(--ember); }
.about summary .icon { width: 14px; height: 14px; color: var(--ember); }
.about-card { position: absolute; right: 0; top: calc(100% + 15px); width: min(350px, calc(100vw - 2 * var(--gutter))); padding: 24px; background: #1a1310; border: 1px solid #70402d; box-shadow: 0 14px 50px #0009; }
.about-card h2 { margin: 12px 0; font-size: 29px; line-height: 1.05; }
.about-card p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.text-link, .about-card a { display: inline-flex; align-items: center; gap: 7px; color: #ff9b77; font-size: 13px; font-weight: 700; }
.text-link .icon, .about-card a .icon { width: 16px; height: 16px; }
.text-link:hover, .about-card a:hover { color: var(--cream); }

.stage { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: clip; }
.scene-deck { display: contents; }
.camera-space { display: none; }
.stage-grid, .stage-glow { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.stage-grid { opacity: .5; background-image: linear-gradient(#c4876b18 1px, transparent 1px), linear-gradient(90deg, #c4876b18 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent, #000 70%); }
.stage-glow { background: radial-gradient(ellipse at 69% 36%, #51221781 0%, #22100c57 31%, transparent 64%); }
.scene { position: relative; padding-inline: var(--gutter); scroll-margin-top: calc(var(--header) + 12px); }
.hero { min-height: min(680px, 83svh); display: flex; align-items: center; isolation: isolate; }
.hero-copy { z-index: 1; width: min(100%, 680px); padding-block: 28px; }
.eyebrow, .hero-hint, .visual-tag, .index-heading, .hud, .demo-heading, .demo-kicker, .model-hint {
  font: 11px/1.4 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 10px; color: #ff9772; }
.eyebrow > span { width: 19px; height: 1px; background: var(--ember); }
.hero h1 { margin: 15px 0 20px; font: 400 clamp(72px, 10.2vw, 154px)/.86 var(--display); letter-spacing: -.025em; }
.hero h1 > span { display: block; width: max-content; max-width: 100%; }
.hero h1 > span:nth-child(2) { color: var(--ember); }
.title-period { color: #bd4e30; }
.hero-intro { max-width: 358px; font-size: clamp(16px, 1.38vw, 20px); color: #d7c7bb; text-wrap: pretty; }
.hero-actions { display: flex; align-items: center; gap: 17px; margin-top: 23px; }
.primary { display: inline-flex; align-items: center; gap: 23px; padding: 12px 17px; background: var(--ember); color: #170b07; font-size: 14px; font-weight: 800; white-space: nowrap; }
.primary:hover { background: #ff9a76; }
.hero-hint { display: none; align-items: center; gap: 6px; color: var(--dim); font-size: 9px; }
.hero-hint .icon { width: 14px; height: 14px; }
.hero-visual { position: absolute; z-index: -1; inset: 0 1% 0 32%; pointer-events: none; isolation: isolate; }
.hero-image { position: absolute; inset: 0; mask-image: linear-gradient(90deg, transparent, #000 26%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 79%, transparent); mask-composite: intersect; }
.hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 0%; }
.hero-orbit { position: absolute; width: min(70%, 595px); aspect-ratio: 1; top: 50%; left: 52%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid #af61474d; background: radial-gradient(circle, #9b3b241f 0%, #7836202b 28%, transparent 70%); box-shadow: 0 0 85px #742d1a20, inset 0 0 58px #8c322420; }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; border-radius: 50%; inset: 4%; border: 1px dashed #f0794a62; }
.hero-orbit::after { inset: 14%; border-style: solid; border-color: #aa5d3f38; }
#hero-avatar { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-visual.three-ready #hero-avatar { display: block; }
.hero-visual.three-ready .hero-image { opacity: 0; }
.avatar-ground { display: none; position: absolute; z-index: -1; left: 18%; bottom: 2%; width: 65%; height: 20%; background: radial-gradient(ellipse, #fb542e63, #c73a2930 30%, transparent 70%); }
.three-ready .avatar-ground { display: block; }
.visual-tag { position: absolute; right: 5%; bottom: 8%; display: flex; align-items: center; gap: 9px; padding: 6px 8px; color: #e0b5a3; background: #150d0bc2; border: 1px solid #573628; font-size: 9px; }
.visual-tag i, .demo-heading i, .hud-dot { display: inline-block; width: 6px; height: 6px; background: var(--ember); box-shadow: 0 0 12px #ff693a8c; }

.sector-nav { order: 1; padding: 6px var(--gutter) 15px; scroll-margin-top: calc(var(--header) + 12px); }
.index-heading { display: flex; justify-content: space-between; align-items: center; color: var(--dim); margin-bottom: 8px; font-size: 10px; }
.index-heading > span { color: #e7d5c7; display: flex; align-items: center; gap: 9px; }
.index-heading b { width: 6px; height: 6px; border: 1px solid var(--ember); transform: rotate(45deg); }
.mode-switch { display: flex; align-items: center; gap: 7px; border: 1px solid #4e3429; padding: 3px 7px; background: #1b130f; color: var(--muted); font: inherit; letter-spacing: inherit; text-transform: inherit; }
.mode-switch:hover { border-color: var(--ember); color: var(--cream); }
.mode-switch i { display: block; width: 6px; height: 6px; border: 1px solid #c4846a; border-radius: 50%; }
.mode-switch[aria-pressed="true"] i { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 7px #ff784b99; }
.sector-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.sector { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 10px; border: 1px solid #3b2b24; background: linear-gradient(125deg, #201611, #171210); transition: border-color .2s, background .2s, transform .2s; }
.sector:hover { transform: translateY(-2px); border-color: #aa5b3e; }
.sector[aria-current] { border-color: var(--ember); background: linear-gradient(125deg, #382118, #1a120e); }
.sector > .icon { color: var(--ember); width: 22px; height: 22px; }
.sector small { display: block; font: 8px/1.25 var(--mono); letter-spacing: .065em; color: var(--dim); white-space: nowrap; }
.sector strong { display: block; font-size: clamp(12px, 1.14vw, 16px); line-height: 1.25; margin-top: 4px; white-space: nowrap; }
.hud { display: none; }

.chapter { order: 2; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.24fr); align-items: center; gap: clamp(23px, 5.1vw, 93px); min-height: 520px; padding-block: 38px; border-top: 1px solid var(--line); }
.chapter-copy h2 { font: 400 clamp(48px, 7vw, 101px)/.91 var(--display); text-transform: uppercase; margin: 13px 0 17px; letter-spacing: -.02em; }
.chapter-copy h2 em { display: block; color: var(--ember); font-style: normal; font-size: .72em; }
.chapter-copy > p:not(.eyebrow) { max-width: 384px; color: #d6c6b9; font-size: clamp(15px, 1.36vw, 19px); line-height: 1.55; text-wrap: pretty; }
.chapter-copy .text-link { margin-top: 14px; }
.tags { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 17px 0 0; }
.tags li { border: 1px solid #553629; padding: 4px 8px; background: #1b120e; color: #e4ad95; font: 10px/1.2 var(--mono); }
.demo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; height: clamp(300px, 52vh, 510px); border: 1px solid #684432; background: var(--panel); box-shadow: 0 18px 58px #0007; }
.demo-heading, .demo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 11px 14px; }
.demo-heading { border-bottom: 1px solid #3c2b23; color: #d7b39f; }
.demo-heading > span:first-child { display: flex; align-items: center; gap: 8px; color: var(--cream); }
.demo-heading > span:last-child { text-align: right; }
.demo-foot { min-height: 49px; border-top: 1px solid #3c2b23; font-size: 12px; color: var(--muted); }
.demo-foot strong { color: var(--cream); font-size: 11px; white-space: nowrap; }
.demo-foot > span { text-align: right; }
.segments { display: inline-flex; gap: 4px; }
.segments button, .demo-action { border: 1px solid #51372a; background: #211611; padding: 4px 8px; color: #e5b9a5; font: 11px/1.4 var(--mono); min-height: 30px; }
.segments button[aria-pressed="true"], .segments button:hover:not(:disabled), .demo-action:hover:not(:disabled) { border-color: #ea865e; color: #ffbc9e; background: #3d2117; }
.demo-action { display: inline-flex; align-items: center; gap: 8px; }
.demo-action .icon { width: 14px; height: 14px; }

.island-demo { height: auto; max-height: min(100%, 545px); background: #150d0b; }
.island-board { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.island-board img { width: 100%; height: 100%; max-height: 100%; object-fit: fill; display: block; }
.map-pins { position: absolute; inset: 0; }
.map-compass { position: absolute; top: 12px; right: 13px; color: #ffc5a9; padding: 2px 6px; border: 1px solid #ca785d70; background: #1c0d0aba; font: 11px var(--mono); }
.pin { position: absolute; width: 32px; height: 32px; transform: translate(-50%, -50%); border: 1px solid #ff9c73; border-radius: 50%; background: #361d16; color: #ffd2be; font: 700 12px var(--mono); box-shadow: 0 0 0 5px #ff784b29; }
.pin[aria-pressed="true"], .pin:hover { color: #180c08; background: #ff996d; box-shadow: 0 0 0 6px #ff784b36; }
.pin-a { left: 20%; top: 59%; }
.pin-b { left: 53%; top: 35%; }
.pin-c { left: 83%; top: 39%; }

.browser-chrome { background: #211815; border-bottom: 1px solid #563629; font: 11px var(--mono); }
.browser-tabs, .browser-url { display: flex; align-items: center; padding-inline: 12px; gap: 5px; }
.browser-tabs { min-height: 34px; }
.browser-tabs i { width: 6px; height: 6px; border-radius: 50%; background: #9f604b; }
.browser-tabs span { display: inline-flex; align-items: center; gap: 6px; background: #33231b; padding: 7px 12px; margin-left: 10px; border-radius: 6px 6px 0 0; align-self: end; }
.browser-tabs .icon { width: 12px; height: 12px; color: var(--ember); }
.browser-url { padding-block: 6px; background: #30221b; color: #dbc3b1; }
.browser-url span:first-child { color: var(--ember); }
.browser-url span:nth-child(2) { flex: 1; background: #1b1310; border: 1px solid #513428; padding: 3px 8px; white-space: nowrap; }
.browser-url small { color: #b79c8e; }
.web-stage { display: grid; place-items: center; padding: 12px; background: #0d0b0a; overflow: hidden; }
.mock-site { width: 100%; height: 100%; min-height: 0; border: 1px solid #4b3024; background: #180e0b; overflow: hidden; transition: width .36s cubic-bezier(.25,.75,.25,1); }
.mock-site.is-phone { width: min(100%, 175px); }
.mock-content { position: relative; isolation: isolate; display: grid; align-items: center; height: 100%; min-height: 0; padding: 12px 6%; overflow: hidden; }
.mock-content::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #170e0af5, #170e0a33 84%); }
.mock-content img { z-index: -2; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.mock-content small { display: block; color: #ffab88; font: 8px var(--mono); letter-spacing: .09em; }
.mock-content strong { display: block; margin-top: 7px; font: 400 clamp(23px, 4.7vw, 70px)/.9 var(--display); }
.mock-content strong span { color: var(--ember); }
.mock-badge { display: inline-block; margin-top: 10px; border: 1px solid #b9684e; padding: 4px 5px; color: #ffd4c0; font: 8px var(--mono); }
.is-phone .mock-content { align-items: end; }
.is-phone .mock-content::after { background: linear-gradient(0deg, #170e0af5, transparent); }
.is-phone .mock-content strong { font-size: 26px; }

.explorer { min-height: 0; display: grid; grid-template: minmax(0, 1fr) auto / minmax(122px, .42fr) minmax(0, 1fr); background: #191513; }
.file-tree { padding: 12px 5px 12px 7px; background: #211b17; border-right: 1px solid #4a352b; overflow: auto; }
.file-tree > p, .file-folder, .file-tree button { font: 11px/1.4 var(--mono); }
.file-tree > p { font-size: 9px; color: #c6a89a; padding: 0 3px 9px; }
.file-folder { display: block; padding: 4px; color: #ffac8c; }
.file-tree button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px; border: 1px solid transparent; background: none; color: #d6c5bc; text-align: left; white-space: nowrap; }
.file-tree button span { color: #f79672; font-size: 9px; min-width: 17px; }
.file-tree button:hover, .file-tree button[aria-pressed="true"] { background: #40251b; border-color: #64402e; color: var(--cream); }
.editor { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; background: #181412; }
.editor-tab { padding: 8px 12px; color: #f4cebb; border-bottom: 1px solid #4e362c; background: #30211a; font: 11px var(--mono); }
.editor pre { margin: 0; padding: 11px 12px; overflow: auto; font: clamp(10px, 1vw, 13px)/1.68 var(--mono); color: #e9c9b8; }
.editor code { font: inherit; }
.code-key { color: #ff9976; }
.code-string { color: #ddc38c; }
.code-comment { color: #a69587; }
.editor-log { grid-column: 1/-1; background: #1a110e; border-top: 1px solid #493126; min-height: 32px; padding: 6px 10px; color: #e9c4ae; font: 11px/1.4 var(--mono); }
.editor-log span { color: var(--ember); }

.model-stage { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 52% 58%, #5c291d84, transparent 70%), repeating-linear-gradient(0deg, #9259402e 0 1px, transparent 1px 31px), repeating-linear-gradient(90deg, #9259402e 0 1px, transparent 1px 31px), #17100e; }
.model-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .62; }
.model-stage.three-ready .model-fallback { display: none; }
.model-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.model-stage canvas:active { cursor: grabbing; }
.model-stage canvas:focus-visible { outline-offset: -3px; }
.model-stage .demo-kicker, .model-hint { position: absolute; pointer-events: none; }
.demo-kicker { color: #baa397; font-size: 10px; }
.demo-kicker span { color: #ffae8d; }
.model-stage .demo-kicker { top: 11px; left: 11px; }
.model-hint { bottom: 8px; right: 9px; max-width: calc(100% - 18px); text-align: right; color: #e0bcaa; background: #160e0bc4; padding: 3px 6px; font-size: 8px; }

.discord-demo { background: #282932; border-color: #4d4b66; }
.discord-title { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid #454351; background: #30313b; }
.discord-title strong { font-size: 14px; }
.discord-title strong span { color: #aeb1c9; }
.discord-title > span { color: #d7c9ee; font: 10px var(--mono); text-transform: uppercase; }
.discord-board { display: grid; grid-template-columns: minmax(96px, .33fr) minmax(0, 1fr); min-height: 0; }
.discord-sidebar { display: flex; flex-direction: column; align-items: stretch; padding: 13px 7px; gap: 7px; background: #22232b; color: #c7c7db; overflow: hidden; }
.discord-sidebar b, .discord-sidebar small { padding-inline: 4px; white-space: nowrap; font: 9px var(--mono); }
.discord-sidebar b { color: #edecfb; margin-bottom: 7px; }
.discord-sidebar > span { background: #39394a; padding: 5px; font-size: 11px; border-radius: 4px; white-space: nowrap; }
.chat-log { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 12px; display: flex; flex-direction: column; gap: 9px; }
.chat-entry { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; }
.chat-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; object-fit: cover; }
.chat-avatar.member { background: #4a3437; color: #ffa588; }
.chat-avatar.member .icon { width: 18px; height: 18px; }
.chat-name { font-size: 13px; font-weight: 750; }
.chat-name span { display: inline-block; color: #fff; background: #555eb4; border-radius: 3px; font: 700 9px var(--mono); padding: 2px 4px; }
.chat-command { color: #c4caff; font: 11px var(--mono); margin-top: 2px; }
.chat-result { color: #e3deee; font-size: 12px; text-wrap: pretty; }
.discord-commands { background: #272832; border-color: #464558; }
.discord-commands button { border-color: #494c71; background: #30334b; color: #d4d6ff; }
.discord-commands button:hover:not(:disabled) { border-color: #a3a5ef; color: #e4e6ff; background: #41456a; }

.social-panel { display: grid; gap: 10px; min-width: 0; }
.social-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 16px; border: 1px solid #554031; background: linear-gradient(115deg, #201511, #171210); min-width: 0; }
.social-card[href]:hover { border-color: var(--accent); background: #251a16; }
.social-card strong { display: block; font-size: clamp(15px, 2vw, 21px); }
.social-card small { display: block; color: #d8b9a7; font: 11px/1.4 var(--mono); overflow-wrap: anywhere; }
.social-card > .icon { color: var(--accent); }
.social-icon { display: grid; place-items: center; width: 41px; height: 41px; border: 1px solid #64544b; color: var(--accent); background: #130e0c; }
.twitch { --accent: #c29bff; }
.youtube { --accent: #ff8981; }
.discord-social { --accent: #a3aaff; }
.social-status { font: 10px/1.4 var(--mono); text-align: right; color: #c4b0a2; }

.cinematic main { overflow-anchor: none; height: calc(100svh - var(--header) + var(--travel, 0px)); }
.cinematic .stage { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; height: calc(100svh - var(--header)); position: fixed; inset: var(--header) 0 auto; }
.cinematic .scene-deck { display: block; position: relative; isolation: isolate; overflow: clip; }
.cinematic .camera-space { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cinematic .scene {
  position: absolute;
  inset: 0;
  padding-block: 14px;
  min-height: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
  backface-visibility: hidden;
  transform: perspective(var(--camera-focal, 1000px)) var(--camera-matrix, translateZ(0px));
}
.cinematic .scene.is-in-frame { visibility: visible; }
.cinematic .scene.is-active { pointer-events: auto; }
.cinematic .chat-log { overscroll-behavior: auto; }
.cinematic .demo, .cinematic .hero-visual, .cinematic .social-panel { max-height: 100%; }
.cinematic #uefn .chapter-copy { opacity: var(--island-copy, 1); }
.cinematic #uefn :is(.demo-heading, .demo-foot, .map-pins, .map-compass) { opacity: var(--island-ui, 1); }
.cinematic .hero-hint { display: inline-flex; }
.cinematic .sector-nav { order: 0; background: linear-gradient(0deg, #100d0cf5, #100d0c96 80%, #100d0c00); z-index: 2; }
.cinematic .hud { display: grid; grid-template-columns: 1fr minmax(80px, 2.55fr) 1fr; align-items: center; gap: 20px; padding: 7px var(--gutter); border-top: 1px solid var(--line); background: #100d0c; color: var(--dim); font-size: 9px; z-index: 2; }
.hud-depth, .hud-input, .hud-input > span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.hud-depth strong { color: var(--ember); font-size: 12px; }
.hud-progress { height: 2px; background: #3b2a23; }
.hud-progress span { display: block; width: calc(var(--progress, 0) * 100%); height: 100%; background: var(--ember); box-shadow: 0 0 8px #ff784b66; }
.hud-input { justify-self: end; }
.hud-input .icon { width: 13px; height: 13px; }
.hud-input button { width: 27px; height: 25px; display: grid; place-items: center; border: 1px solid #463128; color: var(--ember); background: #1b120f; }
.hud-input button:hover:not(:disabled) { border-color: var(--ember); }
#prev-scene .icon { transform: rotate(180deg); }

@media (max-width: 1060px) {
  .sector { gap: 7px; padding-inline: 8px; }
  .sector small { font-size: 7px; letter-spacing: .025em; }
  .sector > .icon { width: 18px; height: 18px; }
  .chapter { gap: 27px; }
  .chapter-copy h2 { font-size: clamp(46px, 6.35vw, 72px); }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --header: 56px; }
  .topbar { grid-template-columns: 1fr auto; gap: 9px; }
  .top-nav { display: none; }
  .about summary { font-size: 12px; gap: 7px; padding: 7px 9px; }
  .brand { gap: 8px; font-size: 11px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand small { font-size: 8px; margin-top: 5px; }
  .stage-grid { background-size: 48px 48px; }
  .hero { min-height: min(630px, 85svh); align-items: flex-end; }
  .hero-copy { padding-block: 0 12px; }
  .hero h1 { font-size: clamp(54px, 15.6vw, 94px); margin: 9px 0 12px; }
  .hero-visual { inset: 0 -4% 26% -4%; }
  .hero-image { mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, #000 62%, transparent 100%); }
  .hero-image img { object-position: center top; }
  .hero-orbit { width: 87%; max-height: 90%; }
  .visual-tag { display: none; }
  .hero-intro { max-width: 310px; font-size: 15px; }
  .hero-actions { margin-top: 12px; gap: 11px; }
  .primary { padding: 8px 11px; gap: 10px; }
  .hero-hint { font-size: 8px; letter-spacing: .055em; }
  .hero-label { font-size: 9px; letter-spacing: .1em; }
  .sector-nav { padding-block: 6px 8px; }
  .index-heading { margin-bottom: 6px; font-size: 9px; }
  .sector-list { gap: 4px; }
  .sector { display: grid; justify-items: center; align-content: center; gap: 3px; padding: 5px 1px; min-height: 47px; }
  .sector > .icon { width: 16px; height: 16px; }
  .sector small, .sector strong span { display: none; }
  .sector strong { font-size: 10px; margin: 0; }
  .chapter { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; min-height: 0; gap: 13px; padding-block: 23px; }
  .chapter-copy h2 { font-size: clamp(36px, 9.7vw, 63px); margin: 6px 0 7px; }
  .chapter-copy h2 em { display: inline; font-size: .80em; }
  .chapter-copy > p:not(.eyebrow) { font-size: 14px; }
  .chapter-copy .eyebrow { font-size: 9px; }
  .chapter-copy .text-link { margin-top: 7px; }
  .tags { margin-top: 7px; }
  .tags li { font-size: 9px; }
  .demo { height: clamp(232px, 44svh, 370px); }
  .island-demo { height: auto; }
  .demo-heading { font-size: 9px; padding: 7px 9px; }
  .demo-foot { min-height: 41px; font-size: 11px; padding: 5px 8px; }
  .demo-foot strong { font-size: 10px; }
  .demo-action, .segments button { font-size: 10px; padding-inline: 5px; }
  .discord-sidebar { display: none; }
  .discord-board { grid-template-columns: minmax(0, 1fr); }
  .discord-commands { gap: 4px; }
  .social-card { padding: 12px; gap: 9px; }
  .social-icon { width: 34px; height: 34px; }
  .social-status { font-size: 9px; }
  .cinematic .scene { padding-block: 12px; }
  .cinematic .demo:not(.island-demo) { height: 100%; }
  .cinematic .chapter:is(#uefn, .socials) { grid-template-rows: auto auto; align-content: center; gap: 17px; }
  .cinematic .hud { grid-template-columns: auto 1fr auto; gap: 10px; padding-block: 6px; }
  .hud-input > span > span { display: none; }
}
@media (min-width: 761px) and (max-height: 725px) {
  .hero h1 { font-size: clamp(68px, 16.7vh, 128px); }
  .hero-actions { margin-top: 15px; }
  .chapter-copy h2 { font-size: clamp(45px, 9.6vh, 77px); }
}
@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .hero h1 { font-size: clamp(49px, 16vw, 58px); }
  .hero-hint { display: none !important; }
  .segments { gap: 2px; }
  .file-tree { padding-inline: 3px; }
  .explorer { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}