/* Signal Hut: weathered lake blue, cream paper, terracotta signal lamps. */
:root{color-scheme:light;--paper:#eee5d2;--card:#f9f3e5;--ink:#334654;--muted:#687477;--blue:#576f84;--blue-dark:#3e566a;--line:#c9c0aa;--rust:#ae5743;--gold:#d5ae5e}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.7;background-image:repeating-linear-gradient(0deg,transparent,transparent 4px,#76684504 5px)}
main{max-width:1240px;margin:auto;padding:0 48px}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button,input,textarea,select{font:inherit}button,.upload{cursor:pointer}button{border:1px solid var(--line);border-radius:3px;padding:10px 15px;background:var(--card);color:var(--ink);transition:background .15s,transform .15s}button:hover:not(:disabled){background:#e6e6dc;transform:translateY(-1px)}button:disabled,.disabled{opacity:.48;cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--rust);outline-offset:4px}[hidden]{display:none!important}
header{min-height:90px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font:600 22px Georgia,serif;letter-spacing:3px}.brand span{display:block;font:9px ui-monospace,monospace;letter-spacing:2.2px;margin-top:6px}nav{display:flex;gap:28px;font-size:12px}h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,"Songti SC",serif;font-size:58px;font-weight:500;letter-spacing:4px;line-height:1.2;margin-bottom:22px}h1 span{display:block;font-size:26px;font-style:italic;letter-spacing:0;margin-top:12px;color:var(--blue)}h2{font-size:23px;font-family:Georgia,"Songti SC",serif;font-weight:500;margin-bottom:12px}h3{font-size:15px;font-weight:600;margin:0 0 12px}.eyebrow{font:10px ui-monospace,"SFMono-Regular",monospace;letter-spacing:2px;color:var(--blue);margin-bottom:16px}.intro{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;padding:62px 0 48px}.lead{font-size:17px;line-height:1.95;letter-spacing:.6px;margin-bottom:20px}.intro-note{color:var(--muted);font-size:11px;letter-spacing:1px;margin:0}
.field-recorder{position:relative;background:var(--blue);border:1px solid var(--blue-dark);border-radius:13px;padding:24px 26px 20px;transform:rotate(-3deg);box-shadow:9px 15px 0 #c8beaa,10px 17px 22px #394e5c17;max-width:395px;width:100%;justify-self:center;margin-top:15px}.recorder-handle{position:absolute;left:24%;top:-26px;width:52%;height:27px;border:8px solid #334855;border-bottom:0;border-radius:14px 14px 0 0}.recorder-top{display:flex;justify-content:space-between;color:#f6e9ca;font:8px ui-monospace,monospace;letter-spacing:1.1px;padding-bottom:18px}.recorder-body{display:flex;gap:20px;align-items:center}.speaker{height:118px;flex:1;border:5px solid #3f5465;border-radius:50%;background:repeating-linear-gradient(0deg,#304858,#304858 2px,#698193 2px,#698193 5px);box-shadow:inset 2px 1px 7px #253b48}.recorder-meter{background:#e8d8af;border:6px solid #3f5465;border-radius:5px;flex:1.1;height:93px;text-align:center;overflow:hidden;font:8px ui-monospace,monospace;color:#4d4e44;padding-top:10px}.recorder-meter>span{letter-spacing:1px}.meter-arc{height:35px;width:85%;border-top:3px dotted #9e8165;border-radius:50%;margin:7px auto -2px;position:relative}.meter-arc i{position:absolute;width:1px;height:38px;background:#a95341;bottom:-10px;left:50%;transform:rotate(25deg);transform-origin:bottom}.recorder-bottom{display:flex;align-items:center;gap:8px;margin-top:20px;color:#f6e9ca;font:8px ui-monospace,monospace;letter-spacing:1px}.record-dot{width:10px;height:10px;background:#cf8163;border:2px solid #e3b090;border-radius:50%}.recorder-bottom b{margin-left:auto;width:25px;height:25px;border:4px solid #d4cbb2;outline:2px solid #3e5364;border-radius:50%;background:#efe2c1}.recorder-bottom b+b{margin-left:4px}.recorder-caption{position:absolute;top:calc(100% + 32px);left:0;right:0;text-align:center;font:italic 13px Georgia,serif;color:var(--muted)}
.connection{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 30px;padding:24px 28px;margin:28px 0 28px;border:1px solid var(--line);border-left:4px solid var(--blue);background:#e1e5df}.connection .eyebrow{margin-bottom:8px}.connection h2{font-size:20px;margin-bottom:5px}.connection p{margin-bottom:0;font-size:12px}.connection button{background:var(--blue);border-color:var(--blue);color:var(--card);min-width:186px}.connection button:hover:not(:disabled){background:var(--blue-dark)}.connection button span{margin-left:18px}.connection details{grid-column:1/-1;margin:0;border:0;padding:0;font-size:12px}.connection details p{margin:12px 0}.connected{border-left-color:#687f5b}.connected h2:before{content:'●';color:#687f5b;font-size:12px;margin-right:10px}#voice-workspace{border:0;padding:0;margin:0;min-width:0}#voice-workspace:disabled .workspace{opacity:.63}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start}.panel{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:0 3px 0 #c9c0aa55}.record-panel{background:#e1e7e6;border-color:#b5c2c5}.muted{color:var(--muted)}.small{font-size:11px;line-height:1.85}.record-stage{display:flex;align-items:center;justify-content:center;gap:20px;margin:26px 0}.orb{height:64px;width:64px;border:1px solid #9eafb7;background:#cfdbde;border-radius:50%;display:grid;place-items:center}.orb svg{height:31px;width:31px;fill:var(--blue);stroke:var(--blue);stroke-width:2}.orb svg path{fill:none}.orb.recording{background:#ead3c5;border-color:var(--rust)}.orb.recording svg{fill:var(--rust);stroke:var(--rust)}#timer{font:24px ui-monospace,monospace}#timer span{font-size:11px;color:var(--muted)}.primary{background:var(--blue);color:#fff9e9;border:1px solid var(--blue-dark);box-shadow:0 3px 0 var(--blue-dark)}.primary:hover:not(:disabled){background:var(--blue-dark)}#record{width:100%;margin-bottom:18px}.record-options{margin:20px 0;border:1px solid #b6c4c6;padding:14px;border-radius:3px;min-width:0}.record-options legend{font-size:11px;padding:0 7px;color:var(--blue-dark)}.record-options p:last-child{margin-bottom:0}.record-options label{font-size:11px}.secondary-row{display:flex;gap:8px;flex-wrap:wrap}.secondary-row>*{flex:1;font-size:11px;text-align:center;white-space:nowrap}.upload{display:grid;place-items:center;border:1px dashed #91a3aa;border-radius:3px;padding:10px;background:#f2f0e5;position:relative}.upload:focus-within{outline:3px solid var(--rust);outline-offset:3px}.upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.option-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}.option-row select{max-width:160px;font-size:11px}select,input[type=text],textarea{border:1px solid var(--line);border-radius:3px;background:#fffaf0;color:var(--ink);padding:9px;max-width:100%}input[type=checkbox]{accent-color:var(--blue);margin-right:7px}meter{display:block;width:100%;height:8px;margin:10px 0}#status{font-size:12px;padding-top:16px;margin-top:16px;border-top:1px solid #b6c4c6}#error{background:#eed7c8;color:#863d2d;padding:12px;border-left:2px solid var(--rust);font-size:12px;overflow-wrap:anywhere;margin:14px 0 0}
.section-top{display:flex;align-items:start;justify-content:space-between;gap:10px;flex-wrap:wrap}.tag{font-size:9px;letter-spacing:.3px;border:1px solid #c4c9be;padding:3px 7px;border-radius:2px;color:var(--blue);background:#e8ece3;max-width:100%}#empty{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:35px 15px;border:1px dashed #d1c7b1;margin-top:18px}#empty p{font-family:Georgia,"Songti SC",serif;font-size:18px;color:var(--blue);margin-bottom:10px}#empty small{font-size:11px}.empty-wave{font-size:31px;letter-spacing:6px;color:#9cabb2;margin-bottom:24px}audio{width:100%;height:40px;margin:4px 0 18px}textarea{width:100%;resize:vertical;font-size:16px;line-height:1.9;min-height:120px;margin:9px 0 0}.text-label{display:flex;justify-content:space-between;gap:8px;align-items:center}.text-label label{font-weight:600}.text-label label span{font-size:11px;color:var(--muted);font-weight:400}.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;font-size:11px;padding:4px 0}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line);margin:22px 0 16px;padding:18px 0;gap:12px}.metrics span,.metrics small{display:block;font-size:10px;color:var(--muted)}.metrics strong{font:24px Georgia,serif;display:block;margin:6px 0;color:var(--blue-dark)}.metrics small{font-size:9px;line-height:1.7}.summary{background:#e6e9df;border-left:2px solid #a7b39d;padding:12px;font-size:12px}#warnings{color:var(--rust)}.annotation{border-top:1px solid var(--line);margin-top:24px;padding-top:24px}.annotation>label{display:block;font-size:12px;margin:18px 0 7px}.annotation select,.annotation input[type=text]{width:100%}.annotation .primary{width:100%;margin:14px 0 24px}.auto-labels{font-size:12px;margin:15px 0}details{border-block:1px solid #d7ceba;padding:12px 0;margin:18px 0}details details{border:0}summary{cursor:pointer;color:var(--blue);font-size:11px}pre{font:11px/1.7 ui-monospace,monospace;background:#ece9dc;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto}#export,#clear{font-size:11px;margin-top:8px}#clear{float:right}.delivery-receipt{margin-top:24px;border-left:4px solid var(--rust)}.delivery-receipt h2{font-size:21px}#delivery-status{font-size:13px;overflow-wrap:anywhere}.charts{margin-top:24px}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:22px}.chart-grid h3 span{font-size:10px;color:var(--muted);font-weight:400}canvas{width:100%;height:160px;display:block}footer{text-align:center;border-top:1px solid var(--line);margin:48px 0 0;padding:28px 0 32px;color:var(--muted);font-size:10px;line-height:2}.footer-station{font:10px ui-monospace,monospace;letter-spacing:2px;color:var(--blue)}footer>span:last-child{opacity:.85}code{font-size:11px}
.orb.active{background:#ead3c5;border-color:var(--rust)}.orb.active svg{fill:var(--rust);stroke:var(--rust)}#record.recording{background:var(--rust);border-color:#863d2d;box-shadow:0 3px 0 #863d2d}
@media(min-width:1000px){.record-panel{position:sticky;top:24px}}
@media(max-width:850px){main{padding:0 24px}.intro{gap:30px;padding-top:50px}h1{font-size:44px}h1 span{font-size:22px}.field-recorder{padding:18px}.speaker{height:90px}.recorder-body{gap:12px}.recorder-top{font-size:6px}.workspace{grid-template-columns:290px minmax(0,1fr);gap:16px}.panel{padding:20px}.metrics{grid-template-columns:1fr;gap:15px}.metrics div{display:grid;grid-template-columns:1fr 1fr;align-items:center}.metrics strong{text-align:right;margin:0}.metrics small{grid-column:1/-1}.recorder-caption{font-size:11px}}
@media(max-width:640px){main{padding:0 20px}header{min-height:80px}.brand{font-size:18px}.brand span{font-size:7px}nav{gap:16px;font-size:10px}.intro{grid-template-columns:1fr;padding:40px 0 24px;gap:46px}h1{font-size:46px;letter-spacing:3px}h1 span{font-size:23px;margin-top:8px}.lead{font-size:15px;margin-bottom:15px}.field-recorder{max-width:290px;margin-bottom:38px;padding:20px}.recorder-top{font-size:7px}.speaker{height:90px}.recorder-meter{height:82px}.recorder-bottom{margin-top:15px}.recorder-caption{top:calc(100% + 25px)}.connection{margin-top:16px;padding:21px;grid-template-columns:1fr;gap:16px}.connection button{width:100%}.workspace{grid-template-columns:1fr;gap:20px}.panel{padding:24px}#empty{min-height:220px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.metrics div{display:block}.metrics strong{text-align:left;margin:7px 0;font-size:23px}.metrics small{font-size:9px}.chart-grid{grid-template-columns:1fr;gap:24px}.charts .section-top h2{font-size:21px}footer{margin-top:32px;font-size:9px}#clear{float:none;margin-left:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}