:root {
  --ink: #101426;
  --ink-2: #161b31;
  --night: #060914;
  --night-soft: #0b1021;
  --paper: #f2efe8;
  --paper-2: #e8e4dc;
  --white: #fbfaf7;
  --muted: #797d8d;
  --line: rgba(16, 20, 38, .14);
  --line-light: rgba(255, 255, 255, .14);
  --coral: #ff5538;
  --orange: #ff8b3d;
  --gold: #ffd966;
  --cyan: #5be7e1;
  --blue: #637bff;
  --violet: #ab68ff;
  --sans: "Noto Sans KR", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --pad: clamp(24px, 5vw, 80px);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { color: #fff; background: var(--coral); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #fff;
  background: var(--coral);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.site-header {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 78px;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.brand { display: flex; align-items: center; gap: 11px; font: 500 15px/1 var(--mono); letter-spacing: .04em; }
.brand strong { font-weight: 500; color: var(--coral); }
.brand-mark { position: relative; display: grid; width: 24px; height: 24px; place-items: center; }
.brand-mark::after { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; content: ""; box-shadow: 0 0 12px var(--gold); }
.brand-mark i { position: absolute; top: 1px; left: 11px; width: 1px; height: 9px; background: var(--coral); transform-origin: 50% 11px; }
.brand-mark i:nth-child(2) { transform: rotate(120deg); }
.brand-mark i:nth-child(3) { transform: rotate(240deg); }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.main-nav a { color: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; transition: color .2s; }
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; }
.header-cta { padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 99px; font-size: 12px; font-weight: 700; }
.header-cta span { margin-left: 8px; color: var(--coral); }

.section-pad { padding: clamp(80px, 10vw, 150px) var(--pad); }
.hero {
  position: relative;
  display: grid;
  min-height: min(920px, 100vh);
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  padding-top: 140px;
  padding-bottom: 90px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 48%, rgba(77, 85, 172, .22), transparent 25%),
    radial-gradient(circle at 28% 75%, rgba(255, 85, 56, .1), transparent 28%),
    linear-gradient(145deg, #090b19 0%, #070a16 52%, #11152c 100%);
}
.hero::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .24) .7px, transparent .7px);
  background-size: 43px 43px;
  opacity: .2;
  content: "";
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero::after {
  position: absolute;
  right: -15%;
  bottom: -50%;
  width: 80%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 80px rgba(255,255,255,.018), 0 0 0 160px rgba(255,255,255,.012);
}
.hero-copy, .hero-art { position: relative; z-index: 2; }
.eyebrow, .kicker { margin: 0 0 26px; font: 500 11px/1 var(--mono); letter-spacing: .17em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .6); }
.eyebrow span { width: 30px; height: 1px; background: var(--coral); }
.hero h1 { max-width: 800px; margin: 0; font-size: clamp(47px, 6.2vw, 102px); font-weight: 800; line-height: 1.06; letter-spacing: -.065em; }
.hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); }
.hero-lead { max-width: 610px; margin: 34px 0 0; color: rgba(255, 255, 255, .68); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.85; word-break: keep-all; }
.hero-actions { display: flex; margin-top: 38px; align-items: center; gap: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 3px; font-size: 13px; font-weight: 800; }
.button-primary { color: #fff; background: var(--coral); box-shadow: 0 9px 25px rgba(255, 85, 56, .18); transition: transform .2s, background .2s; }
.button-primary:hover { background: #ff6a4e; transform: translateY(-2px); }
.play-triangle { margin-right: 9px; font-size: 9px; }
.text-link { padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: 13px; font-weight: 700; }
.text-link span { margin-left: 15px; color: var(--coral); }
.hero-stats { display: flex; margin: 70px 0 0; gap: clamp(35px, 6vw, 85px); }
.hero-stats div { display: flex; align-items: baseline; gap: 9px; }
.hero-stats dt { font: 400 clamp(25px, 2.5vw, 38px)/1 var(--mono); color: var(--gold); }
.hero-stats dd { margin: 0; color: rgba(255, 255, 255, .45); font-size: 11px; }

.hero-art { min-height: 620px; }
.hero-burst { position: absolute; top: 42%; left: 49%; width: 18px; height: 18px; border-radius: 50%; background: #fff7ce; box-shadow: 0 0 14px 7px #ffb63f, 0 0 45px 13px rgba(255, 83, 48, .65); animation: heroPulse 3.4s ease-in-out infinite; }
.hero-burst span { position: absolute; left: 8px; bottom: 9px; width: 2px; height: calc(155px * var(--l)); border-radius: 2px; background: linear-gradient(to top, #fff 0, #ffd061 10%, #ff603d 42%, transparent 100%); transform: rotate(var(--a)); transform-origin: 50% 100%; box-shadow: 0 0 7px #ff813b; }
.hero-burst span::after { position: absolute; top: 10%; left: -1px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 28px 0 #ff6844, 0 60px 0 #ffb54f, 0 96px 0 #fff; content: ""; }
.hero-orbit { position: absolute; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.orbit-one { top: 21%; left: 27%; width: 43%; aspect-ratio: 1; }
.orbit-two { top: 11%; left: 16%; width: 66%; aspect-ratio: 1; border-style: dashed; opacity: .5; }
.hero-caption { position: absolute; top: 22%; right: 1%; display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.54); font: 400 9px/1.5 var(--mono); letter-spacing: .1em; }
.hero-caption::before { position: absolute; top: 38px; right: 100%; width: 110px; height: 1px; background: rgba(255,255,255,.2); content: ""; }
.hero-caption b { color: var(--coral); font-size: 9px; }
.hero-horizon { position: absolute; right: -20%; bottom: 1%; width: 120%; height: 20%; border-top: 1px solid rgba(255,255,255,.13); background: linear-gradient(to bottom, rgba(45, 61, 113, .08), transparent); transform: skewY(-4deg); }
@keyframes heroPulse { 50% { box-shadow: 0 0 18px 9px #ffb63f, 0 0 65px 22px rgba(255, 83, 48, .46); transform: scale(1.12); } }

.festival-ribbon { position: relative; height: 44px; overflow: hidden; color: var(--night); background: var(--coral); }
.ribbon-track { display: flex; width: max-content; height: 100%; align-items: center; gap: 28px; padding-right: 28px; font: 500 11px/1 var(--mono); letter-spacing: .12em; animation: marquee 28s linear infinite; }
.ribbon-track i { color: #ffd7cc; font-style: normal; font-size: 9px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.simulator-section { color: #fff; background: var(--night); }
.section-heading { display: flex; max-width: 1440px; margin: 0 auto clamp(42px, 6vw, 76px); align-items: end; justify-content: space-between; gap: 40px; }
.section-heading > div { flex: 1; }
.section-heading h2 { margin: 0; font-size: clamp(40px, 5.3vw, 82px); font-weight: 800; line-height: 1.08; letter-spacing: -.055em; }
.section-heading > p { max-width: 490px; margin: 0 0 8px; font-size: 14px; line-height: 1.9; word-break: keep-all; }
.light-heading .kicker { color: var(--coral); }
.light-heading > p { color: rgba(255,255,255,.55); }
.dark-heading .kicker { color: #e6482c; }
.dark-heading > p { color: #676b77; }

.simulator-frame { display: grid; max-width: 1440px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) 315px; border: 1px solid var(--line-light); background: #0c1020; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.sim-stage { position: relative; min-width: 0; min-height: 680px; overflow: hidden; background: #060817; }
.sim-stage:fullscreen, .drone-stage:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; background: #050914; }
#fireworksCanvas { width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.sim-topbar { position: absolute; z-index: 3; top: 0; left: 0; display: flex; width: 100%; align-items: flex-start; justify-content: space-between; padding: 22px 24px; pointer-events: none; }
.live-badge { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.65); font: 500 9px/1 var(--mono); letter-spacing: .12em; }
.live-badge i { width: 6px; height: 6px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,85,56,.14); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.scene-name { text-align: right; }
.scene-name span, .scene-name strong { display: block; }
.scene-name span { margin-bottom: 5px; color: rgba(255,255,255,.45); font: 400 8px/1 var(--mono); letter-spacing: .13em; }
.scene-name strong { font-size: 13px; }
.icon-button { width: 34px; height: 34px; margin-left: 18px; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.18); background: rgba(5,7,16,.35); pointer-events: auto; }
.launch-guide { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.35); font: 400 10px/1 var(--mono); letter-spacing: .08em; transform: translate(-50%, -50%); transition: opacity .4s; pointer-events: none; }
.launch-guide span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.stage-legend { position: absolute; z-index: 3; bottom: 73px; left: 22px; display: flex; gap: 18px; color: rgba(255,255,255,.45); font: 400 8px/1 var(--mono); pointer-events: none; }
.stage-legend span { display: flex; align-items: center; gap: 6px; }
.stage-legend b { min-width: 24px; color: rgba(255,255,255,.82); font-weight: 400; }
.legend-dot { width: 5px; height: 5px; border-radius: 50%; }
.launch-dot { background: var(--coral); }
.particle-dot { background: var(--cyan); }
.transport-bar { position: absolute; z-index: 4; bottom: 0; left: 0; display: grid; width: 100%; height: 56px; grid-template-columns: 34px 39px 1fr 39px 35px 35px; align-items: center; gap: 8px; padding: 0 18px; border-top: 1px solid rgba(255,255,255,.12); background: rgba(4,6,15,.77); backdrop-filter: blur(12px); }
.transport-bar button { color: #fff; border: 0; background: none; }
.transport-play { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 50%; font-size: 9px; }
.transport-bar > span { color: rgba(255,255,255,.62); font: 400 9px/1 var(--mono); }
.transport-bar input { width: 100%; height: 3px; accent-color: var(--coral); cursor: pointer; }
.speed-button, .reset-button { height: 28px; color: rgba(255,255,255,.6) !important; font: 500 9px/1 var(--mono); }
.reset-button { font-size: 18px; }

.control-panel { display: flex; flex-direction: column; padding: 22px; border-left: 1px solid var(--line-light); background: #11162a; }
.control-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid rgba(255,255,255,.11); }
.control-head div span, .control-head div strong { display: block; }
.control-head div span { margin-bottom: 5px; color: rgba(255,255,255,.38); font: 400 8px/1 var(--mono); letter-spacing: .16em; }
.control-head div strong { font-size: 17px; }
.status-pill { padding: 6px 7px; color: #62ded0; border: 1px solid rgba(98,222,208,.28); border-radius: 2px; background: rgba(98,222,208,.06); font: 400 7px/1 var(--mono); letter-spacing: .08em; }
.field-label, .control-fieldset legend { display: flex; margin: 23px 0 10px; align-items: center; gap: 8px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; }
.field-label span, .control-fieldset legend span { color: var(--coral); font: 400 8px/1 var(--mono); }
.select-wrap { position: relative; }
.select-wrap::after { position: absolute; top: 50%; right: 13px; color: rgba(255,255,255,.5); content: "⌄"; transform: translateY(-60%); pointer-events: none; }
.select-wrap select { width: 100%; height: 43px; padding: 0 34px 0 13px; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 2px; outline: none; background: #0c1020; appearance: none; font-size: 12px; }
.control-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.color-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.color-swatch { position: relative; width: 27px; height: 27px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
.color-swatch.active::after { position: absolute; inset: -4px; border: 1px solid #fff; border-radius: 50%; content: ""; }
.range-control { margin-top: 18px; }
.range-control label { display: flex; justify-content: space-between; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 600; }
.range-control label i { margin-right: 8px; color: var(--coral); font: normal 8px/1 var(--mono); }
.range-control output { color: #fff; font: 400 9px/1 var(--mono); }
.range-control input { width: 100%; height: 3px; margin-top: 12px; accent-color: var(--coral); }
.stage-fieldset { margin-top: 0; }
.segmented { display: grid; grid-template-columns: repeat(4, 1fr); }
.segmented button { height: 33px; padding: 0; color: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.12); border-right: 0; background: #0c1020; font-size: 9px; }
.segmented button:last-child { border-right: 1px solid rgba(255,255,255,.12); }
.segmented button.active { color: #fff; border-color: var(--coral); background: rgba(255,85,56,.17); }
.toggle-row { display: flex; margin-top: 20px; gap: 18px; }
.toggle-row label { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.55); font-size: 9px; cursor: pointer; }
.toggle-row input { position: absolute; opacity: 0; }
.toggle-row label span { position: relative; width: 25px; height: 13px; border-radius: 20px; background: #32384f; transition: background .2s; }
.toggle-row label span::after { position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #83899e; content: ""; transition: transform .2s, background .2s; }
.toggle-row input:checked + span { background: rgba(255,85,56,.35); }
.toggle-row input:checked + span::after { background: var(--coral); transform: translateX(12px); }
.launch-buttons { display: grid; margin-top: auto; padding-top: 22px; grid-template-columns: 1fr 45px; gap: 8px; }
.launch-button, .random-button { height: 45px; color: #fff; border: 0; background: var(--coral); }
.launch-button { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; font-size: 12px; font-weight: 800; }
.launch-button kbd { padding: 4px 6px; color: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.25); background: transparent; font: 400 7px/1 var(--mono); }
.random-button { color: var(--gold); border: 1px solid rgba(255,255,255,.14); background: #0c1020; }
.control-note { margin: 13px 0 0; color: rgba(255,255,255,.31); font-size: 8px; line-height: 1.55; }

.drone-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(53, 226, 201, .09), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(98, 117, 255, .12), transparent 28%),
    #07101d;
}
.drone-section::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(116, 240, 221, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(116, 240, 221, .022) 1px, transparent 1px); background-size: 44px 44px; content: ""; pointer-events: none; }
.drone-section > * { position: relative; z-index: 1; }
.drone-studio-frame { display: grid; max-width: 1440px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) 330px; border: 1px solid rgba(109, 231, 214, .2); background: #0a1525; box-shadow: 0 35px 100px rgba(0,0,0,.28); }
.drone-stage { position: relative; min-width: 0; min-height: 680px; overflow: hidden; background: #050a14; }
.drone-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.drone-fire-layer { z-index: 0; }
.drone-pixel-layer { z-index: 1; pointer-events: none; }
.drone-grid-overlay { position: absolute; z-index: 2; inset: 0; background-image: linear-gradient(rgba(105,227,211,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(105,227,211,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 76%); pointer-events: none; }
.drone-hud { position: absolute; z-index: 4; top: 0; left: 0; display: grid; width: 100%; grid-template-columns: 1fr auto 40px; align-items: start; gap: 20px; padding: 22px 24px; pointer-events: none; }
.drone-live { display: grid; width: max-content; grid-template-columns: 7px auto; align-items: center; gap: 6px 8px; color: rgba(255,255,255,.56); font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.drone-live i { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 0 5px rgba(91,231,225,.12), 0 0 12px rgba(91,231,225,.8); animation: blink 1.8s infinite; }
.drone-live b { grid-column: 2; color: rgba(91,231,225,.7); font-weight: 400; }
.drone-pattern-readout { text-align: right; }
.drone-pattern-readout span, .drone-pattern-readout strong { display: block; }
.drone-pattern-readout span { margin-bottom: 6px; color: rgba(255,255,255,.35); font: 400 8px/1 var(--mono); letter-spacing: .12em; }
.drone-pattern-readout strong { font-size: 13px; }
.drone-hud .icon-button { pointer-events: auto; }
.drone-axis-labels { position: absolute; z-index: 3; right: 22px; bottom: 82px; left: 22px; display: flex; justify-content: space-between; color: rgba(108,233,216,.28); font: 400 7px/1 var(--mono); letter-spacing: .1em; pointer-events: none; }
.drone-sequence-bar { position: absolute; z-index: 5; right: 0; bottom: 0; left: 0; display: grid; height: 60px; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding: 0 18px; border-top: 1px solid rgba(108,233,216,.18); background: rgba(4,10,19,.84); backdrop-filter: blur(14px); }
.drone-main-play, .drone-next { height: 34px; padding: 0 12px; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.025); font-size: 9px; font-weight: 700; }
.drone-main-play span { margin-right: 7px; color: var(--cyan); }
.drone-next { border-color: transparent; }
.drone-sequence-progress { display: flex; height: 3px; gap: 4px; }
.drone-sequence-progress i { height: 100%; flex: 1; background: rgba(255,255,255,.14); }
.drone-sequence-progress i.active { background: var(--cyan); box-shadow: 0 0 9px rgba(91,231,225,.5); }
#droneSequenceTime { color: rgba(255,255,255,.43); font: 400 8px/1 var(--mono); }
.drone-controls { display: flex; flex-direction: column; padding: 22px; border-left: 1px solid rgba(109,231,214,.17); background: #0e1a2b; }
.drone-status { color: var(--cyan); border-color: rgba(91,231,225,.28); background: rgba(91,231,225,.05); }
.drone-pattern-fieldset legend { margin-top: 22px; }
.drone-pattern-buttons { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.1); border-left: 1px solid rgba(255,255,255,.1); }
.drone-pattern-buttons button { display: flex; min-height: 58px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 5px; color: rgba(255,255,255,.46); border: 0; border-right: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(3,9,17,.4); font-size: 8px; }
.drone-pattern-buttons button i { color: rgba(91,231,225,.55); font: normal 16px/1 var(--mono); }
.drone-pattern-buttons button:hover, .drone-pattern-buttons button.active { color: #fff; background: rgba(91,231,225,.11); box-shadow: inset 0 0 0 1px rgba(91,231,225,.38); }
.drone-pattern-buttons button.active i { color: var(--cyan); text-shadow: 0 0 12px rgba(91,231,225,.7); }
.drone-range { margin-top: 17px; }
.drone-range input { accent-color: var(--cyan); }
.drone-palette-fieldset legend { margin-top: 18px; }
.drone-palettes { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.drone-palettes button { display: flex; min-height: 43px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; color: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.11); background: transparent; font-size: 7px; }
.drone-palettes button i { width: 42px; height: 4px; border-radius: 4px; background: linear-gradient(90deg,var(--p1),var(--p2),var(--p3)); }
.drone-palettes button.active { color: #fff; border-color: rgba(91,231,225,.5); }
.hybrid-switch { display: grid; position: relative; margin-top: 18px; grid-template-columns: 35px 1fr; gap: 2px 9px; align-items: center; color: rgba(255,255,255,.68); cursor: pointer; }
.hybrid-switch input { position: absolute; opacity: 0; }
.hybrid-switch > span { position: relative; width: 32px; height: 17px; grid-row: 1 / 3; border-radius: 20px; background: #2b3850; }
.hybrid-switch > span::after { position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #7f8aa0; content: ""; transition: transform .2s, background .2s; }
.hybrid-switch input:checked + span { background: rgba(255,85,56,.35); }
.hybrid-switch input:checked + span::after { background: var(--coral); transform: translateX(15px); }
.hybrid-switch b { font-size: 9px; }
.hybrid-switch small { color: rgba(255,255,255,.3); font-size: 7px; }
.drone-show-button { display: flex; height: 44px; margin-top: auto; align-items: center; justify-content: space-between; padding: 0 13px; color: #07101d; border: 0; background: var(--cyan); font-size: 10px; font-weight: 800; }
.drone-show-button b { font-size: 8px; }
.drone-show-cues { display: grid; max-width: 1440px; margin: 18px auto 0; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(109,231,214,.17); border-left: 1px solid rgba(109,231,214,.17); }
.drone-show-cues button { min-height: 88px; padding: 15px; color: rgba(255,255,255,.48); border: 0; border-right: 1px solid rgba(109,231,214,.17); border-bottom: 1px solid rgba(109,231,214,.17); text-align: left; background: rgba(7,18,31,.65); }
.drone-show-cues button.active { color: #fff; background: rgba(91,231,225,.095); box-shadow: inset 0 -2px var(--cyan); }
.drone-show-cues span, .drone-show-cues b, .drone-show-cues small { display: block; }
.drone-show-cues span { margin-bottom: 9px; color: var(--cyan); font: 400 7px/1 var(--mono); }
.drone-show-cues b { font-size: 10px; }
.drone-show-cues small { margin-top: 4px; color: rgba(255,255,255,.28); font: 400 7px/1 var(--mono); }

.drone-knowledge { background: #edf0ee; }
.space-pixel-panel { display: grid; max-width: 1440px; min-height: 570px; margin: 0 auto 75px; grid-template-columns: 1.05fr .95fr; color: #fff; background: #121b2a; }
.pixel-visual { position: relative; min-height: 570px; overflow: hidden; background: radial-gradient(circle at center,rgba(92,229,211,.12),transparent 35%), linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: auto,40px 40px,40px 40px; perspective: 700px; }
.pixel-sphere { position: absolute; top: 50%; left: 50%; width: min(360px,70%); aspect-ratio: 1; transform: translate(-50%,-50%); transform-style: preserve-3d; animation: sphereTurn 16s linear infinite; }
.pixel-sphere i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--dot-color,var(--cyan)); box-shadow: 0 0 9px var(--dot-color,var(--cyan)); transform: translate3d(var(--x),var(--y),var(--z)); opacity: var(--o,.9); }
@keyframes sphereTurn { from { transform: translate(-50%,-50%) rotateY(0deg) rotateX(-8deg); } to { transform: translate(-50%,-50%) rotateY(360deg) rotateX(-8deg); } }
.pixel-visual .axis { position: absolute; color: rgba(91,231,225,.35); font: 400 8px/1 var(--mono); }
.axis-x { right: 24px; bottom: 50%; }.axis-y { top: 22px; left: 50%; }.axis-z { bottom: 24px; left: 25%; }
.pixel-copy { display: flex; justify-content: center; flex-direction: column; padding: clamp(35px,6vw,88px); border-left: 1px solid rgba(255,255,255,.1); }
.micro-label { color: var(--coral); font: 500 8px/1 var(--mono); letter-spacing: .15em; }
.pixel-copy h3 { margin: 22px 0; font-size: clamp(35px,4.2vw,65px); line-height: 1.08; letter-spacing: -.05em; }
.pixel-copy > p { margin: 0; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.9; }
.pixel-copy dl { display: grid; margin: 35px 0 0; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.12); }
.pixel-copy dl div { padding-top: 16px; }
.pixel-copy dt { color: var(--cyan); font: 400 8px/1 var(--mono); }
.pixel-copy dd { margin: 7px 0 0; color: rgba(255,255,255,.45); font-size: 8px; }
.drone-process { display: grid; max-width: 1440px; margin: 0 auto 95px; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.drone-process article { position: relative; min-height: 255px; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.drone-process article > span { color: var(--coral); font: 400 8px/1 var(--mono); }
.drone-process article > i { display: grid; width: 48px; height: 48px; margin: 32px 0 26px; place-items: center; color: #25a99e; border: 1px solid rgba(37,169,158,.3); border-radius: 50%; font: normal 17px/1 var(--mono); }
.drone-process h3 { margin: 0 0 9px; font-size: 14px; }
.drone-process p { margin: 0; color: #777b82; font-size: 9px; line-height: 1.7; }
.formation-atlas-head { display: flex; max-width: 1440px; margin: 0 auto 30px; align-items: end; justify-content: space-between; gap: 35px; }
.formation-atlas-head span { color: var(--coral); font: 500 8px/1 var(--mono); letter-spacing: .14em; }
.formation-atlas-head h3 { margin: 10px 0 0; font-size: clamp(30px,4vw,54px); letter-spacing: -.045em; }
.formation-atlas-head p { max-width: 430px; margin: 0; color: #777b82; font-size: 11px; line-height: 1.75; }
.formation-atlas { display: grid; max-width: 1440px; margin: 0 auto 100px; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.formation-atlas article { position: relative; min-height: 290px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.formation-atlas article > span { color: #a09f99; font: 400 8px/1 var(--mono); }
.formation-mini { position: relative; height: 145px; margin: 6px 0; overflow: hidden; }
.formation-mini i, .formation-mini i::before, .formation-mini i::after { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #27b7a8; box-shadow: 18px 0 #27b7a8,36px 0 #27b7a8,54px 0 #27b7a8,72px 0 #27b7a8,90px 0 #27b7a8,108px 0 #27b7a8,126px 0 #27b7a8,144px 0 #27b7a8; content: ""; }
.formation-mini i { top: 48%; left: calc(50% - 72px); transform: rotate(var(--mini-rotate,0)); }
.formation-mini i::before { transform: translateY(-28px) scale(.86); opacity: .7; }
.formation-mini i::after { transform: translateY(28px) scale(.86); opacity: .5; }
.formation-atlas article:nth-child(2) .formation-mini i { --mini-rotate: -28deg; }
.formation-atlas article:nth-child(3) .formation-mini i { border-radius: 50%; transform: rotate(15deg) scale(.85); }
.formation-atlas article:nth-child(4) .formation-mini i { transform: rotate(90deg) scale(.75); }
.formation-atlas article:nth-child(5) .formation-mini i { --mini-rotate: 35deg; }
.formation-atlas article:nth-child(6) .formation-mini i { --mini-rotate: -10deg; animation: miniWave 2s ease-in-out infinite alternate; }
.formation-atlas article:nth-child(7) .formation-mini i { transform: rotate(-42deg) scale(.68); }
.formation-atlas article:nth-child(8) .formation-mini i { transform: translateY(25px) scale(1.05); }
.formation-atlas article:nth-child(9) .formation-mini i { background: var(--coral); box-shadow: 18px -12px var(--coral),36px 5px var(--gold),54px -28px var(--coral),72px 0 var(--gold),90px -35px var(--coral),108px 2px var(--gold),126px -16px var(--coral),144px 0 var(--gold); }
.formation-atlas article:nth-child(10) .formation-mini i { transform: translateY(-18px) scale(.82); }
.formation-atlas article:nth-child(11) .formation-mini i { transform: rotate(22deg); }
.formation-atlas article:nth-child(12) .formation-mini i { transform: rotate(52deg) scale(.9); }
.formation-atlas article:nth-child(13) .formation-mini i { transform: translateX(-18px) rotate(-18deg) scale(.72); }
.formation-atlas article:nth-child(14) .formation-mini i { transform: scale(.7); box-shadow: 18px -18px #27b7a8,36px -30px #27b7a8,54px -18px #27b7a8,90px 18px #27b7a8,108px 30px #27b7a8,126px 18px #27b7a8,144px 0 #27b7a8; }
@keyframes miniWave { to { transform: translateY(-14px) rotate(12deg); } }
.formation-atlas h4 { margin: 0 0 7px; font-size: 15px; }
.formation-atlas p { margin: 0; color: #74777e; font-size: 9px; line-height: 1.6; }
.medium-comparison { max-width: 1440px; margin: 0 auto 100px; border: 1px solid var(--line); background: #f5f6f2; }
.comparison-head { display: grid; grid-template-columns: 1fr 1fr; padding: 32px; align-items: end; border-bottom: 1px solid var(--line); }
.comparison-head span { grid-column: 1/-1; color: var(--coral); font: 500 8px/1 var(--mono); letter-spacing: .14em; }
.comparison-head h3 { margin: 12px 0 0; font-size: 32px; }
.comparison-head p { margin: 0; color: #74777e; font-size: 10px; line-height: 1.7; }
.comparison-row { display: grid; grid-template-columns: .55fr repeat(3,1fr); border-bottom: 1px solid var(--line); }
.comparison-row:last-child { border-bottom: 0; }
.comparison-row > * { margin: 0; padding: 18px 20px; border-right: 1px solid var(--line); }
.comparison-row > *:last-child { border-right: 0; }
.comparison-row span, .comparison-row b { font-size: 10px; }
.comparison-row p { color: #6f737b; font-size: 9px; line-height: 1.6; }
.table-header { color: #fff; background: #151b2b; }
.table-header b { font: 500 8px/1 var(--mono); letter-spacing: .08em; }
.drone-history { display: grid; max-width: 1440px; margin: 0 auto 100px; grid-template-columns: .65fr 1.35fr; gap: 65px; }
.history-copy { align-self: start; padding-top: 10px; }
.history-copy h3 { margin: 22px 0; font-size: clamp(34px,4vw,58px); line-height: 1.1; letter-spacing: -.05em; }
.history-copy p { max-width: 400px; color: #74777e; font-size: 10px; line-height: 1.75; }
.history-line { position: relative; margin: 0; padding: 0 0 0 32px; list-style: none; border-left: 1px solid #bdc4c3; }
.history-line li { position: relative; display: grid; min-height: 110px; grid-template-columns: 90px 160px 1fr auto; align-items: start; gap: 15px; padding: 7px 0 28px; }
.history-line li::before { position: absolute; top: 9px; left: -36px; width: 7px; height: 7px; background: #edf0ee; border: 2px solid var(--coral); border-radius: 50%; content: ""; }
.history-line time { color: var(--coral); font: 500 9px/1 var(--mono); }
.history-line strong { font-size: 11px; }
.history-line p { margin: 0; color: #71757c; font-size: 9px; line-height: 1.65; }
.history-line a { color: #61656d; border-bottom: 1px solid #aaa; font-size: 8px; white-space: nowrap; }
.drone-cases { display: grid; max-width: 1440px; margin: 0 auto 100px; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.drone-cases article { min-height: 315px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.24); }
.drone-cases article > span { color: var(--coral); font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.drone-cases h3 { margin: 35px 0 14px; font-size: 21px; }
.drone-cases p { max-width: 560px; min-height: 68px; margin: 0; color: #6f737a; font-size: 10px; line-height: 1.75; }
.drone-cases article div { display: flex; margin-top: 20px; gap: 7px; }
.drone-cases article b { padding: 5px 8px; color: #676b72; border: 1px solid #ccd0cd; border-radius: 99px; font: 400 7px/1 var(--mono); }
.drone-cases a { display: inline-block; margin-top: 22px; color: #303641; border-bottom: 1px solid #979c9b; font-size: 9px; font-weight: 700; }
.drone-safety-balance { display: grid; max-width: 1440px; margin: 0 auto; grid-template-columns: .75fr 1.25fr; color: #fff; background: #151b2b; }
.drone-safety-balance > div:first-child { padding: 48px; }
.drone-safety-balance h3 { margin: 25px 0 0; font-size: clamp(32px,4vw,55px); line-height: 1.1; letter-spacing: -.05em; }
.drone-safety-balance ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(255,255,255,.12); }
.drone-safety-balance li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.drone-safety-balance li b { color: var(--cyan); font-size: 10px; }
.drone-safety-balance li span { color: rgba(255,255,255,.45); font-size: 9px; line-height: 1.7; }
.safety-source { display: flex; grid-column: 1/-1; align-items: center; gap: 22px; padding: 20px 48px; border-top: 1px solid rgba(255,255,255,.12); }
.safety-source p { flex: 1; margin: 0; color: rgba(255,255,255,.38); font-size: 8px; line-height: 1.65; }
.safety-source a { color: rgba(255,255,255,.67); border-bottom: 1px solid rgba(255,255,255,.25); font-size: 8px; white-space: nowrap; }

.atlas-section { background: var(--paper); }
.atlas-tools { display: flex; max-width: 1440px; margin: 0 auto 38px; align-items: center; justify-content: space-between; gap: 22px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chips button { min-height: 35px; padding: 0 14px; color: #666b79; border: 1px solid #d5d1c9; border-radius: 99px; background: transparent; font-size: 11px; font-weight: 700; }
.filter-chips button b { margin-left: 5px; font: 400 8px/1 var(--mono); }
.filter-chips button.active { color: #fff; border-color: var(--ink); background: var(--ink); }
.search-box { display: flex; width: 240px; height: 38px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid #aaa7a1; }
.search-box span { font-size: 20px; transform: rotate(-15deg); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.effect-grid { display: grid; max-width: 1440px; margin: 0 auto; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.effect-card { position: relative; min-height: 365px; padding: 20px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.08); transition: background .25s, transform .25s; }
.effect-card:hover { z-index: 2; background: #fff; box-shadow: 0 18px 42px rgba(26,28,39,.08); transform: translateY(-3px); }
.effect-card[hidden] { display: none; }
.effect-index { position: absolute; top: 18px; left: 18px; color: #a3a09a; font: 400 9px/1 var(--mono); }
.effect-tag { position: absolute; top: 17px; right: 17px; padding: 5px 7px; color: #777a84; border: 1px solid #d8d3ca; border-radius: 99px; font: 400 7px/1 var(--mono); letter-spacing: .05em; }
.effect-preview { width: 100%; height: 170px; margin-top: 15px; }
.effect-card h3 { margin: 12px 0 3px; font-size: 21px; letter-spacing: -.025em; }
.effect-en { color: var(--coral); font: 500 9px/1 var(--mono); letter-spacing: .12em; }
.effect-card p { min-height: 48px; margin: 13px 0; color: #6f727c; font-size: 11px; line-height: 1.65; word-break: keep-all; }
.effect-action { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 10px 0 0; color: #585c69; border: 0; border-top: 1px solid #dedad2; background: transparent; font-size: 10px; font-weight: 700; }
.effect-action span { color: var(--coral); }
.empty-message { text-align: center; color: #777; }

.science-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 8vw, 120px); color: #fff; background: #12172a; }
.science-copy { align-self: center; }
.science-copy .kicker { color: var(--cyan); }
.science-copy h2 { margin: 0; font-size: clamp(40px, 4.8vw, 75px); line-height: 1.08; letter-spacing: -.055em; }
.science-copy > p { max-width: 520px; margin: 30px 0; color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.9; word-break: keep-all; }
.science-warning { display: flex; max-width: 520px; gap: 12px; padding: 15px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.025); }
.science-warning > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; color: var(--gold); border: 1px solid rgba(255,217,102,.45); border-radius: 50%; font: 500 10px/1 var(--mono); }
.science-warning p { margin: 0; color: rgba(255,255,255,.4); font-size: 9px; line-height: 1.65; }
.science-warning strong { display: block; margin-bottom: 3px; color: rgba(255,255,255,.72); font-size: 10px; }
.shell-diagram { max-width: 720px; justify-self: end; }
.diagram-title { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.diagram-title span { color: rgba(255,255,255,.35); font: 400 8px/1 var(--mono); letter-spacing: .12em; }
.diagram-title b { color: rgba(255,255,255,.65); font-size: 10px; }
.shell-diagram svg { width: 100%; }
.diagram-callout path { fill: none; stroke: #606881; stroke-width: 1; }
.diagram-callout circle { fill: #ff6847; }
.diagram-callout text { fill: #c5c9d6; font: 500 11px var(--mono); }
.diagram-callout text.ko { fill: #737b93; font: 400 9px var(--sans); }
.quality-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); margin-top: 10px; border-top: 1px solid rgba(255,255,255,.13); border-left: 1px solid rgba(255,255,255,.13); }
.quality-grid article { padding: 23px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.quality-grid span { color: var(--cyan); font: 400 8px/1 var(--mono); }
.quality-grid h3 { margin: 18px 0 10px; font-size: 16px; }
.quality-grid p { margin: 0; color: rgba(255,255,255,.4); font-size: 10px; line-height: 1.65; }

.show-lab { color: #fff; background: #090c19; }
.preset-grid { display: grid; max-width: 1440px; margin: 0 auto 70px; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.preset-card { min-height: 182px; padding: 18px; color: rgba(255,255,255,.55); border: 0; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); text-align: left; background: transparent; transition: background .25s; }
.preset-card:hover, .preset-card.active { color: #fff; background: linear-gradient(145deg, rgba(255,85,56,.24), rgba(255,255,255,.035)); }
.preset-flag { display: flex; align-items: center; justify-content: space-between; }
.preset-flag span:first-child { font-size: 21px; }
.preset-flag span:last-child { color: rgba(255,255,255,.32); font: 400 8px/1 var(--mono); }
.preset-card h3 { margin: 28px 0 4px; color: inherit; font-size: 15px; }
.preset-card p { margin: 0; color: rgba(255,255,255,.35); font: 400 8px/1.5 var(--mono); letter-spacing: .05em; }
.preset-card .preset-key { display: block; margin-top: 17px; color: var(--coral); font-size: 8px; font-weight: 700; }
.program-console { max-width: 1440px; margin: 0 auto; border: 1px solid var(--line-light); background: #101527; }
.program-head { display: flex; align-items: center; justify-content: space-between; padding: 27px 30px; border-bottom: 1px solid var(--line-light); }
.program-head p { margin: 0 0 6px; color: var(--coral); font: 400 8px/1 var(--mono); letter-spacing: .13em; }
.program-head h3 { margin: 0; font-size: 24px; }
.program-actions { display: flex; gap: 8px; }
.program-actions button { min-height: 39px; padding: 0 15px; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.18); background: transparent; font-size: 10px; font-weight: 700; }
.program-actions button:first-child { color: #fff; border-color: var(--coral); background: var(--coral); }
.program-actions button span { margin-right: 8px; font-size: 8px; }
.timeline-scale { display: flex; justify-content: space-between; padding: 22px 30px 9px; color: rgba(255,255,255,.3); font: 400 8px/1 var(--mono); }
.timeline-track { display: flex; height: 56px; margin: 0 30px; gap: 3px; }
.timeline-phase { position: relative; display: flex; min-width: 25px; align-items: center; justify-content: center; color: #fff; background: var(--phase); font: 500 8px/1 var(--mono); overflow: hidden; cursor: pointer; }
.timeline-phase::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.18), transparent); content: ""; }
.timeline-phase span { position: relative; z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); }
.cue-list { display: grid; margin-top: 28px; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-light); }
.cue-item { min-height: 150px; padding: 21px; border-right: 1px solid var(--line-light); }
.cue-item:last-child { border-right: 0; }
.cue-item span { color: var(--coral); font: 400 8px/1 var(--mono); }
.cue-item h4 { margin: 13px 0 8px; font-size: 13px; }
.cue-item p { margin: 0; color: rgba(255,255,255,.36); font-size: 9px; line-height: 1.6; }
.adaptation-note { margin: 0; padding: 16px 28px; color: rgba(255,255,255,.32); border-top: 1px solid var(--line-light); font-size: 8px; line-height: 1.6; }

.festivals-section { background: var(--paper-2); }
.world-board { display: grid; max-width: 1440px; margin: 0 auto; grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr); border: 1px solid var(--line); background: #eeebe4; }
.map-panel { position: sticky; top: 0; align-self: start; min-height: 640px; padding: 30px; overflow: hidden; border-right: 1px solid var(--line); background: #151a2f; }
.map-panel::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 40px 40px; content: ""; }
.map-panel svg { position: relative; width: 100%; margin-top: 45px; }
.continent { fill: #252c45; stroke: #434b69; stroke-width: 1; }
.map-route { fill: none; stroke: #555e7c; stroke-dasharray: 5 7; stroke-width: 1; }
.map-pin { color: #9da4bd; cursor: pointer; }
.map-pin circle:first-child { fill: rgba(255,255,255,.04); stroke: currentColor; stroke-width: 1; }
.map-pin circle:nth-child(2) { fill: currentColor; }
.map-pin text { fill: currentColor; font: 500 8px var(--mono); letter-spacing: .08em; }
.map-pin:hover, .map-pin.active { color: var(--coral); }
.map-pin.active circle:first-child { fill: rgba(255,85,56,.15); }
.map-readout { position: absolute; bottom: 28px; left: 30px; }
.map-readout span, .map-readout strong { display: block; }
.map-readout span { margin-bottom: 6px; color: rgba(255,255,255,.28); font: 400 7px/1 var(--mono); letter-spacing: .14em; }
.map-readout strong { color: rgba(255,255,255,.75); font: 400 11px/1 var(--mono); }
.festival-list { background: #eeeae2; }
.festival-note { display: grid; grid-template-columns: 55px 1fr; padding: 27px; border-bottom: 1px solid var(--line); transition: background .2s; }
.festival-note:last-child { border-bottom: 0; }
.festival-note.active { background: #fff; }
.festival-note .festival-no { color: var(--coral); font: 400 10px/1 var(--mono); }
.festival-note h3 { margin: 0 0 4px; font-size: 18px; }
.festival-note .festival-sub { color: #8b887f; font: 400 8px/1.4 var(--mono); letter-spacing: .06em; }
.festival-note p { margin: 15px 0; color: #62656f; font-size: 10px; line-height: 1.7; word-break: keep-all; }
.festival-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.festival-facts span { padding: 5px 7px; color: #6e7079; border: 1px solid #d6d1c8; border-radius: 99px; font: 400 7px/1 var(--mono); }
.festival-note a { display: inline-block; margin-top: 15px; color: var(--ink); border-bottom: 1px solid #999; font-size: 9px; font-weight: 700; }

.composition-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; background: #f5f2eb; }
.composition-intro .kicker { color: var(--coral); }
.composition-intro h2 { position: sticky; top: 40px; margin: 0; font-size: clamp(41px, 5vw, 76px); line-height: 1.08; letter-spacing: -.055em; }
.grammar-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.grammar-grid article { min-height: 340px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.grammar-num { color: var(--coral); font: 400 8px/1 var(--mono); }
.grammar-visual { position: relative; display: flex; height: 150px; align-items: end; justify-content: center; gap: 14px; margin: 10px 0 15px; }
.height-visual i { width: 5px; border-radius: 50% 50% 0 0; background: var(--coral); box-shadow: 0 0 12px rgba(255,85,56,.35); }
.height-visual i:nth-child(1) { height: 36px; }.height-visual i:nth-child(2) { height: 92px; }.height-visual i:nth-child(3) { height: 135px; }
.width-visual i { width: 6px; height: 6px; margin-bottom: calc(12px * var(--n, 1)); border-radius: 50%; background: var(--ink); box-shadow: 0 -22px 0 var(--orange), 0 -43px 0 var(--coral); }
.width-visual i:nth-child(1) { --n: 1; }.width-visual i:nth-child(2) { --n: 2; }.width-visual i:nth-child(3) { --n: 3; }.width-visual i:nth-child(4) { --n: 2; }.width-visual i:nth-child(5) { --n: 1; }
.rhythm-visual { align-items: center; }
.rhythm-visual i { width: 5px; height: 20px; background: var(--ink); }
.rhythm-visual i:nth-child(2), .rhythm-visual i:nth-child(5) { height: 75px; background: var(--coral); }
.rhythm-visual i:nth-child(3) { height: 115px; background: var(--orange); }
.color-visual { align-items: center; gap: 0; }
.color-visual i { width: 42px; height: 42px; border-radius: 50%; mix-blend-mode: multiply; }
.color-visual i:nth-child(1) { background: #ff654b; }.color-visual i:nth-child(2) { margin-left: -10px; background: #ffd760; }.color-visual i:nth-child(3) { margin-left: -10px; background: #58dcd7; }.color-visual i:nth-child(4) { margin-left: -10px; background: #7d78ff; }
.grammar-grid h3 { margin: 0 0 10px; font-size: 14px; }
.grammar-grid p { margin: 0; color: #73757d; font-size: 10px; line-height: 1.7; }

.site-footer { padding: 65px var(--pad) 25px; color: #fff; background: var(--night); }
.site-footer .brand { margin-bottom: 20px; }
.footer-brand p { color: rgba(255,255,255,.38); font-size: 11px; line-height: 1.75; }
.site-footer { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.footer-links div { display: flex; flex-direction: column; gap: 10px; }
.footer-links strong { margin-bottom: 8px; color: rgba(255,255,255,.28); font: 400 8px/1 var(--mono); letter-spacing: .13em; }
.footer-links a { color: rgba(255,255,255,.65); font-size: 10px; }
.footer-links a:hover { color: var(--coral); }
.footer-bottom { display: flex; grid-column: 1 / -1; margin-top: 45px; justify-content: space-between; padding-top: 20px; color: rgba(255,255,255,.24); border-top: 1px solid rgba(255,255,255,.1); font: 400 7px/1 var(--mono); letter-spacing: .1em; }
.footer-bottom i { color: var(--coral); font-style: normal; }
.noscript { position: fixed; z-index: 100; right: 15px; bottom: 15px; padding: 12px; color: #fff; background: var(--coral); font-size: 12px; }

@media (max-width: 1120px) {
  .main-nav { position: fixed; z-index: 80; bottom: 12px; left: 50%; display: flex; width: max-content; max-width: calc(100vw - 24px); gap: 5px; padding: 6px; overflow-x: auto; border: 1px solid rgba(255,255,255,.13); border-radius: 99px; background: rgba(7,10,21,.88); box-shadow: 0 12px 35px rgba(0,0,0,.28); backdrop-filter: blur(14px); transform: translateX(-50%); }
  .main-nav a { padding: 9px 10px; border-radius: 99px; font-size: 9px; white-space: nowrap; }
  .main-nav a:hover, .main-nav a:focus-visible { background: rgba(255,255,255,.08); }
  .hero { grid-template-columns: 1fr .75fr; }
  .hero-art { min-height: 500px; transform: scale(.85); transform-origin: center; }
  .simulator-frame { grid-template-columns: 1fr; }
  .sim-stage { min-height: 620px; }
  .control-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; border-top: 1px solid var(--line-light); border-left: 0; }
  .control-head { grid-column: 1 / -1; }
  .launch-buttons { margin-top: 18px; }
  .control-note { align-self: end; }
  .drone-studio-frame { grid-template-columns: 1fr; }
  .drone-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 18px; border-top: 1px solid rgba(109,231,214,.17); border-left: 0; }
  .drone-controls .control-head, .drone-pattern-fieldset { grid-column: 1/-1; }
  .hybrid-switch { align-self: center; }
  .drone-show-button { margin-top: 18px; }
  .drone-process { grid-template-columns: repeat(3,1fr); }
  .preset-grid { grid-template-columns: repeat(3, 1fr); }
  .effect-grid { grid-template-columns: repeat(3, 1fr); }
  .science-section { gap: 40px; }
  .world-board { grid-template-columns: 1fr; }
  .map-panel { position: relative; min-height: 520px; border-right: 0; border-bottom: 1px solid var(--line); }
  .composition-section { grid-template-columns: 1fr; }
  .composition-intro h2 { position: static; }
}

@media (max-width: 760px) {
  :root { --pad: 20px; }
  .site-header { height: 64px; }
  .header-cta { display: none; }
  .hero { min-height: 850px; grid-template-columns: 1fr; align-content: center; padding-top: 105px; }
  .hero h1 { font-size: clamp(44px, 14vw, 67px); }
  .hero-lead { font-size: 14px; }
  .hero-art { position: absolute; right: -34%; bottom: -7%; width: 92%; min-height: 460px; opacity: .62; }
  .hero-copy { align-self: start; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-stats { margin-top: 48px; gap: 24px; }
  .hero-stats div { display: block; }
  .hero-stats dd { margin-top: 6px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 25px; }
  .section-heading > p { font-size: 13px; }
  .simulator-section { padding-right: 0; padding-left: 0; }
  .simulator-section > .section-heading { padding-right: var(--pad); padding-left: var(--pad); }
  .simulator-frame { border-right: 0; border-left: 0; }
  .sim-stage { min-height: 520px; }
  .scene-name { display: none; }
  .transport-bar { grid-template-columns: 32px 35px 1fr 35px 30px; padding: 0 10px; }
  .reset-button { display: none; }
  .control-panel { display: block; }
  .launch-buttons { margin-top: 5px; }
  .control-note { margin-bottom: 4px; }
  .drone-section { padding-right: 0; padding-left: 0; }
  .drone-section > .section-heading { padding-right: var(--pad); padding-left: var(--pad); }
  .drone-studio-frame { border-right: 0; border-left: 0; }
  .drone-stage { min-height: 520px; }
  .drone-pattern-readout { display: none; }
  .drone-hud { grid-template-columns: 1fr 40px; }
  .drone-sequence-bar { grid-template-columns: auto 1fr auto; gap: 9px; padding: 0 10px; }
  .drone-next { display: none; }
  .drone-controls { display: block; }
  .drone-show-button { margin-top: 22px; }
  .drone-show-cues { grid-template-columns: repeat(5,minmax(120px,1fr)); overflow-x: auto; }
  .drone-show-cues button { min-height: 80px; }
  .space-pixel-panel { grid-template-columns: 1fr; }
  .pixel-visual { min-height: 430px; }
  .pixel-copy { border-top: 1px solid rgba(255,255,255,.1); border-left: 0; }
  .drone-process { grid-template-columns: repeat(2,1fr); }
  .formation-atlas-head { align-items: flex-start; flex-direction: column; }
  .formation-atlas { grid-template-columns: repeat(2,1fr); }
  .comparison-head { grid-template-columns: 1fr; gap: 15px; }
  .comparison-row { min-width: 700px; }
  .comparison-table { overflow-x: auto; }
  .drone-history { grid-template-columns: 1fr; gap: 35px; }
  .history-line li { grid-template-columns: 75px 1fr; }
  .history-line li p, .history-line li a { grid-column: 2; }
  .drone-cases { grid-template-columns: 1fr; }
  .drone-safety-balance { grid-template-columns: 1fr; }
  .drone-safety-balance ul { border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
  .safety-source { align-items: flex-start; flex-wrap: wrap; padding: 20px; }
  .atlas-tools { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .effect-grid { grid-template-columns: repeat(2, 1fr); }
  .effect-card { min-height: 330px; padding: 14px; }
  .effect-preview { height: 145px; }
  .effect-card p { font-size: 10px; }
  .science-section { grid-template-columns: 1fr; }
  .shell-diagram { width: 100%; justify-self: auto; }
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .preset-grid { grid-template-columns: repeat(2, 1fr); }
  .program-head { align-items: flex-start; flex-direction: column; gap: 20px; }
  .program-actions { width: 100%; }
  .program-actions button { flex: 1; padding: 0 8px; }
  .timeline-phase span { display: none; }
  .cue-list { grid-template-columns: 1fr; }
  .cue-item { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .map-panel { min-height: 390px; padding: 15px; }
  .map-panel svg { margin-top: 20px; }
  .map-readout { bottom: 18px; left: 18px; }
  .grammar-grid { grid-template-columns: 1fr; }
  .grammar-grid article { min-height: 290px; }
  .site-footer { grid-template-columns: 1fr; gap: 35px; }
  .footer-links { gap: 16px; }
}

@media (max-width: 460px) {
  .hero-stats { gap: 16px; }
  .hero-stats dd { font-size: 9px; }
  .effect-grid { grid-template-columns: 1fr; }
  .effect-card { min-height: 350px; }
  .effect-preview { height: 170px; }
  .quality-grid, .preset-grid { grid-template-columns: 1fr 1fr; }
  .preset-card { min-height: 165px; padding: 14px; }
  .drone-process, .formation-atlas { grid-template-columns: 1fr; }
  .drone-process article { min-height: 220px; }
  .formation-atlas article { min-height: 260px; }
  .drone-safety-balance > div:first-child { padding: 32px 22px; }
  .drone-safety-balance li { grid-template-columns: 1fr; gap: 8px; }
  .festival-note { grid-template-columns: 36px 1fr; padding: 22px 16px; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-links div:last-child { display: none; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 2026 NEO-BRUTAL SHOW CONSOLE */
:root {
  --ink: #101010;
  --night: #090914;
  --paper: #fffceb;
  --paper-2: #ff9d72;
  --coral: #ff4f31;
  --gold: #ffe34e;
  --cyan: #54ead8;
  --blue: #7187ff;
  --violet: #ae79ff;
  --brutal-pink: #ff79bd;
  --brutal-lime: #dfff57;
  --brutal-yellow: #ffe44d;
  --brutal-blue: #7991ff;
  --brutal-line: 3px solid #101010;
  --brutal-shadow: 9px 9px 0 #101010;
  --radius: 0;
}

body { background: var(--paper); color: var(--ink); }
button, select, input { border-radius: 0 !important; }
button { transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
button:active { transform: translate(3px, 3px); }
::selection { color: #101010; background: var(--cyan); }
:focus-visible { outline: 3px solid #101010; outline-offset: 3px; }

.site-header {
  height: 82px;
  color: #101010;
  border-bottom: var(--brutal-line);
  background: var(--brutal-lime);
}
.brand { font-weight: 800; letter-spacing: -.02em; }
.brand strong { color: #101010; }
.brand-mark { border: 2px solid #101010; background: var(--brutal-pink); transform: rotate(-5deg); }
.brand-mark::after { background: #101010; box-shadow: none; }
.brand-mark i { background: #101010; }
.main-nav { gap: clamp(10px, 2vw, 28px); }
.main-nav a { padding: 8px 10px; color: #101010; border: 2px solid transparent; font-weight: 800; }
.main-nav a:hover, .main-nav a:focus-visible { color: #101010; border-color: #101010; background: #fff; box-shadow: 3px 3px 0 #101010; }
.header-cta { padding: 11px 15px; color: #fff; border: 2px solid #101010; border-radius: 0; background: #101010; box-shadow: 4px 4px 0 var(--brutal-pink); }
.header-cta span { color: var(--brutal-yellow); }

.hero {
  min-height: min(930px, 100vh);
  color: #101010;
  border-bottom: var(--brutal-line);
  background: var(--brutal-yellow);
}
.hero::before {
  background-image: linear-gradient(rgba(16,16,16,.09) 2px, transparent 2px), linear-gradient(90deg, rgba(16,16,16,.09) 2px, transparent 2px);
  background-size: 38px 38px;
  opacity: 1;
}
.hero::after { background: radial-gradient(circle, rgba(255,121,189,.9), rgba(255,121,189,0) 67%); opacity: .72; }
.hero .kicker { display: inline-block; padding: 8px 11px; color: #fff; border: 2px solid #101010; background: #101010; transform: rotate(-2deg); }
.hero h1 { position: relative; z-index: 2; text-transform: uppercase; text-shadow: 3px 3px 0 #fff; }
.hero h1 em { color: var(--brutal-pink); -webkit-text-stroke: 2px #101010; }
.hero-lead { color: #101010; font-weight: 600; }
.button { border: var(--brutal-line) !important; border-radius: 0 !important; box-shadow: 6px 6px 0 #101010; }
.button:hover { box-shadow: 2px 2px 0 #101010; transform: translate(4px, 4px); }
.button-primary { color: #101010; background: var(--cyan); }
.button-secondary { color: #101010; border-bottom: var(--brutal-line) !important; }
.hero-stats { width: max-content; padding: 16px 20px; border: var(--brutal-line); background: #fff; box-shadow: 6px 6px 0 #101010; }
.hero-stats dt, .hero-stats dd { color: #101010; }
.hero-art { min-height: 560px; border: var(--brutal-line); background: #101022; box-shadow: 13px 13px 0 var(--brutal-pink); transform: rotate(1.5deg); }
.hero-caption { top: 20px; right: 20px; padding: 9px; color: #101010; border: 2px solid #101010; background: var(--brutal-lime); }
.hero-caption::before { display: none; }
.hero-horizon { right: 0; bottom: 0; width: 100%; }

.festival-ribbon { height: 52px; color: #101010; border-bottom: var(--brutal-line); background: var(--brutal-pink); }
.ribbon-track { font-weight: 800; }
.ribbon-track i { color: #101010; }
.section-pad { border-bottom: var(--brutal-line); }
.section-heading h2, .science-copy h2, .composition-intro h2 { text-transform: uppercase; text-shadow: 3px 3px 0 rgba(255,255,255,.72); }
.section-heading .kicker, .light-heading .kicker, .dark-heading .kicker { width: max-content; padding: 6px 9px; color: #fff; border: 2px solid #101010; background: #101010; }
.light-heading > p, .dark-heading > p { color: #101010; font-weight: 600; }

.simulator-section { color: #101010; background: var(--brutal-blue); }
.simulator-frame { grid-template-columns: minmax(0, 1fr) 330px; border: var(--brutal-line); background: #101010; box-shadow: var(--brutal-shadow); }
.fire-program-rack {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto auto minmax(330px, 1fr) 145px 145px auto;
  min-height: 102px;
  align-items: stretch;
  border-bottom: var(--brutal-line);
  background: var(--brutal-yellow);
}
.program-rack-title { display: flex; min-width: 190px; justify-content: center; flex-direction: column; padding: 15px 18px; border-right: var(--brutal-line); }
.program-rack-title span { margin-bottom: 7px; font: 700 8px/1 var(--mono); }
.program-rack-title strong { max-width: 150px; font-size: 15px; line-height: 1.2; }
.fire-mode-switch { display: grid; min-width: 120px; grid-template-rows: repeat(3, 1fr); border-right: var(--brutal-line); }
.fire-mode-switch button { padding: 0 13px; color: #101010; border: 0; border-bottom: 2px solid #101010; background: #fff; text-align: left; font-size: 9px; font-weight: 800; }
.fire-mode-switch button:last-child { border-bottom: 0; }
.fire-mode-switch button.active { color: #fff; background: #101010; }
.sim-program-list { display: grid; min-width: 0; grid-template-columns: repeat(6, 1fr); border-right: var(--brutal-line); }
.sim-program-chip { display: flex; min-width: 75px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: #101010; border: 0; border-right: 2px solid #101010; background: var(--brutal-pink); }
.sim-program-chip:last-child { border-right: 0; }
.sim-program-chip span { font-size: 18px; }
.sim-program-chip b { font: 800 8px/1 var(--mono); }
.sim-program-chip.active { background: var(--cyan); box-shadow: inset 0 -8px #101010; }
.rack-range { display: flex; justify-content: center; flex-direction: column; gap: 12px; padding: 12px; border-right: var(--brutal-line); font-size: 9px; font-weight: 800; }
.rack-range span { display: flex; justify-content: space-between; }
.rack-range output { font: 700 9px/1 var(--mono); }
.rack-range input { width: 100%; accent-color: #101010; }
.random-auto-button { min-width: 130px; padding: 12px; color: #fff; border: 0; background: #101010; font-size: 10px; font-weight: 900; }
.random-auto-button span { display: block; margin-bottom: 7px; color: var(--brutal-yellow); font-size: 18px; }
.random-auto-button.active { color: #101010; background: var(--cyan); box-shadow: inset 0 0 0 4px #101010; }
.sim-stage { border-right: var(--brutal-line); }
.control-panel { color: #101010; border-left: 0; background: var(--brutal-pink); }
.control-head { border-bottom: 2px solid #101010; }
.control-head div span, .field-label, .control-fieldset legend, .range-control label, .toggle-row label, .control-note { color: #101010; }
.status-pill { color: #101010; border: 2px solid #101010; background: var(--cyan); font-weight: 800; }
.select-wrap::after { color: #101010; }
.select-wrap select { color: #101010; border: 2px solid #101010; background: #fff; box-shadow: 3px 3px 0 #101010; }
.color-swatch { border: 2px solid #101010; border-radius: 0 !important; box-shadow: 2px 2px 0 #101010; }
.color-swatch.active::after { inset: -6px; border: 2px solid #101010; border-radius: 0; }
.range-control output { color: #101010; font-weight: 800; }
.range-control input { accent-color: #101010; }
.segmented { gap: 4px; }
.segmented button, .segmented button:last-child { color: #101010; border: 2px solid #101010; background: #fff; font-weight: 800; }
.segmented button.active { color: #fff; border-color: #101010; background: #101010; }
.toggle-row label span { border: 2px solid #101010; background: #fff; }
.toggle-row label span::after { top: 1px; left: 1px; background: #101010; }
.toggle-row input:checked + span { background: var(--cyan); }
.toggle-row input:checked + span::after { background: #101010; transform: translateX(11px); }
.launch-button, .random-button { color: #101010; border: 2px solid #101010; background: var(--brutal-yellow); box-shadow: 4px 4px 0 #101010; }
.random-button { background: var(--cyan); }
.launch-button kbd { color: #101010; border-color: #101010; }

.drone-section { color: #101010; background: var(--brutal-lime); }
.drone-section::before { background-image: linear-gradient(rgba(16,16,16,.08) 2px, transparent 2px), linear-gradient(90deg, rgba(16,16,16,.08) 2px, transparent 2px); background-size: 42px 42px; }
.drone-studio-frame { border: var(--brutal-line); background: #101010; box-shadow: var(--brutal-shadow); }
.drone-stage { border-right: var(--brutal-line); }
.drone-pattern-readout small { display: block; margin-top: 7px; color: var(--cyan); font: 700 7px/1 var(--mono); letter-spacing: .08em; }
.drone-morph-meter { position: absolute; z-index: 5; top: 91px; right: 24px; display: grid; width: min(285px, 42%); grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; color: #fff; font: 700 7px/1 var(--mono); letter-spacing: .08em; }
.drone-morph-meter i { height: 8px; padding: 2px; border: 1px solid rgba(255,255,255,.5); }
.drone-morph-meter b { display: block; width: 100%; height: 100%; background: var(--cyan); transition: width .08s linear; }
.drone-morph-meter em { min-width: 27px; color: var(--cyan); font-style: normal; text-align: right; }
.drone-controls { color: #101010; border-left: 0; background: var(--brutal-pink); }
.drone-controls .control-head, .drone-controls .range-control label, .drone-controls .control-note, .hybrid-switch, .hybrid-switch small { color: #101010; }
.drone-status { color: #101010; border-color: #101010; background: var(--cyan); }
.drone-pattern-buttons { gap: 4px; border: 0; }
.drone-pattern-buttons button { color: #101010; border: 2px solid #101010; background: #fff; font-weight: 800; }
.drone-pattern-buttons button i { color: #101010; }
.drone-pattern-buttons button:hover, .drone-pattern-buttons button.active { color: #fff; background: #101010; box-shadow: 3px 3px 0 var(--cyan); }
.drone-pattern-buttons button.active i { color: var(--cyan); }
.drone-palettes { gap: 5px; }
.drone-palettes button { color: #101010; border: 2px solid #101010; background: #fff; font-weight: 800; }
.drone-palettes button.active { color: #101010; border-color: #101010; background: var(--brutal-yellow); box-shadow: 3px 3px 0 #101010; }
.hybrid-switch > span { border: 2px solid #101010; background: #fff; }
.hybrid-switch > span::after { top: 1px; left: 1px; background: #101010; }
.hybrid-switch input:checked + span { background: var(--cyan); }
.hybrid-switch input:checked + span::after { background: #101010; transform: translateX(14px); }
.drone-show-button { color: #101010; border: 2px solid #101010; background: var(--cyan); box-shadow: 4px 4px 0 #101010; }
.drone-show-cues { gap: 6px; border: 0; }
.drone-show-cues button { color: #101010; border: 2px solid #101010; background: #fff; box-shadow: 4px 4px 0 #101010; }
.drone-show-cues button.active { color: #101010; background: var(--brutal-pink); box-shadow: 4px 4px 0 #101010; transform: translate(-2px,-2px); }
.drone-show-cues span, .drone-show-cues small { color: #101010; }

.drone-knowledge { background: var(--brutal-yellow); }
.space-pixel-panel, .drone-comparison, .drone-safety-balance { border: var(--brutal-line); box-shadow: var(--brutal-shadow); }
.drone-process { gap: 8px; }
.drone-process article, .formation-atlas article, .drone-cases article { border: 2px solid #101010; background: #fff; box-shadow: 5px 5px 0 #101010; }
.formation-atlas { gap: 9px; border: 0; }
.formation-atlas article:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 #101010; }

.atlas-section { background: var(--brutal-pink); }
.filter-chips button { color: #101010; border: 2px solid #101010; border-radius: 0; background: #fff; box-shadow: 3px 3px 0 #101010; }
.filter-chips button.active { color: #fff; border-color: #101010; background: #101010; }
.search-box { height: 43px; border: 2px solid #101010; background: #fff; box-shadow: 4px 4px 0 #101010; }
.effect-grid { gap: 9px; border: 0; }
.effect-card { border: 2px solid #101010; background: #fff; box-shadow: 5px 5px 0 #101010; }
.effect-card:hover { box-shadow: 9px 9px 0 #101010; transform: translate(-4px,-4px); }
.effect-tag { color: #101010; border: 2px solid #101010; border-radius: 0; background: var(--brutal-yellow); }
.effect-action { color: #101010; border-top: 2px solid #101010; }

.science-section { color: #101010; background: var(--cyan); }
.science-copy .kicker { color: #fff; }
.science-copy > p, .science-warning p, .science-warning strong { color: #101010; }
.science-warning { border: var(--brutal-line); background: #fff; box-shadow: 6px 6px 0 #101010; }
.science-warning > span { color: #101010; border: 2px solid #101010; border-radius: 0; background: var(--brutal-yellow); }
.diagram-title { border-bottom: var(--brutal-line); }
.diagram-title span, .diagram-title b { color: #101010; }
.quality-grid { gap: 7px; border: 0; }
.quality-grid article { border: 2px solid #101010; background: #fff; box-shadow: 4px 4px 0 #101010; }
.quality-grid span, .quality-grid p { color: #101010; }

.show-lab { color: #101010; background: var(--violet); }
.preset-grid { gap: 8px; border: 0; }
.preset-card { color: #101010; border: 2px solid #101010; background: #fff; box-shadow: 5px 5px 0 #101010; }
.preset-card:hover, .preset-card.active { color: #101010; background: var(--brutal-yellow); box-shadow: 8px 8px 0 #101010; transform: translate(-3px,-3px); }
.preset-card p, .preset-flag span:last-child { color: #101010; }
.preset-card .preset-key { color: #101010; font-weight: 900; }
.program-console { color: #fff; border: var(--brutal-line); background: #101022; box-shadow: var(--brutal-shadow); }
.program-head, .cue-list, .adaptation-note { border-color: #fff; }

.festivals-section { background: #ff9b6c; }
.world-board { border: var(--brutal-line); background: #fff; box-shadow: var(--brutal-shadow); }
.map-panel { border-right: var(--brutal-line); }
.festival-note { border-bottom: 2px solid #101010; }
.composition-section { background: var(--brutal-lime); }
.grammar-grid { gap: 8px; }
.grammar-grid article { border: 2px solid #101010; background: #fff; box-shadow: 5px 5px 0 #101010; }

.site-footer { color: #fff; border-top: var(--brutal-line); background: #101010; }
.site-footer .brand-mark { background: var(--cyan); }
.footer-bottom { border-top: 2px solid #fff; }

@media (max-width: 1320px) {
  .fire-program-rack { grid-template-columns: auto auto minmax(360px, 1fr) 135px 135px; }
  .random-auto-button { grid-column: 1 / -1; min-height: 48px; border-top: var(--brutal-line); }
  .random-auto-button span { display: inline; margin: 0 8px 0 0; font-size: 13px; }
}

@media (max-width: 1120px) {
  .site-header { background: var(--brutal-lime); }
  .main-nav { border: 2px solid #101010; border-radius: 0; background: var(--brutal-yellow); box-shadow: 5px 5px 0 #101010; backdrop-filter: none; }
  .main-nav a { color: #101010; border-radius: 0; }
  .simulator-frame, .drone-studio-frame { box-shadow: 7px 7px 0 #101010; }
  .fire-program-rack { grid-template-columns: 180px 140px 1fr; }
  .sim-program-list { border-right: 0; }
  .rack-range { min-height: 74px; border-top: var(--brutal-line); }
  .rack-range:first-of-type { grid-column: 1 / 2; }
  .random-auto-button { grid-column: 3; border-top: var(--brutal-line); }
  .sim-stage, .drone-stage { border-right: 0; border-bottom: var(--brutal-line); }
  .control-panel, .drone-controls { border-top: 0; }
}

@media (max-width: 760px) {
  .site-header { height: 68px; padding-right: 16px; padding-left: 16px; }
  .header-cta { display: none; }
  .hero { padding-top: 105px; }
  .hero-art { right: -38%; border-width: 2px; }
  .hero-stats { width: 100%; padding: 12px; }
  .fire-program-rack { display: block; }
  .program-rack-title { min-width: 0; border-right: 0; border-bottom: var(--brutal-line); }
  .program-rack-title strong { max-width: none; }
  .fire-mode-switch { min-width: 0; grid-template-rows: none; grid-template-columns: repeat(3, 1fr); border-right: 0; border-bottom: var(--brutal-line); }
  .fire-mode-switch button { min-height: 42px; border-right: 2px solid #101010; border-bottom: 0; text-align: center; }
  .sim-program-list { grid-template-columns: repeat(6, minmax(82px, 1fr)); overflow-x: auto; border-bottom: var(--brutal-line); }
  .sim-program-chip { min-height: 70px; }
  .rack-range { min-height: 64px; border-right: 0; border-bottom: 2px solid #101010; }
  .random-auto-button { width: 100%; min-height: 54px; border-top: 0; }
  .drone-morph-meter { top: 83px; right: 16px; width: calc(100% - 32px); }
  .drone-show-cues { padding-right: 5px; padding-bottom: 7px; }
  .effect-grid { gap: 7px; }
  .world-board, .space-pixel-panel { box-shadow: 6px 6px 0 #101010; }
}