:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#101512;color:#f1f5ec;--muted:#aab9ae;--accent:#c9fb80;--line:#35443b}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{width:min(100%,38rem);margin:auto;padding:max(2rem,env(safe-area-inset-top)) 1.15rem max(2rem,env(safe-area-inset-bottom))}header{padding:.4rem 0 1.3rem}.brand,.eyebrow,.meta,.view span{font:700 .75rem ui-monospace,monospace;letter-spacing:.13em}.brand span{display:inline-block;color:var(--accent);background:#273723;border-radius:.45rem;padding:.55rem;margin-right:.35rem}.eyebrow{margin:2rem 0 .5rem;color:var(--accent)}h1{font-size:clamp(2.7rem,10vw,4.5rem);letter-spacing:-.075em;line-height:1;margin:0}.intro,.hint,footer,.status,.placeholder{color:var(--muted);line-height:1.45}.intro{margin:.7rem 0 0}nav{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;background:#1a241e;border:1px solid var(--line);padding:.35rem;border-radius:.85rem;margin-bottom:.85rem}button{font:inherit;font-weight:700;min-height:48px;border-radius:.55rem;color:inherit;background:#27362c;border:1px solid var(--line);padding:.45rem .85rem;cursor:pointer}nav button{background:transparent;border-color:transparent}nav button[aria-pressed=true],.primary{background:var(--accent);color:#172113;border-color:transparent}button:disabled{opacity:.46;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}section{border:1px solid var(--line);background:#1a241e;border-radius:1rem;padding:1rem}h2,h3{margin:0}.hint{margin:.35rem 0 .9rem}textarea{display:block;width:100%;resize:vertical;background:#101512;color:inherit;border:1px solid var(--line);border-radius:.6rem;padding:.8rem;font:inherit;font-size:1rem}.meta,.actions{display:flex;justify-content:space-between;gap:.5rem;margin:.7rem 0}.meta{letter-spacing:normal;color:var(--muted)}.primary{flex:1}details{color:var(--muted);padding:.5rem 0}summary{cursor:pointer}#morse{font:1rem/1.5 ui-monospace,monospace;overflow-wrap:anywhere;color:var(--accent)}progress{width:100%;accent-color:var(--accent)}.status{margin:.65rem 0 0;min-height:1.45em}.view{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-radius:.6rem;background:#101512;border:1px solid var(--line)}video{width:100%;height:100%;position:absolute;object-fit:contain}.guide{z-index:1;width:28%;aspect-ratio:4/3;border:2px solid var(--accent);border-radius:.4rem;box-shadow:0 0 0 1px #101512}.view span{position:absolute;z-index:1;bottom:.6rem;left:.6rem;padding:.4rem;background:#101512;border-radius:.25rem}.result{margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem}.result p{overflow-wrap:anywhere;margin:.4rem 0 .6rem}footer{font-size:.82rem;padding:0 .2rem}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

body > video{position:fixed;width:1px;height:1px;bottom:0;left:0;opacity:.01;pointer-events:none}

.signal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem .75rem;border:1px solid var(--line);border-radius:.55rem;margin-top:.75rem;padding:.65rem .7rem;font:700 .8rem ui-monospace,monospace;color:var(--muted)}
.signal [data-lit=true]{color:var(--accent)}.signal-hint{font-size:.85rem;margin-top:.55rem}
.handshake{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}.handshake input{width:1.2rem;height:1.2rem;accent-color:var(--accent)}

