:root { color-scheme: dark; --bg:#07111b; --surface:#0d1c2b; --line:#274158; --ink:#eff8ff; --muted:#9ab0c2; --aqua:#4ee3c1; --blue:#77b7ff; --danger:#ff9b83; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 50% -20%,#16354c,transparent 48%),var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.app { width:min(100%,660px); margin:auto; padding:max(28px,env(safe-area-inset-top)) 20px max(32px,env(safe-area-inset-bottom)); }
header { margin-bottom:24px; } h1 { margin:0; font-size:clamp(2.5rem,12vw,4rem); letter-spacing:-.07em; line-height:.95; } .eyebrow { margin:0 0 6px; color:var(--aqua); font-size:.69rem; font-weight:800; letter-spacing:.13em; } .intro,.hint,.result-meta { color:var(--muted); } .intro { margin:14px 0 0; max-width:31rem; }
.mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:0 -2px 16px; padding:4px; border:1px solid var(--line); border-radius:13px; background:#091725; } button { border:0; cursor:pointer; font:inherit; font-weight:750; } .tab { padding:10px 5px; border-radius:9px; background:transparent; color:var(--muted); } .tab.active { color:var(--ink); background:#203b51; }
.panel,.result,details { border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--surface) 92%,transparent); } .panel { padding:14px; } .viewfinder { position:relative; overflow:hidden; aspect-ratio:4/3; border-radius:11px; background:#03080d; } video { width:100%; height:100%; object-fit:cover; } .camera-placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:4rem; color:#b7c9d8; text-align:center; background:linear-gradient(#06101bd1,#06101baa); } .target { position:absolute; top:50%; left:50%; width:31%; aspect-ratio:1; transform:translate(-50%,-50%); border:2px solid var(--aqua); border-radius:50%; box-shadow:0 0 0 100vmax #0003,0 0 22px #4ee3c17a; pointer-events:none; } .target span { position:absolute; inset:45%; border-radius:50%; background:var(--aqua); }
.meter-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin:13px 2px 8px; color:var(--muted); font-size:.8rem; } .meter { height:7px; overflow:hidden; border-radius:99px; background:#20384a; } .meter i { display:block; height:100%; width:0; border-radius:inherit; background:var(--aqua); transition:width .1s; } .meter-row b { min-width:69px; color:var(--ink); font-size:.75rem; text-align:right; }
.hint { margin:10px 2px 16px; font-size:.88rem; } .actions { display:flex; gap:10px; } .actions > * { flex:1; } .primary,.secondary { min-height:48px; padding:11px 14px; border-radius:11px; } .primary { color:#02221f; background:var(--aqua); } .secondary { color:var(--ink); background:#20384a; } button:disabled { cursor:not-allowed; opacity:.46; } .check { display:block; margin:14px 2px 1px; color:var(--muted); font-size:.85rem; } input { accent-color:var(--aqua); }
.morse-key { width:100%; min-height:190px; margin:3px 0 12px; border:1px solid #5de7ca; border-radius:17px; color:var(--aqua); background:linear-gradient(145deg,#153448,#0b2130); touch-action:none; user-select:none; letter-spacing:.08em; } .morse-key:active,.morse-key.keying { color:#002521; background:var(--aqua); transform:scale(.99); } .morse-key small { color:inherit; font-weight:500; letter-spacing:normal; } .live-code { min-height:28px; overflow-wrap:anywhere; color:var(--blue); font-family:ui-monospace,SFMono-Regular,monospace; text-align:center; }
label { display:block; margin:0 0 7px; color:var(--muted); font-size:.85rem; } textarea { width:100%; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:11px; outline:none; color:var(--ink); background:#07131f; font:1rem/1.5 ui-monospace,SFMono-Regular,monospace; } textarea:focus { border-color:var(--aqua); box-shadow:0 0 0 3px #4ee3c126; } code { color:var(--aqua); }
.result { margin-top:16px; padding:18px; } output { display:block; min-height:44px; overflow-wrap:anywhere; font-size:clamp(1.35rem,6vw,2rem); font-weight:780; letter-spacing:.015em; } .result-meta { min-height:1.3em; margin:8px 0; font-size:.86rem; } .text-button { padding:4px 0; color:var(--aqua); background:none; } details { margin-top:16px; padding:14px 16px; color:var(--muted); font-size:.9rem; } summary { cursor:pointer; color:var(--ink); font-weight:700; } li+li { margin-top:5px; }
@media (min-width:700px) { .app { padding-top:52px; } }