:root{color-scheme:light;--canvas:#f5f4ef;--surface:#fffefa;--sidebar:#eff1ea;--ink:#1c352c;--muted:#59665d;--subtle:#667269;--forest:#173b32;--green:#276548;--green-hover:#1d5139;--green-soft:#e4eedf;--border:#d6dcd1;--border-strong:#b4bfb0;--focus:#438355;--danger:#a02f27;--danger-soft:#fcf0eb;--warning:#79541e;--warning-soft:#f5ead2;--radius:7px;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{min-width:0;scrollbar-gutter:stable}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
body.dialog-open{overflow:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
button,input,textarea,summary{-webkit-tap-highlight-color:transparent}
button{color:inherit}
button:disabled,input:disabled,fieldset:disabled{cursor:not-allowed}
button:disabled{opacity:.56}
a{color:var(--green)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:650}
h1,h2{letter-spacing:-.04em;line-height:1.16}
h3{font-size:1.0625rem;line-height:1.35;letter-spacing:-.02em}
svg{flex:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
code,.mono{font-family:var(--mono);font-size:.875rem;overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
input:focus-visible,textarea:focus-visible{outline-offset:1px}
::selection{background:#cfdfc5;color:#18392b}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;inset-block-start:8px;inset-inline-start:16px;z-index:20;padding:12px 18px;background:var(--surface);color:var(--forest);transform:translateY(-160%);border-radius:var(--radius);font-weight:600}
.skip-link:focus{transform:none}
.muted{color:var(--muted)}
.eyebrow{color:var(--subtle);font-size:.6875rem;font-weight:700;letter-spacing:.115em;line-height:1.5}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 15px;border:1px solid transparent;border-radius:var(--radius);text-decoration:none;font-size:.875rem;font-weight:600;line-height:1.45;text-align:center;transition:background-color 120ms ease,border-color 120ms ease}
.button svg{width:18px;height:18px}
.button:active:not(:disabled){transform:translateY(1px)}
.primary-button{background:var(--green);color:#fff}
.primary-button:hover:not(:disabled){background:var(--green-hover)}
.secondary-button{background:var(--surface);border-color:var(--border-strong);color:var(--ink)}
.secondary-button:hover:not(:disabled){background:#ebeee5;border-color:#899985}
.text-button,.inline-button{background:none;border:0;border-radius:4px;padding:7px 3px;min-height:38px;font-size:.8125rem;color:var(--green);font-weight:600;text-align:start}
.text-button:hover:not(:disabled),.inline-button:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
.inline-button{min-height:24px;padding:2px 0;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
.icon-button{display:inline-grid;flex:none;place-items:center;min-width:40px;min-height:40px;border:0;border-radius:var(--radius);background:none;color:var(--muted);font-size:1.5rem;line-height:1}
.icon-button:hover:not(:disabled){background:#e6eae1;color:var(--ink)}
.full-width{width:100%}
.plus{font-weight:400;font-size:1.35rem;line-height:.8;margin-block-start:-2px}
.site-header{background:var(--forest);color:#f4f6ef}
.header-inner{display:flex;align-items:center;gap:26px;min-height:76px;max-width:1304px;padding:12px 32px;margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:12px;color:inherit;font-weight:620;font-size:1.125rem;text-decoration:none;letter-spacing:-.035em;white-space:nowrap}
.brand-mark{width:32px;height:32px;stroke:#c6dda7}
.header-label{padding-inline-start:25px;border-inline-start:1px solid #4c675b;color:#c1cfc3;font-size:.625rem;font-weight:600;letter-spacing:.13em}
.session-tools{display:flex;align-items:center;gap:20px;margin-inline-start:auto}
.session-label{display:inline-flex;align-items:center;gap:7px;color:#d3dfd3;font-size:.75rem}
.session-dot{width:5px;height:5px;background:#b9d398;border-radius:50%}
.header-button{min-height:36px;padding:6px 14px;color:#f4f6ef;background:transparent;border-color:#6c8578;font-size:.8125rem}
.header-button:hover:not(:disabled){background:#2d5145;border-color:#a0b198}
.site-header:focus-visible{outline-color:#d3e7b9}
.startup-view{max-width:600px;margin:100px auto;padding:24px;text-align:center}
.startup-view h1{font-size:1.75rem;margin-block:20px 8px}
.startup-view p{color:var(--muted)}
.loading-mark{width:32px;height:5px;margin-inline:auto;background:var(--green);border-radius:2px}
.access-view{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:76px;max-width:1050px;min-height:calc(100svh - 120px);margin-inline:auto;padding:64px 32px}
.access-heading .eyebrow{margin-block-end:25px}
.access-heading h1{font-size:clamp(2.75rem,5vw,4.25rem);letter-spacing:-.065em;line-height:1.035;font-weight:620}
.access-heading > p:last-child{margin-block-start:25px;font-size:1rem;color:var(--muted);line-height:1.7}
.access-form-wrap{padding:32px;border-block-start:3px solid var(--forest);background:var(--surface);box-shadow:0 0 0 1px var(--border)}
.access-form-wrap h2{font-size:1.4375rem;margin-block-end:10px}
.access-form-wrap > .muted{font-size:.875rem;margin-block-end:27px}
.access-form-wrap .field{margin-block-end:21px}
.password-field{display:flex;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fff}
.password-field input{border:0;border-radius:inherit;min-width:0;width:100%;background:transparent}
.password-field input:focus-visible{position:relative}
.reveal-button{flex:none;min-width:69px;padding-inline:10px;border:0;color:var(--green);background:transparent;font-size:.75rem}
.reveal-button:hover:not(:disabled){background:#edf1e7}
.access-note{margin-block-start:26px;padding-block-start:21px;border-block-start:1px solid var(--border);font-size:.75rem;color:var(--muted);line-height:1.65}
.app-view{max-width:1304px;margin-inline:auto;padding:34px 32px 18px}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.page-heading h1{margin-block-start:6px;font-size:2.35rem;letter-spacing:-.055em}
.page-description{margin-block-start:10px;font-size:.875rem;color:var(--muted)}
.page-heading > .button{flex:none}
.overview-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-block:29px 13px;font-size:.75rem;color:var(--muted)}
#device-summary{font-weight:600}
.sync-note{text-align:end}
.sync-note.is-stale{color:var(--danger);font-weight:600}
.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);overflow:clip;min-height:580px;background:var(--surface);border:1px solid var(--border);border-radius:9px}
.workspace.is-empty{grid-template-columns:1fr}
.device-sidebar{min-width:0;padding:23px 14px 20px;background:var(--sidebar);border-inline-end:1px solid var(--border)}
.sidebar-heading{display:flex;justify-content:space-between;align-items:center;margin:0 10px 17px;gap:12px}
.sidebar-heading h2{font-size:.9375rem;letter-spacing:-.02em}
.count-label{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.search-field{position:relative;margin:0 6px 16px}
.search-field svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.search-field input{width:100%;min-width:0;min-height:42px;padding:9px 9px 9px 36px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);color:var(--ink);font-size:.8125rem}
.search-field input::placeholder{color:var(--subtle);opacity:1}
.device-list{list-style:none;padding:0;margin:0}
.device-list li + li{margin-block-start:5px}
.device-row{display:grid;grid-template-columns:31px minmax(0,1fr);align-items:start;column-gap:10px;width:100%;min-height:98px;padding:13px 12px 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);text-align:start;transition:background-color 120ms ease,border-color 120ms ease}
.device-row:hover{background:#e3e9dc}
.device-row[aria-pressed="true"]{background:var(--surface);border-color:var(--border-strong);box-shadow:inset 3px 0 0 var(--green)}
.device-row-icon{display:grid;place-items:center;width:29px;height:30px;margin-block-start:1px;color:var(--muted)}
.device-row-icon svg{width:25px;height:25px}
.device-row[aria-pressed="true"] .device-row-icon{color:var(--green)}
.row-name{display:block;font-size:.875rem;font-weight:620;line-height:1.4;overflow-wrap:anywhere}
.row-id{display:block;margin-block-start:3px;font-family:var(--mono);font-size:.6875rem;color:var(--muted);overflow-wrap:anywhere}
.row-status{display:flex;align-items:center;gap:6px;margin-block-start:9px;font-size:.6875rem;font-weight:600;line-height:1.4;color:var(--muted)}
.row-status .status-dot{width:5px;height:5px}
.sidebar-footnote{margin:17px 10px 0;font-size:.6875rem;line-height:1.65;color:var(--muted)}
.selection-note{padding-block-start:18px;border-block-start:1px solid #d1d8cb}
.list-message{padding:16px 10px;font-size:.8125rem;color:var(--muted)}
.list-message .text-button{margin-block-start:5px}
.detail-region{min-width:0}
#device-detail{padding:27px 30px 0}
.detail-header{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-block-end:21px}
.detail-heading{min-width:0}
.detail-heading .eyebrow{font-size:.625rem}
.detail-heading h2{margin-block-start:7px;font-size:1.75rem;overflow-wrap:anywhere}
.detail-header > .button{flex:none;min-height:38px;padding:7px 13px;font-size:.8125rem}
.health-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.status{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:4px;color:var(--muted);background:#ecefe8;font-size:.75rem;font-weight:650;line-height:1.5}
.status-dot{flex:none;display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor}
.status.is-online{color:#285d37;background:var(--green-soft)}
.status.is-offline{color:#795344;background:#f2e9e1}
.status.is-needs_configuration{color:var(--warning);background:var(--warning-soft)}
.row-status.is-online{color:#285d37}
.row-status.is-offline{color:#795344}
.row-status.is-needs_configuration{color:var(--warning)}
.check-button{display:inline-flex;align-items:center;gap:6px;font-size:.75rem}
.check-button svg{width:16px;height:16px}
.status-detail{margin-block-start:9px;font-size:.8125rem;line-height:1.55;overflow-wrap:anywhere}
.status-explanation{margin-block-start:6px;font-size:.75rem;color:var(--muted);max-width:72ch;line-height:1.6}
.device-facts{display:grid;grid-template-columns:1fr .8fr 1.2fr;gap:16px;margin:18px 0 0;padding:15px 0 19px;border-block-start:1px solid var(--border)}
dt{font-size:.6875rem;color:var(--muted)}
dd{margin:5px 0 0;font-size:.8125rem;line-height:1.5;overflow-wrap:anywhere}
.device-facts dd.mono{font-size:.8125rem}
.latency{display:block;color:var(--muted);font-family:var(--mono);font-size:.6875rem}
.endpoint-section{border-block-start:1px solid var(--border);padding-block:22px}
.section-heading{display:flex;align-items:start;gap:12px}
.section-number{flex:none;min-width:22px;margin-block-start:1px;font-family:var(--mono);font-size:.75rem;line-height:1.8;color:var(--subtle)}
.section-heading p{margin-block-start:4px;font-size:.8125rem;color:var(--muted)}
.connector-field{display:grid;grid-template-columns:175px minmax(0,1fr);gap:5px 14px;align-items:center;margin-block:18px 15px}
.connector-field label{margin:0;font-size:.8125rem}
.connector-field input{max-width:230px;min-height:38px;padding:6px 10px;font-family:var(--mono);font-size:.875rem}
.connector-field .field-hint,.connector-field .field-error{grid-column:2;margin-block-start:0}
.copy-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border:1px solid var(--border-strong);border-radius:6px;background:#f0f4eb}
.copy-field code,.copy-field output{display:block;padding:15px 15px;color:var(--forest);line-height:1.6;font-size:.8125rem;overflow-wrap:anywhere}
.copy-button{border:0;border-inline-start:1px solid var(--border-strong);border-radius:0 5px 5px 0;padding-inline:15px;background:#e5eddc;color:var(--forest);font-size:.75rem}
.copy-button:hover:not(:disabled){background:#d7e5c9}
.endpoint-note{margin-block-start:10px;max-width:79ch;font-size:.6875rem;line-height:1.65;color:var(--muted)}
.setup-section{border-block-start:1px solid var(--border)}
summary{list-style:none;display:grid;grid-template-columns:22px minmax(0,1fr) 20px;align-items:start;gap:12px;padding-block:20px;cursor:pointer;border-radius:3px}
summary::-webkit-details-marker{display:none}
.summary-title{display:block;font-weight:620;font-size:.9375rem;line-height:1.45;letter-spacing:-.015em}
.summary-description{display:block;margin-block-start:3px;font-size:.75rem;color:var(--muted)}
.chevron{width:20px;height:20px;margin-block-start:2px;color:var(--green)}
details[open] .chevron{transform:rotate(180deg)}
summary:hover .summary-title{color:var(--green)}
.setup-content{padding:1px 0 22px 34px}
.setup-steps{margin:0;padding-inline-start:17px}
.setup-steps li{padding-inline-start:5px;font-size:.8125rem}
.setup-steps li::marker{color:var(--subtle);font-family:var(--mono);font-size:.75rem}
.setup-steps li + li{margin-block-start:21px}
.setup-steps strong{font-weight:600}
.setup-steps p{margin-block-start:6px;color:var(--muted);line-height:1.7}
.setup-steps code{font-size:.75rem;color:var(--ink)}
.copy-label{display:block;margin-block:12px 6px;font-size:.6875rem;font-weight:600}
.compact-copy{background:#f6f7f1}
.compact-copy output{padding:11px 12px;font-size:.75rem}
.inline-label{color:var(--ink)}
.setup-content > .button{margin-block-start:23px;font-size:.75rem}
.setup-footnote{margin-block-start:15px;color:var(--muted);font-size:.6875rem;line-height:1.7}
.device-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:12px;border-block-start:1px solid var(--border)}
.device-footer > p{color:var(--muted);font-size:.6875rem}
.danger-text{color:var(--danger);font-size:.75rem}
.detail-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:550px;padding:55px 28px;text-align:center}
.empty-monitor{width:64px;height:64px;margin-block-end:24px;stroke-width:1.4;color:#819578}
.monitor-plus{stroke:var(--green)}
.detail-placeholder .eyebrow{margin-block-end:12px}
.detail-placeholder h2{font-size:1.625rem}
.detail-placeholder > p:not(.eyebrow){max-width:40ch;margin-block-start:13px;color:var(--muted);font-size:.875rem;line-height:1.7}
.detail-placeholder .button{margin-block-start:25px}
.app-footer{display:flex;justify-content:space-between;gap:15px;padding-block:16px 4px;font-size:.6875rem;color:var(--muted)}
.app-footer > span{overflow-wrap:anywhere}
#hub-version{color:var(--subtle);margin-inline-start:3px}
.notice{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-block-start:22px;padding:14px 17px;border:1px solid #dfbdb0;border-radius:var(--radius);background:var(--danger-soft);color:#7e3026;font-size:.8125rem}
.notice strong{font-weight:650}
.notice p{margin-block-start:4px}
.notice > .button{flex:none;min-height:38px;font-size:.75rem}
.form-error{padding:12px 14px;margin-block:15px;background:var(--danger-soft);color:#8c3027;border:1px solid #deb4a9;border-radius:5px;font-size:.8125rem;line-height:1.6;overflow-wrap:anywhere}
.field-error{color:#96362a;font-size:.75rem;line-height:1.55}
.field{margin-block-end:20px}
label{display:block;margin-block-end:7px;font-size:.875rem;font-weight:600}
input,textarea{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius);background:#fff;color:var(--ink);line-height:1.45}
input::placeholder,textarea::placeholder{color:#747d73;opacity:1}
input[aria-invalid="true"]{border-color:var(--danger)}
input:disabled{background:#f1f2ed}
.field-hint{margin-block-start:7px;font-size:.6875rem;line-height:1.65;color:var(--muted)}
.modal{width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:27px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--ink);box-shadow:0 20px 80px #0b241530;overscroll-behavior:contain}
.modal::backdrop{background:rgb(9 27 20 / 54%)}
.modal-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}
.modal-heading h2{margin-block-start:5px;font-size:1.65rem}
.modal-heading > h2{margin-block-start:3px}
.modal-heading .icon-button{margin-block-start:-7px;margin-inline-end:-8px}
.modal-description{margin-block:17px 23px;color:var(--muted);font-size:.875rem;line-height:1.65;overflow-wrap:anywhere}
.form-fields{min-width:0;margin:0;padding:0;border:0}
.create-fields{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.create-fields .field{margin:0}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:end;gap:10px;margin-block-start:26px;padding-block-start:20px;border-block-start:1px solid var(--border)}
.edit-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 22px;padding:14px 16px;background:var(--sidebar);border-radius:5px}
.check-field{display:flex;align-items:start;gap:12px;margin:0;padding-block:6px;cursor:pointer}
.check-field input{flex:none;width:19px;min-height:19px;height:19px;margin:2px 0 0;accent-color:var(--green)}
.check-field strong{display:block;font-size:.875rem;font-weight:600}
.check-field span > span{display:block;margin-block-start:5px;color:var(--muted);font-size:.75rem;font-weight:400;line-height:1.6}
.delete-consequence{padding:17px;border-inline-start:3px solid #c59678;background:#f6eee2;color:#644830;font-size:.8125rem;line-height:1.65}
.delete-consequence p + p{margin-block-start:12px}
.danger-button{background:var(--danger);color:#fff}
.danger-button:hover:not(:disabled){background:#86261f}
.copy-text{min-height:130px;max-height:45dvh;resize:vertical;font-family:var(--mono);font-size:.8125rem;line-height:1.65}
.toast{position:fixed;z-index:8;inset-inline-end:max(24px,env(safe-area-inset-right));inset-block-end:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;max-width:min(460px,calc(100% - 32px));padding:10px 10px 10px 18px;border:1px solid #648471;border-radius:8px;background:var(--forest);color:#f5f7ef;box-shadow:0 6px 24px #18372b20;font-size:.8125rem;line-height:1.6}
.toast .icon-button{color:#d2dfce}
.toast .icon-button:hover{background:#315447}
.toast:focus-visible{outline-color:#d3e7b9}
.noscript-message{position:fixed;z-index:30;inset:76px 0 0;padding:50px 24px;background:var(--canvas);text-align:center}
.noscript-message h1{font-size:1.75rem;margin-block-end:16px}
@media (min-width:1280px){.workspace{grid-template-columns:300px minmax(0,1fr)}
#device-detail{padding-inline:36px}
.device-sidebar{padding-inline:17px}
}
@media (max-width:1020px){.header-inner{padding-inline:24px;gap:20px}
.header-label{display:none}
.app-view{padding-inline:24px}
.workspace{grid-template-columns:245px minmax(0,1fr)}
#device-detail{padding-inline:24px}
.connector-field{grid-template-columns:1fr;gap:5px}
.connector-field .field-hint,.connector-field .field-error{grid-column:1}
.connector-field input{max-width:100%}
.connector-field label{margin-block-end:3px}
.device-facts{grid-template-columns:1fr 1fr;gap:14px}
.device-facts > div:last-child{grid-column:1 / -1}
.latency{display:inline;margin-inline-start:9px}
.access-view{gap:44px}
.access-form-wrap{padding:27px}
}
@media (max-width:760px){.header-inner{min-height:66px;padding:10px 20px}
.brand{font-size:1.0625rem;gap:9px}
.brand-mark{width:29px;height:29px}
.session-label{display:none}
.header-button{min-height:40px}
.app-view{padding:25px 20px 14px}
.page-heading{gap:16px;align-items:start}
.page-heading h1{font-size:2rem}
.page-heading > .button{margin-block-start:24px}
.page-description{font-size:.8125rem;max-width:36ch}
.overview-line{margin-block:23px 12px;font-size:.6875rem}
.workspace{grid-template-columns:1fr;min-height:0}
.device-sidebar{padding:18px 14px;border-inline-end:0;border-block-end:1px solid var(--border)}
.sidebar-heading{margin-block-end:13px}
.search-field{margin-block-end:13px}
.search-field input{min-height:44px;font-size:1rem}
.device-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.device-list li + li{margin:0}
.device-row{height:100%;min-height:104px;padding:12px 10px;grid-template-columns:24px minmax(0,1fr);gap:8px}
.device-row-icon,.device-row-icon svg{width:24px}
.row-name{font-size:.875rem}
.row-id,.row-status,.sidebar-footnote{font-size:.75rem}
.selection-note{margin-block-start:15px;padding-block-start:13px}
#device-detail{padding:24px 24px 0}
.detail-header{margin-block-end:17px}
.detail-heading h2{font-size:1.625rem}
.status-detail{font-size:.875rem}
.status-explanation{font-size:.8125rem}
.device-facts{grid-template-columns:1fr 1fr 1.2fr}
.device-facts > div:last-child{grid-column:auto}
.latency{display:block;margin:0}
dt{font-size:.75rem}
.connector-field{grid-template-columns:175px minmax(0,1fr);gap:5px 12px}
.connector-field .field-hint,.connector-field .field-error{grid-column:2}
.connector-field input{min-height:44px;font-size:1rem}
.field-hint,.endpoint-note,.setup-footnote{font-size:.75rem}
.detail-placeholder{min-height:430px}
.access-view{display:block;max-width:520px;min-height:auto;padding:38px 24px 44px}
.access-heading{margin-block-end:31px}
.access-heading .eyebrow{margin-block-end:14px}
.access-heading h1{font-size:2.75rem}
.access-heading > p:last-child{margin-block-start:15px;font-size:.875rem}
.access-heading > p:last-child br{display:none}
.access-form-wrap{padding:26px}
.access-form-wrap .field-hint{font-size:.75rem}
.notice{align-items:start}
.notice > .button{font-size:.8125rem}
.check-button{min-height:44px}
.summary-description{font-size:.8125rem}
.button{min-height:44px}
}
@media (max-width:480px){.header-inner{padding-inline:16px}
.app-view{padding:24px 12px 12px}
.page-heading{flex-wrap:wrap;gap:18px;padding-inline:4px}
.page-heading h1{font-size:2rem}
.page-heading > .button{margin:0;width:100%}
.page-description{max-width:none;font-size:.875rem}
.overview-line{flex-wrap:wrap;gap:5px;margin-inline:4px;font-size:.75rem}
.sync-note{width:100%;text-align:start}
.device-sidebar{padding:16px 11px}
.sidebar-heading{margin-inline:7px}
.search-field{margin-inline:5px}
.device-list{grid-template-columns:1fr;gap:6px}
.device-row{min-height:88px;grid-template-columns:29px minmax(0,1fr);gap:10px}
.row-status{margin-block-start:6px}
.device-row-icon{margin-block-start:3px}
.sidebar-footnote{margin-inline:7px}
#device-detail{padding:21px 18px 0}
.detail-header{align-items:start;gap:12px}
.detail-heading h2{font-size:1.5rem}
.detail-header > .button{padding-inline:11px;min-height:40px;font-size:.75rem}
.health-line{flex-wrap:wrap;gap:6px 12px}
.check-button{margin-inline-start:-3px;font-size:.75rem}
.device-facts{grid-template-columns:1fr 1fr;gap:14px 10px}
.device-facts > div:last-child{grid-column:1 / -1}
.latency{display:inline;margin-inline-start:8px}
.connector-field{display:block}
.connector-field label{margin-block-end:7px}
.connector-field .field-hint,.connector-field .field-error{margin-block-start:7px}
.copy-field{grid-template-columns:1fr}
.copy-button{border-inline-start:0;border-block-start:1px solid var(--border-strong);border-radius:0 0 5px 5px;min-height:42px}
.copy-field code,.copy-field output{padding:13px;font-size:.8125rem}
.section-heading,summary{gap:9px}
.section-heading p{line-height:1.65}
.setup-content{padding-inline-start:0}
.setup-steps{padding-inline-start:18px}
.setup-steps li{font-size:.875rem}
.summary-title{font-size:.9375rem}
.device-footer{flex-wrap:wrap;gap:2px}
.device-footer > p{font-size:.75rem}
.danger-text{min-height:44px;font-size:.8125rem}
.app-footer{flex-wrap:wrap;padding-inline:4px;font-size:.6875rem}
.app-footer > span:last-child{width:100%}
.notice{flex-wrap:wrap;padding:14px}
.notice > .button{width:100%}
.access-view{padding-inline:20px}
.access-form-wrap{padding:23px 20px}
.access-heading h1{font-size:2.625rem}
.modal{width:calc(100% - 24px);padding:22px 19px;max-height:calc(100dvh - 24px)}
.modal-heading h2{font-size:1.45rem}
.modal-description{font-size:.8125rem}
.create-fields{grid-template-columns:1fr;gap:19px}
.create-fields .field-hint{font-size:.75rem}
.modal-actions{gap:8px}
.modal-actions > .button{flex:1 1 auto}
.toast{inset-inline:16px;inset-block-end:max(16px,env(safe-area-inset-bottom));max-width:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto !important;animation:none !important;transition:none !important}
.button:active:not(:disabled){transform:none}
}
@media (forced-colors:active){:focus-visible{outline:3px solid Highlight}
.device-row[aria-pressed="true"]{border:2px solid Highlight}
.status{border:1px solid currentColor}
.copy-button,.primary-button,.header-button,.danger-button{border:1px solid ButtonText}
}