:root {
  color-scheme: dark;
  --bg: #101411;
  --bg-soft: #151a16;
  --panel: rgba(25, 31, 26, 0.9);
  --panel-solid: #191f1a;
  --text: #ede9dc;
  --muted: #8c9389;
  --faint: #414940;
  --line: rgba(237, 233, 220, 0.13);
  --line-strong: rgba(237, 233, 220, 0.24);
  --accent: #dba653;
  --accent-soft: rgba(219, 166, 83, 0.14);
  --green: #9caf87;
  --danger: #d98b76;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #ebe6d8;
  --bg-soft: #e2dccd;
  --panel: rgba(246, 241, 227, 0.88);
  --panel-solid: #f6f1e3;
  --text: #262b25;
  --muted: #70766d;
  --faint: #aaa99f;
  --line: rgba(38, 43, 37, 0.14);
  --line-strong: rgba(38, 43, 37, 0.25);
  --accent: #9b681d;
  --accent-soft: rgba(155, 104, 29, 0.12);
  --green: #536a45;
  --danger: #9b4b3d;
  --shadow: 0 28px 70px rgba(69, 55, 31, 0.13);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; background: var(--bg); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -15%, var(--accent-soft), transparent 33rem),
    linear-gradient(180deg, var(--bg-soft), var(--bg) 24rem);
  font-family: var(--sans);
  transition: background-color 180ms ease, color 180ms ease;
}

button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.grain {
  position: fixed;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  width: min(1160px, calc(100% - 40px));
  height: 82px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.home-link, .brand {
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font: 500 0.66rem var(--mono);
}

.home-link { justify-self: start; display: flex; gap: 9px; align-items: center; }
.home-link span { color: var(--accent); font-size: 1rem; transition: transform 160ms ease; }
.home-link:hover span { transform: translateX(-3px); }

.brand { display: flex; align-items: center; gap: 11px; color: var(--text); font-size: 0.78rem; letter-spacing: 0.28em; }
.brand-mark { display: flex; align-items: center; gap: 3px; height: 8px; }
.brand-mark i, .brand-mark b { display: block; height: 4px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); }
.brand-mark i { width: 4px; }
.brand-mark b { width: 13px; }

.utility-nav { justify-self: end; display: flex; align-items: center; gap: 5px; }
.icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font: 500 0.7rem var(--mono);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.icon-button:hover { color: var(--text); background: var(--accent-soft); }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.theme-button { font-size: 1.1rem; }

.mode-tabs {
  width: min(590px, calc(100% - 36px));
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.mode-tab {
  position: relative;
  padding: 15px 10px 17px;
  border: 0;
  color: var(--muted);
  background: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font: 500 0.72rem var(--mono);
  cursor: pointer;
}
.mode-tab span { margin-right: 7px; color: var(--faint); font-size: 0.55rem; }
.mode-tab::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform 180ms ease; }
.mode-tab.active { color: var(--text); }
.mode-tab.active::after { transform: scaleX(1); }

.app-shell { width: min(720px, calc(100% - 36px)); margin: 0 auto; padding: 56px 0 90px; }
.mode-panel { animation: appear 280ms ease both; }
.mode-panel[hidden] { display: none; }
@keyframes appear { from { opacity: 0; transform: translateY(7px); } }

.panel-heading { text-align: center; margin: 0 auto 35px; }
.eyebrow { margin: 0 0 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.2em; font: 500 0.61rem var(--mono); }
.panel-heading h1 { margin: 0; font: 400 clamp(2.4rem, 8vw, 4.6rem)/1 var(--sans); letter-spacing: -0.055em; }
.panel-heading > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 0.9rem; }
.compact-heading { margin-bottom: 28px; }
.compact-heading h1 { font-size: clamp(2.2rem, 7vw, 3.7rem); }

