:root {
  --n-paper: #f6f0e6;
  --n-card: #fffaf2;
  --n-ink: #1d2630;
  --n-muted: #69737d;
  --n-line: #d9cec0;
  --n-coral: #e35f4d;
  --n-coral-soft: #f7d8d1;
  --n-blue: #28699a;
  --n-blue-soft: #d7e9f2;
  --n-yellow: #d6a536;
  --n-green: #398269;
  --n-shadow: rgba(29, 38, 48, .12);
}

.theme-dark {
  --n-paper: #1b2025;
  --n-card: #252c32;
  --n-ink: #f4eee3;
  --n-muted: #aab4bc;
  --n-line: #49545d;
  --n-coral: #f17a63;
  --n-coral-soft: #57332f;
  --n-blue: #78b8d8;
  --n-blue-soft: #244452;
  --n-yellow: #e5bf5c;
  --n-green: #70bb9b;
  --n-shadow: rgba(0, 0, 0, .32);
}

.bitrate-planner {
  --n-surface: var(--n-card);
  --n-surface-strong: var(--n-paper);
  --n-text: var(--n-ink);
  --n-secondary: var(--n-muted);
  --n-border: var(--n-line);
  --n-accent: var(--n-coral);
  --n-accent-soft: var(--n-coral-soft);
  --n-cool: var(--n-blue);
  --n-cool-soft: var(--n-blue-soft);

  color: var(--n-text);
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: 1.2rem;
  box-shadow: 0 .7rem 2rem var(--n-shadow);
  overflow: hidden;
}

.planner-layout {
  display: grid;
  grid-template-columns: minmax(18rem, .92fr) minmax(20rem, 1.08fr);
  gap: 0;
}

.planner-controls {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--n-surface-strong);
  border-right: 1px solid var(--n-border);
}

.preset-line,
.choice-row,
.control-footer,
.scene-heading,
.scene-caption,
.badge-line,
.comparison-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.control-caption,
.scene-label,
.number-control > span:first-child,
.stat-strip span,
.comparison-heading,
.world-label,
.scene-caption,
.quality-note,
.local-note,
.control-note,
.assumption-panel,
.main-result span,
.main-result small {
  color: var(--n-secondary);
  font-size: .72rem;
  letter-spacing: .04em;
  line-height: 1.45;
}

.control-caption,
.scene-label,
.comparison-heading,
.world-label {
  text-transform: uppercase;
  font-weight: 750;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.preset-button,
.choice-button,
.reset-button {
  color: var(--n-text);
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: .65rem;
  min-height: 2.25rem;
  padding: .45rem .7rem;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.preset-button:hover,
.choice-button:hover,
.reset-button:hover {
  border-color: var(--n-accent);
  transform: translateY(-1px);
}

.preset-button.is-active,
.choice-button.is-active {
  color: var(--n-surface);
  background: var(--n-text);
  border-color: var(--n-text);
}

.control-fieldset {
  display: grid;
  gap: .55rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.control-fieldset legend {
  margin-bottom: .1rem;
  color: var(--n-text);
  font-size: .82rem;
  font-weight: 750;
}

.control-note,
.local-note,
.quality-note {
  margin: 0;
}

.number-grid {
  display: grid;
  gap: .75rem;
}

.number-control {
  display: grid;
  gap: .35rem;
}

.number-input-wrap {
  display: flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0 .75rem;
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: .65rem;
}

.number-input-wrap:focus-within {
  border-color: var(--n-accent);
  outline: 2px solid var(--n-accent-soft);
}

.number-input-wrap input {
  width: 100%;
  min-width: 0;
  color: var(--n-text);
  background: transparent;
  border: 0;
  outline: 0;
}

.number-input-wrap b {
  color: var(--n-secondary);
  font-size: .72rem;
  white-space: nowrap;
}

.control-footer {
  align-items: flex-start;
  justify-content: space-between;
  padding-top: .2rem;
}

.reset-button {
  flex: 0 0 auto;
  min-height: 1.9rem;
  padding: .3rem .55rem;
  font-size: .72rem;
}

.planner-scene {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-width: 0;
  padding: 1.5rem;
  background: var(--n-surface);
}

.scene-heading {
  justify-content: space-between;
}

.quality-badge,
.capacity-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: .25rem .55rem;
  color: var(--n-text);
  background: var(--n-accent-soft);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 750;
}

.quality-badge[data-tone="excellent"],
.quality-badge[data-tone="strong"] {
  background: var(--n-blue-soft);
}

.quality-badge[data-tone="aggressive"] {
  background: var(--n-coral-soft);
}

.capacity-badge[data-tone="medium"] {
  background: #f1e5be;
}

.capacity-badge[data-tone="heavy"] {
  color: var(--n-surface);
  background: var(--n-coral);
}

.signal-world {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 15rem;
  padding: 1.25rem .75rem;
  background: var(--n-surface-strong);
  border: 1px solid var(--n-border);
  border-radius: .9rem;
  overflow: hidden;
}

.signal-source,
.signal-reel {
  display: grid;
  justify-items: center;
  gap: .65rem;
  z-index: 1;
}

.source-screen {
  display: grid;
  place-items: center;
  width: 7.2rem;
  height: 5.3rem;
  color: var(--n-surface);
  background: var(--n-blue);
  border: .35rem solid var(--n-text);
  border-radius: .7rem;
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: .35rem .35rem 0 var(--n-coral);
}

.screen-grid {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, .65rem);
  gap: .35rem;
  opacity: .5;
}

.screen-grid i {
  display: block;
  width: .65rem;
  height: .65rem;
  background: var(--n-surface);
  border-radius: 50%;
}

.source-screen > span {
  position: relative;
  z-index: 1;
}

.signal-bridge {
  display: grid;
  justify-items: center;
  gap: .45rem;
  min-width: 3.5rem;
}

.bridge-line {
  width: 2rem;
  height: .15rem;
  background: var(--n-coral);
}

.codec-gate {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--n-surface);
  background: var(--n-text);
  border: .25rem solid var(--n-coral);
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 800;
}