.link-state{display:inline-block;border-radius:2rem;padding:.35rem .7rem;margin:.35rem 0 .65rem;background:#27362c;color:#dce9df;font-weight:700;font-size:.85rem}
.link-state[data-state=waiting]{background:#554019;color:#ffe3a0}
.link-state[data-state=linked]{background:#245232;color:#d4ffcf}
.link-state[data-state=error]{background:#652d29;color:#ffdad5}
.view:has(video){margin-bottom:.55rem}

.morse-stream{background:#101512;border:1px solid var(--line);border-radius:.55rem;min-height:3rem;padding:.65rem;color:var(--accent);font:700 1.15rem/1.5 ui-monospace,monospace;letter-spacing:.1em;white-space:pre-wrap;overflow-wrap:anywhere}
.morse-stream[data-active=true]{border-color:var(--accent)}
.brand .app-version{display:inline-block;margin:0 0 0 .2rem;padding:.13rem .28rem;border-radius:.25rem;background:#273723;color:var(--accent);font:700 .62rem ui-monospace,monospace;letter-spacing:0;vertical-align:middle}

.message-history{list-style:none;padding:0;margin:.55rem 0 .7rem;display:grid;gap:.45rem}
.message-history li{padding:.55rem .65rem;border:1px solid var(--line);border-radius:.45rem;overflow-wrap:anywhere}

.guide{width:36%;aspect-ratio:1}

main:has(#receiveMode[aria-pressed=true]) header{display:none}
.receive-reading{position:sticky;top:calc(max(.5rem,env(safe-area-inset-top)) + 2rem);z-index:2;padding:.65rem;background:#101512;border:1px solid var(--line);border-radius:.65rem}
.incoming-text{margin:.4rem 0 0;min-height:1.6em;max-height:5em;overflow:auto;overflow-wrap:anywhere;font-size:1.3rem;line-height:1.3;font-weight:700}
.message-history{max-height:7rem;overflow:auto}
.receive-aim{margin-top:1rem}
#receiveView video{transform:scale(var(--receive-zoom,1))}
.zoom-control{display:flex;align-items:center;gap:.65rem;color:var(--muted);font-size:.85rem;margin:.6rem 0}
.zoom-control input{min-width:0;flex:1;accent-color:var(--accent)}
.zoom-control output{min-width:3ch;color:var(--accent);text-align:right}
.receive-diagnostics{margin-top:.55rem}

.chat-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;background:#101512;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem 0 .65rem}
.instructions{position:relative;padding:.25rem 0;z-index:3}
.instructions>div{position:absolute;right:0;top:100%;width:min(82vw,24rem);background:#1a241e;border:1px solid var(--line);border-radius:.65rem;padding:.8rem;box-shadow:0 6px 22px #101512;color:#f1f5ec}
.instructions h2{font-size:1rem}.instructions p{font-size:.85rem;margin:.5rem 0}
.chat-thread{min-height:6.5rem;margin-bottom:.65rem}
.chat-thread .message-history{max-height:33vh;margin:0;gap:.55rem}
.chat-thread li{width:fit-content;max-width:88%;padding:.5rem .7rem;background:#26352a;white-space:pre-wrap}
.chat-thread li[data-direction=out]{justify-self:end;background:#c9fb80;color:#172113}
.chat-thread li small{display:block;font-size:.65rem;opacity:.78;margin-bottom:.18rem}
.chat-thread .incoming-text{width:fit-content;max-width:88%;min-height:0;padding:.4rem .55rem;border:1px dashed var(--line);border-radius:.45rem;font-size:1rem}
#sendPanel,#receivePanel{margin-bottom:.65rem}
#receivePanel>.actions{margin-top:0}
#receivePanel .view{aspect-ratio:16/9}
#receivePanel .guide{width:30%}
.send-options{font-size:.85rem}

.compose-tools{display:flex;align-items:center;gap:.5rem;margin-top:.55rem;font-size:.85rem}
.compose-tools button{margin-left:auto}
.compose-tools select,.compose-tools button,.instructions .menu-panel button{min-height:36px;font-size:.85rem}
.compose-tools select,#shortSearch{background:#101512;color:inherit;border:1px solid var(--line);border-radius:.45rem;padding:.4rem}
.instructions .menu-panel{display:grid;gap:.4rem;width:max-content}
dialog{max-width:min(94vw,35rem);max-height:82dvh;background:#1a241e;color:#f1f5ec;border:1px solid var(--line);border-radius:.8rem;padding:1rem;overflow:auto}
dialog::backdrop{background:#000a}dialog a{color:var(--accent)}dialog p{font-size:.85rem;color:var(--muted)}
.dialog-toolbar{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;background:#1a241e;padding-bottom:.25rem}
.dialog-close{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;font-size:1.65rem;line-height:1}
.alphabet-list{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:.35rem .6rem}.alphabet-list dt{font-weight:800}.alphabet-list dd{margin:0;color:var(--accent);font-family:ui-monospace,monospace}
#shortSearch{width:100%;margin:.35rem 0 .6rem}.short-list{display:grid;gap:.4rem}.short-list button{display:grid;text-align:left}.short-list small{color:var(--muted)}.short-list strong{color:var(--accent)}

.short-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.85rem}.short-filter select{background:#101512;color:inherit;border:1px solid var(--line);border-radius:.45rem;padding:.4rem}.short-filter output{margin-left:auto;color:var(--muted)}

#receivePanel details select{display:block;margin:.25rem 0 .5rem;max-width:100%;background:#101512;color:inherit;border:1px solid var(--line);border-radius:.45rem;padding:.4rem}