.radio-stage {
  position: relative;
  min-height: 238px;
  padding: 35px 28px 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(255,255,255,0.018), transparent 55%), var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
}
.radio-stage::before, .radio-stage::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--line-strong); border-radius: 50%; top: 12px; }
.radio-stage::before { left: 12px; }.radio-stage::after { right: 12px; }
.frequency { color: var(--faint); letter-spacing: 0.12em; font: 400 0.58rem var(--mono); }
.frequency span { font-size: 0.48rem; }
.waveform { height: 72px; margin: 14px auto 4px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.waveform i { display: block; width: 2px; height: 6px; border-radius: 2px; background: var(--faint); transition: height 100ms ease, background 100ms ease, box-shadow 100ms ease; }
.waveform.playing i { animation: quiet-wave 800ms ease-in-out infinite alternate; animation-delay: calc(var(--i) * -57ms); }
.waveform i.pulse { height: 42px; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
@keyframes quiet-wave { to { height: calc(10px + (var(--wave) * 1px)); background: var(--accent); } }
.listen-status { min-height: 18px; margin: 0 0 16px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; font: 400 0.57rem var(--mono); }

.replay-button, .primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #17140d;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font: 500 0.67rem var(--mono);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.replay-button { min-width: 150px; padding: 13px 19px; border-radius: 2px; }
.replay-button:hover, .primary-button:hover { transform: translateY(-1px); box-shadow: 0 7px 25px var(--accent-soft); filter: brightness(1.06); }
.replay-button:disabled { opacity: 0.55; cursor: wait; transform: none; }
.play-triangle { display: inline-block; margin-right: 8px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid currentColor; }

.answer-form { margin-top: 31px; }
.answer-form > label, .signal-compose > label { display: block; margin: 0 0 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; font: 500 0.58rem var(--mono); }
.answer-row { display: grid; grid-template-columns: 1fr 48px; border-bottom: 1px solid var(--line-strong); }
.answer-row:focus-within { border-color: var(--accent); }
.answer-row input { min-width: 0; padding: 13px 3px 14px; border: 0; outline: 0; color: var(--text); background: transparent; text-transform: uppercase; letter-spacing: 0.18em; font: 400 clamp(1.05rem, 4vw, 1.35rem) var(--mono); }
.answer-row input::placeholder { color: var(--faint); opacity: 0.7; font-size: 0.72em; }
.square-submit { border: 0; color: var(--accent); background: transparent; font: 300 1.4rem var(--mono); cursor: pointer; }
.feedback { min-height: 21px; margin: 11px 0 0; color: var(--muted); font-size: 0.77rem; }
.feedback.correct { color: var(--green); }.feedback.incorrect { color: var(--danger); }

.zen-footer { margin: 28px 0 25px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.score { display: flex; align-items: center; gap: 11px; color: var(--muted); font: 400 0.63rem var(--mono); }
.score strong { color: var(--text); font-weight: 500; }.score i { width: 2px; height: 2px; background: var(--faint); border-radius: 50%; }
.content-switch { display: flex; border: 1px solid var(--line); border-radius: 3px; padding: 3px; }
.content-switch button { padding: 7px 9px; border: 0; border-radius: 2px; color: var(--muted); background: transparent; text-transform: uppercase; letter-spacing: .09em; font: 500 .52rem var(--mono); cursor: pointer; }
.content-switch button.active { color: var(--text); background: var(--accent-soft); }

.keyboard { display: grid; gap: 5px; user-select: none; }
.keyboard-row { display: flex; justify-content: center; gap: 5px; }
.keyboard button { width: clamp(28px, 8.6vw, 45px); height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: rgba(255,255,255,.015); font: 400 clamp(.56rem, 2vw, .68rem) var(--mono); cursor: pointer; transition: color 100ms ease, border-color 100ms ease, transform 100ms ease; }
.keyboard button:hover { color: var(--text); border-color: var(--line-strong); }
.keyboard button:active { transform: translateY(2px); }
.keyboard .wide-key { width: clamp(45px, 14vw, 73px); }

.decoder-card { padding: 25px 27px 20px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }
.decoded-output { min-height: 69px; color: var(--text); overflow-wrap: anywhere; letter-spacing: 0.11em; font: 400 clamp(1.25rem, 4.8vw, 1.75rem)/1.55 var(--mono); }
.decoded-output:empty::before { content: attr(data-empty); color: var(--faint); font-size: .66em; letter-spacing: .08em; }
.current-code { padding-top: 15px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font: 400 .55rem var(--mono); }
.current-code output { min-height: 23px; color: var(--accent); letter-spacing: .24em; font-size: 1rem; }

.telegraph-key { position: relative; display: flex; width: 176px; height: 176px; margin: 28px auto 14px; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 18px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: radial-gradient(circle at 45% 38%, rgba(255,255,255,.045), transparent 58%), var(--panel); box-shadow: 0 15px 35px rgba(0,0,0,.24), inset 0 0 0 8px var(--bg), inset 0 0 0 9px var(--line); cursor: pointer; touch-action: none; user-select: none; transition: transform 90ms ease, border-color 90ms ease, color 90ms ease, background 90ms ease, box-shadow 90ms ease; }
.telegraph-key::after { content: ""; position: absolute; inset: 13px; border: 1px solid var(--line); border-radius: 50%; pointer-events: none; }
.key-dot { width: 19px; height: 19px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent-soft); transition: transform 90ms ease, box-shadow 90ms ease; }
.key-label { text-transform: uppercase; letter-spacing: .18em; font: 500 .57rem var(--mono); }
.telegraph-key.pressed { transform: scale(.955); border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 7px 18px rgba(0,0,0,.2), inset 0 0 0 8px var(--bg), inset 0 0 0 9px rgba(219,166,83,.4); }
.telegraph-key.pressed .key-dot { transform: scale(1.35); box-shadow: 0 0 28px var(--accent); }
.key-hint { margin: 0; color: var(--muted); text-align: center; font-size: .72rem; }
kbd { padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; color: var(--text); background: var(--panel); font: .64rem var(--mono); }
.edit-controls { margin: 25px auto 0; display: flex; justify-content: center; gap: 10px; }
.edit-controls button, .text-button { padding: 9px 13px; border: 0; color: var(--muted); background: none; text-transform: uppercase; letter-spacing: .12em; font: 500 .56rem var(--mono); cursor: pointer; }
.edit-controls button:hover, .text-button:hover { color: var(--text); }

.signal-compose { padding: 20px 22px 12px; border: 1px solid var(--line); background: var(--panel); }
.signal-compose textarea { width: 100%; resize: vertical; min-height: 78px; padding: 7px 0; border: 0; outline: 0; color: var(--text); background: transparent; text-transform: uppercase; letter-spacing: .1em; font: 400 1rem/1.65 var(--mono); }
.signal-compose textarea::placeholder { color: var(--faint); font-size: .75rem; }
.compose-meta { padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--faint); font: .55rem var(--mono); }
.compose-meta output { color: var(--accent); letter-spacing: .2em; }
.signal-key { width: 156px; height: 156px; margin-top: 20px; }
.signal-edits { margin-top: 4px; }
.primary-button { padding: 14px 20px; border-radius: 2px; }
.send-button { display: block; width: min(100%, 300px); margin: 22px auto 0; }
.send-button span { margin-left: 12px; font-size: .9rem; }
.share-result { margin-top: 22px; padding: 17px; border: 1px solid var(--line); background: var(--accent-soft); }
.share-result p { margin: 0 0 11px; color: var(--muted); font-size: .7rem; }
.share-result > div { display: grid; grid-template-columns: 1fr auto; }
.share-result input { min-width: 0; padding: 10px; border: 1px solid var(--line); color: var(--text); background: var(--bg); font: .64rem var(--mono); }
.share-result button { padding: 0 16px; border: 0; color: #17140d; background: var(--accent); text-transform: uppercase; font: 500 .57rem var(--mono); cursor: pointer; }

.incoming-radio { min-height: 222px; }
.incoming-radio .waveform { margin-top: 0; }
.message-slots { min-height: 25px; margin: 2px auto 22px; color: var(--faint); letter-spacing: .25em; font: 400 .8rem/1.7 var(--mono); }
.incoming-actions { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; }
.live-dot { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }

dialog {
  width: min(530px, calc(100% - 28px));
  max-height: min(82vh, 700px);
  padding: 27px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  color: var(--text);
  background: var(--panel-solid);
  box-shadow: 0 25px 100px rgba(0,0,0,.55);
}
dialog::backdrop { background: rgba(4,7,5,.74); backdrop-filter: blur(4px); }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; }
.dialog-header h2 { margin: 0; font-size: 1.65rem; font-weight: 500; letter-spacing: -.03em; }
.dialog-close { width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.inline-cheat { margin: 14px 0 0; border: 1px solid var(--line); background: rgba(255,255,255,.012); }
.inline-cheat summary { min-height: 45px; padding: 0 15px; display: flex; align-items: center; gap: 10px; color: var(--muted); cursor: pointer; list-style: none; text-transform: uppercase; letter-spacing: .14em; font: 500 .57rem var(--mono); user-select: none; }
.inline-cheat summary::-webkit-details-marker { display: none; }
.inline-cheat summary::before { content: "+"; width: 14px; color: var(--accent); font-size: .9rem; }
.inline-cheat[open] summary::before { content: "−"; }
.inline-cheat summary small { margin-left: auto; color: var(--faint); text-transform: none; letter-spacing: .04em; font-size: .55rem; }
.alphabet-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; padding-top: 1px; background: var(--line); border-top: 1px solid var(--line); }
.alphabet-cell { min-height: 38px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 5px; background: var(--panel-solid); }
.alphabet-cell strong { font: 500 .67rem var(--mono); }.alphabet-cell span { color: var(--accent); font: 400 .61rem var(--mono); letter-spacing: .06em; }
.tips-list { display: grid; gap: 22px; }
.tips-list article { display: grid; grid-template-columns: 35px 1fr; gap: 13px; }
.tips-list article > span { color: var(--accent); font: .57rem var(--mono); }
.tips-list h3 { margin: 0 0 5px; font-size: .9rem; font-weight: 600; }.tips-list p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }.tips-list em { color: var(--text); font-family: var(--mono); }
.setting { margin: 26px 0; }.setting label { display: flex; justify-content: space-between; margin-bottom: 13px; font-size: .76rem; }.setting output { color: var(--accent); font: .61rem var(--mono); }
.setting input { width: 100%; accent-color: var(--accent); }.range-ends { display: flex; justify-content: space-between; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; font: .5rem var(--mono); }
.dialog-done { width: 100%; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--text); background: var(--panel-solid); box-shadow: var(--shadow); font: .63rem var(--mono); transform: translate(-50%, 25px); opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 650px) {
  .site-header { width: calc(100% - 28px); height: 68px; grid-template-columns: 1fr auto; }
  .brand { display: none; }
  .utility-nav { grid-column: 2; }
  .app-shell { padding-top: 39px; }
  .mode-tabs { margin-top: 20px; }
  .radio-stage { min-height: 220px; padding-left: 18px; padding-right: 18px; }
  .zen-footer { align-items: flex-start; flex-direction: column; }
  .content-switch { width: 100%; }.content-switch button { flex: 1; }
  .keyboard { margin-inline: -6px; }.keyboard-row { gap: 3px; }.keyboard button { height: 36px; }
  .alphabet-grid { grid-template-columns: repeat(4, 1fr); }
  .incoming-actions { flex-direction: column-reverse; gap: 14px; }.incoming-actions .primary-button { width: 100%; }
}

@media (max-width: 390px) {
  .home-link { font-size: .57rem; }.icon-button { width: 31px; height: 31px; }
  .mode-tab { letter-spacing: .11em; }.mode-tab span { display: none; }
  .app-shell { width: calc(100% - 24px); }
  dialog { padding: 21px; }
}

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