:root{color-scheme:light;--bg:#efefed;--surface:#fbfbf9;--surface2:#f3f3f0;--surface3:#e8e9e4;--text:#20221f;--muted:#6e726b;--faint:#8c9188;--line:#dadcd5;--line2:#e6e8e1;--accent:#d3431d;--accent-hover:#b53514;--accent-wash:#fceee7;--good:#357554;--good-wash:#e8f2e8;--warn:#95651d;--warn-wash:#faf0db;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--shadow:0 3px 12px #00000003;--scope:#20251f;--trace:#c0f28c}

:root[data-theme=dark]{color-scheme:dark;--bg:#151616;--surface:#1d1f1e;--surface2:#191b1a;--surface3:#282b28;--text:#e6e9e2;--muted:#9b9f97;--faint:#777d73;--line:#343933;--line2:#2b302a;--accent:#ff7649;--accent-hover:#ff916e;--accent-wash:#37251d;--good:#aed99a;--good-wash:#253122;--warn:#e0b46c;--warn-wash:#342c1e;--scope:#111710;--trace:#c1f794;--shadow:none}
*{box-sizing:border-box}
body{margin:0;font:13px/1.5 var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button,a,label,input,select,textarea{touch-action:manipulation}
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.45;cursor:wait}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
button:focus-visible,a:focus-visible,summary:focus-visible,label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
input:focus,textarea:focus,select:focus{outline:1px solid var(--accent);outline-offset:0}
[hidden]{display:none!important}
.appbar{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 max(28px,calc((100vw - 1100px)/2));border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand strong{font-size:17px;letter-spacing:-.65px;font-weight:650}
.brand-mark{width:29px;height:29px;background:var(--accent);color:var(--bg);border-radius:50%;display:grid;place-items:center}
.brand-mark svg{width:21px;height:21px;stroke-width:1.8}
.app-version{font:8px var(--mono);letter-spacing:.5px;color:var(--faint);margin:2px 0 0 5px}
.appbar-right{display:flex;align-items:center;gap:23px}
.repo-link{font:10px var(--mono);color:var(--muted)}
.theme-control{display:flex;align-items:center;gap:6px;color:var(--muted)}
.theme-control svg{width:15px;height:15px}
.theme-control select{border:none;background:transparent;font:10px var(--mono);padding:5px 1px;width:72px;color:var(--muted)}
.app-container{max-width:1156px;margin:auto;padding:0 28px}
.mode-nav{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin:26px 0 26px;gap:16px}
.main-modes,.extra-modes{display:flex;gap:3px}
.nav{font-size:12px;color:var(--muted);padding:11px 16px 14px;position:relative;display:flex;align-items:center;gap:8px}
.main-modes .nav>span{font:19px var(--mono);line-height:1}
.nav.active{color:var(--text);font-weight:600}
.nav.active:after{content:'';position:absolute;height:2px;left:15px;right:15px;bottom:-1px;background:var(--accent)}
.nav:hover{color:var(--text)}
.count{font:9px var(--mono);background:var(--surface3);color:var(--muted);padding:1px 5px;border-radius:2px}
.app-layout{display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:26px;align-items:start}
main{min-width:0}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:62px;margin:0 0 19px}
h1{font-size:25px;line-height:1.2;font-weight:560;letter-spacing:-.9px;margin:0;display:flex;align-items:center;gap:9px}
.heading-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}
.page-heading p{font-size:12px;color:var(--muted);margin:7px 0 0}
.quiet-button{border:1px solid var(--line);border-radius:4px;font:10px var(--mono);color:var(--muted);padding:9px 11px;white-space:nowrap}
.quiet-button:hover{border-color:var(--faint);color:var(--text)}
.panel{border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:24px;box-shadow:var(--shadow)}
.protocol-switch{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 0 18px;margin:0 0 22px}
.protocol-switch button{border:1px solid transparent;padding:6px 11px;font:11px var(--mono);border-radius:3px;color:var(--faint)}
.protocol-switch .selected{color:var(--text);border-color:var(--line);background:var(--surface2)}
.field-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
label,legend{font-size:11px;font-weight:550}
textarea{display:block;width:100%;min-height:175px;background:var(--surface2);border:1px solid var(--line);border-radius:4px 4px 0 0;resize:vertical;padding:16px;font:13px/1.9 var(--mono);letter-spacing:-.2px}
textarea::placeholder,input::placeholder{color:var(--faint)}
.payload-tabs{display:flex;gap:2px}
.payload-tabs button{font:10px var(--mono);color:var(--muted);padding:5px 9px;border-radius:3px}
.payload-tabs .active{background:var(--surface3);color:var(--text)}
.editor-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font:9px var(--mono);color:var(--faint);padding:10px 13px;border:1px solid var(--line);border-top:0;background:var(--surface2);border-radius:0 0 4px 4px}
.editor-foot b{font-weight:400;color:var(--muted)}
.field-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;margin-top:22px}
.field-row>label,.full-label{display:flex;flex-direction:column;gap:9px;min-width:0}
select,input[type=text],input:not([type]),input[type=search],input[type=datetime-local]{width:100%;height:38px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;font-size:11px;background:var(--surface2);min-width:0}
.field-help{font-size:10px;line-height:1.7;color:var(--muted);margin:9px 0 0}
.field-help a{text-decoration:underline;text-underline-offset:3px}
.repeat-field{border:0;margin:0;padding:0;min-width:0}
.repeat-field legend{margin:0 0 9px;padding:0}
.repeat-control{display:flex;gap:0;border:1px solid var(--line);border-radius:4px;padding:3px;background:var(--surface2);height:38px}
.repeat-control button{width:33.333%;font:12px var(--mono);color:var(--muted);border-radius:2px}
.repeat-control .selected{color:var(--accent);background:var(--accent-wash)}
.inline-note{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:13px;border-radius:4px;background:var(--surface2);border:1px solid var(--line2)}
.inline-note p{font-size:10px;color:var(--muted);line-height:1.75;margin:0;flex:1}
.tiny-icon{font:18px var(--mono);line-height:1;color:var(--accent);margin-top:2px}
.help-button{width:17px;height:17px;border:1px solid var(--line);border-radius:50%;font:10px var(--mono);color:var(--muted);flex-shrink:0}
.output-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 0;margin-top:23px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.output-strip>div{display:flex;flex-direction:column;gap:5px}
.output-strip>div>span{font:8px var(--mono);letter-spacing:.6px;color:var(--faint)}
.output-strip strong{font:13px var(--mono);letter-spacing:-.4px}
.transmit-actions{display:flex;gap:8px;margin-top:19px}
.primary,.secondary,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:11px 16px;font-size:11px;font-weight:550;border-radius:4px;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.secondary{border-color:var(--line);background:var(--surface2);color:var(--text)}
.secondary:hover{border-color:var(--faint)}
.secondary svg{width:15px;height:15px}
.transmit-actions .primary{flex:1}
.transmit-actions .secondary{flex:.7}
.icon-button{border-color:var(--line);font:22px var(--mono);width:43px;padding:9px;color:var(--muted)}
.icon-button:hover{color:var(--accent)}
#play-icon{font-size:9px}
.below-panel{font:9px var(--mono);color:var(--faint);margin:14px 0 0;text-align:center}
.instrument-rail{position:sticky;top:24px;padding-top:81px;display:flex;flex-direction:column;gap:18px}
.scope-panel{padding:18px 16px;background:var(--scope);color:#89a279;border:1px solid #35412e;border-radius:7px;box-shadow:inset 0 1px #ffffff08}
.scope-top,.scope-bottom{font:8px var(--mono);letter-spacing:.7px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.scope-top>span:first-child{display:flex;align-items:center;gap:6px}
.scope-top i{height:4px;width:4px;background:#bde294;display:inline-block;border-radius:50%;box-shadow:0 0 9px #bcff6533}
.scope-channel{font-size:7px;color:#63765c}
.scope-plot{height:132px;position:relative;margin:18px 0 14px;background:linear-gradient(#8aac7030 1px,transparent 1px),linear-gradient(90deg,#8aac7017 1px,transparent 1px);background-size:100% 25%,25% 100%;border:1px solid #819b6822}
.scope-plot canvas{height:108px;width:100%;display:block}
.scope-axis{position:absolute;bottom:3px;left:4px;right:4px;display:flex;align-items:center;justify-content:space-between;font:6px var(--mono);letter-spacing:.4px;color:#6b845d}
.scope-bottom{color:#a5ba94;padding-bottom:14px;border-bottom:1px solid #819b6833}
.scope-frequency{display:flex;justify-content:space-between;gap:12px;padding-top:13px;align-items:center}
.scope-frequency>span{font:7px var(--mono);letter-spacing:.5px;color:#6f8762}
.scope-frequency strong{font:9px var(--mono);color:#9db68b}
.rail-card{padding:18px 17px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.rail-heading{display:flex;gap:8px;align-items:center}
.rail-icon{font:22px var(--mono);color:var(--accent);line-height:1}
.rail-heading h2{font-size:12px;font-weight:550;letter-spacing:-.1px;margin:0}
.rail-card>p{font-size:11px;line-height:1.8;color:var(--muted);margin:12px 0 14px}
.text-button{font:10px/1.6 var(--mono);color:var(--accent);padding:0;cursor:pointer;background:none}
.text-button:hover{text-decoration:underline;text-underline-offset:3px}
.rail-card .text-button{font-size:9px}
.local-indicator{display:flex;gap:7px;align-items:center;justify-content:center;color:var(--faint);font:9px var(--mono)}
.local-indicator>span{width:4px;height:4px;border-radius:50%;background:var(--good)}
.keyboard-hint{font:9px/1.7 var(--mono);color:var(--faint);text-align:center}
.keyboard-hint>span{font:9px var(--sans);display:block;margin-top:6px}
kbd{font:8px var(--mono);border:1px solid var(--line);padding:2px 5px;border-radius:3px;margin-right:5px}
.same-intro{display:flex;gap:12px;align-items:flex-start}
.tag{font:8px var(--mono);letter-spacing:.5px;padding:4px 6px;border:1px solid var(--line);border-radius:3px;color:var(--muted);white-space:nowrap}
.same-intro>.tag{margin-top:3px}
.same-intro p{font-size:11px;color:var(--muted);line-height:1.75;margin:0}
.location-section{margin-top:22px}
.location-section>.field-heading{gap:10px}
.location-section .text-button{font-size:9px}
.location-summary{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.location-chip{padding:10px 12px;background:var(--surface2);border:1px solid var(--line2);border-radius:4px}
.location-chip-top{display:flex;align-items:center;gap:9px;font-size:10px;flex-wrap:wrap}
.location-chip code{font:11px var(--mono);color:var(--accent);letter-spacing:1px}
.location-chip p{font-size:9px;color:var(--muted);line-height:1.7;margin:5px 0 0}
.location-chip .code-parts{font:9px/1.8 var(--mono);color:var(--faint);margin-top:6px}
.code-parts span{color:var(--muted)}
details{font-size:11px}
summary{cursor:pointer;font-size:11px;color:var(--muted);line-height:1.7}
details[open]>summary{color:var(--text);margin-bottom:15px}
#location-help{padding:13px 0;border-bottom:1px solid var(--line2);margin-top:4px}
#location-help p{font-size:10px;line-height:1.8;color:var(--muted)}
#location-help a{font-size:9px;color:var(--accent)}
.digit-breakdown{display:grid;grid-template-columns:.8fr 1fr 1.1fr;gap:10px;margin:12px 0}
.digit-breakdown>div{border-left:1px solid var(--line);padding-left:10px;min-width:0}
.digit-breakdown code{display:block;font:20px var(--mono);color:var(--accent);margin-bottom:10px;letter-spacing:1px}
.digit-breakdown strong{display:block;font-size:9px;font-weight:550}
.digit-breakdown p{font-size:9px!important;margin:5px 0 0;line-height:1.7!important}
.search-label{font-size:10px;display:block;margin:15px 0 8px;color:var(--muted)}
.search-results:not(:empty){border:1px solid var(--line);border-radius:4px;max-height:220px;overflow:auto;margin-top:5px}
.search-results button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:10px;text-align:left;font-size:10px;border-bottom:1px solid var(--line2)}
.search-results button:last-child{border-bottom:0}
.search-results button:hover{background:var(--surface3)}
.search-results code{font:10px var(--mono);color:var(--accent);white-space:nowrap}
.search-empty{font-size:10px;padding:12px;color:var(--muted)}
.full-label{margin-top:19px}
.check-row{display:flex;gap:7px;align-items:center;font-size:10px;color:var(--muted);font-weight:400;margin:12px 0 0}
.check-row input{accent-color:var(--accent);width:13px;height:13px;margin:0}
.raw-header{background:var(--surface2);border:1px solid var(--line);border-radius:4px;padding:12px;margin-top:19px}
.raw-header>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.raw-header span{font:8px var(--mono);letter-spacing:.5px;color:var(--faint)}
.raw-header .text-button{font-size:9px}
.raw-header code{font:11px/1.9 var(--mono);color:var(--muted);display:block;overflow-wrap:anywhere}
.advanced{border-bottom:1px solid var(--line);padding:15px 0}
.advanced[open]{padding-bottom:18px}
.advanced textarea{min-height:75px;border-radius:4px;font-size:11px}
.advanced .full-label{margin-top:12px}
.attachment{display:inline-block;font:10px var(--mono);color:var(--accent);margin-top:15px;cursor:pointer}
.attachment input,.file-drop input,.import-audio input{position:absolute;height:1px;width:1px;overflow:hidden;opacity:0}
.advanced #clear-voice{margin-top:10px}
.file-drop{height:212px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px dashed var(--faint);background:var(--surface2);border-radius:4px;cursor:pointer}
.file-drop svg{width:25px;height:25px;color:var(--accent)}
.file-drop strong{font:12px var(--mono);max-width:90%;overflow-wrap:anywhere}
.file-drop>span{font-size:10px;color:var(--muted)}
.file-drop.dragover{background:var(--accent-wash);border-color:var(--accent)}
.receive-actions{display:flex;gap:9px}
.receive-actions .primary{flex:1}
.receive-actions .secondary{flex:.7}
.receive-actions svg{height:16px;width:16px}
.rx-status{display:flex;align-items:flex-start;gap:7px;font-size:11px;line-height:1.7;color:var(--muted);padding:15px 0;border-bottom:1px solid var(--line2);margin-bottom:18px;min-height:55px}
.status-dot{height:5px;width:5px;flex-shrink:0;border-radius:50%;background:var(--faint);margin-top:6px}
.status-dot.active{background:var(--good);box-shadow:0 0 0 3px var(--good-wash);animation:pulse 1.5s ease infinite}
.status-dot.error{background:var(--accent)}
.listen.listening{background:var(--good);border-color:var(--good)}
.empty-result{min-height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:var(--surface2);border:1px dashed var(--line);border-radius:5px;padding:25px}
.empty-result>svg{width:39px;height:39px;color:var(--faint);stroke-width:1;margin-bottom:18px}
.empty-result strong{font-size:14px;font-weight:500;letter-spacing:-.3px}
.empty-result p{font-size:11px;line-height:1.9;color:var(--muted);margin:10px 0 22px}
.empty-result .text-button{font-size:9px}
.receiver-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:19px}
.receiver-foot>span{font:8px var(--mono);color:var(--faint)}
.receiver-foot .text-button{font-size:9px}
.diagnostic-panel{border:1px solid var(--line);border-radius:5px;padding:14px 16px;margin-top:17px;background:var(--surface)}
.diagnostic-panel summary{font-size:10px}
.diagnostic-panel summary>span{float:right;font:8px var(--mono);color:var(--faint);padding-top:4px}
.diagnostic-panel p{font-size:10px;color:var(--muted);line-height:1.8}
.diagnostic-panel dl{margin:0}
.diagnostic-panel dl>div{display:flex;gap:15px;justify-content:space-between;border-top:1px solid var(--line2);padding:9px 0;font-size:10px}
.diagnostic-panel dt{color:var(--faint)}
.diagnostic-panel dd{margin:0;text-align:right;font:10px var(--mono);overflow-wrap:anywhere}
.copy-progress{padding:15px;background:var(--surface2);border:1px solid var(--line);border-radius:4px;margin-bottom:17px}
.copy-progress-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px}
.copy-progress-heading strong{font:12px var(--mono);color:var(--accent)}
.copy-slots{display:flex;gap:8px;margin-top:13px}
.copy-slot{flex:1;padding:10px;border:1px solid var(--line);border-radius:3px;font:10px var(--mono);display:flex;gap:8px;align-items:center;color:var(--faint)}
.copy-slot.received{background:var(--good-wash);color:var(--good);border-color:var(--good)}
.copy-slot.announced{border-color:var(--warn);color:var(--warn)}
.copy-progress p{font-size:10px;line-height:1.8;color:var(--muted);margin:12px 0 0}
#result{padding:20px;border:1px solid var(--line);border-radius:5px;overflow-wrap:anywhere;background:var(--surface2)}
.result-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}
.result-heading strong{font:10px var(--mono);letter-spacing:.3px;color:var(--good)}
.result-heading time{font:8px var(--mono);color:var(--faint);white-space:nowrap}
.result-heading .pending{color:var(--warn)}
.result-heading .conflict{color:var(--accent)}
.result-text{font:13px/1.9 var(--mono);white-space:pre-wrap;margin:0;max-height:300px;overflow:auto}
.result-actions{display:flex;gap:18px;margin-top:19px}
.result-actions button{font-size:9px}
.result-meta{font:8px/1.8 var(--mono);color:var(--faint);margin-top:17px;letter-spacing:.2px}
.decoded-fields{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.decoded-fields>div{min-width:0;font-size:11px;line-height:1.7}
.decoded-fields span{display:block;font:8px var(--mono);color:var(--faint);margin-bottom:5px;letter-spacing:.5px}
.decoded-raw{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font:10px/1.8 var(--mono);color:var(--muted)}
.lesson-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 16px}
.lesson-tabs button{font:10px var(--mono);color:var(--muted);border:1px solid var(--line);padding:8px 11px;border-radius:3px}
.lesson-tabs .selected{color:var(--accent);border-color:var(--accent);background:var(--accent-wash)}
.lesson h2{font-size:24px;letter-spacing:-.7px;line-height:1.3;font-weight:500;margin:18px 0 17px}
.lesson h3{font-size:14px;letter-spacing:-.2px;font-weight:550;margin:27px 0 12px}
.lesson p,.lesson li{font-size:12px;line-height:1.95;color:var(--muted);margin:12px 0}
.lesson b{color:var(--text);font-weight:550}
.lesson ul{padding-left:18px}
.lesson li{padding-left:5px;margin:12px 0}
.lesson .caption{font:9px var(--mono);text-align:center;color:var(--faint);margin-top:10px}
.bit-instrument{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 30px;background:var(--surface2);border:1px solid var(--line);border-radius:4px;margin-top:23px}
.bit-instrument>div{display:flex;flex-direction:column;align-items:center;gap:9px}
.bit-key{width:46px;height:49px;font:25px var(--mono);border:1px solid var(--line);border-bottom:3px solid var(--line);background:var(--surface);border-radius:5px;color:var(--accent)}
.bit-key:active{transform:translateY(2px);border-bottom-width:1px}
.bit-instrument span{font:8px var(--mono);color:var(--muted);white-space:nowrap}
.bit-instrument>svg{width:65%;height:70px;color:var(--accent);stroke-width:1}
.byte-explorer{display:grid;grid-template-columns:1fr 50px;gap:10px;align-items:center;background:var(--surface2);border:1px solid var(--line);padding:15px;border-radius:4px}
.byte-explorer label{color:var(--muted);font-size:10px}
.byte-explorer input{font-family:var(--mono);text-align:center}
.byte-explorer output{grid-column:1/-1;font:11px/1.8 var(--mono);color:var(--accent);overflow-wrap:anywhere}
.packet-diagram{display:flex;flex-wrap:wrap;margin:18px 0}
.packet-diagram span{padding:10px;border:1px solid var(--line);margin:0 -1px -1px 0;font:9px var(--mono);background:var(--surface2);color:var(--muted)}
.packet-diagram span:nth-child(3){color:var(--accent);background:var(--accent-wash)}
.verification-demo{padding:23px;border:1px solid var(--line);border-radius:5px;background:var(--surface2);margin:22px 0;text-align:center}
.demo-copies{display:flex;justify-content:center;gap:27px;margin-bottom:17px}
.demo-copies>span{font:25px var(--mono);color:var(--good)}
.demo-copies>span:last-child{color:var(--faint)}
.demo-copies small{display:block;font:9px var(--mono);color:var(--muted);margin-top:4px}
.verification-demo>strong{font:11px var(--mono);color:var(--warn)}
.verification-demo>p{font-size:10px;margin-bottom:0}
.same-sequence{display:flex;gap:8px;align-items:center;margin:20px 0;padding:15px;border:1px solid var(--line);border-radius:4px;background:var(--surface2);flex-wrap:wrap}
.same-sequence span{font:9px var(--mono);line-height:1.8}
.same-sequence b{color:var(--faint);font-weight:400}
.header-map{background:var(--surface2);border:1px solid var(--line);border-radius:4px;padding:16px}
.header-map>code{font:11px/1.9 var(--mono);color:var(--accent);overflow-wrap:anywhere}
.header-map dl{margin:17px 0 0}
.header-map dl>div{display:grid;grid-template-columns:75px 1fr;gap:12px;border-top:1px solid var(--line2);padding:12px 0}
.header-map dl>div:last-child{padding-bottom:0}
.header-map dt{font:10px var(--mono);color:var(--text);padding-top:3px;overflow-wrap:anywhere}
.header-map dd{font-size:11px;color:var(--muted);line-height:1.8;margin:0}
.study-note{padding:12px 14px;border-left:2px solid var(--accent);background:var(--accent-wash);font-size:10px!important}
.source-links{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.source-links a{color:var(--accent);font:9px var(--mono)}
.history-empty{padding:70px 20px;text-align:center;border:1px dashed var(--line);border-radius:5px;color:var(--faint);font:12px var(--mono)}
.history-card{border:1px solid var(--line);border-radius:5px;background:var(--surface);padding:22px;margin-bottom:17px;overflow-wrap:anywhere}
.history-card .result-text{max-height:160px}
#rail-location{border-top:1px solid var(--line);padding-top:13px;margin-bottom:15px;font:11px/1.8 var(--mono);color:var(--muted)}
#rail-location code{color:var(--accent);letter-spacing:2px;font-size:17px;display:block;margin-bottom:8px}
footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:39px;min-height:65px;border-top:1px solid var(--line);color:var(--faint);font:8px var(--mono);letter-spacing:.35px}
footer b{font-weight:400;color:var(--accent);padding:0 5px}
#toast{position:fixed;bottom:23px;left:50%;transform:translateX(-50%);max-width:min(92vw,550px);padding:13px 20px;background:var(--text);color:var(--bg);font-size:11px;line-height:1.8;border-radius:5px;box-shadow:0 3px 30px #00000018;z-index:100}
#toast.error{background:var(--accent);color:var(--bg)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes pulse{50%{opacity:.4}
}
@media(max-width:950px){.app-layout{grid-template-columns:minmax(0,1fr) 245px;gap:20px}
.appbar{padding:0 25px}
.app-container{padding:0 25px}
.panel{padding:21px}
.instrument-rail{gap:15px}
.scope-panel{padding:15px 12px}
.scope-channel{display:none}
}
@media(max-width:760px){.appbar{height:62px;padding:0 20px}
.appbar-right{gap:15px}
.app-version{font-size:7px;margin-left:0}
.repo-link{font-size:9px}
.theme-control select{font-size:9px;width:65px}
.brand strong{font-size:16px}
.app-container{padding:0 20px}
.app-layout{display:flex;flex-direction:column;gap:21px}
main{width:100%}
.instrument-rail{position:static;padding:0;width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:14px}
.scope-panel{padding:17px}
.scope-plot{height:110px}
.scope-plot canvas{height:87px}
.scope-frequency{padding-top:11px}
.rail-card{padding:17px}
.local-indicator{grid-column:1/-1}
.keyboard-hint{display:none}
.mode-nav{margin-top:18px;margin-bottom:21px}
.nav{padding:10px 13px 13px;font-size:11px}
.nav.active:after{left:12px;right:12px}
.main-modes .nav>span{font-size:17px}
.page-heading{min-height:55px;margin-bottom:17px}
.page-heading h1{font-size:24px}
.panel{padding:22px}
.scope-channel{display:block}
footer{margin-top:25px;font-size:7px}
.output-strip{gap:20px}
}
@media(max-width:480px){.appbar{padding:0 16px}
.app-version{display:none}
.brand-mark{height:26px;width:26px}
.brand{gap:8px}
.appbar-right{gap:13px}
.theme-control{gap:3px}
.theme-control select{width:64px}
.app-container{padding:0 16px}
.nav{padding:10px 9px 13px;font-size:10px;gap:5px}
.extra-modes .nav{padding-left:10px;padding-right:10px}
.nav.active:after{left:9px;right:9px}
.main-modes .nav>span{font-size:15px}
.count{font-size:8px;padding:1px 4px}
.mode-nav{gap:7px}
.page-heading{margin-bottom:17px}
h1{font-size:23px}
.page-heading p{font-size:11px}
.quiet-button{font-size:9px;padding:8px 9px}
.panel{padding:18px}
.field-row{gap:12px;grid-template-columns:1.2fr 1fr}
.field-row select{font-size:10px;padding-left:8px;padding-right:3px}
.protocol-switch{margin-bottom:20px}
.protocol-switch button{font-size:10px}
.field-row label,legend{font-size:10px}
.output-strip{gap:14px}
.output-strip strong{font-size:12px}
.output-strip>div>span{font-size:7px}
.primary,.secondary{font-size:10px;padding:10px 12px}
.transmit-actions{gap:6px}
.icon-button{width:39px}
.instrument-rail{grid-template-columns:1fr}
.scope-panel{padding:17px 18px}
.scope-plot{height:115px}
.scope-plot canvas{height:93px}
.rail-card{padding:18px}
.rail-card>p{font-size:11px}
.scope-channel{display:block}
.local-indicator{margin:2px 0 4px}
.scope-frequency>span,.scope-bottom,.scope-top{font-size:8px}
.scope-frequency strong{font-size:10px}
.receiver-foot>span{font-size:7px}
.receiver-foot .text-button{font-size:8px}
.receive-actions{gap:7px}
.empty-result{min-height:270px;padding:25px 15px}
.copy-slot{font-size:9px;padding:9px 7px;gap:5px}
.copy-progress{padding:12px}
.copy-progress-heading{font-size:9px}
.copy-progress-heading strong{font-size:11px}
.copy-progress p{font-size:9px}
#result{padding:16px}
.result-heading strong{font-size:9px}
.result-heading time{font-size:7px}
.result-text{font-size:12px}
.location-section .field-heading{align-items:center}
.location-section .field-heading>label{font-size:10px}
.location-section .text-button{font-size:8px}
.location-chip-top{font-size:9px}
.location-chip code{font-size:10px}
.digit-breakdown{gap:8px}
.digit-breakdown>div{padding-left:7px}
.digit-breakdown strong{font-size:8px}
.digit-breakdown p{font-size:8px!important}
.lesson-tabs{gap:4px}
.lesson-tabs button{font-size:8px;padding:8px 9px}
.lesson h2{font-size:22px}
.lesson p,.lesson li{font-size:11px}
.bit-instrument{padding:20px 16px;gap:14px}
.byte-explorer output{font-size:10px}
.header-map{padding:13px}
.header-map>code{font-size:10px}
.header-map dl>div{grid-template-columns:65px 1fr;gap:10px}
.header-map dd{font-size:10px}
.header-map dt{font-size:9px}
.source-links a{font-size:8px}
.diagnostic-panel summary>span{font-size:7px}
.diagnostic-panel summary{font-size:9px}
.diagnostic-panel dd{font-size:9px;max-width:63%}
.history-card{padding:17px}
footer{font-size:6px;letter-spacing:.1px;gap:12px}
.below-panel{font-size:8px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}


.input-monitor{padding:14px;background:var(--surface2);border:1px solid var(--line);border-radius:4px;margin-bottom:17px}
.input-monitor-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.input-monitor-head strong{font-size:10px;font-weight:500}
.input-monitor-head>span{font:9px var(--mono);color:var(--muted);white-space:nowrap}
.input-meter{height:5px;border-radius:2px;background:var(--surface3);overflow:hidden;margin-top:12px}
.input-meter>span{display:block;width:0;height:100%;background:var(--good);transition:width .15s linear}
.input-meter.clipping>span{background:var(--accent)}
.input-monitor>p{font-size:10px;line-height:1.8;color:var(--muted);margin:11px 0}
.input-stage{border-top:1px solid var(--line2);padding-top:10px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.input-stage>span{font:8px var(--mono);color:var(--faint)}
.input-stage>strong{font:9px var(--mono);font-weight:400;color:var(--accent);text-align:right}
.input-monitor>.text-button{margin-top:12px}
.save-capture{display:block;margin-top:15px}
.diagnostic-panel>.field-help{font-size:9px}
@media(prefers-reduced-motion:reduce){.input-meter>span{transition:none}
}


.receiver-tuning{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.receiver-tuning>div{display:flex;align-items:center;justify-content:space-between;gap:16px}
.receiver-tuning label{font-size:11px;color:var(--muted)}
.receiver-tuning select{width:135px}
.receiver-tuning p{font-size:10px;line-height:1.8;color:var(--muted);margin:9px 0 0}
.copy-slot{flex-direction:column;align-items:flex-start}
.copy-slot small{font:8px/1.6 var(--mono);color:inherit}
.copy-slot>span{white-space:nowrap}


.import-audio.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}


.playback-timeline{margin:-2px 0 16px;padding:11px 0;border-top:1px solid #819b6833;border-bottom:1px solid #819b6833}
.playback-timeline>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:8px/1.6 var(--mono);color:#b3c9a2}
.playback-timeline>div>span:last-child{white-space:nowrap;color:#d7ebc6}
.playback-timeline progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:3px;border:0;margin:10px 0 9px;background:#819b6826;color:#c1f794;border-radius:2px;overflow:hidden}
.playback-timeline progress::-webkit-progress-bar{background:#819b6826}
.playback-timeline progress::-webkit-progress-value{background:#c1f794}
.playback-timeline progress::-moz-progress-bar{background:#c1f794}
.playback-timeline p{margin:0;color:#819b70;font:6px/1.6 var(--mono);letter-spacing:.4px}


.morse-tone{display:flex;flex-direction:column;gap:5px;justify-content:flex-end;padding-bottom:3px}
.morse-tone>span{font:8px var(--mono);letter-spacing:.6px;color:var(--faint)}
.morse-tone strong{font:18px var(--mono);font-weight:400}
.morse-tone small{font:8px/1.8 var(--mono);color:var(--muted)}
.morse-preview>code,.morse-received-code{font:14px/2 var(--mono);letter-spacing:1px;white-space:pre-wrap;overflow-wrap:anywhere}
.morse-received-code{color:var(--muted);margin-top:12px}
.morse-receive-speed{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line2);margin-top:12px;padding-top:12px}
.morse-receive-speed select{width:135px}
.morse-receive-speed label{font-size:10px;color:var(--muted)}
.morse-table{width:100%;border-collapse:collapse;margin:24px 0;color:var(--text);table-layout:fixed}
.morse-table caption{font-size:13px;font-weight:550;text-align:left;padding-bottom:11px}
.morse-table th{text-align:left;font:8px var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--faint);padding:9px 6px;border-bottom:1px solid var(--line)}
.morse-table td{border-bottom:1px solid var(--line2);padding:6px;vertical-align:middle}
.morse-table td:nth-child(2),.morse-table th:nth-child(2){border-right:1px solid var(--line);padding-right:12px}
.morse-table td:nth-child(3),.morse-table th:nth-child(3){padding-left:14px}
.morse-table code{font:15px var(--mono);letter-spacing:1px;white-space:nowrap}
.morse-key{min-width:32px;min-height:36px;font:15px var(--mono);border:1px solid transparent;border-radius:3px;color:var(--accent)}
.morse-key:hover,.morse-key:focus-visible{background:var(--accent-wash);border-color:var(--accent)}
.morse-timing{display:grid;grid-template-columns:1fr 1fr 1.4fr;border:1px solid var(--line);border-radius:4px;background:var(--surface2);padding:16px;gap:15px}
.morse-timing span{font:9px/1.8 var(--mono);color:var(--muted)}
.morse-timing b{display:block;font:22px var(--mono);color:var(--accent);margin-bottom:9px}
.morse-example{display:flex;flex-direction:column;gap:12px;padding:17px;border:1px solid var(--line);background:var(--surface2);border-radius:4px}
.morse-example strong{font:11px var(--mono);font-weight:400}
.morse-example code{font:12px/2 var(--mono);color:var(--accent);overflow-wrap:anywhere}
.lesson ol{padding-left:20px}
.protocol-switch{flex-wrap:wrap}
@media(max-width:480px){.morse-table code{font-size:12px;letter-spacing:0}
.morse-table th{font-size:7px}
.morse-table td,.morse-table th{padding-left:3px;padding-right:3px}
.morse-table td:nth-child(3),.morse-table th:nth-child(3){padding-left:8px}
.morse-table td:nth-child(2){padding-right:6px}
.morse-timing{padding:12px;gap:10px}
.morse-timing span{font-size:8px}
.morse-timing b{font-size:17px}
.playback-timeline>div{font-size:8px}
}