.reel-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  background: var(--n-coral);
  border: .55rem solid var(--n-text);
  border-radius: 50%;
  box-shadow: .35rem .35rem 0 var(--n-blue);
}

.reel-hole,
.reel-groove {
  position: absolute;
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  border: .25rem solid var(--n-surface);
  border-radius: 50%;
}

.reel-groove {
  width: 4.1rem;
  height: 4.1rem;
  border-width: .12rem;
  opacity: .65;
}

.reel-groove-inner {
  width: 2.7rem;
  height: 2.7rem;
  border-width: .18rem;
  opacity: .8;
}

.signal-frames {
  position: absolute;
  right: 4.8rem;
  left: 4.8rem;
  bottom: 1.05rem;
  display: flex;
  align-items: flex-end;
  gap: .22rem;
  height: 2rem;
  overflow: hidden;
  opacity: .9;
}

.signal-frame {
  flex: 1 0 .5rem;
  max-width: 1rem;
  height: 38%;
  background: var(--n-blue);
  border-radius: .15rem .15rem 0 0;
  animation: pulse-frame 1.7s ease-in-out infinite;
  animation-delay: var(--frame-delay);
}

.signal-frame:nth-child(3n) {
  height: 72%;
}

.signal-frame:nth-child(4n) {
  height: 52%;
}

.signal-frame-accent {
  background: var(--n-coral);
}

@keyframes pulse-frame {
  0%, 100% { transform: scaleY(.8); }
  50% { transform: scaleY(1); }
}

.scene-caption {
  justify-content: space-between;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--n-border);
}

.scene-caption strong {
  color: var(--n-text);
  font-size: .82rem;
}

.main-result {
  display: grid;
  gap: .15rem;
  padding: .2rem 0;
}

.main-result strong {
  max-width: 100%;
  color: var(--n-text);
  font-size: clamp(2.5rem, 7vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.07em;
  overflow-wrap: anywhere;
}

.main-result small {
  letter-spacing: 0;
}

.badge-line {
  align-items: flex-start;
}

.capacity-note {
  color: var(--n-secondary);
  font-size: .72rem;
  line-height: 1.45;
}

.planner-lower {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
  padding: 0 1.5rem 1.5rem;
  background: var(--n-surface);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--n-border);
  border-bottom: 1px solid var(--n-border);
}

.stat-strip > div {
  display: grid;
  gap: .25rem;
  padding: .9rem .75rem;
  border-right: 1px solid var(--n-border);
}

.stat-strip > div:last-child {
  border-right: 0;
}

.stat-strip strong {
  color: var(--n-text);
  font-size: 1rem;
}

.comparison-panel {
  display: grid;
  gap: .65rem;
}

.comparison-heading {
  justify-content: space-between;
  color: var(--n-text);
  font-size: .8rem;
}

.comparison-row {
  display: grid;
  grid-template-columns: .55rem 1fr auto auto auto;
  align-items: center;
  gap: .7rem;
  min-height: 2.25rem;
  border-bottom: 1px solid var(--n-border);
  font-size: .78rem;
}

.comparison-mark {
  width: .5rem;
  height: .5rem;
  background: var(--n-yellow);
  border-radius: 50%;
}

.comparison-row[data-tone="strong"] .comparison-mark,
.comparison-row[data-tone="excellent"] .comparison-mark {
  background: var(--n-blue);
}

.comparison-row[data-tone="aggressive"] .comparison-mark {
  background: var(--n-coral);
}

.comparison-name,
.comparison-quality {
  color: var(--n-secondary);
}

.assumption-panel {
  border-top: 1px solid var(--n-border);
  padding-top: .85rem;
}

.assumption-panel summary {
  color: var(--n-text);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 750;
}

.assumption-panel p {
  max-width: 60rem;
  margin: .65rem 0 0;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .planner-layout {
    grid-template-columns: 1fr;
  }

  .planner-controls {
    border-right: 0;
    border-bottom: 1px solid var(--n-border);
  }

  .planner-lower {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .planner-controls,
  .planner-scene,
  .planner-lower {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .signal-world {
    min-height: 13rem;
    padding-right: .25rem;
    padding-left: .25rem;
  }

  .source-screen {
    width: 5.8rem;
    height: 4.3rem;
    font-size: 1rem;
  }

  .reel-disc {
    width: 5.7rem;
    height: 5.7rem;
  }

  .signal-frames {
    right: 3.6rem;
    left: 3.6rem;
  }

  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-strip > div:nth-child(2) {
    border-right: 0;
  }

  .stat-strip > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--n-border);
  }

  .comparison-row {
    grid-template-columns: .55rem 1fr auto;
  }

  .comparison-row > span:nth-last-child(-n + 2) {
    display: none;
  }
}