:root {
  color-scheme: light;
  --page: #edf1f7;
  --ink: #252d45;
  --muted: #69748d;
  --faint: #7b869c;
  --accent: #5963dc;
  --accent-hover: #474fcd;
  --accent-soft: rgba(90, 101, 218, .09);
  --glass: rgba(255, 255, 255, .55);
  --glass-border: rgba(255, 255, 255, .92);
  --glass-highlight: rgba(255, 255, 255, .8);
  --line: rgba(74, 91, 134, .11);
  --input: rgba(255, 255, 255, .57);
  --surface: rgba(255, 255, 255, .32);
  --selected: rgba(255, 255, 255, .91);
  --log-surface: rgba(253, 254, 255, .37);
  --shadow: 0 12px 44px -20px rgba(45, 59, 105, .16), 0 2px 5px rgba(57, 65, 93, .02);
  --rx: #218576;
  --tx: #655ac6;
  --error: #c0435f;
  --toast: rgba(255, 255, 255, .92);
  --orb-opacity: .54;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
:root[data-theme="dark"] { color-scheme: dark; --page: #111724; --ink: #e5eaf8; --muted: #a3adc4; --faint: #8b98b4; --accent: #a8adff; --accent-hover: #bac0ff; --accent-soft: rgba(155, 160, 255, .12); --glass: rgba(30, 38, 59, .62); --glass-border: rgba(185, 201, 255, .16); --glass-highlight: rgba(198, 210, 255, .11); --line: rgba(168, 185, 230, .13); --input: rgba(22, 30, 48, .53); --surface: rgba(157, 174, 225, .05); --selected: rgba(144, 155, 210, .19); --log-surface: rgba(12, 20, 35, .27); --shadow: 0 15px 44px -20px rgba(0, 0, 0, .45); --rx: #70d5c1; --tx: #b5a5ff; --error: #ff92aa; --toast: rgba(37, 46, 69, .97); --orb-opacity: .19; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --page: #111724; --ink: #e5eaf8; --muted: #a3adc4; --faint: #8b98b4; --accent: #a8adff; --accent-hover: #bac0ff; --accent-soft: rgba(155, 160, 255, .12); --glass: rgba(30, 38, 59, .62); --glass-border: rgba(185, 201, 255, .16); --glass-highlight: rgba(198, 210, 255, .11); --line: rgba(168, 185, 230, .13); --input: rgba(22, 30, 48, .53); --surface: rgba(157, 174, 225, .05); --selected: rgba(144, 155, 210, .19); --log-surface: rgba(12, 20, 35, .27); --shadow: 0 15px 44px -20px rgba(0, 0, 0, .45); --rx: #70d5c1; --tx: #b5a5ff; --error: #ff92aa; --toast: rgba(37, 46, 69, .97); --orb-opacity: .19; }
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--page); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }
button, a, input, textarea, select { outline-offset: 4px; }
:focus-visible { outline: 3px solid var(--accent); }
button { transition: background .18s, box-shadow .18s, transform .18s, opacity .18s; }
button:not(:disabled):active { transform: translateY(1px); }
[hidden] { display: none !important; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 16px; font-weight: 650; letter-spacing: .2px; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.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; }
.ambient { position: fixed; pointer-events: none; z-index: -1; filter: blur(76px); opacity: var(--orb-opacity); border-radius: 50%; }
.ambient-blue { width: 720px; height: 600px; right: -90px; top: -230px; background: radial-gradient(ellipse, #a9b6f9, #c7cafa 58%, transparent 72%); }
.ambient-peach { width: 620px; height: 560px; left: -280px; top: 130px; background: radial-gradient(ellipse, #f9c9d0, #f6d8c9 55%, transparent 73%); }
.ambient-mint { width: 580px; height: 540px; right: 20%; bottom: -290px; background: radial-gradient(ellipse, #a8dddf, #c1e9e1 55%, transparent 70%); }
.workspace { max-width: 1440px; padding: 32px 52px 22px; margin: 0 auto; }
.page-header, .header-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { color: inherit; text-decoration: none; display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px; background: linear-gradient(145deg, #9299f1, #5763d4); color: #fff; box-shadow: 0 6px 12px rgba(84, 99, 199, .16), inset 0 1px 2px rgba(255, 255, 255, .6); }
.brand-mark .icon { width: 26px; height: 26px; stroke-width: 1.85; }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.8px; line-height: 1; }
.brand-name > span { font-weight: 400; margin-left: 4px; }
.brand-name small { display: block; font-size: 10px; color: var(--muted); letter-spacing: 1.3px; font-weight: 400; margin-top: 8px; }
.local-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.local-badge .icon { width: 16px; height: 16px; color: var(--rx); }
.segmented { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
.segmented button { border: 0; background: transparent; color: var(--muted); border-radius: 8px; }
.segmented button:hover { background: var(--surface); color: var(--ink); }
.segmented button.is-active { background: var(--selected); color: var(--accent); box-shadow: 0 2px 5px rgba(39, 57, 103, .08), inset 0 1px 1px var(--glass-highlight); }
.theme-control { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.icon-button { display: grid; place-items: center; width: 32px; height: 29px; }
.icon-button .icon { width: 16px; height: 16px; }
.intro { display: flex; justify-content: space-between; align-items: flex-end; padding: 43px 0 29px; gap: 24px; }
.eyebrow { font-size: 9px; font-weight: 650; letter-spacing: 2.1px; color: var(--accent); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
h1 { font-size: clamp(25px, 2.8vw, 37px); font-weight: 620; letter-spacing: -.9px; line-height: 1.35; }
h1 > span { color: var(--muted); font-weight: 420; }
.intro-copy { color: var(--muted); font-size: 13px; margin-top: 10px; letter-spacing: .3px; }
.session-badge { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 13px; border-radius: 30px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--muted); font-size: 12px; box-shadow: var(--shadow); margin-bottom: 2px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.is-connected .status-dot, .status-dot.is-connected { background: var(--rx); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rx) 12%, transparent); }
.session-badge.is-connected { color: var(--rx); }
.glass { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-highlight); backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%); border-radius: 22px; }
.compatibility-banner { margin-bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: var(--error); line-height: 1.8; font-size: 13px; }
.workbench { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 22px; align-items: start; }
.connection-panel { padding: 25px 23px 20px; }
.panel-heading { display: flex; align-items: center; gap: 11px; }
.panel-heading p { color: var(--muted); font-size: 11px; margin-top: 5px; }
.section-icon { color: var(--accent); display: grid; place-items: center; }
.section-icon .icon { width: 21px; height: 21px; }
.step-label { font-size: 10px; letter-spacing: 1px; color: var(--faint); margin-left: auto; font-variant-numeric: tabular-nums; }
.device-card { margin-top: 23px; border: 1px dashed color-mix(in srgb, var(--accent) 24%, transparent); background: var(--accent-soft); padding: 17px 14px 14px; border-radius: 14px; display: flex; align-items: center; flex-direction: column; text-align: center; }
.device-symbol { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--selected); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 3px 10px rgba(77, 96, 165, .06); margin-bottom: 12px; }
.device-symbol .icon { width: 22px; height: 22px; }
.device-card strong { font-size: 12px; font-weight: 550; max-width: 100%; overflow-wrap: anywhere; }
.device-card > span:last-of-type { font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 16px; border: 1px solid transparent; border-radius: 11px; font-size: 12px; font-weight: 550; white-space: nowrap; }
.button .icon { width: 17px; height: 17px; }
.button-secondary { color: var(--accent); background: var(--selected); border-color: var(--glass-border); box-shadow: 0 3px 8px rgba(55, 70, 120, .06); }
.button-secondary:hover { box-shadow: 0 3px 12px rgba(55, 70, 120, .12); background: var(--input); }
.device-card .button { margin-top: 15px; width: 100%; min-height: 35px; padding: 8px 12px; }
.arrow-icon { margin-left: auto; }
.button-primary { background: linear-gradient(125deg, #7279e7, #5864d6); color: #fff; border-color: rgba(95, 104, 216, .2); box-shadow: 0 4px 10px rgba(87, 100, 209, .18), inset 0 1px 0 rgba(255, 255, 255, .2); }
.button-primary:not(:disabled):hover { background: linear-gradient(125deg, #626bdf, #4a55c6); box-shadow: 0 5px 14px rgba(87, 100, 209, .25); }
.button-primary.is-disconnect { background: var(--accent-soft); color: var(--accent); box-shadow: none; border-color: var(--line); }
.button-primary.is-disconnect:not(:disabled):hover { background: var(--surface); }
.configuration-heading { display: flex; justify-content: space-between; align-items: center; margin: 23px 0 17px; font-size: 12px; font-weight: 550; }
.micro-label { font-size: 8px; font-weight: 500; color: var(--faint); letter-spacing: 1.1px; }
.field { margin-bottom: 14px; min-width: 0; }
.field label { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 7px; font-size: 11px; }
.field label > span { color: var(--faint); font-size: 10px; }
select, input[type="number"] { border: 1px solid var(--line); background: var(--input); border-radius: 9px; min-height: 39px; width: 100%; padding: 9px 12px; font-size: 12px; transition: border-color .18s; }
select { appearance: none; padding-right: 32px; cursor: pointer; }
select:disabled, fieldset:disabled select, fieldset:disabled input { opacity: .55; cursor: not-allowed; }
select option { color: var(--ink); background: var(--page); }
.select-wrap { position: relative; }
.select-wrap > .icon { position: absolute; pointer-events: none; right: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 11px; }
.connect-button { width: 100%; margin-top: 5px; min-height: 42px; }
.connection-note { color: var(--muted); display: flex; gap: 7px; justify-content: center; align-items: center; font-size: 10px; margin-top: 12px; line-height: 1.6; text-align: center; }
.sidebar-footnote { display: flex; align-items: center; justify-content: center; color: var(--faint); border-top: 1px solid var(--line); margin-top: 22px; padding-top: 17px; gap: 9px; }
.sidebar-footnote .icon { width: 15px; height: 15px; }
.sidebar-footnote p { font-size: 10px; line-height: 1.8; }
.console-column { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.log-panel { overflow: hidden; display: flex; flex-direction: column; }
.log-heading { display: flex; align-items: center; justify-content: space-between; padding: 23px 24px 17px; gap: 12px; }
.log-title-group, .send-title-group { display: flex; align-items: center; gap: 10px; }
.live-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 700; letter-spacing: .7px; color: var(--faint); border: 1px solid var(--line); padding: 4px 6px; border-radius: 5px; margin-left: 2px; }
.live-badge .status-dot { width: 4px; height: 4px; }
.live-badge.is-connected { color: var(--rx); background: color-mix(in srgb, var(--rx) 5%, transparent); }
.log-count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.log-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 24px 16px; gap: 12px; }
.log-view-controls { display: flex; gap: 19px; align-items: center; }
.format-switch { border-radius: 9px; padding: 3px; }
.format-switch button { padding: 5px 12px; font-size: 10px; font-weight: 600; min-height: 27px; border-radius: 6px; }
.toggle-label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 10px; color: var(--muted); white-space: nowrap; position: relative; }
.toggle-label input { opacity: 0; position: absolute; width: 29px; height: 17px; margin: 0; }
.toggle-track { width: 27px; height: 16px; background: color-mix(in srgb, var(--muted) 25%, transparent); border-radius: 20px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05); transition: background .18s; position: relative; }
.toggle-track::after { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; border-radius: 50%; top: 2px; left: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .16); transition: transform .18s; }
.toggle-label input:checked + .toggle-track { background: #7981dd; }
.toggle-label input:checked + .toggle-track::after { transform: translateX(11px); }
.toggle-label input:focus-visible + .toggle-track { outline: 3px solid var(--accent); outline-offset: 3px; }
.log-actions { display: flex; gap: 4px; align-items: center; }
.toolbar-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; background: transparent; border-radius: 7px; color: var(--muted); padding: 7px 8px; font-size: 10px; }
.toolbar-button .icon { width: 14px; height: 14px; }
.toolbar-button:not(:disabled):hover { color: var(--accent); background: var(--accent-soft); }
#clear-log:not(:disabled):hover { color: var(--error); }
.toolbar-divider { height: 13px; width: 1px; background: var(--line); margin: 0 2px; }
.log-columns { display: grid; grid-template-columns: 110px 54px 1fr; padding: 10px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); color: var(--faint); font-size: 9px; letter-spacing: .5px; }
.log-viewport { height: 315px; overflow: auto; overscroll-behavior: contain; position: relative; background: var(--log-surface); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 25%, transparent) transparent; }
.log-entries { min-width: 0; }
.log-row { display: grid; grid-template-columns: 110px 54px minmax(0, 1fr); padding: 9px 24px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 11px; line-height: 1.7; content-visibility: auto; contain-intrinsic-size: auto 37px; }
.log-row:hover { background: var(--surface); }
.log-time { font-variant-numeric: tabular-nums; color: var(--faint); }
.log-direction { align-self: start; font-size: 9px; font-weight: 600; padding-top: 1px; }
.log-direction span { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--surface); }
.log-row[data-direction="RX"] .log-direction { color: var(--rx); }
.log-row[data-direction="RX"] .log-direction span { background: color-mix(in srgb, var(--rx) 8%, transparent); }
.log-row[data-direction="TX"] .log-direction { color: var(--tx); }
.log-row[data-direction="TX"] .log-direction span { background: color-mix(in srgb, var(--tx) 8%, transparent); }
.log-row[data-direction="SYS"] .log-direction, .log-row[data-direction="SYS"] .log-data { color: var(--muted); }
.log-row.is-error .log-data { color: var(--error); }
.log-data { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; min-width: 0; }
.log-data.is-pending { color: var(--faint); font-style: italic; }
.empty-state { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px 24px; text-align: center; }
.empty-illustration { width: 150px; height: 116px; position: relative; display: grid; place-items: center; margin-bottom: 10px; }
.empty-terminal { position: relative; width: 63px; height: 58px; border: 1px solid var(--glass-border); background: linear-gradient(135deg, var(--selected), var(--accent-soft)); display: grid; place-items: center; border-radius: 18px; box-shadow: 0 10px 20px rgba(70, 92, 167, .1), inset 0 1px 1px var(--glass-highlight); transform: rotate(-7deg); }
.empty-terminal .icon { width: 29px; height: 29px; color: var(--accent); stroke-width: 1.5; }
.empty-orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.orbit-one { width: 99px; height: 99px; }
.orbit-two { width: 145px; height: 145px; opacity: .65; }
.orbit-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #aaaee8; box-shadow: 0 0 0 4px var(--glass); }
.dot-one { right: 13px; top: 18px; width: 5px; height: 5px; }
.dot-two { left: 25px; bottom: 38px; background: #89c6bd; }
.dot-three { right: 43px; bottom: 17px; width: 4px; height: 4px; background: #daa8be; }
.empty-state h3 { font-size: 14px; font-weight: 550; margin-top: 9px; }
.empty-state p { font-size: 11px; color: var(--muted); line-height: 1.9; margin-top: 9px; }
.empty-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 17px; margin-top: 22px; font-size: 9px; color: var(--faint); }
.empty-legend > span { display: flex; align-items: center; gap: 5px; }
.legend-dot { display: inline-block; height: 5px; width: 5px; border-radius: 50%; flex-shrink: 0; }
.rx-dot { background: var(--rx); }
.tx-dot { background: var(--tx); }
.sys-dot { background: var(--faint); }
.log-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); gap: 12px; min-height: 38px; }
.traffic-stats { display: flex; gap: 21px; font-family: "SFMono-Regular", Consolas, monospace; }
.traffic-stats > span { display: flex; align-items: center; gap: 5px; }
.traffic-stats strong { font-weight: 550; color: var(--ink); font-variant-numeric: tabular-nums; }
.traffic-stats small { font-size: 9px; color: var(--faint); }
.retention-note { font-size: 9px; color: var(--faint); text-align: right; }
.retention-note.has-dropped { color: var(--error); }
.footer-dot { margin: 0 8px; opacity: .55; }
.send-panel { padding: 20px 23px 17px; }
.send-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.send-title-group h2 { font-size: 14px; }
.send-title-group .icon { width: 17px; height: 17px; }
textarea { width: 100%; display: block; resize: vertical; min-height: 78px; max-height: 350px; background: var(--input); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; font-family: "SFMono-Regular", Consolas, "Microsoft YaHei", monospace; font-size: 12px; line-height: 1.8; }
textarea::placeholder { color: var(--faint); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 11px; }
textarea:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
textarea[aria-invalid="true"] { border-color: var(--error); }
.send-footer { display: flex; align-items: center; gap: 14px; margin-top: 13px; }
.line-ending-control { display: flex; align-items: center; gap: 8px; }
.line-ending-control > label { color: var(--muted); font-size: 10px; white-space: nowrap; }
.line-ending-control select { min-height: 32px; padding: 6px 26px 6px 10px; font-size: 10px; min-width: 95px; border-radius: 7px; }
.line-ending-control .select-wrap > .icon { right: 7px; width: 12px; height: 12px; }
.send-hint { color: var(--faint); font-size: 9px; margin-left: auto; }
.send-button { min-height: 33px; padding: 7px 15px; font-size: 11px; border-radius: 9px; }
.send-button .icon { width: 13px; height: 13px; }
.send-error { color: var(--error); font-size: 11px; margin-top: 8px; line-height: 1.7; }
.page-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 23px; color: var(--faint); font-size: 9px; }
.page-footer > span:first-child { display: flex; align-items: center; gap: 6px; }
.page-footer > span:last-child { font-size: 8px; letter-spacing: 1.2px; }
.footer-status-dot { width: 4px; height: 4px; background: var(--rx); border-radius: 50%; opacity: .7; }
.toast-region { position: fixed; z-index: 20; bottom: 25px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 13px; color: var(--ink); background: var(--toast); border: 1px solid var(--glass-border); box-shadow: 0 8px 30px rgba(30, 45, 82, .15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 12px; line-height: 1.7; animation: toast-in .2s ease-out; }
.toast .icon { width: 17px; height: 17px; color: var(--rx); }
.toast.is-error .icon { color: var(--error); }
@keyframes toast-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 1500px) { .workspace { padding-top: 40px; } .intro { padding-top: 52px; } .log-viewport { height: 352px; } }
@media (max-width: 1100px) { .workspace { padding: 26px 30px 20px; } .workbench { grid-template-columns: 270px minmax(0, 1fr); gap: 18px; } .connection-panel { padding: 23px 20px 20px; } .log-toolbar { flex-wrap: wrap; gap: 10px; } .log-view-controls { gap: 12px; } .log-heading, .log-toolbar { padding-left: 20px; padding-right: 20px; } .toolbar-button { padding: 7px 5px; } .log-columns, .log-row { padding-left: 20px; padding-right: 20px; grid-template-columns: 102px 47px minmax(0, 1fr); } .send-hint { display: none; } .send-button { margin-left: auto; } }
@media (max-width: 780px) { .workspace { padding: 22px 22px 20px; } .intro { padding: 32px 0 25px; } h1 { font-size: 29px; } .local-badge { display: none; } .workbench { grid-template-columns: 1fr; } .connection-panel { padding: 21px; } .device-card { flex-direction: row; flex-wrap: wrap; text-align: left; gap: 0 12px; padding: 14px; margin-top: 17px; } .device-symbol { margin: 0; width: 36px; height: 36px; } .device-card strong { flex: 1; } .device-card > span:last-of-type { width: 100%; margin: 6px 0 0 48px; } .device-card .button { width: auto; margin: 12px 0 0 48px; gap: 12px; } .configuration-heading { margin: 19px 0 14px; } #connection-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .configuration-heading, .field-grid, #authorized-field { grid-column: 1 / -1; } #connection-fields > .field { grid-column: 1 / -1; } .field-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sidebar-footnote { display: none; } .connect-button { margin-top: 2px; } .log-viewport { height: 350px; } .log-toolbar { flex-wrap: nowrap; } .page-footer > span:first-child { font-size: 8px; } .page-footer > span:last-child { letter-spacing: .4px; } }
@media (max-width: 480px) { .workspace { padding: 18px 14px; } .brand-mark { width: 37px; height: 37px; border-radius: 12px; } .brand-name { font-size: 18px; } .brand-name small { font-size: 8px; } .header-actions { gap: 0; } .theme-control { padding: 3px; } .icon-button { width: 27px; height: 27px; } .intro { align-items: flex-start; gap: 14px; flex-direction: column; padding-top: 28px; } h1 { font-size: 27px; } .eyebrow { font-size: 8px; } .intro-copy { font-size: 11px; } .session-badge { font-size: 10px; padding: 6px 11px; } .connection-panel { padding: 19px; } .field-grid { grid-template-columns: 1fr 1fr; } .log-heading { padding: 19px 16px 14px; } .log-toolbar { flex-wrap: wrap; padding: 0 16px 13px; } .log-view-controls { gap: 14px; } .log-actions { margin-left: auto; } .toolbar-button span { display: none; } .toolbar-button { width: 28px; min-height: 30px; } .log-columns, .log-row { grid-template-columns: 93px 40px minmax(0, 1fr); padding-left: 14px; padding-right: 14px; } .log-row { font-size: 10px; } .log-columns { font-size: 8px; } .log-direction { font-size: 8px; } .log-direction span { padding: 0 4px; } .log-footer { padding: 11px 14px; } .traffic-stats { gap: 12px; } .retention-note { font-size: 8px; } .send-panel { padding: 18px 16px 16px; } .send-footer { gap: 8px; } .line-ending-control { gap: 7px; } .line-ending-control > label { font-size: 9px; } .page-footer { flex-wrap: wrap; gap: 10px; margin-top: 18px; } .glass { border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: color-mix(in srgb, var(--page) 92%, white); } }

/* Compact workbench layout. Keep the visual treatment quiet so the controls stay primary. */
.workspace { max-width: 1280px; padding: 24px 32px 18px; }
.page-header { padding-bottom: 4px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; }
.brand-mark .icon { width: 21px; height: 21px; }
.brand-name { font-size: 17px; letter-spacing: -.35px; }
.brand-name > span { margin-left: 0; font-weight: 650; }
.brand-name small { font-size: 9px; margin-top: 5px; letter-spacing: .8px; }
.language-control { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.language-control select { width: auto; min-height: 30px; padding: 5px 25px 5px 9px; border-radius: 8px; font-size: 11px; }
.intro { padding: 28px 0 20px; align-items: center; }
.intro h1 { font-size: 25px; letter-spacing: -.4px; }
.intro-copy { margin-top: 6px; font-size: 12px; }
.session-badge { padding: 7px 10px; font-size: 11px; }
.glass { border-radius: 13px; }
.workbench { grid-template-columns: 258px minmax(0, 1fr); gap: 16px; }
.connection-panel { padding: 18px; }
.panel-heading { gap: 9px; }
.panel-heading p { margin-top: 3px; }
.device-card { margin-top: 16px; padding: 13px 11px 11px; border-radius: 10px; }
.device-symbol { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 8px; }
.device-symbol .icon { width: 18px; height: 18px; }
.device-card .button { margin-top: 11px; min-height: 32px; padding: 7px 10px; }
.configuration-heading { margin: 18px 0 12px; }
.field { margin-bottom: 11px; }
.field label { margin-bottom: 5px; font-size: 10px; }
select, input[type="number"] { min-height: 34px; padding: 7px 10px; border-radius: 7px; font-size: 11px; }
.field-grid { gap: 0 8px; }
.connect-button { min-height: 36px; margin-top: 3px; }
.connection-note { margin-top: 9px; font-size: 9px; }
.log-panel, .send-panel { border-radius: 13px; }
.log-heading { padding: 17px 18px 12px; }
.log-toolbar { padding: 0 18px 12px; }
.log-columns, .log-row { grid-template-columns: 100px 48px minmax(0, 1fr); padding-left: 18px; padding-right: 18px; }
.log-viewport { height: 350px; }
.log-footer { padding: 10px 18px; }
.empty-state { min-height: 180px; padding: 35px 18px; }
.empty-state h3 { font-size: 13px; }
.empty-state p { margin-top: 6px; font-size: 10px; }
.empty-illustration, .empty-legend { display: none; }
.send-panel { padding: 16px 18px 14px; }
.send-heading { margin-bottom: 11px; }
textarea { min-height: 66px; padding: 10px 11px; border-radius: 8px; }
.send-footer { margin-top: 10px; }
.send-button { min-height: 31px; }
.page-footer { margin-top: 15px; }
.timestamp-hidden .log-columns { grid-template-columns: 48px minmax(0, 1fr); }
.timestamp-hidden .log-columns span:first-child { display: none; }
.timestamp-hidden .log-row { grid-template-columns: 48px minmax(0, 1fr); }
.timestamp-hidden .log-time { display: none; }
.timestamp-hidden .log-stream {
  min-height: 180px;
  padding: 12px 18px;
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.timestamp-hidden .log-stream-part { display: inline; }
.timestamp-hidden .log-stream .log-direction { display: inline-block; margin-right: 6px; vertical-align: top; }
.timestamp-hidden .log-stream-data { white-space: pre-wrap; }
.timestamp-hidden .log-stream-system { display: block; color: var(--muted); }
.timestamp-hidden .log-stream-system.is-error { color: var(--error); }
@media (max-width: 780px) {
  .workspace { padding: 18px 20px 16px; }
  .workbench { grid-template-columns: 1fr; }
  .connection-panel { padding: 18px; }
  .log-viewport { height: 320px; }
}
@media (max-width: 480px) {
  .workspace { padding: 15px 12px; }
  .language-control > span { display: none; }
  .intro { padding: 24px 0 17px; }
  .intro h1 { font-size: 23px; }
  .log-heading { padding-left: 14px; padding-right: 14px; }
  .log-toolbar { padding-left: 14px; padding-right: 14px; }
  .log-columns, .log-row { padding-left: 12px; padding-right: 12px; grid-template-columns: 88px 40px minmax(0, 1fr); }
  .timestamp-hidden .log-columns, .timestamp-hidden .log-row { grid-template-columns: 40px minmax(0, 1fr); }
  .timestamp-hidden .log-stream { padding-left: 12px; padding-right: 12px; }
  .log-footer { padding-left: 12px; padding-right: 12px; }
}

/* Readable type and a flatter surface treatment. */
:root { --shadow: none; }
body { font-size: 1rem; }
h2 { font-size: 1rem; }
.brand-mark { background: var(--accent); border-color: transparent; box-shadow: none; }
.brand-name { font-size: 1.125rem; }
.brand-name small { font-size: .625rem; }
.language-control,
.language-control select,
.session-badge,
.compatibility-banner,
.intro-copy,
.panel-heading p,
.step-label,
.field label,
.field label > span,
.toggle-label,
.toolbar-button,
.format-switch button,
.connection-note,
.send-hint { font-size: .75rem; }
.intro h1 { font-size: 1.625rem; }
.device-card strong,
.button,
select,
input[type="number"],
textarea,
.log-row,
.send-button { font-size: .8125rem; }
.device-card > span:last-of-type,
.configuration-heading,
.sidebar-footnote p,
.empty-state p,
.log-count,
.log-footer,
.page-footer,
.retention-note,
.traffic-stats small,
.line-ending-control > label,
.line-ending-control select,
.send-error { font-size: .6875rem; }
.timestamp-hidden .log-stream { font-size: .8125rem; }
.live-badge,
.log-columns,
.log-direction,
.empty-legend { font-size: .625rem; }
.empty-state h3,
.send-title-group h2 { font-size: .9375rem; }
textarea::placeholder { font-size: .75rem; }
.micro-label { font-size: .5625rem; }

.glass,
.session-badge,
.brand-mark,
.device-symbol,
.button-secondary,
.button-primary,
.segmented button.is-active,
.toggle-track,
.toggle-track::after,
.empty-terminal,
.toast { box-shadow: none; }
.glass,
.theme-control,
.toast { backdrop-filter: none; -webkit-backdrop-filter: none; }
.toast { font-size: .8125rem; }
.page-footer > span:last-child { font-size: .625rem; }
.button-secondary:hover,
.button-primary:not(:disabled):hover { box-shadow: none; }
.button-primary { background: var(--accent); border-color: transparent; }
.button-primary:not(:disabled):hover { background: var(--accent-hover); }

.github-link {
  display: grid;
  place-items: center;
  width: 32px;
  height: 29px;
  color: var(--muted);
  border-radius: 8px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.github-link .icon { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.github-link:hover { color: var(--ink); background: var(--surface); }
.github-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (max-width: 480px) {
  .brand-name { font-size: 1.125rem; }
  .intro h1 { font-size: 1.5rem; }
  .intro-copy { font-size: .75rem; }
  .log-row { font-size: .75rem; }
  .log-columns,
  .log-direction { font-size: .5625rem; }
  .line-ending-control > label { font-size: .6875rem; }
  .page-footer,
  .retention-note { font-size: .625rem; }
  .github-link { width: 27px; height: 27px; }
}