.morse-desk { --morse-ink: #263b43; --morse-muted: #4b626d; --morse-line: #b8ccd2; max-width: 960px; margin: 0 auto; color: var(--morse-ink); }
.morse-desk [hidden] { display: none !important; }
.morse-desk p { line-height: 1.85; word-break: keep-all; overflow-wrap: anywhere; }
.morse-desk :is(h1, h2, h3) { color: var(--morse-ink); line-height: 1.5; word-break: keep-all; }
.morse-desk a { color: #275966; text-underline-offset: 3px; }
.morse-hero { margin: 28px 0; padding: clamp(22px, 5vw, 40px); background: #edf5f7; border-top: 4px solid #426e7b; }
.morse-kicker { margin: 0 0 12px; font-size: .875rem; font-weight: 700; }
.morse-hero h1 { margin: 0 0 14px; font-size: clamp(1.9rem, 6vw, 2.9rem); letter-spacing: -.04em; }
.morse-hero > p:last-child { margin: 0; color: var(--morse-muted); font-size: 1.0625rem; }
.morse-jumps, .morse-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 22px 0; }
.morse-jumps a { padding: 12px 14px; border: 1px solid #7c9ca7; border-radius: 4px; background: #fff; text-decoration: none; font-weight: 700; }
.morse-workbench, .morse-examples, .morse-table, .morse-how { margin: 36px 0; padding-top: 22px; border-top: 2px solid #89a6af; scroll-margin-top: 90px; }
.morse-desk h2 { margin: 0 0 12px; font-size: 1.375rem; letter-spacing: -.025em; }
.morse-desk h3 { font-size: 1.0625rem; }
.morse-desk label { display: block; margin: 18px 0 8px; font-size: .9375rem; line-height: 1.5; font-weight: 750; }
.morse-desk :is(select, textarea, input) { max-width: 100%; box-sizing: border-box; min-height: 48px; padding: 11px 12px; color: var(--morse-ink); background: #fff; border: 1px solid #7896a1; border-radius: 4px; font: inherit; font-size: 1rem; }
.morse-desk textarea, .morse-manual input { width: 100%; }
.morse-desk textarea { display: block; min-height: 108px; resize: vertical; font-family: var(--font-mono, monospace); }
.morse-desk button { min-height: 48px; padding: 11px 16px; background: #315f6d; color: #fff; border: 1px solid #315f6d; border-radius: 4px; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.morse-desk button:disabled { color: #536671; background: #edf1f3; border-color: #a6b9c2; cursor: default; }
.morse-desk :is(a, button, select, textarea, input):focus-visible { outline: 3px solid #95601d; outline-offset: 4px; }
.morse-result { margin-top: 22px; padding: 20px; border: 1px solid var(--morse-line); background: #fff; }
.morse-result h3 { margin: 0 0 10px; }
.morse-result output { display: block; font-family: var(--font-mono, monospace); font-size: clamp(1.1rem, 3.5vw, 1.45rem); line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
.morse-status { color: var(--morse-muted); font-size: .875rem; min-height: 1.6em; }
.morse-hint, .morse-note { color: var(--morse-muted); font-size: .875rem; }
.morse-desk code { font-family: var(--font-mono, monospace); overflow-wrap: anywhere; }
.morse-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.morse-example { min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--morse-line); scroll-margin-top: 90px; }
.morse-example h3 { margin: 0 0 12px; font-family: var(--font-mono, monospace); font-size: 1.375rem; }
.morse-example p { min-height: 3.4em; }
.morse-example button { width: 100%; text-align: left; }
.morse-table-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.morse-table-grid > div { min-width: 0; }
.morse-desk table { width: 100%; border-collapse: collapse; background: #fff; font-size: .9375rem; }
.morse-desk caption { text-align: left; color: var(--morse-muted); font-size: .8125rem; padding: 6px 0; }
.morse-desk :is(th, td) { border: 1px solid var(--morse-line); padding: 9px 10px; line-height: 1.6; }
.morse-desk thead { background: #edf5f7; }
.morse-desk tbody th { width: 3em; text-align: center; }
.morse-desk td code { font-size: 1.1rem; letter-spacing: .025em; }
.morse-timing { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.morse-timing > div { min-width: 0; padding: 14px 10px; border: 1px solid var(--morse-line); background: #fff; text-align: center; }
.morse-timing dt { font-size: .8125rem; line-height: 1.6; }
.morse-timing dd { margin: 8px 0 0; font-family: var(--font-mono, monospace); font-size: 1.75rem; }
.morse-sources { margin: 32px 0; padding-top: 22px; border-top: 1px solid var(--morse-line); color: var(--morse-muted); }
.morse-sources h2 { font-size: 1rem; }
.morse-sources :is(p, li) { font-size: .8125rem; line-height: 1.9; }
.morse-sources ul { padding-left: 22px; }
@media (max-width: 640px) {
  .morse-example-grid, .morse-table-grid { grid-template-columns: 1fr; }
  .morse-timing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .morse-actions > div { width: 100%; }
  .morse-actions select, .morse-workbench > [data-morse-controls] > select { width: 100%; }
  .morse-result { padding: 16px; }
}