/* RESONANCE — A quiet, tactile broadcast workstation. No external assets or fonts. */ :root {
  color-scheme:dark;
  --bg:#141714;
  --rail:#171b17;
  --panel:#1b201b;
  --panel2:#202620;
  --deep:#101510;
  --line:#30372f;
  --line-soft:#282f28;
  --text:#e4e7dc;
  --muted:#9aa391;
  --dim:#74806f;
  --accent:#eea36c;
  --accent-hover:#ffb880;
  --accent-dark:#30271d;
  --green:#a6bc91;
  --danger:#e2897b;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:Arial,"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --text-scale:1
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:85px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:13px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer;
  color:inherit
}
button {
  background:none;
  border:0
}
button:disabled {
  cursor:not-allowed;
  opacity:.4
}
button:not(:disabled),a,input {
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s
}
a {
  color:var(--accent);
  text-decoration:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
button:disabled:focus-visible {
  outline-color:var(--muted)
}
[hidden] {
  display:none!important
}
h1,h2,h3,p {
  margin:0
}
img {
  display:block;
  max-width:100%
}
svg {
  display:block
}
::selection {
  background:#d0955c;
  color:#161c14
}
.icon {
  width:19px;
  height:19px;
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  top:8px;
  left:10px;
  transform:translateY(-160%);
  z-index:1000;
  background:var(--accent);
  color:#161b14;
  padding:10px 20px
}
.skip-link:focus {
  transform:none
}
kbd {
  font:10px var(--mono);
  padding:4px 6px;
  border:1px solid var(--line);
  border-radius:3px;
  color:var(--muted);
  white-space:nowrap
}
.topbar {
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:0 27px;
  gap:20px;
  background:var(--rail);
  position:relative;
  z-index:30
}
.brand-group {
  display:flex;
  align-items:center
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
  text-align:left
}
.brand-symbol {
  width:36px;
  height:39px;
  background:#252b21;
  border:1px solid #41432e;
  border-radius:4px;
  display:grid;
  place-items:center;
  color:var(--accent)
}
.brand-symbol .icon {
  width:27px;
  height:27px;
  stroke-width:1.8
}
.brand-type {
  font:bold 26px/.91 Impact,"Arial Narrow",var(--sans);
  letter-spacing:1.6px;
  white-space:nowrap
}
.brand-type small {
  display:block;
  font:8px var(--mono);
  letter-spacing:4.5px;
  margin-top:7px;
  color:var(--muted)
}
.brand-frequency {
  font:8px/1.4 var(--mono);
  color:var(--dim);
  border-left:1px solid var(--line);
  padding-left:10px;
  margin-left:1px
}
.brand-frequency b {
  font-size:14px;
  color:var(--muted);
  letter-spacing:1px
}
.header-session {
  font:9px var(--mono);
  display:flex;
  align-items:center;
  gap:12px;
  letter-spacing:1.1px;
  color:var(--muted)
}
.header-session>span:last-child {
  font:11px var(--sans);
  letter-spacing:0;
  color:var(--dim)
}
.header-divider {
  color:#454c3c
}
.live-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 7px #abc79525;
  flex-shrink:0
}
.live-dot.amber {
  background:var(--accent)
}
.header-actions {
  display:flex;
  align-items:center;
  gap:7px
}
.icon-button {
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  color:var(--muted);
  padding:0;
  flex-shrink:0
}
.icon-button:hover:not(:disabled) {
  background:var(--panel2);
  color:var(--text)
}
.icon-button.small {
  width:23px;
  height:23px
}
.icon-button.small .icon {
  width:15px;
  height:15px
}
.action-divider {
  width:1px;
  height:20px;
  background:var(--line);
  margin:0 8px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:40px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:9px 15px;
  font-size:12px;
  font-weight:600;
  background:#242a22;
  white-space:nowrap
}
.button:hover:not(:disabled) {
  border-color:#647054;
  background:#2b3328
}
.button.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#241d15
}
.button.primary:hover:not(:disabled) {
  background:var(--accent-hover);
  border-color:var(--accent-hover)
}
.button.danger {
  border-color:#714839;
  color:#efac9c;
  background:#33241f
}
.button[aria-pressed=true] {
  background:var(--accent-dark);
  border-color:var(--accent);
  color:var(--accent)
}
.button.small {
  min-height:32px;
  padding:5px 10px;
  font-size:11px
}
.save-button {
  background:#262c22;
  border-color:#46503b;
  color:#d2d9c5;
  font-size:11px;
  min-height:35px;
  padding:6px 12px
}
.save-button .icon {
  width:16px;
  height:16px
}
.mobile-menu {
  display:none
}
.app-shell {
  max-width:1840px;
  margin:0 auto;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  min-height:calc(100vh - 78px)
}
.navigation {
  border-right:1px solid var(--line);
  background:var(--rail);
  padding:28px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:0
}
.rail-label {
  font:8px var(--mono);
  color:var(--dim);
  letter-spacing:1.4px;
  margin:0 8px 19px;
  display:flex;
  justify-content:space-between
}
.rail-label span {
  color:var(--muted)
}
.primary-nav {
  display:grid;
  gap:5px;
  margin-bottom:30px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:5px;
  min-height:43px;
  padding:10px 12px;
  font-size:12px;
  text-align:left;
  color:var(--muted);
  border:1px solid transparent
}
.nav-item .icon {
  width:17px;
  height:17px
}
.nav-item.active {
  background:#332a1f;
  border-color:#493928;
  color:var(--accent)
}
.nav-item:hover {
  background:#252c23;
  color:var(--text)
}
.nav-item.active:hover {
  background:#3b2f23;
  color:var(--accent)
}
.nav-count {
  font:9px var(--mono);
  color:var(--dim);
  margin-left:auto
}
.nav-mark {
  margin-left:auto;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent)
}
.rail-section-heading {
  display:flex;
  justify-content:space-between;
  margin:0 9px 14px;
  font-size:10px;
  color:var(--dim)
}
.rail-section-heading>span:last-child {
  font:9px var(--mono);
  color:var(--muted)
}
.chapter-nav {
  display:grid;
  gap:3px
}
.chapter-item {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:42px;
  padding:9px 10px;
  text-align:left;
  color:var(--dim);
  border-left:2px solid transparent;
  font-size:11px;
  border-radius:0 4px 4px 0
}
.chapter-item.current {
  color:var(--text);
  border-left-color:var(--accent);
  background:#252b22
}
.chapter-item.current .chapter-number {
  color:var(--accent)
}
.chapter-item:hover {
  background:#232920;
  color:var(--text)
}
.chapter-number {
  font:10px var(--mono);
  color:#6c7665
}
.chapter-item .chapter-name {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.chapter-item .chapter-state {
  margin-left:auto;
  width:12px;
  height:12px;
  color:#55614f
}
.chapter-state .icon {
  width:12px;
  height:12px
}
.chapter-item.current .chapter-state {
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent)
}
.chapter-item.complete .chapter-state {
  color:var(--green)
}
.rail-bottom {
  margin-top:auto;
  padding-top:24px
}
.bside-teaser {
  display:block;
  width:100%;
  border:1px solid #38402f;
  background:linear-gradient(130deg,#252a20,#1f251c);
  border-radius:6px;
  padding:14px;
  text-align:left;
  margin-bottom:17px
}
.bside-teaser:hover {
  border-color:#69684b
}
.tiny-label {
  display:block;
  font:8px var(--mono);
  letter-spacing:1.4px;
  color:var(--dim)
}
.bside-teaser strong {
  display:block;
  font-size:11px;
  font-weight:500;
  margin:9px 0 9px
}
.bside-teaser>span:last-child {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--accent);
  font-size:10px
}
.bside-teaser>span:last-child .icon {
  width:14px;
  height:14px
}
.cassette-art {
  display:flex;
  align-items:center;
  justify-content:space-around;
  width:100px;
  height:41px;
  border:2px solid #66654e;
  border-radius:4px;
  background:linear-gradient(#454c36 60%,#282f23 61%);
  position:relative;
  margin:14px auto 12px;
  transform:rotate(-7deg);
  box-shadow:5px 6px 0 #111810
}
.cassette-art i {
  width:15px;
  height:15px;
  border:4px solid #a4a581;
  outline:2px solid #303a26;
  background:#1d2519;
  border-radius:50%;
  z-index:1
}
.cassette-art:before {
  content:"";
  position:absolute;
  top:8px;
  left:16px;
  width:64px;
  height:15px;
  border:1px solid #939779;
  background:#797e5f
}
.cassette-art:after {
  content:"";
  position:absolute;
  bottom:0;
  left:28px;
  width:40px;
  height:9px;
  background:#696e53;
  clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)
}
.cassette-art b {
  position:absolute;
  right:4px;
  top:0;
  font:7px var(--mono);
  color:#b2b493
}
.rail-link {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 7px;
  width:100%;
  font-size:10px;
  color:var(--dim);
  text-align:left
}
.rail-link:hover {
  color:var(--text)
}
.rail-link .icon {
  width:14px;
  height:14px
}
.rail-link .icon:last-child:not(:first-child) {
  margin-left:auto;
  width:11px;
  height:11px
}
.edition-mark {
  margin:18px 7px 0;
  display:flex;
  justify-content:space-between;
  font:7px var(--mono);
  letter-spacing:.5px;
  color:#748067
}
.edition-mark>span {
  font-size:6px
}
main {
  min-width:0;
  outline:none
}
.view {
  padding:29px 30px 22px
}
.game-columns {
  display:grid;
  grid-template-columns:minmax(0,1fr) 258px;
  gap:26px
}
.main-stage {
  min-width:0
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  min-height:79px
}
.eyebrow {
  font:9px var(--mono);
  letter-spacing:1.8px;
  color:var(--muted);
  display:block
}
.eyebrow span {
  padding:0 7px;
  color:#5c6853
}
.page-heading h1 {
  font-size:26px;
  letter-spacing:-1.1px;
  font-weight:650;
  line-height:1.35;
  margin:9px 0 8px
}
.page-heading h1 span {
  color:#737960;
  font-weight:300;
  margin:0 5px
}
.page-heading p {
  font-size:11px;
  color:var(--dim)
}
.session-clock {
  text-align:right;
  flex-shrink:0;
  align-self:center;
  margin-top:12px
}
.session-clock>span {
  font:7px var(--mono);
  letter-spacing:1.4px;
  color:var(--dim);
  display:block
}
.session-clock b {
  font:19px var(--mono);
  font-weight:400;
  letter-spacing:1px;
  color:#d2d7c5;
  display:block;
  margin-top:7px
}
.scene-shell {
  border:1px solid #3c4636;
  border-radius:6px;
  overflow:hidden;
  background:#151e17
}
.scene-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 12px;
  height:43px;
  background:#1c241c;
  border-bottom:1px solid #323e2d;
  font:8px var(--mono);
  letter-spacing:1px;
  gap:10px
}
.scene-header>div:first-child {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--accent)
}
.scene-header>div:first-child i {
  height:11px;
  width:1px;
  background:#3d4834;
  margin:0 3px
}
.scene-header #sceneLocation {
  font:10px var(--sans);
  letter-spacing:0;
  color:#b0b9a2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.scene-actions {
  display:flex;
  align-items:center;
  gap:4px
}
.scene-tab {
  font:10px var(--sans);
  padding:5px 9px;
  min-height:27px;
  border-radius:3px;
  color:var(--dim);
  white-space:nowrap
}
.scene-tab.active {
  background:#353e2e;
  color:#ced6ba
}
.scene-tab:hover {
  background:#3a4331
}
.scene-actions>.icon-button {
  width:25px;
  height:25px;
  margin-left:3px
}
.scene-actions .icon {
  width:13px;
  height:13px
}
.scene-viewport {
  position:relative;
  overflow:hidden;
  isolation:isolate
}
.scene-viewport canvas {
  width:100%;
  height:auto;
  aspect-ratio:900/420;
  display:block;
  image-rendering:pixelated;
  touch-action:none;
  outline-offset:-4px
}
.camera-label {
  position:absolute;
  top:16px;
  left:18px;
  display:flex;
  align-items:center;
  gap:8px;
  font:7px var(--mono);
  letter-spacing:1px;
  color:#9daa8d;
  pointer-events:none
}
.camera-corner {
  width:11px;
  height:11px;
  border-top:1px solid #8a9c75;
  border-left:1px solid #8a9c75
}
.world-prompt {
  position:absolute;
  right:15px;
  bottom:22px;
  z-index:3
}
.inspect-button {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:6px 10px;
  background:#252b20e8;
  border:1px solid #69704a;
  border-radius:4px;
  font-size:10px;
  color:#e4d6b1;
  box-shadow:0 3px 9px #0d160c55
}
.inspect-button .icon {
  width:13px;
  height:13px
}
.inspect-button kbd {
  font-size:9px;
  padding:1px 4px;
  border-color:#667044;
  color:#d3cda5;
  margin-left:5px
}
.inspect-button:hover {
  background:#40472d
}
.scene-scanlines {
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.13;
  background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,#050d08 2px,#050d08 3px)
}
.scene-footer {
  height:34px;
  background:#1b241a;
  border-top:1px solid #303d29;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 13px;
  font-size:9px;
  color:#99a98b;
  gap:10px
}
.scene-footer>span {
  display:flex;
  align-items:center;
  gap:7px
}
.tiny-square {
  width:4px;
  height:4px;
  background:#91a574
}
.subtle-divider {
  color:#526148;
  margin:0 3px
}
.move-instruction {
  color:#71856a
}
.coordinate {
  font:8px var(--mono);
  letter-spacing:.6px;
  color:#8f9f7b
}
.dialogue-card {
  margin-top:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px 19px 13px;
  position:relative
}
.dialogue-card:before {
  content:"";
  position:absolute;
  left:-1px;
  top:53px;
  height:55px;
  width:2px;
  background:var(--accent)
}
.dialogue-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:17px
}
.channel-label {
  display:flex;
  align-items:center;
  gap:6px;
  font:8px var(--mono);
  letter-spacing:1px;
  color:var(--dim)
}
.channel-label .icon {
  width:12px;
  height:12px
}
.channel-label i {
  width:3px;
  height:3px;
  background:#68775d;
  border-radius:50%;
  margin:0 3px
}
.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  padding:5px 2px;
  border-radius:3px
}
.text-button:hover {
  color:var(--text)
}
.text-button .icon {
  width:13px;
  height:13px
}
#btnLog {
  font-size:9px;
  padding:0;
  min-height:22px
}
#lineCounter {
  margin-left:4px;
  font:8px var(--mono);
  color:var(--dim)
}
.dialogue-body {
  display:flex;
  gap:16px;
  align-items:flex-start;
  min-height:95px
}
.speaker-portrait {
  width:43px;
  min-width:43px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid #414d37;
  border-radius:3px;
  background:#202b20;
  overflow:hidden
}
.speaker-portrait img {
  image-rendering:pixelated;
  object-fit:contain
}
.spoken {
  flex:1;
  min-width:0
}
.speaker-meta {
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 8px
}
.speaker-meta strong {
  font-size:12px;
  font-weight:650;
  color:var(--accent)
}
.speaker-meta>span {
  font:7px var(--mono);
  letter-spacing:.9px;
  color:var(--dim)
}
#dialogueText {
  font-size:calc(16px * var(--text-scale));
  letter-spacing:-.3px;
  line-height:1.9;
  color:#d8ddcf;
  overflow-wrap:anywhere;
  word-break:keep-all;
  min-height:49px
}
.dialogue-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  color:#74816a;
  font-size:8px
}
.dialogue-dots {
  display:flex;
  align-items:center;
  gap:3px;
  height:10px
}
.dialogue-dots i {
  display:block;
  width:2px;
  background:#a0aa84;
  height:4px
}
.dialogue-dots i:nth-child(2n) {
  height:8px
}
.dialogue-dots i:nth-child(3) {
  height:12px
}
.dialogue-dots i:nth-child(5) {
  height:10px
}
.story-controls {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-top:20px
}
.secondary-story-controls {
  display:flex;
  align-items:center;
  gap:17px
}
.secondary-story-controls .text-button {
  font-size:10px;
  white-space:nowrap
}
.secondary-story-controls [aria-pressed=true] {
  color:var(--accent)
}
.continue-button {
  min-width:217px;
  height:47px;
  padding:11px 16px;
  border-radius:5px;
  font-size:12px
}
.continue-button .icon {
  width:16px;
  height:16px;
  margin-left:5px
}
.continue-button kbd {
  color:#785431;
  border-color:#c48c59;
  font-size:7px;
  padding:3px 4px;
  background:#e59a60;
  margin-left:7px
}
.stage-footnote {
  border-top:1px solid var(--line-soft);
  margin-top:22px;
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:var(--dim);
  font-size:8px
}
.stage-footnote>span:first-child {
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap
}
.stage-footnote>span:last-child {
  text-align:right
}
.telemetry {
  padding-top:0;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0
}
.telemetry>section {
  padding:19px 0;
  border-bottom:1px solid var(--line);
  min-width:0
}
.telemetry>section:first-child {
  padding:18px 17px 12px;
  border:1px solid #3d4734;
  border-radius:6px;
  background:linear-gradient(135deg,#242d20,#1e251c);
  margin-bottom:3px
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
  min-height:19px
}
.panel-heading h2 {
  font-size:11px;
  font-weight:600;
  letter-spacing:-.1px
}
.small-mono {
  font:7px var(--mono);
  letter-spacing:.5px;
  color:var(--dim)
}
.on-air {
  font:7px var(--mono);
  letter-spacing:1.3px;
  border:1px solid #614e32;
  background:#342d20;
  padding:3px 5px;
  border-radius:3px;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:5px
}
.on-air>span {
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent)
}
.frequency-display {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin:19px 0 9px;
  color:#d7debd
}
.frequency-display strong {
  font:46px/.95 var(--mono);
  letter-spacing:-3px;
  font-weight:400;
  text-shadow:0 0 24px #9cac6330
}
.frequency-display>span {
  font:9px var(--mono);
  color:#98a87d;
  align-self:flex-start;
  margin-top:9px
}
.frequency-display>small {
  font:9px var(--mono);
  color:#85996b
}
.radio-wave {
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  overflow:hidden;
  margin:17px 0 6px;
  border-top:1px solid #35402e;
  border-bottom:1px solid #35402e;
  background:linear-gradient(transparent 48%,#4e5c391f 49%,#4e5c3922 52%,transparent 53%)
}
.radio-wave i {
  flex:1;
  max-width:3px;
  min-width:2px;
  height:var(--h,20%);
  background:#98b07a;
  opacity:.7
}
.radio-wave i:nth-child(n+24) {
  background:#c49b61
}
.radio-level-labels {
  display:flex;
  justify-content:space-between;
  font:6px var(--mono);
  letter-spacing:1px;
  color:#82966a
}
.signal-status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:18px 0 7px;
  font-size:9px;
  color:#b6c59f;
  gap:7px
}
.signal-status>span:first-child {
  display:flex;
  align-items:center;
  gap:6px
}
.signal-status i {
  width:4px;
  height:4px;
  background:#a5bc80;
  border-radius:50%
}
.signal-status b {
  font-weight:500
}
.signal-status>span:last-child {
  font:6px var(--mono);
  letter-spacing:.6px;
  color:#90a374
}
.volume-row {
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px solid #37422e;
  padding-top:10px;
  margin-top:12px
}
.volume-row .icon-button {
  width:20px;
  height:22px;
  color:#98a787
}
.volume-row .icon {
  width:13px;
  height:13px
}
.volume-row input {
  width:100%;
  min-width:0;
  height:3px
}
.volume-row output {
  font:8px var(--mono);
  color:#9eaf8b;
  min-width:26px;
  text-align:right
}
input[type=range] {
  appearance:none;
  -webkit-appearance:none;
  background:#3e4933;
  border-radius:3px;
  height:4px;
  accent-color:var(--accent);
  cursor:pointer
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  width:11px;
  height:11px;
  background:#b7c1a0;
  border:2px solid #283321;
  border-radius:50%;
  box-shadow:0 0 0 1px #768364
}
input[type=range]::-moz-range-thumb {
  width:9px;
  height:9px;
  background:#b7c1a0;
  border:1px solid #768364;
  border-radius:50%
}
.objective-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px
}
.objective-list li {
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:var(--dim);
  font-size:10px;
  line-height:1.5
}
.objective-list li>span:first-child {
  margin-top:1px;
  width:13px;
  height:13px;
  border:1px solid #45513b;
  border-radius:50%;
  flex-shrink:0;
  display:grid;
  place-items:center
}
.objective-list li.current {
  color:#d3d9c5
}
.objective-list li.current>span:first-child {
  border-color:#9a734c;
  background:#322b1e
}
.objective-list li.current>span:first-child:after {
  content:"";
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--accent)
}
.objective-list li.done>span:first-child {
  background:#343e2c;
  border-color:#647951
}
.objective-list .icon {
  width:9px;
  height:9px;
  color:var(--green)
}
.traits {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px
}
.trait-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  color:var(--muted);
  margin-bottom:7px
}
.trait-title b {
  font:9px var(--mono);
  color:#c7d0b7
}
.trait-track {
  height:3px;
  border-radius:2px;
  background:#30392a;
  overflow:hidden
}
.trait-track>span {
  display:block;
  background:#91a477;
  height:100%;
  width:0;
  transition:width .35s
}
.traits>.trait:nth-child(2) .trait-track>span {
  background:#c69469
}
.traits>.trait:nth-child(3) .trait-track>span {
  background:#aaa881
}
.traits>.trait:nth-child(4) .trait-track>span {
  background:#879995
}
.evidence-meter {
  margin-top:21px
}
.evidence-meter>div:first-child {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:var(--muted)
}
.evidence-meter .icon {
  width:12px;
  height:12px
}
.evidence-meter strong {
  margin-left:auto;
  font:12px var(--mono);
  font-weight:400;
  color:var(--accent)
}
.evidence-meter small {
  font-size:9px;
  color:var(--dim)
}
.evidence-segments {
  display:flex;
  gap:5px;
  margin-top:9px
}
.evidence-segments i {
  height:5px;
  background:#333c2c;
  border-radius:1px;
  flex:1
}
.evidence-segments i.filled {
  background:#b89161
}
.hazard-list {
  display:grid;
  gap:10px
}
.hazard-row {
  display:flex;
  align-items:center;
  gap:8px
}
.hazard-row>span:first-child {
  width:3px;
  height:3px;
  background:#889979;
  border-radius:50%
}
.hazard-row>span:nth-child(2) {
  font:8px var(--mono);
  letter-spacing:.7px;
  color:var(--muted)
}
.hazard-pips {
  margin-left:auto;
  display:flex;
  gap:4px
}
.hazard-pips i {
  width:13px;
  height:5px;
  border:1px solid #414d35;
  border-radius:1px;
  background:#22291e
}
.hazard-pips i.filled {
  background:#cd8c6b;
  border-color:#cd8c6b
}
.hazard-row.danger>span:first-child {
  background:var(--danger)
}
.tools-list {
  display:grid;
  gap:10px
}
.tool-row {
  display:flex;
  gap:9px;
  align-items:center;
  padding:0;
  font-size:9px;
  color:var(--muted);
  text-align:left;
  width:100%;
  min-height:25px
}
.tool-row>.tool-icon {
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid #3d4833;
  border-radius:3px;
  background:#252d20;
  color:#a0b28d
}
.tool-icon .icon {
  width:13px;
  height:13px
}
.tool-row>span:nth-child(2) {
  display:flex;
  flex-direction:column;
  gap:1px
}
.tool-row small {
  font:6px var(--mono);
  color:var(--dim)
}
.tool-row>.icon {
  margin-left:auto;
  width:12px;
  height:12px
}
.tool-row.done {
  color:var(--green)
}
.ending-hint-button {
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  font-size:9px;
  color:var(--dim);
  margin-top:16px;
  padding:10px 0 0;
  border-top:1px dashed #35402d
}
.ending-hint-button .icon {
  width:12px;
  height:12px
}
.ending-hint-button .icon:last-child {
  margin-left:auto
}
.ending-hint-button:hover {
  color:var(--accent)
}
.touch-controls {
  display:none
}
.decision-area,.mini-area,.ending-area {
  margin-top:18px;
  border:1px solid #594a32;
  border-radius:6px;
  padding:22px;
  background:#22261d
}
.decision-area h2 {
  font-size:17px;
  margin:7px 0 5px
}
.decision-area .decision-note {
  font-size:11px;
  color:var(--muted);
  margin-bottom:18px;
  line-height:1.8
}
.choice-grid {
  display:grid;
  gap:9px
}
.choice-button {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  background:#1b2118;
  border:1px solid #454d38;
  min-height:53px;
  border-radius:4px;
  padding:12px;
  text-align:left;
  font-size:13px
}
.choice-button:hover {
  border-color:var(--accent);
  background:#322c1f
}
.choice-button>span:first-child {
  font:10px var(--mono);
  color:var(--accent);
  padding:4px 6px;
  border:1px solid #5c4b32;
  border-radius:3px
}
.choice-button .icon {
  margin-left:auto;
  width:15px;
  height:15px;
  color:var(--dim)
}
.choice-button small {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:2px
}
.mini-section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:17px
}
.mini-section-title h2 {
  font-size:17px;
  margin-top:5px
}
.status-chip {
  font:8px var(--mono);
  letter-spacing:.6px;
  display:inline-block;
  border:1px solid #596348;
  border-radius:3px;
  color:#b9c5a3;
  background:#2e3928;
  padding:4px 7px;
  white-space:nowrap
}
.status-chip.good {
  color:#b6d89d;
  border-color:#63824e;
  background:#293b20
}
.status-chip.danger {
  color:#f0ac99;
  border-color:#8f5e47;
  background:#3a2820
}
.mini-ready {
  padding:12px 0 0
}
.mini-ready>p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  margin:10px 0 20px
}
.mini-ready .mini-spec {
  display:flex;
  align-items:center;
  gap:10px;
  color:#b9c4a8;
  font-size:11px
}
.mini-result {
  padding:10px 0;
  display:flex;
  align-items:center;
  gap:15px
}
.mini-result .result-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid #667950;
  border-radius:50%;
  color:var(--green);
  flex-shrink:0
}
.mini-result.failed .result-icon {
  color:var(--danger);
  border-color:#8a5948
}
.mini-result strong {
  display:block;
  font-size:16px;
  color:var(--green);
  margin-bottom:5px
}
.mini-result.failed strong {
  color:var(--danger)
}
.mini-result p {
  font-size:11px;
  line-height:1.8;
  color:var(--muted)
}
.mini-area .signal-wave {
  max-height:90px
}
.mg-instruction {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin-bottom:17px;
  word-break:keep-all
}
.mini-board {
  background:#171e15;
  border:1px solid #414e33;
  border-radius:5px;
  padding:20px;
  overflow:hidden
}
.mg-readout {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px
}
.mg-readout>span {
  font:9px var(--mono);
  letter-spacing:1px;
  color:var(--dim)
}
.mg-readout strong {
  font:34px var(--mono);
  letter-spacing:-1px;
  color:#cdd6b5
}
.mg-readout strong>span {
  font:10px var(--mono);
  letter-spacing:0;
  color:var(--muted)
}
.mg-readout #signalQuality {
  font:10px var(--sans);
  color:var(--green)
}
.vu-track {
  position:relative;
  height:35px;
  background:linear-gradient(90deg,#394230 25%,#35472a 25%,#35472a 70%,#4b3b28 70%);
  border:1px solid #61744a;
  border-radius:3px;
  margin:15px 0 6px
}
.vu-safe {
  position:absolute;
  left:25%;
  width:45%;
  height:100%;
  border-left:1px dashed #a0b97a;
  border-right:1px dashed #a0b97a;
  background:#8aac4320
}
.vu-needle {
  position:absolute;
  top:-3px;
  height:39px;
  left:45%;
  width:2px;
  background:#efd59c;
  box-shadow:0 0 7px #debd6980
}
.scale-labels {
  display:flex;
  justify-content:space-between;
  font:7px var(--mono);
  color:var(--dim)
}
.range-control {
  display:block;
  margin:17px 0;
  color:#bcc7a9;
  font-size:11px
}
.range-control>span {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}
.range-control output {
  font:12px var(--mono);
  color:var(--accent)
}
.range-control input {
  width:100%;
  height:5px;
  display:block;
  padding:0;
  margin:12px 0
}
.range-control input::-webkit-slider-thumb {
  width:18px;
  height:18px;
  background:var(--accent);
  border-color:#302d1c
}
.hold-progress,.quality-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
  font-size:10px;
  color:var(--muted)
}
progress {
  appearance:none;
  border:0;
  background:#33412a;
  border-radius:5px;
  height:5px;
  overflow:hidden;
  width:100%
}
progress::-webkit-progress-bar {
  background:#33412a;
  border-radius:5px
}
progress::-webkit-progress-value {
  background:#a8bc83;
  border-radius:5px
}
progress::-moz-progress-bar {
  background:#a8bc83
}
.hold-progress b,.quality-row b {
  font:10px var(--mono);
  white-space:nowrap;
  color:#c6d2af
}
.quality-row>span {
  white-space:nowrap;
  font-size:9px
}
.mg-bottom {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-top:11px
}
.mg-message {
  font-size:10px;
  line-height:1.8;
  color:var(--muted)
}
.mg-message[data-kind=error] {
  color:var(--danger)
}
.mg-abort {
  font-size:9px;
  color:#b99178;
  white-space:nowrap;
  padding:0;
  min-height:20px
}
.mg-confirm {
  margin-top:15px;
  display:flex;
  width:100%;
  font-size:12px
}
.signal-wave {
  width:100%;
  height:auto;
  margin:10px 0
}
.grid-line {
  stroke:#3b4931;
  stroke-width:.7;
  fill:none;
  stroke-dasharray:3 7
}
.wave-primary {
  stroke:#c7b77c;
  stroke-width:1.6;
  fill:none
}
.wave-secondary {
  stroke:#7da68b;
  stroke-width:1.6;
  fill:none;
  opacity:.6
}
.eq-profile {
  display:flex;
  gap:24px;
  justify-content:space-around;
  padding:5px 15px 17px;
  border-bottom:1px solid var(--line)
}
.eq-column {
  flex:1;
  max-width:115px;
  text-align:center
}
.eq-scale {
  position:relative;
  height:75px;
  border-bottom:1px solid #50613d;
  background:repeating-linear-gradient(to top,transparent,transparent 14px,#303f2920 14px,#3a4d301f 15px);
  overflow:hidden
}
.eq-target {
  width:80%;
  position:absolute;
  bottom:0;
  left:10%;
  border-top:2px dashed #bc995e;
  z-index:2
}
.eq-actual {
  position:absolute;
  bottom:0;
  width:45%;
  left:27%;
  background:#75955699;
  border:1px solid #95af72
}
.eq-column b {
  display:block;
  font:8px var(--mono);
  letter-spacing:.4px;
  margin-top:9px;
  color:var(--muted)
}
.eq-column>span {
  font:9px var(--mono);
  color:var(--accent);
  display:block;
  margin-top:4px
}
.slider-stack {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.slider-stack .range-control {
  font-size:9px
}
.tape-order {
  display:grid;
  gap:8px
}
.tape-piece {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 10px;
  background:linear-gradient(90deg,#373d2a,#293322);
  border:1px solid #546044;
  border-radius:3px;
  min-height:52px
}
.tape-piece .grip {
  color:var(--dim);
  font-size:18px;
  cursor:grab
}
.tape-number {
  font:9px var(--mono);
  color:var(--accent)
}
.tape-piece strong {
  font-size:11px;
  font-weight:400;
  flex:1
}
.tape-piece button {
  width:26px;
  height:29px;
  border:1px solid #64704e;
  color:#c6d0b3;
  border-radius:3px
}
.tape-piece button:hover:not(:disabled) {
  background:#48533a
}
.patch-head {
  display:flex;
  justify-content:space-between;
  font:9px var(--mono);
  letter-spacing:.7px;
  color:var(--dim);
  margin-bottom:13px
}
.patch-grid {
  display:grid;
  grid-template-columns:1fr 60px 1fr
}
.patch-port {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #4b5b3d;
  border-radius:4px;
  background:#2c3725;
  height:52px;
  width:100%;
  margin-bottom:18px;
  padding:8px;
  color:#aebfa0;
  text-align:left
}
.patch-port:last-child {
  margin-bottom:0
}
.patch-port i {
  width:10px;
  height:10px;
  border:2px solid #7d925f;
  border-radius:50%;
  background:#172110;
  flex-shrink:0
}
.patch-port span {
  font-size:10px;
  white-space:nowrap
}
.patch-port b {
  font-weight:400;
  color:var(--dim);
  margin-left:auto
}
.patch-port.selected {
  border-color:var(--accent);
  color:var(--accent)
}
.patch-port.connected i {
  background:var(--accent);
  border-color:#ce995d
}
.patch-cables {
  height:192px
}
.patch-cables svg {
  height:210px;
  width:100%;
  position:relative;
  top:-9px
}
.cable {
  stroke:#cc9b63;
  stroke-width:2;
  fill:none;
  opacity:.85
}
.phase-invert {
  width:100%
}
.phase-invert[aria-pressed=true] {
  color:var(--accent);
  border-color:var(--accent)
}
.cipher-block {
  text-align:center;
  padding:14px;
  border:1px dashed #5a6b46
}
.cipher-block>span {
  display:block;
  font:8px var(--mono);
  letter-spacing:2px;
  color:var(--dim)
}
.cipher-block strong {
  display:block;
  font:31px var(--mono);
  letter-spacing:6px;
  margin:15px 0;
  color:#e0c890
}
.cipher-block small {
  font-size:11px;
  color:var(--muted)
}
.decoded-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:13px
}
.decoded-line>span {
  font:8px var(--mono);
  letter-spacing:1px;
  color:var(--dim)
}
.decoded-line strong {
  font:20px var(--mono);
  letter-spacing:4px;
  color:var(--green)
}
.morse-reference {
  text-align:center
}
.morse-reference span {
  font-size:10px;
  color:var(--muted);
  display:block
}
.morse-reference strong {
  font:40px var(--mono);
  letter-spacing:8px;
  color:var(--accent)
}
.morse-input {
  text-align:center;
  min-height:48px;
  padding:12px;
  background:#27351e;
  font:20px var(--mono);
  color:#cbd6b2;
  margin:14px 0
}
.morse-controls {
  display:flex;
  gap:7px
}
.morse-controls .button {
  flex:1;
  font-size:10px;
  white-space:normal
}
.morse-controls kbd {
  font-size:8px;
  padding:1px 4px
}
.take-tracks {
  display:grid;
  gap:17px
}
.take-track>div:first-child {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  gap:5px;
  margin-bottom:8px
}
.take-track>div:first-child span {
  font:8px var(--mono);
  color:var(--dim)
}
.take-track strong {
  font-size:11px;
  font-weight:400;
  color:var(--green)
}
.take-options {
  display:flex;
  gap:6px
}
.take-options .button {
  flex:1;
  font-size:10px;
  min-height:38px;
  padding:7px 9px
}
.antenna-wrap {
  display:flex;
  gap:30px;
  align-items:center;
  justify-content:center
}
.compass {
  height:140px;
  width:140px;
  border:1px solid #677d4d;
  border-radius:50%;
  position:relative;
  background:radial-gradient(transparent 35%,#79944c0c 36%,transparent 38%,transparent 65%,#79944c1a 67%,transparent 68%);
  flex-shrink:0
}
.compass>span {
  position:absolute;
  font:8px var(--mono);
  color:var(--dim)
}
.compass .north {
  top:8px;
  left:66px
}
.compass .south {
  bottom:8px;
  left:66px
}
.compass .east {
  right:10px;
  top:65px
}
.compass .west {
  left:10px;
  top:65px
}
.compass>i {
  position:absolute;
  left:68px;
  top:19px;
  width:2px;
  height:100px;
  transform-origin:center
}
.compass-needle {
  background:linear-gradient(to bottom,#eeb178 50%,transparent 50%)
}
.compass-target {
  background:linear-gradient(to bottom,#92b276 50%,transparent 50%);
  opacity:.55
}
.compass>b {
  font:13px var(--mono);
  color:#b1be96;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:8px;
  background:#172013;
  border-radius:50%
}
.antenna-data>span {
  font:8px var(--mono);
  letter-spacing:1px;
  color:var(--dim);
  display:block
}
.antenna-data strong {
  font:34px var(--mono);
  color:var(--accent)
}
.antenna-data p {
  font-size:10px;
  color:var(--muted);
  margin-top:9px
}
.echo-radar {
  width:155px;
  height:155px;
  margin:0 auto;
  position:relative;
  border:1px solid #68814b;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden
}
.radar-rings {
  position:absolute;
  inset:0;
  border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0px,transparent 23px,#52674180 24px,#52674180 25px)
}
.echo-radar:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:#425837
}
.echo-radar:before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:#425837
}
.echo-radar strong {
  z-index:1;
  font:15px var(--mono);
  color:#d0cea0;
  background:#1d2916d9;
  padding:3px 7px
}
.radar-dot {
  position:absolute;
  width:4px;
  height:4px;
  background:var(--accent);
  left:75%;
  top:30%;
  opacity:0
}
.pinging .radar-dot {
  opacity:1
}
.pinging .radar-rings {
  animation:radarPulse 1s infinite linear
}
.calibration {
  text-align:center;
  font-size:10px;
  color:var(--muted);
  margin:12px 0
}
.ping-button {
  display:flex;
  margin:10px auto 17px
}
.echo-answers {
  display:flex;
  gap:7px
}
.echo-answers .button {
  flex:1
}
.sequence-reference {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:20px
}
.sequence-reference>span {
  font:8px var(--mono);
  letter-spacing:1px;
  color:var(--dim)
}
.sequence-reference>strong {
  font-size:11px;
  color:var(--green);
  font-weight:500
}
.sequence-help {
  width:100%;
  text-align:center;
  font:23px var(--mono);
  color:var(--accent)
}
.sequence-pads {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.sequence-pad {
  height:80px;
  border:1px solid #67774f;
  border-radius:5px;
  background:#2b3722;
  font:28px var(--mono);
  color:#9fac88
}
.sequence-pad small {
  display:block;
  font:6px var(--mono);
  letter-spacing:1px;
  color:#86996f;
  margin-top:5px
}
.sequence-pad.lit {
  background:var(--accent);
  color:#322113;
  border-color:#f8c697;
  box-shadow:0 0 25px #d6944640;
  opacity:1
}
.sequence-pad.lit small {
  color:#654827
}
.sequence-pad:disabled {
  opacity:.65
}
.sequence-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:13px;
  font:11px var(--mono);
  color:var(--muted)
}
.sequence-bottom .text-button {
  font-size:10px
}
.ending-area {
  text-align:center;
  padding:32px 25px;
  background:radial-gradient(ellipse at 50% 0,#3f3c26,#20241a 70%);
  border-color:#807448
}
.ending-area .ending-frequency {
  font:10px var(--mono);
  letter-spacing:4px;
  color:var(--accent)
}
.ending-area h2 {
  font-size:30px;
  letter-spacing:-1px;
  line-height:1.4;
  margin:13px 0
}
.ending-area>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  max-width:480px;
  margin:0 auto
}
.ending-area .ending-id {
  font:8px var(--mono);
  letter-spacing:1px;
  color:#9b956b;
  margin-top:19px
}
.ending-actions {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:23px
}
.ending-other {
  font-size:10px!important;
  margin-top:16px!important
}
.collection-view {
  padding:37px 35px;
  max-width:1440px
}
.collection-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:26px
}
.collection-heading h1 {
  font-size:30px;
  letter-spacing:-1px;
  margin:10px 0
}
.collection-heading p {
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}
.collection-metric {
  text-align:right;
  flex-shrink:0
}
.collection-metric strong {
  font:40px var(--mono);
  font-weight:400;
  color:var(--accent);
  display:block
}
.collection-metric span {
  font:9px var(--mono);
  color:var(--dim);
  letter-spacing:1px
}
.collection-tabs {
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px
}
.collection-tab {
  border-bottom:2px solid transparent;
  padding:13px 0;
  display:flex;
  gap:7px;
  align-items:center;
  font-size:12px;
  color:var(--muted)
}
.collection-tab.active {
  color:var(--accent);
  border-color:var(--accent)
}
.collection-tab .icon {
  width:14px;
  height:14px
}
.filter-row {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:22px
}
.search-field {
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--panel);
  border:1px solid var(--line);
  padding:9px 12px;
  border-radius:4px;
  flex:1;
  min-width:180px
}
.search-field>.icon {
  width:15px;
  height:15px;
  color:var(--dim)
}
.search-field input {
  border:0;
  background:transparent;
  color:var(--text);
  outline:0;
  width:100%;
  font-size:12px;
  min-height:24px
}
.filter-row select {
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--panel);
  color:var(--muted);
  font-size:11px;
  padding:11px 9px
}
.check-label {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  cursor:pointer
}
.check-label input {
  accent-color:var(--accent);
  width:15px;
  height:15px
}
.archive-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:14px;
  font-size:10px;
  color:var(--dim)
}
.archive-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.archive-card {
  padding:17px 19px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:5px
}
.archive-card .archive-card-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  font-size:10px;
  gap:10px
}
.archive-card strong {
  font-size:11px;
  color:var(--accent)
}
.archive-card-meta>span {
  font:7px var(--mono);
  color:var(--dim);
  letter-spacing:.3px
}
.archive-card p {
  font-size:calc(12px * var(--text-scale));
  line-height:1.95;
  color:#c8d0ba;
  word-break:keep-all;
  overflow-wrap:anywhere
}
.archive-card .archive-source {
  font:8px var(--mono);
  color:var(--dim);
  margin-top:12px
}
.empty-state {
  padding:50px 25px;
  border:1px dashed #435038;
  border-radius:6px;
  color:var(--muted);
  text-align:center;
  grid-column:1/-1;
  line-height:1.9
}
.empty-state .icon {
  display:block;
  width:32px;
  height:32px;
  margin:0 auto 15px;
  color:var(--dim)
}
.empty-state strong {
  display:block;
  font-size:17px;
  color:var(--text);
  margin-bottom:9px
}
.empty-state p {
  font-size:12px
}
.load-more {
  display:flex;
  margin:24px auto
}
.training-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.training-card {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:6px;
  overflow:hidden;
  display:flex;
  flex-direction:column
}
.training-card-top {
  height:90px;
  padding:18px 19px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  background:radial-gradient(ellipse at 60% 100%,#3a432a,#222b1e)
}
.training-card-top>.icon {
  width:36px;
  height:36px;
  stroke-width:1;
  color:#a9ad7b;
  align-self:center
}
.training-card-top>span {
  font:9px var(--mono);
  letter-spacing:1px;
  color:#b0b39a
}
.training-card-body {
  padding:18px;
  display:flex;
  flex-direction:column;
  flex:1
}
.training-card h2 {
  font-size:14px;
  margin-bottom:9px;
  line-height:1.5
}
.training-card p {
  font-size:11px;
  line-height:1.9;
  color:var(--muted);
  margin-bottom:16px;
  flex:1
}
.training-card .button {
  width:100%;
  font-size:11px;
  background:#272f22
}
.ending-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px
}
.ending-card {
  padding:22px 18px;
  min-height:173px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel);
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.ending-card>span {
  font:8px var(--mono);
  letter-spacing:1px;
  color:var(--dim)
}
.ending-card>.icon {
  width:23px;
  height:23px;
  color:#849370;
  margin-top:20px
}
.ending-card strong {
  display:block;
  margin:12px 0 6px;
  font-size:15px;
  color:var(--text);
  line-height:1.5
}
.ending-card p {
  font-size:10px;
  color:var(--muted);
  line-height:1.8
}
.ending-card.unlocked {
  border-color:#655e3d;
  background:linear-gradient(125deg,#303020,#23271c)
}
.ending-card.unlocked strong {
  color:var(--accent)
}
.ending-card:hover {
  border-color:var(--accent)
}
.bside-panel {
  border:1px solid #655d3c;
  border-radius:6px;
  background:linear-gradient(130deg,#2d3020,#1e251b);
  padding:32px;
  max-width:840px
}
.bside-panel .cassette-art {
  width:165px;
  height:68px;
  margin:15px 0 30px 20px;
  transform:rotate(-5deg)
}
.bside-panel .cassette-art i {
  width:25px;
  height:25px;
  border-width:6px
}
.bside-panel .cassette-art:before {
  left:29px;
  width:110px;
  height:26px;
  top:13px
}
.bside-panel .cassette-art:after {
  left:48px;
  width:66px;
  height:16px
}
.bside-panel .cassette-art b {
  font-size:12px
}
.bside-panel h2 {
  font-size:25px;
  letter-spacing:-.6px;
  margin:10px 0 13px
}
.bside-panel p {
  font-size:12px;
  line-height:2;
  color:var(--muted)
}
.bside-conditions {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin:22px 0;
  color:var(--muted);
  font-size:11px
}
.bside-conditions>span {
  display:flex;
  align-items:center;
  gap:7px
}
.bside-conditions .icon {
  width:13px;
  height:13px
}
.bside-conditions .met {
  color:var(--accent)
}
.bside-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:24px
}
.bside-step {
  border:1px solid #465338;
  background:#252e20;
  padding:13px;
  border-radius:4px;
  font-size:10px;
  color:var(--dim)
}
.bside-step>b {
  font:12px var(--mono);
  display:block;
  color:var(--muted);
  margin-bottom:5px
}
.bside-step.complete {
  border-color:#8b824c;
  color:var(--green)
}
.bside-step.complete b {
  color:var(--accent)
}
dialog {
  border:1px solid #4e5a3f;
  border-radius:9px;
  padding:0;
  background:#1c231a;
  color:var(--text);
  width:min(720px,calc(100vw - 32px));
  max-height:calc(100dvh - 48px);
  box-shadow:0 30px 150px #000a;
  overflow:hidden
}
dialog::backdrop {
  background:#070c09cf;
  backdrop-filter:blur(5px)
}
.modal-inner {
  display:flex;
  flex-direction:column;
  max-height:calc(100dvh - 50px)
}
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-bottom:1px solid #3a4631;
  padding:24px 26px 21px;
  flex-shrink:0;
  background:#232b1e
}
.modal-header h2 {
  font-size:21px;
  letter-spacing:-.7px;
  margin:7px 0 0
}
.modal-header .eyebrow {
  font-size:8px
}
.modal-body {
  padding:25px 26px;
  overflow:auto;
  overscroll-behavior:contain
}
.modal-body>p,.modal-copy {
  font-size:12px;
  color:var(--muted);
  line-height:1.95
}
.modal-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px
}
.modal-intro {
  margin-bottom:20px
}
.settings-section {
  border-bottom:1px solid var(--line);
  padding:0 0 22px;
  margin:0 0 22px
}
.settings-section:last-child {
  border:0;
  margin:0;
  padding:0
}
.settings-section h3 {
  font-size:13px;
  color:#ccd6ba;
  margin-bottom:16px
}
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:16px 0
}
.setting-row>label,.setting-row>div {
  display:block;
  font-size:12px;
  color:var(--text);
  flex:1
}
.setting-row small {
  display:block;
  font-size:10px;
  color:var(--muted);
  line-height:1.8;
  margin-top:4px;
  max-width:420px
}
.setting-row select {
  border:1px solid #566545;
  border-radius:4px;
  background:#2c3823;
  color:#d1d9be;
  padding:8px;
  font-size:11px
}
.setting-row input[type=checkbox] {
  appearance:none;
  width:34px;
  height:20px;
  border:1px solid #687753;
  border-radius:20px;
  background:#333e29;
  position:relative;
  cursor:pointer;
  flex-shrink:0
}
.setting-row input[type=checkbox]:before {
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#92a47b;
  transition:transform .15s
}
.setting-row input[type=checkbox]:checked {
  background:#5f5535;
  border-color:#bc945d
}
.setting-row input[type=checkbox]:checked:before {
  background:var(--accent);
  transform:translateX(14px)
}
.setting-row>input[type=range] {
  width:120px;
  flex:0 1 120px
}
.save-slot {
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid #465439;
  border-radius:5px;
  background:#222c1e;
  padding:15px;
  margin-bottom:11px
}
.save-slot .slot-icon {
  width:34px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid #5c6848;
  border-radius:4px;
  color:var(--accent)
}
.save-slot .slot-details {
  flex:1;
  min-width:0
}
.slot-details strong {
  display:block;
  font-size:12px;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.slot-details p {
  font-size:10px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.8
}
.slot-details .slot-meta {
  font:8px var(--mono);
  color:var(--dim);
  display:block;
  margin-top:3px
}
.save-slot .slot-buttons {
  display:flex;
  gap:6px
}
.save-footer {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px
}
.save-note {
  font-size:10px;
  color:var(--dim);
  line-height:1.9;
  margin-top:17px
}
.file-button {
  cursor:pointer
}
.log-list {
  display:grid;
  gap:13px;
  max-height:none
}
.log-entry {
  border-left:2px solid #566645;
  background:#232d1e;
  padding:12px 15px;
  border-radius:0 4px 4px 0
}
.log-entry>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:var(--accent);
  margin-bottom:6px
}
.log-entry small {
  font:7px var(--mono);
  color:var(--dim)
}
.log-entry p {
  font-size:calc(12px * var(--text-scale));
  line-height:1.9;
  color:#d0dac1
}
.log-entry.system {
  border-left-color:#536645;
  background:#21281c
}
.log-entry.system p {
  font-size:10px;
  color:var(--muted)
}
.ambient-speaker {
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 18px
}
.ambient-speaker img {
  width:33px;
  height:49px;
  border:1px solid #465a39;
  border-radius:3px;
  image-rendering:pixelated
}
.ambient-speaker strong {
  font-size:14px;
  color:var(--accent)
}
.ambient-speaker small {
  display:block;
  font:8px var(--mono);
  color:var(--dim);
  margin-top:5px
}
.ambient-text {
  font-size:calc(18px * var(--text-scale));
  color:var(--text);
  line-height:2;
  word-break:keep-all;
  padding:18px 0 24px
}
.ambient-notes {
  font-size:10px;
  color:var(--muted);
  padding-top:14px;
  border-top:1px solid var(--line)
}
.help-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px
}
.help-item {
  border:1px solid #425334;
  background:#222f1d;
  padding:14px;
  border-radius:4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:11px;
  color:var(--muted)
}
.help-note {
  margin-top:20px;
  font-size:11px;
  color:var(--muted);
  line-height:2
}
.help-note strong {
  color:var(--accent);
  font-weight:500
}
.detail-grid {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:11px;
  font-size:12px
}
.detail-grid dt {
  color:var(--dim)
}
.detail-grid dd {
  margin:0;
  color:var(--text);
  line-height:1.9
}
.detail-list {
  font-size:12px;
  line-height:2.2;
  color:var(--muted);
  padding-left:18px
}
.predicate {
  font:11px/1.9 var(--mono);
  overflow-wrap:anywhere;
  white-space:normal;
  background:#151f12;
  border:1px solid #425137;
  border-radius:4px;
  padding:15px;
  margin-top:18px;
  color:var(--green)
}
.toast-region {
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  z-index:10000;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:calc(100vw - 32px);
  pointer-events:none
}
.toast {
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid #65744b;
  border-radius:5px;
  padding:12px 18px;
  background:#2c3624f5;
  box-shadow:0 5px 30px #0007;
  color:#d9e3c8;
  font-size:12px;
  animation:toastIn .18s ease;
  max-width:100%;
  overflow-wrap:anywhere
}
.toast .icon {
  color:var(--accent);
  width:16px;
  height:16px;
  flex-shrink:0
}
.toast.error {
  background:#39271ff5;
  border-color:#956447;
  color:#efd2bf
}
.boot-error,.noscript {
  position:fixed;
  inset:20%;
  z-index:100;
  background:#231f17;
  border:1px solid var(--accent);
  padding:35px;
  font-size:16px;
  line-height:2
}
.nav-backdrop {
  display:none
}
.app-shell:fullscreen {
  background:var(--bg);
  max-width:none;
  width:100%;
  overflow:auto
}
.app-shell:fullscreen .view {
  max-width:1500px;
  width:100%;
  margin:0 auto
}
.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}
.large-text {
  --text-scale:1.2
}
.high-contrast {
  --dim:#a4ae96;
  --muted:#c0cab3;
  --line:#647052;
  --line-soft:#4f5c41
}
.high-contrast .small-mono,.high-contrast .move-instruction,.high-contrast .edition-mark {
  color:#bbc6a7
}
@keyframes toastIn {
  from {
    opacity:0;
    transform:translateY(7px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes radarPulse {
  from {
    transform:scale(.7);
    opacity:.9
  }
  to {
    transform:scale(1.2);
    opacity:.3
  }
}
@media(min-width:1600px) {
  .navigation {
    padding-left:22px;
    padding-right:22px
  }
  .app-shell {
    grid-template-columns:244px minmax(0,1fr)
  }
  .game-columns {
    grid-template-columns:minmax(0,1fr) 294px;
    gap:32px
  }
  .view {
    padding:34px 38px 28px
  }
  .telemetry>section {
    padding:23px 0
  }
  .telemetry>section:first-child {
    padding:21px 22px 16px
  }
  .page-heading {
    margin-bottom:27px
  }
  .dialogue-body {
    min-height:108px
  }
  #dialogueText {
    font-size:calc(18px * var(--text-scale))
  }
  .radio-wave {
    margin-top:22px
  }
  .frequency-display strong {
    font-size:55px
  }
  .chapter-item {
    min-height:46px
  }
  .nav-item {
    min-height:47px
  }
}
@media(max-width:1250px) {
  .header-session>span:last-child {
    display:none
  }
  .game-columns {
    grid-template-columns:minmax(0,1fr) 231px;
    gap:20px
  }
  .view {
    padding:24px 22px 20px
  }
  .app-shell {
    grid-template-columns:195px minmax(0,1fr)
  }
  .navigation {
    padding-left:12px;
    padding-right:12px
  }
  .topbar {
    padding:0 20px
  }
  .page-heading h1 {
    font-size:23px
  }
  .scene-header {
    padding-left:10px;
    padding-right:8px
  }
  .scene-header #sceneLocation {
    max-width:120px
  }
  .dialogue-card {
    padding-left:15px;
    padding-right:15px
  }
  .dialogue-body {
    gap:12px
  }
  .secondary-story-controls {
    gap:10px
  }
  .continue-button {
    min-width:182px;
    font-size:11px;
    padding:9px 12px
  }
  .continue-button kbd {
    display:none
  }
  .panel-heading h2 {
    font-size:10px
  }
  .frequency-display strong {
    font-size:42px
  }
  .training-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .scene-viewport canvas {
    aspect-ratio:900/440;
    object-fit:cover
  }
  .session-clock {
    display:none
  }
  .page-heading p {
    font-size:10px
  }
  .header-actions {
    gap:5px
  }
}
@media(max-width:1080px) {
  .header-session {
    display:none
  }
  .game-columns {
    grid-template-columns:minmax(0,1fr) 216px;
    gap:18px
  }
  .app-shell {
    grid-template-columns:176px minmax(0,1fr)
  }
  .view {
    padding:23px 18px
  }
  .chapter-item {
    font-size:10px;
    gap:8px;
    padding-left:7px
  }
  .rail-label {
    font-size:7px;
    letter-spacing:1px
  }
  .nav-item {
    padding-left:9px;
    font-size:11px;
    gap:8px
  }
  .page-heading h1 {
    font-size:22px
  }
  .scene-header #sceneLocation {
    max-width:100px
  }
  .scene-tab {
    padding:4px 6px
  }
  .dialogue-topline {
    flex-wrap:wrap
  }
  .channel-label {
    font-size:7px
  }
  .continue-button {
    min-width:157px
  }
  .secondary-story-controls #btnSkip {
    font-size:9px
  }
  .stage-footnote>span:last-child {
    display:none
  }
  .radio-level-labels {
    font-size:5px
  }
  .ending-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .collection-view {
    padding:30px 25px
  }
  .archive-grid {
    grid-template-columns:1fr
  }
  .rail-bottom .bside-teaser {
    padding:11px
  }
  .edition-mark>span {
    display:none
  }
}
@media(max-width:900px) {
  .app-shell {
    grid-template-columns:174px minmax(0,1fr)
  }
  .game-columns {
    grid-template-columns:1fr
  }
  .telemetry {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:24px;
    align-items:start;
    padding-top:8px
  }
  .telemetry>section {
    padding:18px 0
  }
  .telemetry>.radio-panel {
    grid-row:span 2;
    min-height:247px
  }
  .telemetry>.tools-panel {
    grid-column:1/-1;
    display:block
  }
  .tools-list {
    grid-template-columns:repeat(3,1fr);
    display:grid
  }
  .telemetry>.hazard-panel {
    border-bottom:1px solid var(--line)
  }
  .panel-heading h2 {
    font-size:12px
  }
  .small-mono {
    font-size:8px
  }
  .frequency-display strong {
    font-size:52px
  }
  .frequency-display {
    margin-top:23px
  }
  .radio-wave {
    margin-top:20px
  }
  .page-heading h1 {
    font-size:27px
  }
  .dialogue-topline {
    flex-wrap:nowrap
  }
  .channel-label {
    font-size:8px
  }
  .stage-footnote>span:last-child {
    display:block
  }
  .story-controls {
    gap:12px
  }
  .continue-button {
    min-width:204px
  }
  .secondary-story-controls {
    gap:18px
  }
  .session-clock {
    display:block
  }
  .training-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .scene-header #sceneLocation {
    max-width:220px
  }
  .scene-viewport canvas {
    aspect-ratio:900/420
  }
  .nav-item {
    font-size:11px
  }
  .chapter-item {
    min-height:43px
  }
  .navigation {
    min-height:calc(100vh - 78px)
  }
  .view {
    padding:26px
  }
  .page-heading {
    margin-bottom:22px
  }
  .telemetry .stats-panel {
    grid-column:1
  }
  .telemetry .hazard-panel {
    grid-column:2
  }
  .radio-panel+.objective-panel {
    grid-column:2
  }
  .tools-panel .ending-hint-button {
    max-width:200px
  }
}
@media(max-width:680px) {
  html {
    scroll-padding-top:69px
  }
  .topbar {
    height:66px;
    padding:0 14px;
    gap:9px;
    position:sticky;
    top:0
  }
  .brand {
    gap:9px
  }
  .brand-type {
    font-size:22px;
    letter-spacing:1px
  }
  .brand-type small {
    font-size:6px;
    letter-spacing:3.8px;
    margin-top:5px
  }
  .brand-symbol {
    display:none
  }
  .brand-frequency {
    font-size:6px;
    padding-left:8px
  }
  .brand-frequency b {
    font-size:11px
  }
  .mobile-menu {
    display:inline-flex;
    margin-right:8px;
    width:28px
  }
  .mobile-menu .icon {
    width:19px;
    height:19px
  }
  .header-actions {
    gap:3px
  }
  .header-actions .icon-button {
    width:31px;
    height:33px
  }
  .header-actions .icon {
    width:17px;
    height:17px
  }
  .action-divider,#btnHelp {
    display:none
  }
  .save-button {
    width:32px;
    height:33px;
    padding:7px;
    min-height:33px;
    background:none;
    border:0
  }
  .save-button>span:not(:first-child) {
    display:none
  }
  .save-button .icon {
    width:16px;
    height:16px
  }
  .app-shell {
    display:block;
    min-height:calc(100vh - 66px)
  }
  .navigation {
    position:fixed;
    left:0;
    top:66px;
    bottom:0;
    width:240px;
    z-index:25;
    transform:translateX(-100%);
    transition:transform .2s;
    overflow-y:auto;
    padding:23px 19px;
    min-height:0
  }
  .navigation.open {
    transform:translateX(0)
  }
  .nav-backdrop:not([hidden]) {
    display:block;
    position:fixed;
    inset:66px 0 0;
    background:#050905b8;
    z-index:24
  }
  .rail-bottom {
    padding-top:25px
  }
  .rail-label {
    font-size:8px
  }
  .nav-item {
    font-size:12px
  }
  .chapter-item {
    font-size:11px
  }
  .rail-bottom .bside-teaser {
    display:none
  }
  .navigation .edition-mark {
    margin-top:15px
  }
  .view {
    padding:23px 17px
  }
  .game-columns {
    gap:23px
  }
  .page-heading {
    margin-bottom:20px;
    min-height:76px
  }
  .page-heading h1 {
    font-size:25px;
    letter-spacing:-1px;
    margin:8px 0 7px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.4px
  }
  .page-heading p {
    font-size:10px;
    line-height:1.8;
    max-width:275px
  }
  .session-clock b {
    font-size:17px
  }
  .session-clock>span {
    font-size:6px
  }
  .scene-header {
    height:40px;
    padding:6px 9px;
    font-size:7px;
    gap:4px
  }
  .scene-header>div:first-child {
    gap:5px
  }
  .scene-header>div:first-child i {
    margin:0 1px
  }
  .scene-header #sceneLocation {
    font-size:9px;
    max-width:130px
  }
  .scene-actions {
    gap:1px
  }
  .scene-tab {
    font-size:9px;
    min-height:27px;
    padding:4px 7px
  }
  .scene-actions>.icon-button {
    width:24px;
    margin-left:1px
  }
  .scene-viewport canvas {
    aspect-ratio:900/520;
    object-fit:cover;
    object-position:center;
    image-rendering:pixelated
  }
  .scene-viewport {
    background:#111c13
  }
  .camera-label {
    top:10px;
    left:10px;
    font-size:6px;
    gap:5px;
    letter-spacing:.5px
  }
  .camera-corner {
    height:8px;
    width:8px
  }
  .world-prompt {
    right:9px;
    bottom:14px
  }
  .inspect-button {
    font-size:9px;
    min-height:31px;
    padding:5px 8px;
    gap:5px
  }
  .inspect-button kbd {
    display:none
  }
  .scene-footer {
    font-size:8px;
    padding:0 9px;
    gap:6px;
    height:31px
  }
  .coordinate {
    font-size:7px
  }
  .move-instruction {
    font-size:7px
  }
  .touch-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:12px;
    gap:10px
  }
  .touch-controls>span {
    font-size:8px;
    color:var(--dim)
  }
  .dpad {
    display:flex;
    gap:5px
  }
  .dpad button {
    height:36px;
    width:36px;
    border:1px solid #485639;
    background:#232c1e;
    color:#b6c3a1;
    border-radius:4px;
    touch-action:none;
    font-size:14px;
    user-select:none
  }
  .dpad button:active {
    background:#5c5b36;
    color:var(--accent);
    border-color:var(--accent)
  }
  .dialogue-card {
    margin-top:16px;
    padding:14px 15px 13px
  }
  .dialogue-topline {
    margin-bottom:16px
  }
  .channel-label {
    font-size:6px;
    letter-spacing:.7px;
    gap:4px
  }
  .channel-label .icon {
    width:10px;
    height:10px
  }
  .dialogue-topline .text-button {
    font-size:8px!important
  }
  .dialogue-topline .text-button>.icon {
    display:none
  }
  #lineCounter {
    font-size:7px;
    margin-left:2px
  }
  .dialogue-body {
    min-height:93px;
    gap:12px
  }
  .speaker-portrait {
    width:36px;
    min-width:36px;
    height:49px
  }
  .speaker-portrait img {
    width:31px;
    height:47px
  }
  .speaker-meta strong {
    font-size:11px
  }
  .speaker-meta>span {
    font-size:6px
  }
  .speaker-meta {
    gap:7px;
    margin-bottom:7px
  }
  #dialogueText {
    font-size:calc(15px * var(--text-scale));
    line-height:1.9;
    letter-spacing:-.3px
  }
  .dialogue-bottom {
    font-size:7px;
    margin-top:10px
  }
  .story-controls {
    margin-top:16px;
    gap:10px;
    align-items:stretch
  }
  .secondary-story-controls {
    flex-direction:column;
    gap:2px;
    align-items:flex-start;
    justify-content:center
  }
  .secondary-story-controls .text-button {
    font-size:9px;
    min-height:24px;
    padding:2px
  }
  .secondary-story-controls .icon {
    width:12px;
    height:12px
  }
  .continue-button {
    min-width:0;
    flex:1;
    max-width:235px;
    height:49px;
    font-size:12px;
    gap:13px;
    padding:11px 15px
  }
  .continue-button .icon {
    margin:0
  }
  .stage-footnote {
    margin-top:19px;
    padding-top:12px;
    font-size:7px;
    gap:8px
  }
  .stage-footnote>span:last-child {
    max-width:170px;
    line-height:1.7;
    font-size:7px
  }
  .telemetry {
    gap:0 20px;
    padding-top:5px
  }
  .telemetry>section:first-child {
    padding:16px 13px 11px
  }
  .telemetry .panel-heading h2 {
    font-size:10px
  }
  .telemetry .panel-heading {
    margin-bottom:14px;
    gap:5px
  }
  .telemetry .on-air {
    font-size:5px;
    letter-spacing:.6px;
    padding:2px 3px;
    gap:3px
  }
  .telemetry .on-air>span {
    width:3px;
    height:3px
  }
  .frequency-display strong {
    font-size:39px;
    letter-spacing:-2px
  }
  .frequency-display {
    margin-top:20px;
    gap:3px
  }
  .frequency-display>span {
    font-size:7px;
    margin-top:5px
  }
  .frequency-display>small {
    font-size:6px
  }
  .radio-wave {
    gap:2px;
    margin-top:17px;
    height:32px
  }
  .radio-wave i {
    min-width:1px
  }
  .radio-level-labels {
    font-size:4px;
    letter-spacing:.4px
  }
  .signal-status {
    margin-top:16px;
    font-size:8px
  }
  .signal-status>span:last-child {
    display:none
  }
  .volume-row {
    gap:5px
  }
  .volume-row output {
    font-size:7px;
    min-width:22px
  }
  .telemetry>.radio-panel {
    min-height:233px
  }
  .objective-list {
    gap:11px
  }
  .objective-list li {
    font-size:9px;
    gap:7px
  }
  .small-mono {
    font-size:6px
  }
  .traits {
    gap:14px 12px
  }
  .trait-title {
    font-size:8px
  }
  .trait-title b {
    font-size:8px
  }
  .hazard-row>span:nth-child(2) {
    font-size:7px;
    letter-spacing:.5px
  }
  .hazard-pips i {
    width:10px;
    height:5px
  }
  .hazard-pips {
    gap:3px
  }
  .hazard-list {
    gap:11px
  }
  .tool-row {
    font-size:9px
  }
  .tools-list {
    gap:12px
  }
  .tool-row>span:nth-child(2) {
    line-height:1.5
  }
  .tool-row>.tool-icon {
    width:23px;
    height:25px;
    min-width:23px
  }
  .tools-list {
    grid-template-columns:1fr 1fr
  }
  .tool-row>.icon {
    display:none
  }
  .decision-area,.mini-area,.ending-area {
    padding:18px 15px;
    margin-top:16px
  }
  .decision-area h2,.mini-section-title h2 {
    font-size:16px
  }
  .decision-area .decision-note {
    font-size:11px
  }
  .choice-button {
    font-size:12px;
    min-height:51px
  }
  .mini-board {
    padding:16px 13px
  }
  .mg-instruction {
    font-size:11px;
    line-height:1.9
  }
  .mg-readout strong {
    font-size:29px
  }
  .mg-readout>span {
    font-size:7px
  }
  .mg-readout #signalQuality {
    font-size:9px
  }
  .slider-stack {
    grid-template-columns:1fr;
    gap:0
  }
  .slider-stack .range-control {
    margin:12px 0
  }
  .eq-profile {
    padding-left:5px;
    padding-right:5px;
    gap:15px
  }
  .eq-column b {
    font-size:7px
  }
  .eq-column>span {
    font-size:8px
  }
  .eq-scale {
    height:65px
  }
  .tape-piece {
    gap:6px;
    padding:10px 7px
  }
  .tape-piece strong {
    font-size:10px
  }
  .tape-piece button {
    width:27px;
    height:32px
  }
  .tape-number {
    font-size:8px
  }
  .tape-piece .grip {
    font-size:16px
  }
  .patch-grid {
    grid-template-columns:1fr 30px 1fr
  }
  .patch-port {
    padding:8px 6px;
    gap:5px
  }
  .patch-port span {
    font-size:8px
  }
  .patch-port i {
    width:8px;
    height:8px
  }
  .patch-port b {
    display:none
  }
  .patch-head {
    font-size:8px
  }
  .morse-controls .button {
    font-size:9px;
    padding:8px 5px;
    min-height:44px
  }
  .morse-controls kbd {
    display:none
  }
  .morse-reference strong {
    font-size:32px;
    letter-spacing:7px
  }
  .take-options .button {
    font-size:9px;
    padding:7px 5px;
    min-height:44px
  }
  .take-track strong {
    font-size:10px
  }
  .antenna-wrap {
    gap:20px
  }
  .compass {
    width:125px;
    height:125px
  }
  .compass .north,.compass .south {
    left:59px
  }
  .compass .east,.compass .west {
    top:57px
  }
  .compass>i {
    left:61px;
    top:11px
  }
  .antenna-data strong {
    font-size:28px
  }
  .antenna-data>span {
    font-size:6px
  }
  .echo-answers .button {
    font-size:10px;
    padding:9px 8px
  }
  .sequence-pads {
    gap:7px
  }
  .sequence-pad {
    height:70px;
    font-size:24px
  }
  .sequence-pad small {
    font-size:5px;
    letter-spacing:.5px
  }
  .mg-bottom {
    gap:9px;
    flex-wrap:wrap
  }
  .mg-message {
    font-size:9px
  }
  .mg-abort {
    font-size:9px;
    min-height:26px;
    margin-left:auto
  }
  .mini-result {
    gap:11px
  }
  .mini-result strong {
    font-size:15px
  }
  .mini-result .result-icon {
    width:38px;
    height:38px
  }
  .mini-result p {
    font-size:10px
  }
  .ending-area h2 {
    font-size:26px
  }
  .ending-area>p {
    font-size:12px
  }
  .collection-view {
    padding:28px 19px
  }
  .collection-heading {
    align-items:flex-start;
    gap:13px
  }
  .collection-heading h1 {
    font-size:25px
  }
  .collection-heading p {
    font-size:11px
  }
  .collection-metric strong {
    font-size:29px
  }
  .collection-metric span {
    font-size:7px
  }
  .collection-metric {
    margin-top:17px
  }
  .collection-tabs {
    gap:24px;
    margin-bottom:20px
  }
  .collection-tab {
    font-size:11px
  }
  .filter-row {
    gap:9px
  }
  .search-field {
    min-width:160px;
    padding:8px 11px
  }
  .filter-row select {
    max-width:110px;
    padding:11px 8px;
    font-size:10px
  }
  .check-label {
    font-size:9px;
    width:100%;
    margin-top:4px
  }
  .archive-card {
    padding:15px 16px
  }
  .archive-card p {
    font-size:calc(12px * var(--text-scale))
  }
  .training-grid {
    gap:13px;
    grid-template-columns:1fr 1fr
  }
  .training-card-top {
    height:76px;
    padding:14px
  }
  .training-card-top>.icon {
    width:30px;
    height:30px
  }
  .training-card-top>span {
    font-size:7px
  }
  .training-card-body {
    padding:14px
  }
  .training-card h2 {
    font-size:12px;
    line-height:1.7
  }
  .training-card p {
    font-size:10px;
    line-height:1.9
  }
  .training-card .button {
    font-size:10px;
    padding:8px;
    min-height:37px
  }
  .ending-grid {
    gap:11px
  }
  .ending-card {
    padding:18px 15px;
    min-height:162px
  }
  .ending-card strong {
    font-size:13px
  }
  .ending-card p {
    font-size:9px
  }
  .bside-panel {
    padding:23px 20px
  }
  .bside-panel h2 {
    font-size:22px
  }
  .bside-panel p {
    font-size:11px
  }
  .bside-conditions {
    gap:14px;
    font-size:10px
  }
  .bside-steps {
    gap:7px
  }
  .bside-step {
    padding:10px 8px;
    font-size:8px
  }
  .bside-step>b {
    font-size:10px
  }
  dialog {
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 32px);
    border-radius:7px
  }
  .modal-inner {
    max-height:calc(100dvh - 34px)
  }
  .modal-header {
    padding:20px 19px 17px
  }
  .modal-header h2 {
    font-size:19px
  }
  .modal-body {
    padding:21px 19px
  }
  .modal-header .eyebrow {
    font-size:7px
  }
  .setting-row {
    gap:15px
  }
  .setting-row>label,.setting-row>div {
    font-size:11px
  }
  .setting-row small {
    font-size:9px;
    line-height:1.9
  }
  .setting-row select {
    font-size:10px;
    max-width:120px
  }
  .save-slot {
    padding:12px 10px;
    gap:9px;
    flex-wrap:wrap
  }
  .save-slot .slot-icon {
    width:29px;
    height:35px
  }
  .slot-details strong {
    font-size:11px
  }
  .slot-details p {
    font-size:9px
  }
  .save-slot .slot-buttons {
    margin-left:auto
  }
  .save-slot .slot-buttons .button {
    padding:6px 9px;
    font-size:10px
  }
  .save-footer .button {
    font-size:10px;
    flex:1;
    min-height:40px;
    padding:9px 12px
  }
  .help-grid {
    grid-template-columns:1fr
  }
  .help-item {
    font-size:11px
  }
  .ambient-text {
    font-size:calc(16px * var(--text-scale))
  }
  .detail-grid {
    grid-template-columns:70px 1fr;
    font-size:11px
  }
  .detail-list {
    font-size:11px
  }
  .toast {
    font-size:11px;
    padding:12px 14px
  }
  .toast-region {
    bottom:17px
  }
  .boot-error,.noscript {
    inset:90px 15px auto;
    padding:25px;
    font-size:14px
  }
  .button {
    min-height:42px
  }
}
@media(max-width:360px) {
  .topbar {
    padding:0 9px
  }
  .brand-frequency {
    display:none
  }
  .header-actions {
    gap:0
  }
  .brand-type {
    font-size:20px
  }
  .view {
    padding:20px 12px
  }
  .page-heading h1 {
    font-size:23px
  }
  .session-clock {
    display:none
  }
  .scene-header #sceneLocation {
    max-width:93px
  }
  .scene-actions>.icon-button {
    display:none
  }
  .telemetry {
    gap:0 15px
  }
  .frequency-display strong {
    font-size:34px
  }
  .trait-title {
    font-size:7px
  }
  .continue-button {
    font-size:11px;
    max-width:195px
  }
  .secondary-story-controls .text-button {
    font-size:8px
  }
  .stage-footnote>span:last-child {
    max-width:140px
  }
  .training-grid {
    grid-template-columns:1fr
  }
  .sequence-pad small {
    font-size:4px
  }
  .patch-port span {
    font-size:7px
  }
  .compass {
    transform:scale(.88);
    margin:-8px
  }
  .antenna-wrap {
    gap:8px
  }
  .bside-steps {
    grid-template-columns:1fr
  }
  .brand-group .mobile-menu {
    margin-right:5px
  }
  .save-slot .slot-buttons {
    width:100%;
    justify-content:flex-end
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
}
/* Keep the painted canvas and pointer coordinate spaces identical at every breakpoint. */ .scene-viewport canvas {
  aspect-ratio:900/420;
  object-fit:fill
}
.trait-title>span {
  display:flex;
  align-items:center;
  gap:5px
}
.trait-title .icon {
  width:14px;
  height:14px
}
.archive-result-count {
  font:10px var(--mono);
  color:var(--muted);
  margin-bottom:16px
}
.ending-matches {
  font-size:11px;
  color:var(--green);
  padding-top:18px;
  line-height:1.9
}
.mini-intro {
  display:flex;
  align-items:center;
  gap:15px;
  padding:14px 0 23px
}
.mini-intro>.icon {
  width:37px;
  height:37px;
  color:var(--accent)
}
.mini-intro p {
  font-size:13px;
  line-height:2
}
.mini-intro p span {
  font-size:11px;
  color:var(--muted)
}