@property --phase { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root {
  --bg: #020306;
  --surface: #080d15;
  --surface-elevated: #101824;
  --text-primary: #f3f6fc;
  --text-secondary: #c0cad8;
  --text-muted: #a5b2c4;
  --line: rgba(255,255,255,.13);
  --cyan: #64efff;
  --lime: #b9ff68;
  --violet: #9b73ff;
  --orange: #ffb84e;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; color: var(--text-primary); background: var(--bg); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; max-width: 100%; }
button, select { color: inherit; }
button, summary, select { cursor: pointer; }
button:disabled { cursor: default; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { background: var(--lime); color: #080d15; }
input[type=range], input[type=checkbox] { accent-color: var(--lime); }
input[type=range] { width: 100%; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 20px; background: var(--surface); }
.skip-link:focus { top: 16px; }

/* The existing live renderer remains the backdrop. Content uses solid surfaces. */
#fx, #cssfx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
#fx { opacity: 0; transition: opacity .7s; }
html.gpu-live #fx { opacity: 1; }
#cssfx { overflow: hidden; background: var(--bg); }
#cssfx::before { content: ''; position: absolute; inset: -35%; background: radial-gradient(ellipse at 30% 35%,rgba(100,239,255,.15),transparent 35%),radial-gradient(ellipse at 72% 38%,rgba(155,115,255,.2),transparent 40%),radial-gradient(ellipse at 60% 80%,rgba(255,75,209,.13),transparent 30%); animation: nebula 35s linear infinite; }
@keyframes nebula { to { transform: rotate(360deg); } }
html.gpu-live #cssfx { opacity: 0; visibility: hidden; }
html.gpu-live #cssfx::before { animation-play-state: paused; }
.graphics-off #cssfx::before { animation: none; }
.reading-mode.gpu-live #fx { opacity: .28; }
.reading-mode #cssfx::before { opacity: .35; }
.site { position: relative; z-index: 2; }
.shell { width: min(1180px,calc(100% - 64px)); margin-inline: auto; }
header { position: sticky; top: 16px; z-index: 30; width: min(1180px,calc(100% - 64px)); margin: 16px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 650; letter-spacing: -.03em; }
.brand-mark { font-weight: 850; font-size: 1.5rem; color: var(--lime); line-height: 1; }
header nav { display: flex; flex-wrap: wrap; gap: 4px; }
header nav a { padding: 9px 13px; color: var(--text-secondary); font-size: .875rem; border-radius: 8px; }
header nav a:hover { background: var(--surface-elevated); color: white; }
section { padding-block: 48px; }
.hero { padding: 88px 0 56px; }
.hero-layout { display: block; }
.hero-panel { position: relative; isolation: isolate; max-width: 820px; }
.hero-panel::before { content: ''; position: absolute; z-index: -1; inset: -28px -32px; border-radius: 32px; background: radial-gradient(ellipse at 35% 50%,rgba(2,3,6,.98) 30%,rgba(2,3,6,.78) 60%,transparent 75%); }
.eyebrow, .section-index { color: var(--text-secondary); font-size: .8125rem; margin: 0 0 16px; font-weight: 500; }
.hero h1 { margin: 0; font-size: clamp(3.5rem,8vw,6.75rem); line-height: 1.03; letter-spacing: -.065em; font-weight: 740; }
.hero-period { color: var(--lime); }
.hero-copy { font-size: clamp(1rem,2vw,1.1875rem); line-height: 1.65; margin: 24px 0 0; color: var(--text-secondary); max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn, .unlock, .media-controls button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; background: var(--surface-elevated); border: 1px solid var(--line); border-radius: 9px; font-size: .875rem; font-weight: 550; line-height: 1.4; transition: background .15s,border-color .15s; }
.btn:hover, .unlock:hover, .media-controls button:enabled:hover { border-color: rgba(185,255,104,.5); background: #19232e; }
.btn.hot { background: var(--lime); color: #10190a; border-color: var(--lime); }
.btn.hot:hover { background: #cdff96; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,var(--surface),rgba(8,13,21,.96) 50%,transparent); }
.section-head .section-index { margin: 0 0 6px; }
.section-head > p { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.section-title { margin: 0; font-weight: 650; font-size: clamp(1.75rem,3.5vw,2.4rem); letter-spacing: -.045em; line-height: 1.2; }
.live-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 20px; align-items: stretch; }
.live-card, .settings-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; min-width: 0; }
.live-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.live-head h3 { margin: 0; font-weight: 600; font-size: 1rem; letter-spacing: -.02em; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 500; color: var(--text-muted); }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.live-badge.live { color: var(--lime); }
.live-badge.stale { color: var(--orange); }
.live-body { padding: 24px; }
.media-live { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 20px; min-height: 120px; }
.media-art { width: 112px; aspect-ratio: 1; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 30% 20%,#384c65,#101824 80%); border: 1px solid var(--line); color: var(--text-muted); font-size: 2rem; }
.media-art img { width: 100%; height: 100%; object-fit: cover; display: none; }
.media-art > span { position: absolute; inset: 0; display: grid; place-items: center; }
.art-retry { position: absolute; right: 5px; bottom: 5px; padding: 5px 8px; font-size: .75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.media-meta { min-width: 0; }
.media-meta h4 { margin: 0 0 5px; font-size: 1.35rem; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; white-space: normal; overflow-wrap: anywhere; }
.media-meta p { margin: 4px 0; color: var(--text-secondary); font-size: .875rem; overflow-wrap: anywhere; }
#bfAlbum { color: var(--text-muted); font-size: .8125rem; }
.media-controls { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; margin-top: 24px; }
.media-controls button { padding-inline: 10px; gap: 6px; }
.media-controls svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.media-controls button:disabled { color: var(--text-muted); opacity: .65; }
.media-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--text-secondary); line-height: 1.5; }
.toggle input { flex-shrink: 0; width: 16px; height: 16px; }
.owner-auth { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.owner-auth, .owner-session { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.owner-session span { font-size: .8125rem; color: var(--text-secondary); width: 100%; }
.unlock.secondary { background: transparent; }
.control-state { margin-top: 10px; font-size: .8125rem; color: var(--text-muted); line-height: 1.55; overflow-wrap: anywhere; }
.control-state[data-state=acknowledged] { color: var(--lime); }
.control-state[data-state=failed], .control-state[data-state=timed-out] { color: #ffcf9b; }
.source-badges { display: flex; gap: 16px; flex-wrap: wrap; padding: 20px 24px 0; }
.source-badges span { font-size: .75rem; color: var(--text-muted); }
.source-badges span[data-kind=live] { color: var(--lime); }
.source-badges span[data-kind=stale] { color: var(--orange); }
.source-badges span[data-kind=offline] { color: #ffb0a8; }
.sys-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 16px; }
.sys-stat { min-width: 0; }
.sys-stat small { display: block; color: var(--text-muted); font-size: .75rem; margin-bottom: 6px; }
.sys-stat strong { display: block; font-size: 1.2rem; font-weight: 550; letter-spacing: -.03em; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bridge-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; color: var(--text-muted); font-size: .8125rem; }
.network-details { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
summary { font-size: .875rem; color: var(--text-secondary); padding-block: 10px; min-height: 44px; }
.toggle { min-height: 44px; }
.project:focus-visible { outline-offset: -4px; }
summary:hover { color: white; }
.dns-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.dns-strip span { display: block; color: var(--text-muted); font-size: .75rem; }
.dns-strip b { font-weight: 500; font-variant-numeric: tabular-nums; }
#bfSourceNote { color: var(--text-muted); font-size: .75rem; line-height: 1.6; }
.live-error { display: none; margin-bottom: 16px; border: 1px solid #785b37; border-radius: 10px; padding: 14px 18px; color: #ffdeac; background: #211b12; font-size: .875rem; }
.live-error.show { display: block; }

.projects { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.project { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1.3fr) 24px; align-items: center; gap: 20px; padding: 28px; border-bottom: 1px solid var(--line); }
.project:last-child { border-bottom: 0; }
.project:hover { background: var(--surface-elevated); }
.project-no { color: var(--text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.project h3 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -.035em; font-weight: 600; }
.project p { font-size: .9375rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { color: var(--text-muted); font-size: .75rem; }
.tag + .tag::before { content: '·'; margin-right: 8px; }
.arrow { color: var(--lime); font-size: 1.5rem; text-align: right; }
.project-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.project-details details { background: var(--surface); padding: 16px 20px; border-radius: 10px; border: 1px solid var(--line); min-width: 0; }
.project-details p { color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.settings-panel { padding: 24px; }
.settings-intro { margin: 0 0 24px; color: var(--text-secondary); font-size: .9375rem; }
.control { padding: 20px 0; border-top: 1px solid var(--line); }
.settings-panel > .control { border: 0; padding-top: 0; }
.control-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; align-items: center; }
.control label, .control .label { font-size: .875rem; color: var(--text-secondary); }
.value { font-size: .8125rem; color: var(--lime); font-variant-numeric: tabular-nums; }
.mode-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.graphics-modes { grid-template-columns: repeat(4,minmax(0,1fr)); }
.mode { text-align: left; padding: 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-elevated); }
.mode b { display: block; font-size: .9375rem; font-weight: 600; }
.mode span { display: block; color: var(--text-muted); font-size: .8125rem; margin-top: 4px; }
.mode.on { border-color: var(--lime); background: #17231a; }
.frame-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
select { background: var(--surface-elevated); border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; }
.reading-toggle { margin-top: 16px; }
.advanced-settings { border-top: 1px solid var(--line); padding-top: 16px; }
.advanced-content { padding-top: 24px; }
.furnace { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 24px; align-items: start; }
.viewport { position: relative; display: grid; place-items: center; min-height: 320px; background: var(--surface-elevated); border-radius: 12px; overflow: hidden; }
.reactor { width: min(70vw,300px); aspect-ratio: 1; position: relative; }
.reactor-ring { position: absolute; inset: 10%; border: 1px solid var(--cyan); border-radius: 50%; opacity: .3; }
.reactor-ring.r2 { inset: 24%; border-color: var(--violet); }
.reactor-ring.r3 { inset: 35%; border-color: var(--lime); }
.reactor-core { position: absolute; inset: 41%; border-radius: 50%; background: radial-gradient(circle,#fff,var(--cyan),var(--violet)); box-shadow: 0 0 40px rgba(155,115,255,.5); }
.reactor-label { position: absolute; bottom: 16px; left: 16px; right: 16px; font-size: .75rem; color: var(--text-muted); overflow-wrap: anywhere; }
.reactor-label b { display: block; color: var(--lime); }
.bench { width: 100%; text-align: left; padding: 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-elevated); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bench b { font-size: .9375rem; font-weight: 600; }
.bench span { display: block; font-size: .8125rem; color: var(--text-secondary); margin-top: 5px; }
.lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.bench.running .lamp { background: var(--orange); }
.bench.done .lamp { background: var(--lime); }
.bench-result, .graphics-diagnostics { font-size: .8125rem; line-height: 1.6; color: var(--text-muted); margin-top: 12px; overflow-wrap: anywhere; }
.benchmark-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.benchmark-actions button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-elevated); color: var(--text-secondary); font: inherit; font-size: .78rem; }
.benchmark-actions button:hover, .benchmark-actions button:focus-visible { color: var(--text); border-color: var(--text-muted); }
.diagnostics-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
.hud { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.hud-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px; font-size: .8125rem; border-bottom: 1px solid var(--line); }
.hud-head b { color: var(--lime); }
.hud-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.metric { padding: 16px; min-width: 0; }
.metric small { display: block; color: var(--text-muted); font-size: .75rem; }
.metric strong { display: block; font-size: 1.125rem; font-weight: 550; margin-top: 8px; overflow-wrap: anywhere; }
.gpu-line { border-top: 1px solid var(--line); padding: 16px; font-size: .8125rem; overflow-wrap: anywhere; }
.mini-chart { height: 70px; padding: 10px; }
.mini-chart canvas { display: block; width: 100%; height: 100%; }
.runtime-info h3 { margin-top: 0; font-size: 1rem; font-weight: 550; }
.runtime-info dl { font-size: .8125rem; }
.runtime-info dl > div { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1fr); gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.runtime-info dt { color: var(--text-muted); }
.runtime-info dd { margin: 0; overflow-wrap: anywhere; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding: 32px 0 40px; font-size: .8125rem; color: var(--text-secondary); }
footer > span, .footer-links { padding: 8px 12px; border-radius: 8px; background: var(--surface); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }

/* Restrained 3D depth: real perspective without turning the page into a demo reel. */
.hero-panel {
  --hero-depth-x: 0px;
  --hero-depth-y: 0px;
  --hero-depth-rx: 0deg;
  --hero-depth-ry: 0deg;
  transform: perspective(1200px) translate3d(var(--hero-depth-x),var(--hero-depth-y),0) rotateX(var(--hero-depth-rx)) rotateY(var(--hero-depth-ry));
  transform-style: preserve-3d;
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
}
.hero-panel::before { transform: translateZ(-26px) scale(1.035); }
.hero-panel > .eyebrow { position: relative; transform: translateZ(10px); }
.hero-panel > h1 { position: relative; transform: translateZ(30px); text-shadow: 0 18px 42px rgba(0,0,0,.38); }
.hero-panel > .hero-copy { position: relative; transform: translateZ(18px); }
.hero-panel > .hero-actions { position: relative; transform: translateZ(24px); }

.tilt, #tiltLab {
  --depth-rotate-x: 0deg;
  --depth-rotate-y: 0deg;
  --depth-lift: 0px;
  --depth-glow-x: 50%;
  --depth-glow-y: 50%;
  position: relative;
  transform: perspective(1100px) translate3d(0,var(--depth-lift),0) rotateX(var(--depth-rotate-x)) rotateY(var(--depth-rotate-y));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .18s cubic-bezier(.2,.75,.2,1), box-shadow .18s ease, border-color .18s ease;
}
.tilt::after, #tiltLab::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--depth-glow-x) var(--depth-glow-y),rgba(255,255,255,.11),transparent 34%);
  transform: translateZ(8px);
  transition: opacity .18s ease;
}
.tilt.depth-active::after, #tiltLab.depth-active::after { opacity: 1; }
.live-card.depth-active, .hud.depth-active, #tiltLab.depth-active {
  border-color: rgba(185,255,104,.22);
  box-shadow: 0 22px 54px rgba(0,0,0,.28);
}
.project.depth-active { box-shadow: inset 0 0 0 1px rgba(185,255,104,.08),0 18px 36px rgba(0,0,0,.18); }

.live-card > .live-head,
.live-card > .source-badges,
.live-card > .live-body,
.hud > *,
.project > *,
#tiltLab > .reactor,
#tiltLab > .reactor-label {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
}
.live-card > .live-head, .live-card > .source-badges { transform: translateZ(13px); }
.live-card > .live-body { transform: translateZ(19px); }
.media-art { transform: translateZ(22px); box-shadow: 0 16px 30px rgba(0,0,0,.22); }
.project > .project-no { transform: translateZ(10px); }
.project > div:not(.project-no):not(.arrow) { transform: translateZ(16px); }
.project > .arrow { transform: translateZ(28px); text-shadow: 0 9px 20px rgba(185,255,104,.18); }
.hud > .hud-head { transform: translateZ(15px); }
.hud > .hud-grid, .hud > .gpu-line, .hud > .mini-chart { transform: translateZ(10px); }
#tiltLab > .reactor { transform: translateZ(20px); }
#tiltLab > .reactor-label { transform: translateZ(28px); }
.reactor-ring { transform: translateZ(8px); }
.reactor-ring.r2 { transform: translateZ(18px); }
.reactor-ring.r3 { transform: translateZ(28px); }
.reactor-core { transform: translateZ(40px) scale(1.04); box-shadow: 0 14px 42px rgba(155,115,255,.48),0 0 40px rgba(155,115,255,.5); }

@media (hover: none), (pointer: coarse) {
  .hero-panel, .tilt, #tiltLab { transform: none; }
  .tilt::after, #tiltLab::after { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-panel, .tilt, #tiltLab { transform: none !important; }
  .tilt::after, #tiltLab::after { display: none !important; }
}

/* Music and sign-in overlays keep native keyboard and focus behaviour. */
html.visualiser-open, html.visualiser-open body { overflow: hidden; }
.music-fullscreen { position: fixed; inset: 0; z-index: 80; isolation: isolate; background: var(--bg); overflow: auto; padding: 24px; }
.music-fullscreen::backdrop { background: var(--bg); }
.music-fullscreen #fx { display: block !important; position: fixed; inset: 0; opacity: 1 !important; z-index: 0; }
.fullscreen-stage { position: relative; z-index: 2; min-height: calc(100svh - 48px); display: grid; justify-items: center; align-content: center; gap: 20px; text-align: center; padding-block: 64px; }
.fullscreen-stage > img { width: min(48vw,380px); aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.fullscreen-copy, .fullscreen-controls, .fullscreen-playback, #fullscreenCommandStatus { max-width: min(100%,1000px); padding: 16px 20px; border: 1px solid var(--line); background: rgba(8,13,21,.96); border-radius: 12px; }
.fullscreen-copy h2 { font-size: clamp(2rem,6vw,4.5rem); margin: 0; line-height: 1.1; letter-spacing: -.04em; overflow-wrap: anywhere; }
.fullscreen-copy p { color: var(--text-secondary); margin: 8px 0; }
.fullscreen-exit { position: fixed; z-index: 4; top: max(20px,env(safe-area-inset-top)); right: max(20px,env(safe-area-inset-right)); padding: 10px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.fullscreen-playback { margin: 0; }
.fullscreen-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.fullscreen-controls label { display: grid; gap: 8px; text-align: left; font-size: .8125rem; color: var(--text-secondary); }
.fullscreen-controls input, .fullscreen-controls select { min-width: 0; width: 150px; }
#fullscreenCommandStatus { margin: 0; }
.owner-login-dialog { width: min(430px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text-primary); overflow: auto; }
.owner-login-dialog::backdrop { background: rgba(0,0,0,.78); }
.owner-login-form { display: grid; gap: 18px; padding: 28px; }
.owner-login-heading h2 { margin: 0 0 8px; font-size: 1.75rem; letter-spacing: -.035em; }
.owner-login-heading .eyebrow { display: block; margin-bottom: 8px; }
.owner-login-heading p { color: var(--text-secondary); font-size: .9375rem; margin: 0; }
.owner-login-note { line-height: 1.6; }
.owner-login-form > label:not(.toggle) { display: grid; gap: 8px; font-size: .875rem; }
.owner-login-form input[type=text], .owner-login-form input[type=password] { width: 100%; min-width: 0; padding: 12px; background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--line); border-radius: 8px; }
.owner-login-error { padding: 12px; background: #351c1e; color: #ffd4d0; border-radius: 8px; font-size: .875rem; margin: 0; }
.owner-login-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 10px; }

@media(max-width:900px) {
  .live-grid { grid-template-columns: minmax(0,1fr); }
  .media-live { grid-template-columns: 140px minmax(0,1fr); }
  .media-art { width: 140px; }
  .project { grid-template-columns: 28px minmax(0,1fr) 24px; }
  .project > div:nth-child(3) { grid-column: 2; }
  .project .arrow { grid-column: 3; grid-row: 1; }
  .project-details { grid-template-columns: minmax(0,1fr); }
  .furnace, .diagnostics-layout { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:600px) {
  .shell, header { width: calc(100% - 32px); }
  header { top: 8px; margin-top: 8px; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
  header nav { gap: 0; }
  header nav a { padding: 8px; font-size: .8125rem; }
  .brand { font-size: .9375rem; }
  .hero { padding: 64px 0 36px; }
  .hero-panel::before { inset: -20px -12px; }
  section { padding-block: 28px; }
  .section-head { display: block; padding: 12px 14px; }
  .section-head > p { margin-top: 12px; }
  .section-head .section-index { margin: 0 0 6px; }
  .live-head { padding: 18px; }
  .live-body, .settings-panel { padding: 18px; }
  .source-badges { padding: 18px 18px 0; gap: 12px; }
  .sys-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .media-live { grid-template-columns: 88px minmax(0,1fr); gap: 16px; }
  .media-art { width: 88px; }
  .media-meta h4 { font-size: 1.2rem; }
  .media-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .media-controls button { font-size: .8125rem; padding: 10px 6px; }
  .project { padding: 20px 18px; gap: 12px; }
  .project h3 { font-size: 1.3rem; }
  .graphics-modes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fullscreen-stage > img { width: min(70vw,360px); }
  .fullscreen-controls { display: grid; width: 100%; }
  .fullscreen-controls input, .fullscreen-controls select { width: 100%; }
}
@media(max-width:360px) {
  .hero h1 { font-size: 2.5rem; overflow-wrap: anywhere; }
  header { align-items: start; }
  .media-live, .media-controls, .sys-grid, .dns-strip, .mode-grid, .hud-grid { grid-template-columns: minmax(0,1fr); }
  .control-row { flex-wrap: wrap; }
  .project { grid-template-columns: minmax(0,1fr) 24px; }
  .project-no { display: none; }
  .project > div:nth-child(3) { grid-column: 1; }
  .project .arrow { grid-column: 2; }
  .runtime-info dl > div { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .owner-login-form { padding: 18px; }
  .section-head, .hero-copy, .control-row, summary, button, .brand { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}