:root{color-scheme:dark;--bg:#13171b;--card:#1c2228;--ink:#f5f8fb;--muted:#b8c2cb;--accent:#b2e8ef;--line:#49535f;--dark:#101419}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 50% 0%,#2a333e 0,var(--bg) 58%);color:var(--ink);font:16px/1.5 "PingFang SC","Microsoft YaHei",system-ui,sans-serif;min-height:100vh}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.shell{width:min(1100px,100% - 44px);margin:auto;padding:50px 0}
.masthead{display:flex;align-items:center;gap:16px;padding-bottom:26px;border-bottom:1px solid var(--line)}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(22px,4vw,35px);letter-spacing:.045em;line-height:1.25}
h2{font-size:20px}
h3{font-size:15px}
.kicker{color:var(--accent);font:700 11px/1.5 "Courier New",monospace;letter-spacing:.21em;margin-bottom:5px}
.cow{position:relative;isolation:isolate;flex:0 0 50px;width:50px;height:43px}
.cow::before,.cow::after{content:"";position:absolute;z-index:-1;top:9px;width:17px;height:11px;background:#f5f5f3;border:2px solid #10151a;border-radius:85% 30% 75% 30%}
.cow::before{left:0;transform:rotate(24deg)}
.cow::after{right:0;transform:scaleX(-1) rotate(24deg)}
.cow-face{position:absolute;left:9px;right:9px;top:5px;bottom:2px;border-radius:45% 46% 43% 48%;background:#f8f8f7;border:2px solid #10151a;overflow:hidden}
.cow-spot{position:absolute;top:-4px;left:-3px;width:19px;height:23px;background:#333b46;border-radius:22% 40% 69% 28%;transform:rotate(-22deg)}
.cow-eyes{position:absolute;top:13px;left:6px;width:4px;height:4px;background:#10151a;border-radius:50%;box-shadow:0 0 0 1px #fafafb,12px 0 #10151a}
.cow-muzzle{position:absolute;inset:auto 2px 1px;height:12px;background:#d8bfc8;border-radius:50%}
.cow-muzzle::before{content:"";position:absolute;top:4px;left:6px;height:3px;width:3px;border-radius:50%;background:#54464e;box-shadow:8px 0 #54464e}
.mast-actions{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.callsign{font:700 13px/1.2 "Courier New",monospace;letter-spacing:.11em;color:var(--accent)}
.masthead #sound{white-space:nowrap}
.outline,.primary,.modes button,.text-button{border-radius:8px;padding:8px 13px;font-size:14px}
.outline,.modes button{border:1px solid var(--line);background:transparent}
.outline:hover,.outline[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.modes{display:flex;gap:8px;margin:22px 0 15px}
.modes button{color:var(--muted)}
.modes button[aria-pressed=true],.primary{background:var(--accent);color:#14232b;border:1px solid var(--accent);font-weight:700}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,310px);gap:16px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;min-width:0}
.panel-head,.display-head,.key-footer,.binding,.setting label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head{margin-bottom:18px}
.panel-head p,.panel-head>span,.key-footer,#listen-state,.hardware p{color:var(--muted);font-size:13px}
.display{background:var(--dark);border:1px solid #424e5b;border-radius:12px;padding:15px 17px;min-height:150px}
.display-head{font-size:13px;color:var(--muted)}
.display-head>span:first-child{display:flex;align-items:center;gap:7px}
#lamp{display:inline-block;width:8px;height:8px;border-radius:50%;background:#777f87}
#lamp.active{background:var(--accent);box-shadow:0 0 12px var(--accent)}
#target{color:var(--accent)}
.signal{font:700 35px/1.25 "Courier New",monospace;color:var(--accent);min-height:45px;overflow-wrap:anywhere;margin-top:9px}
.decoded{font:700 21px/1.35 "Courier New",monospace;min-height:1.4em;word-break:break-all;white-space:pre-wrap}
.key{width:100%;min-height:128px;display:grid;justify-items:center;align-content:center;gap:10px;border:1px solid #8495a0;border-radius:13px;margin-top:16px;background:linear-gradient(#333d47,#252d36);color:#f5f8fb;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.keycap{display:block;width:78px;height:35px;border-radius:8px;background:radial-gradient(ellipse 39% 54% at 9% 12%,#1b2026 96%,transparent 100%),radial-gradient(ellipse 27% 53% at 84% 94%,#1b2026 96%,transparent 100%),radial-gradient(ellipse 12% 23% at 53% 22%,#1b2026 96%,transparent 100%),#f5f5f3;box-shadow:0 5px #10151a,inset 0 1px #fff}
.key.active{background:#324a58;border-color:#b2e8ef}
.key.active .keycap{transform:translateY(3px);box-shadow:0 2px #10151a,inset 0 1px #fff}
.key-footer{margin-top:9px}
.text-button{background:none;border:0;color:var(--accent);white-space:nowrap}
.feedback{min-height:22px;color:var(--accent);font-size:14px}
.settings h2{margin-bottom:18px}
.setting{margin:14px 0 18px}
.setting input{width:100%;accent-color:var(--accent);margin:10px 0 0}
output,kbd{color:var(--accent);font-family:"Courier New",monospace}
.hardware{padding-top:16px;border-top:1px solid var(--line)}
.binding{margin:11px 0}
kbd{border:1px solid #56616c;border-radius:6px;padding:5px 10px;background:var(--dark);overflow-wrap:anywhere}
details{margin-top:12px;font-size:14px}
summary{cursor:pointer;color:var(--accent)}
details p{margin-top:8px}
.actions{display:flex;align-items:center;gap:8px;margin:12px 0}
.actions input{min-width:0;width:150px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--dark);color:var(--ink)}
#guess-form{margin-top:19px}
.tree-levels{display:grid;gap:8px;margin-bottom:12px}
.level{display:flex;align-items:center;gap:9px;padding:8px;border-bottom:1px solid var(--line)}
.level-label{font:700 12px "Courier New",monospace;color:var(--muted);flex:none}
.nodes{display:flex;flex-wrap:wrap;gap:6px}
.node{background:var(--dark);border:1px solid #56616c;border-radius:7px;min-width:39px;min-height:45px;padding:4px;color:var(--ink);font-weight:700}
.node:hover,.node[aria-pressed=true]{background:#2b4655;border-color:var(--accent)}
.node small{display:block;color:var(--accent);font:11px "Courier New",monospace;white-space:nowrap}
@media(max-width:740px){.layout{grid-template-columns:1fr}.shell{padding-top:25px}.panel{padding:17px}}
@media(max-width:400px){.shell{width:calc(100% - 22px)}.masthead{gap:9px}.cow{flex-basis:42px;transform:scale(.87)}.mast-actions{flex-direction:column;align-items:flex-end;gap:6px}.masthead #sound{padding:5px 8px;font-size:12px}.panel-head{gap:6px}.panel-head .outline{padding-inline:8px}}

.site-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:22px;padding:15px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.footer-sign{display:flex;align-items:center;gap:8px;min-height:24px}
.support{margin:0;max-width:340px;text-align:right}
.support-content{padding:14px;margin-top:9px;border:1px solid var(--line);border-radius:12px;background:var(--card);text-align:center}
.support-content img{display:block;width:min(100%,260px);height:auto;margin:12px auto;border-radius:8px}