@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=IBM+Plex+Mono:wght@400;450;500;600&display=swap');
:root{--bg:#f6f7f9;--paper:#fff;--ink:#202831;--muted:#7b838f;--border:#e6e9ee;--accent:#edb551;--accent-dark:#a36b10;--green:#278367;--mono:'IBM Plex Mono',ui-monospace,monospace;--sans:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);font:14px var(--sans);background:var(--bg)}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #e3b35a;outline-offset:4px}input:focus,textarea:focus{outline:none;border-color:#c39643;box-shadow:0 0 0 3px #f7ecd6}[hidden]{display:none!important}.mono{font-family:var(--mono)}.topbar{height:80px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 5.5%}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-size:24px;font-weight:700;letter-spacing:-1px}.brand-icon{display:grid;place-items:center;background:#26313e;color:#edbd63;width:34px;height:34px;border-radius:9px;font-size:33px;line-height:1}.brand-light{font-weight:450;color:#7a828d}.brand-tag{font:10px var(--mono);letter-spacing:.6px;border-left:1px solid var(--border);padding-left:17px;margin-left:17px;color:#828994}.top-right{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.local-dot{width:6px;height:6px;border-radius:50%;background:#66a78c}.version{margin-left:17px;background:#f5f6f8;border:1px solid var(--border);border-radius:5px;font:10px var(--mono);padding:4px 7px}main{max-width:1230px;padding:46px 32px 24px;margin:auto}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{font:10px var(--mono);letter-spacing:1.7px;color:#858b95;margin-bottom:11px}h1{font-size:35px;letter-spacing:-1.5px;font-weight:550;margin:0 0 9px}.title-dot{color:#dca23e}.heading p{margin:0;color:var(--muted);font-size:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:42px;padding:11px 17px;border-radius:7px;font-weight:550;font-size:12px;border:1px solid transparent;transition:background .15s,transform .15s}.button:active:not(:disabled){transform:translateY(1px)}.button.secondary{background:#fff;border-color:#dde1e7;color:#535d6a}.button.secondary:hover{background:#f8f9fb}.button.primary{background:#26313e;color:#fff}.button.primary:hover{background:#3b485a}.button span{font-size:17px;font-weight:400}.card{background:var(--paper);border:1px solid var(--border);border-radius:11px;box-shadow:0 2px 3px #1f293703}.connection{display:flex;align-items:center;gap:17px;padding:22px 25px;margin-bottom:24px}.device-icon{font-size:30px;font-weight:600;color:#66717e;background:#f2f4f7;border:1px solid #e8ebef;border-radius:10px;width:47px;height:47px;display:grid;place-items:center}.connection-info{flex:1}.connection-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;margin-bottom:6px}.chip{font:9px var(--mono);color:#8b929d;background:#f7f8fa;border:1px solid #edf0f3;border-radius:4px;padding:3px 6px}.connection-info>div:last-child{font-size:12px;color:var(--muted)}.connection-actions{display:flex;align-items:center;gap:22px}.status{font-size:11px;color:#838b95;display:flex;align-items:center;gap:7px}.status i{width:6px;height:6px;border-radius:50%;background:#aab0b8}.status.connected{color:var(--green)}.status.connected i{background:var(--green)}.status.connecting{color:var(--accent-dark)}.status.connecting i{background:var(--accent)}.workspace{display:grid;grid-template-columns:minmax(310px, .85fr) minmax(0,1.15fr);gap:24px;align-items:start}.section-heading{display:flex;align-items:center;justify-content:space-between;padding:23px 24px;border-bottom:1px solid #f0f1f4;min-height:71px}.section-heading>div{display:flex;align-items:center;gap:10px}h2{font-size:14px;font-weight:600;margin:0}.section-number{font:10px var(--mono);color:#a3a9b2;padding-right:2px}.subtle{font-size:10px;color:#959ca6}.subtle.mono{letter-spacing:.6px;font-size:9px}.command-card form{padding:25px 24px 16px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field label{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11px;font-weight:550;margin-bottom:9px}.field label span{font:8px var(--mono);color:#969eaa;white-space:nowrap}.field input,.field textarea{width:100%;background:#fcfcfd;border:1px solid #dfe3e9;border-radius:6px;color:#36414e;font:14px var(--mono);padding:12px;transition:border .15s}.input-prefix{position:relative}.input-prefix>span{position:absolute;left:12px;top:12px;color:#9aa2ae;font:14px var(--mono)}.input-prefix input{padding-left:38px}.field small{display:block;color:#939ba6;font-size:10px;line-height:1.6;margin-top:7px}.write-field{margin-top:24px}.write-field textarea{resize:vertical;line-height:1.8;min-height:120px;background:#fafbfc;letter-spacing:1px}.write-field label span{font-size:9px}.operation-line{display:flex;justify-content:space-between;gap:10px;padding:17px 0 4px;align-items:center}.operation-label{font:8px var(--mono);color:#a1a7b1;letter-spacing:.8px}.operation-value{font:8px var(--mono);color:#6d7785;text-align:right;line-height:1.8}.operation-value b{font-weight:400;color:#c4a35e;margin:0 5px}.validation{min-height:32px;font-size:11px;line-height:1.5;color:#bb4938;padding-top:8px}.send-button{width:100%;justify-content:space-between;background:var(--accent);border-color:#dfaa49;color:#3b301b;font-size:12px;padding:12px 15px}.send-button:hover:not(:disabled){background:#e7a939}.send-button:disabled{background:#eff1f4;border-color:#e8ebef;color:#a0a8b3}.keyboard-hint{text-align:center;font-size:9px;color:#9ca3ae;margin-top:12px}kbd{font-family:var(--sans);border:1px solid #e4e8ed;background:#fafbfc;padding:1px 4px;border-radius:3px;font-size:9px}.protocol{margin:0 24px 22px;border-top:1px solid var(--border);padding-top:17px}.protocol summary{cursor:pointer;list-style:none;font-size:10px;color:#89929e;display:flex;justify-content:space-between}.protocol summary::-webkit-details-marker{display:none}.protocol p{font-size:11px;line-height:1.7;color:#85909c}.uuid{overflow-wrap:anywhere;font-size:9px!important}.right-column{display:grid;gap:24px}.response-content{padding:24px;min-height:222px}.empty-state{text-align:center;padding:12px 10px 17px}.empty-icon{font:24px var(--mono);letter-spacing:4px;color:#c7cdd5;margin-bottom:14px}.empty-state h3{font-size:13px;font-weight:500;margin:0 0 8px;color:#707b89}.empty-state p{font-size:11px;line-height:1.8;margin:0;color:#a0a7b1}.response-meta{display:flex;justify-content:space-between;margin-bottom:23px;gap:10px;color:#8b95a1;font:10px var(--mono)}.byte-list{display:flex;gap:9px;flex-wrap:wrap}.byte-wrap{text-align:center}.byte{display:grid;place-items:center;min-width:52px;min-height:51px;background:#f7f8fa;border:1px solid #e3e7ed;border-radius:7px;font:20px var(--mono);color:#485564;transition:.12s}.byte:hover{background:#fff8e8;border-color:#dfb66d}.byte.selected{background:#fff5df;border-color:#e5b458;color:#8e641b;box-shadow:0 0 0 2px #fdf7e9}.byte-index{display:block;font:8px var(--mono);color:#a5adb7;margin-top:7px}.response-help{margin:20px 0 0;font-size:10px;color:#a0a8b2;display:flex;justify-content:space-between;align-items:center;gap:10px}.text-button{font-size:10px;color:#7c8795;background:none;border:0;padding:5px}.text-button:hover{color:#986c24}.success-badge{background:#edf7f2;color:#41896c;border:1px solid #dceee5;font:9px var(--mono);padding:4px 7px;border-radius:4px}.demo-badge{background:#fff6e6;color:#9a752e;border:1px solid #f1e1c1;font:9px var(--mono);padding:4px 7px;border-radius:4px}.error-badge{background:#fff1ef;color:#ae574b;border:1px solid #f4d9d4;font:9px var(--mono);padding:4px 7px;border-radius:4px}.response-error{padding:20px 0;color:#a34f43;line-height:1.8;font-size:13px}.inspector-card{min-height:238px}.inspector-empty{padding:45px 24px;text-align:center}.inspector-placeholder{color:#8d96a3;font:12px var(--mono)}.inspector-empty p{color:#a4aab3;font-size:10px}.inspector-body{padding:20px 24px 24px}.value-summary{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}.hex-big{font:23px var(--mono);color:#3b4858}.value-equivalent{color:#98a0ac;font:10px var(--mono)}.bits{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}.bit-column{text-align:center}.bit-label{font:8px var(--mono);color:#a1a9b4;margin-bottom:7px}.bit-value{display:grid;place-items:center;border-radius:5px;border:1px solid #e8ebef;background:#f9fafc;height:40px;font:18px var(--mono);color:#a9b1bd}.bit-value.on{color:#966a23;background:#fff3d9;border-color:#ecd3a1}.bit-weight{font:8px var(--mono);color:#a9b0b9;margin-top:7px}.bit-explanation{margin-top:16px;font:9px var(--mono);line-height:1.8;color:#9ba3ad}.bit-explanation strong{font-weight:500;color:#8a6f41}.history-card{margin-top:24px}.history-card .section-heading{min-height:62px;padding-top:18px;padding-bottom:18px}.history-icon{font-size:18px;color:#9da5af;margin-right:2px}.count{background:#f1f3f6;border-radius:4px;padding:3px 6px;font:9px var(--mono);color:#929aa5}.history{max-height:350px;overflow:auto}.history-empty{padding:24px;color:#a0a8b3;font-size:11px}.history-row{display:grid;grid-template-columns:75px 48px 1fr auto;gap:15px;align-items:start;padding:17px 24px;border-bottom:1px solid #f0f2f5}.history-row:last-child{border:0}.history-time{font:9px var(--mono);color:#a0a7b1;padding-top:3px}.history-address{font:10px var(--mono);color:#657384;padding-top:2px}.history-data{font:10px var(--mono);line-height:1.8;color:#68778a;overflow-wrap:anywhere}.history-data span{color:#a0a7b1;font-size:8px;margin-right:7px}.history-result{font:9px var(--mono);color:#458b70;text-align:right;padding-top:3px;white-space:nowrap}.history-result.error{color:#b26353}.history-result.demo{color:#a58242}footer{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#9ca5b0;margin-top:25px;align-items:center}footer>span:first-child{display:flex;align-items:center;gap:6px}.footer-dot{height:5px;width:5px;background:#a0acb8;border-radius:50%}.separator{margin:0 9px;color:#c5ccd4}.notice{padding:14px 18px;border:1px solid #eddab0;background:#fff8e9;color:#886c39;font-size:12px;line-height:1.7;border-radius:8px;margin-bottom:20px}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#26313e;color:#fff;box-shadow:0 8px 30px #19233022;padding:13px 21px;max-width:90%;border-radius:8px;font-size:12px;z-index:5}.pending-animation{animation:pulse 1.3s infinite}@keyframes pulse{50%{opacity:.45}}@media(min-width:1500px){main{padding-top:60px}}@media(max-width:900px){.connection-actions{gap:12px}.workspace{grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:16px}.right-column{gap:16px}.section-heading,.response-content{padding-left:18px;padding-right:18px}.command-card form{padding-left:18px;padding-right:18px}.operation-value{font-size:7px}.bits{gap:4px}.connection{padding:19px}.field-row{gap:12px}.connection-actions .status{display:none}}@media(max-width:680px){.topbar{height:65px;padding:0 21px}.brand-tag,.top-right{display:none}main{padding:30px 17px 20px}.heading{gap:10px;align-items:flex-start}.heading .button{padding:9px 10px;font-size:10px;gap:7px;margin-top:13px}h1{font-size:27px}.eyebrow{font-size:8px;letter-spacing:1.3px}.heading p{font-size:12px}.connection{flex-wrap:wrap;gap:12px;padding:17px}.connection-info{min-width:180px}.connection-actions{width:100%;justify-content:space-between;border-top:1px solid #edf0f4;padding-top:14px}.connection-actions .status{display:flex}.connection-title{font-size:13px}.workspace{grid-template-columns:1fr}.right-column{gap:16px}.command-card form{padding:22px}.operation-value{font-size:8px}.section-heading{padding:20px 22px}.response-content{min-height:200px;padding:22px}.inspector-body{padding:20px 22px}.history-row{grid-template-columns:52px 36px 1fr;gap:9px;padding:15px}.history-result{grid-column:3;text-align:left}footer{align-items:flex-start;flex-direction:column;line-height:1.8}.response-help{align-items:flex-start}.brand{font-size:23px}}

.uart-log { max-height: 320px; min-height: 120px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: #f6f7f9; border-radius: 8px; font-size: 12px; }
select { font: inherit; padding: 12px; border: 1px solid #d7dce3; border-radius: 8px; background: white; width: 100%; }
#uart-form .field { margin-bottom: 16px; }

.uart-card > p, .uart-card > form, .uart-card > pre { margin: 20px 24px; }
.uart-card .section-heading { gap: 12px; flex-wrap: wrap; }
.uart-card .section-heading > .subtle { white-space: normal; }
#uart-form .button { margin: 0 8px 8px 0; }

.bus-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin: 0 0 24px; }
.bus-tabs [role="tab"] { padding: 13px 26px; background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; font-weight: 600; }
.bus-tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.scan-card { margin-bottom: 24px; }
.scan-card .section-heading { gap: 12px; flex-wrap: wrap; }
.scan-body { padding: 0 24px 16px; }
.scan-body > p { line-height: 1.7; }
.scan-results { display: flex; flex-wrap: wrap; gap: 8px; }
#panel-uart .uart-card { margin-top: 0; }

.script-card { margin-top: 24px; }
.script-body { padding: 24px; }
.script-body > p { font-size: 11px; line-height: 1.7; color: var(--muted); }
.script-body .field-row { margin-bottom: 16px; }
.script-body .script-note { background: #fff8e9; color: #886c39; padding: 12px 14px; border-radius: 7px; }
#script-source { tab-size: 2; line-height: 1.65; font-size: 12px; min-height: 360px; resize: vertical; }
.script-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#script-progress { width: 100%; accent-color: var(--green); }
.byte-list { max-height: 360px; overflow: auto; padding: 2px; }
@media(max-width:680px) { .script-body .field-row { grid-template-columns: 1fr; } }

.code-editor { position: relative; }
.code-editor pre { display: none; pointer-events: none; position: absolute; inset: 0; margin: 0; padding: 12px; border: 1px solid transparent; border-radius: 6px; overflow: hidden; background: #fcfcfd; color: #36414e; }
.code-editor pre, .code-editor pre code, #script-source { font: 12px/1.65 var(--mono); font-variant-ligatures: none; tab-size: 2; letter-spacing: normal; text-align: left; white-space: pre; overflow-wrap: normal; word-break: normal; }
#script-source { display: block; position: relative; overflow: auto; }
.code-editor.highlighted pre { display: block; }
.code-editor.highlighted #script-source { background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: #26313e; }
.code-editor.highlighted #script-source::selection { background: rgba(80, 140, 210, .22); }
.code-editor .token.comment, .code-editor .token.prolog, .code-editor .token.doctype { color: #7a8491; }
.code-editor .token.keyword { color: #8850a4; }
.code-editor .token.string, .code-editor .token.template-string, .code-editor .token.regex { color: #287b5b; }
.code-editor .token.number, .code-editor .token.boolean, .code-editor .token.constant { color: #aa6420; }
.code-editor .token.function, .code-editor .token.function-variable { color: #266b9e; }
.code-editor .token.operator, .code-editor .token.punctuation { color: #627185; }
.code-editor .token.class-name, .code-editor .token.builtin { color: #a1553d; }
.code-editor.highlighted:has(#script-source:disabled) { opacity: .7; }
@media(forced-colors:active) { .code-editor.highlighted pre { display: none; } .code-editor.highlighted #script-source { color: CanvasText; -webkit-text-fill-color: CanvasText; background: Canvas; caret-color: CanvasText; } }