:root{font-family:Iowan Old Style,Palatino Linotype,Book Antiqua,Georgia,serif;color:#16110d;background:radial-gradient(circle at top,#fff8e5f0,#e3d7bff0 52%,#c2b193f0),linear-gradient(145deg,#ece1cc,#cdb996);color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;overflow-x:hidden}button,kbd{font:inherit}button{border:0;cursor:pointer}button:focus-visible{outline:3px solid rgba(170,95,33,.72);outline-offset:3px}.app-shell{position:relative;min-height:100svh;overflow-x:hidden;padding:28px}@supports (min-height: 100dvh){.app-shell{min-height:100dvh}}.grain{position:absolute;inset:0;background-image:linear-gradient(rgba(61,48,34,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(61,48,34,.04) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at center,black,transparent 82%);mask-image:radial-gradient(circle at center,black,transparent 82%);pointer-events:none}.console{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:clamp(24px,4vw,44px);border:1px solid rgba(83,59,31,.15);border-radius:32px;background:linear-gradient(180deg,#fffcf4e6,#f3e7d1eb),#ffffff8c;box-shadow:0 24px 60px #462f162e,inset 0 1px #ffffffbf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.page-switcher{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-bottom:28px;padding:5px;border:1px solid rgba(83,59,31,.16);border-radius:999px;background:#3d2b1814}.page-switcher button{min-height:42px;padding:9px 16px;border-radius:999px;background:transparent;color:#2d1e12c7;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;transition:transform .14s ease,background-color .14s ease,color .14s ease,box-shadow .14s ease}.page-switcher button:hover{transform:translateY(-1px);background:#fffcf575}.page-switcher button.active{background:linear-gradient(180deg,#fffcf5e6,#e6d2afe0);color:#24170e;box-shadow:0 8px 20px #51361b24,inset 0 1px #ffffffb8}.hero{display:grid;gap:12px;margin-bottom:28px}.eyebrow{margin:0;letter-spacing:.32em;text-transform:uppercase;font-size:.78rem;color:#3e2c18b8}.hero h1{margin:0;max-width:12ch;font-size:clamp(2.8rem,8vw,5.8rem);line-height:.95;font-weight:700;color:#20160f}.lede{margin:0;max-width:58ch;font-size:1.05rem;line-height:1.6;color:#20160fcc}.readout,.monitor-card,.audio-prompt,.legend{border:1px solid rgba(88,64,34,.14);border-radius:24px;background:#fffcf5b8;box-shadow:inset 0 1px #ffffffa6}.readout{padding:18px 20px 22px}.panel-label{margin:0 0 14px;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#49341cad}.message-window{min-height:112px;padding:18px 20px;border-radius:18px;background:linear-gradient(180deg,#372718f2,#211810f2);box-shadow:inset 0 0 0 1px #ffe6ba14;color:#f6ead2;font-family:Courier Prime,American Typewriter,Courier New,monospace;font-size:clamp(1.2rem,3vw,1.85rem);line-height:1.45;letter-spacing:.08em;overflow-wrap:anywhere}.placeholder{color:#f6ead285}.monitor-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.monitor-card{min-height:178px;padding:18px 20px}.sequence-card{display:grid;gap:12px}.sequence-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(150px,.85fr);align-items:center;gap:16px}.sequence{font-family:Courier Prime,American Typewriter,Courier New,monospace;font-size:clamp(2rem,4vw,3rem);letter-spacing:.28em;color:#2e2116}.sequence-meta{margin:0}.panel-meta{margin:16px 0 0;font-size:.98rem;line-height:1.5;color:#291d11c7}.status-card{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.status-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.status-header .panel-label{margin-bottom:0}.status-tools{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px}.status-card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(172,120,57,.08),transparent 62%);opacity:.9;pointer-events:none}.status-card.live:after{background:linear-gradient(135deg,rgba(190,94,35,.22),transparent 62%)}.status-orb{width:18px;height:18px;border-radius:999px;background:radial-gradient(circle at 35% 35%,#fff3cf,#d48a37 70%,#8e4e1a);box-shadow:0 0 0 7px #d2802926}.status-card.live .status-orb{background:radial-gradient(circle at 35% 35%,#fff7eb,#ff8d3a 68%,#a6390e);box-shadow:0 0 0 9px #e9731f2e,0 0 28px #ed7e308c}.audio-state-label{display:inline-flex;align-items:center;color:#512b0fcc}.status-summary{margin-top:0;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px 16px}.status-message{min-width:0}.audio-prompt{display:grid;gap:10px;margin-top:16px;padding:18px 20px;background:linear-gradient(180deg,#fff6e0d6,#f7e4bfdb),#fffcf5b8}.audio-prompt .panel-label,.audio-prompt .panel-meta{margin-top:0;margin-bottom:0}.unlock-sound-button{justify-self:start;min-height:44px;padding:12px 16px;border-radius:999px;border:1px solid rgba(120,73,30,.16);background:linear-gradient(180deg,#b268282e,#7d471b38);color:#4f2f18;box-shadow:inset 0 1px #ffffff70}.sound-toggle{position:relative;z-index:1;min-width:44px;min-height:44px;padding:10px 14px;border:1px solid rgba(82,56,28,.16);border-radius:999px;background:#45321c14;color:#2d1e12;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.sound-toggle.enabled{background:#a25e2229;color:#512b0f;box-shadow:inset 0 1px #ffffff57}.controls{margin-top:24px}.primary-controls{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:14px;align-items:stretch}.telegraph-key,.delete-key,.secondary-key,.unlock-sound-button,.sound-toggle{position:relative;touch-action:manipulation;-webkit-tap-highlight-color:rgba(170,95,33,.14);transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,border-color .14s ease,outline-color .14s ease}.telegraph-key,.delete-key,.secondary-key{border-radius:24px}.telegraph-key{min-height:184px;display:grid;align-content:center;justify-items:center;gap:14px;padding:20px;background:radial-gradient(circle at top,#ffe8bbc7,#b57a3594 28%,#5b3b1ae6),linear-gradient(180deg,#8d5626,#4f2f18);color:#fff6e9;box-shadow:inset 0 1px #ffffff3d,inset 0 -12px 18px #1e100747,0 24px 40px #472a1247}.telegraph-key.pressed,.telegraph-key:active{transform:translateY(4px) scale(.995);box-shadow:inset 0 2px 10px #ffffff29,inset 0 -18px 24px #150a0457,0 8px 18px #472a124d}.key-label{font-size:clamp(1.9rem,4vw,3rem);line-height:1;font-weight:700}.key-hint{max-width:30ch;font-family:Courier Prime,American Typewriter,Courier New,monospace;font-size:.96rem;letter-spacing:.04em;line-height:1.5;color:#fff2dce6}.delete-key{min-height:184px;padding:20px;background:linear-gradient(180deg,#3f3124,#271c14);color:#f2e4c6;box-shadow:inset 0 1px #ffffff1a,0 20px 34px #301f113d}.delete-key:hover,.secondary-key:hover,.telegraph-key:hover,.unlock-sound-button:hover,.sound-toggle:hover{transform:translateY(-2px)}.delete-key:active,.secondary-key:active,.unlock-sound-button:active,.sound-toggle:active{transform:translateY(1px)}.secondary-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.secondary-key{padding:16px 18px;background:#45321c14;color:#2d1e12;border:1px solid rgba(82,56,28,.16)}.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;padding:14px 16px;color:#2f2215d6}.legend span{display:inline-flex;align-items:center;gap:8px}.morse-reference{display:grid;gap:16px}.reference-summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;padding:20px;border:1px solid rgba(88,64,34,.14);border-radius:24px;background:linear-gradient(135deg,#382718f0,#1e150ef5),#2c1f15;color:#f6ead2;overflow:hidden}.reference-summary:after{content:"";position:absolute;inset:auto -8% -56px 18%;height:120px;background:linear-gradient(90deg,transparent 0 7%,rgba(225,158,72,.24) 7% 11%,transparent 11% 18%),linear-gradient(90deg,transparent 0 18%,rgba(246,213,149,.2) 18% 24%,transparent 24% 100%);transform:rotate(-3deg);pointer-events:none}.reference-summary .panel-label{margin-bottom:0;color:#f6ead2ad}.reference-summary .panel-meta{position:relative;z-index:1;grid-column:1 / -1;max-width:62ch;margin-top:0;color:#f6ead2c7}.reference-count{position:relative;z-index:1;grid-row:span 2;align-self:center;font-family:Courier Prime,American Typewriter,Courier New,monospace;font-size:clamp(3rem,9vw,5.5rem);line-height:.82;letter-spacing:0;color:#ffe2a8;text-shadow:0 10px 28px rgba(0,0,0,.28)}.reference-groups{display:grid;gap:16px}.reference-group{padding:18px;border:1px solid rgba(88,64,34,.14);border-radius:24px;background:#fffcf5b8;box-shadow:inset 0 1px #ffffffa6}.reference-group-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.reference-group-header h2{margin:0;font-size:clamp(1.55rem,4vw,2.35rem);line-height:1;color:#2b1d12}.reference-group-header p{max-width:56ch;margin:8px 0 0;color:#291d11b8;line-height:1.45}.reference-group-header span{flex:0 0 auto;min-width:42px;padding:8px 10px;border-radius:999px;background:#3b2a171a;color:#2d1e12c7;text-align:center;font-family:Courier Prime,American Typewriter,Courier New,monospace}.morse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:0;padding:0;list-style:none}.morse-tile{min-height:108px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:14px;border:1px solid rgba(79,55,29,.12);border-radius:18px;background:linear-gradient(180deg,#fffdf8c2,#efe0c49e),#fffcf5ad;box-shadow:inset 0 1px #ffffff9e}.morse-character{font-size:1.55rem;line-height:1;color:#2d1e12}.morse-code{align-self:center;width:100%;padding:8px 10px;border-radius:12px;background:#2a1d12eb;color:#f8e6c4;font-family:Courier Prime,American Typewriter,Courier New,monospace;font-size:1.02rem;letter-spacing:.12em;overflow-wrap:anywhere}.morse-note{color:#5b3212d1;font-size:.78rem;line-height:1.25}kbd{padding:3px 8px;border-radius:999px;background:#3b2a171f;border:1px solid rgba(59,42,23,.14);font-family:Courier Prime,American Typewriter,Courier New,monospace;font-size:.9rem}@media(max-width:820px){.app-shell{padding:14px}.console{border-radius:28px;padding:18px}.hero{gap:10px;margin-bottom:20px}.page-switcher{width:100%;margin-bottom:20px}.readout{padding:16px 18px 18px}.message-window{min-height:96px}.monitor-row,.secondary-controls{grid-template-columns:1fr}.monitor-card{min-height:152px;padding:16px 18px}.sequence-row{grid-template-columns:minmax(0,1fr) minmax(140px,.8fr);gap:14px}.sequence{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:.2em}.panel-meta{margin-top:12px}.status-header{align-items:center;flex-direction:row;margin-bottom:12px}.status-tools{gap:10px}.status-summary{grid-template-columns:minmax(0,1fr) auto;gap:8px 14px}.audio-state-label{justify-self:end}.primary-controls{grid-template-columns:minmax(0,1fr) 110px}.delete-key,.telegraph-key{min-height:220px}.controls,.legend{margin-top:18px}.reference-summary,.reference-group{border-radius:22px;padding:16px}.morse-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}.status-header{justify-content:space-between}}@media(max-width:520px){.app-shell{padding:12px}.console{padding:16px}.page-switcher button{padding-inline:10px;font-size:.72rem;letter-spacing:.1em}.monitor-card{min-height:140px;padding:14px 16px}.sequence-row,.status-summary{grid-template-columns:1fr;gap:8px}.sequence{font-size:clamp(1.55rem,8vw,2.15rem);letter-spacing:.16em}.sequence-meta,.audio-state-label{justify-self:start}.status-header{gap:10px}.status-tools{align-self:flex-start}.primary-controls{grid-template-columns:minmax(0,1fr) 92px}.delete-key{min-height:188px;padding:16px 12px}.key-label{font-size:clamp(1.6rem,8vw,2.3rem)}.key-hint{font-size:.88rem}.reference-summary{grid-template-columns:1fr}.reference-count{grid-row:auto;justify-self:start;font-size:3.4rem}.reference-group-header{display:grid;grid-template-columns:minmax(0,1fr) auto}.morse-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.morse-tile{min-height:104px;padding:12px}.morse-code{font-size:.95rem;letter-spacing:.08em}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
