@font-face {
  font-family: 'Zen Maru Gothic'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/ZenMaruGothic-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Zen Maru Gothic'; font-style: normal; font-weight: 500 900;
  font-display: swap; src: url('fonts/ZenMaruGothic-Medium.ttf') format('truetype');
}
:root {
  font-family: 'Zen Maru Gothic', sans-serif; font-size: 14px; font-weight: 400;
  color: #2b3542; background: #f2f5f8; color-scheme: light;
  --surface: #fcfdff; --line: #dae1e8; --muted: #657386; --ink: #2b3542;
  --soft: #e7edf4; --accent: #50749c; --accent-soft: #e8eff7; --range: #8593a4;
  --hover: #f4f7fb; --control: #ffffff; --shadow: #2b35420a;
  /* Shared 8px rhythm; every setting uses the same four column tracks. */
  --space: 8px; --inset: 32px; --gap: 24px;
  --label-width: 232px; --value-width: 128px; --reset-width: 104px;
  --columns: var(--label-width) minmax(0,1fr) var(--value-width) var(--reset-width);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select, input { font: inherit; }
button, select { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--control); color: inherit; padding: 8px 12px; }
button { cursor: pointer; transition: background-color 120ms, border-color 120ms; }
button:disabled { opacity: .42; cursor: not-allowed; }
button.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
button:hover:not(:disabled) { background: var(--soft); border-color: var(--muted); }
button.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--surface); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
a { color: inherit; text-underline-offset: 4px; }
header { min-height: 72px; padding: 16px 32px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.brand span { font-weight: 400; }
.brand-logo { display: block; width: 88px; height: auto; flex: none; }
[data-theme=dark] .brand-logo { filter: invert(1); }
.badge { font-size: 11px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 24px; }
.header-actions { margin-left: auto; display: flex; gap: 8px; }
.header-actions button { font-size: 12px; }
#theme,#demo,#disconnect { background: transparent; border-color: transparent; }
#theme:hover:not(:disabled),#demo:hover:not(:disabled),#disconnect:hover:not(:disabled) { background: var(--soft); }
#theme { margin-right: 8px; }
body[data-connection=demo] #demo,body[data-connection=demo] #connect,
body[data-connection=connected] #demo,body[data-connection=connected] #connect,
body[data-connection=idle] #disconnect:disabled { display: none; }
.shell { display: grid; grid-template-columns: 208px minmax(0,1fr); max-width: 1600px; margin: auto; min-height: calc(100vh - 72px); }
aside { padding: 40px 24px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.eyebrow { display: block; font-size: 11px; line-height: 16px; letter-spacing: 1px; color: var(--muted); }
nav { margin: 24px -8px 0; display: grid; gap: 8px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 48px; padding: 12px 8px; text-decoration: none; background: transparent; border: 0; border-radius: 8px; text-align: left; white-space: nowrap; font-size: 13px; }
.nav-item.active { background: var(--soft); color: var(--ink); }
.nav-item.active::before { content: ''; position: absolute; left: -8px; top: 16px; bottom: 16px; width: 2px; background: var(--accent); border-radius: 2px; }
.nav-item svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.nav-item:disabled { opacity: 1; color: var(--muted); }
.nav-item small { margin-left: auto; font-size: 10px; }
.sidebar-bottom { margin-top: auto; padding-top: 64px; }
.sidebar-bottom p { font-size: 11px; line-height: 24px; color: var(--muted); margin: 8px 0 16px; white-space: nowrap; }
#vial { font-size: 12px; width: 100%; background: transparent; text-align: left; }
#vial-link { display: block; margin-top: 16px; }
main { padding: 32px; min-width: 0; }
.heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 24px; padding-inline: calc(var(--inset) + 1px); }
h1 { font-size: 28px; font-weight: 500; line-height: 40px; margin: 8px 0 0; }
p { line-height: 24px; color: var(--muted); margin: 8px 0; }
.connection { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.connection strong { font-weight: 400; }
.connection-dot { width: 6px; height: 6px; background: var(--muted); border-radius: 50%; }
[data-connection=demo] .connection-dot { background: var(--accent); }
[data-connection=connected] .connection-dot { background: #608064; }
.workspace { background: var(--surface); border: 1px solid var(--line); border-radius: 12px 12px 0 0; overflow: clip; }
.settings-panel { padding: 0 var(--inset); min-width: 0; }
.settings-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 16px 0; }
.settings-title h2 { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; }
.compatibility-note { font-size: 12px; line-height: 24px; margin: 0; }
#error { color: #9e3226; background: #fceae6; border: 1px solid #e2b6af; padding: 16px; border-radius: 8px; font-size: 12px; }
.column-headings { display: grid; grid-template-columns: var(--columns); gap: var(--gap); padding: 8px 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 16px; }
.field { position: relative; display: grid; grid-template-columns: var(--columns); column-gap: var(--gap); align-items: center; min-height: 120px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.field::before { content: ''; position: absolute; inset: 8px -16px; background: var(--hover); border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity 120ms; }
.field:hover::before,.field:focus-within::before { opacity: 1; }
.field>div:first-child { grid-column: 1; position: relative; }
.field-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.field h2 { font-size: 16px; font-weight: 500; line-height: 24px; margin: 0; }
.field .small { font-size: 12px; margin: 0; line-height: 24px; }
.changed-tag { color: var(--accent); background: var(--accent-soft); padding: 0 6px; border-radius: 4px; line-height: 20px; font-size: 10px; }
.field .read-value { color: var(--muted); }
.field-controls { display: contents; }
.field-controls select { grid-column: 3; grid-row: 1; position: relative; width: 100%; min-width: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.field[data-changed=true] select { border-color: var(--accent); background: var(--accent-soft); }
.range-control,.range-placeholder { grid-column: 2; grid-row: 1; position: relative; }
.range-placeholder { font-size: 12px; color: var(--muted); line-height: 24px; }
.range-control { height: 40px; }
.range-ends { position: absolute; top: 40px; left: 0; right: 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; line-height: 16px; pointer-events: none; }
.field input[type=range] { display: block; width: 100%; height: 40px; margin: 0; appearance: none; background: transparent; cursor: pointer; accent-color: var(--accent); }
.field input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--accent) 0 var(--range-position), var(--range) var(--range-position) 100%); }
.field input[type=range]::-webkit-slider-thumb { appearance: none; height: 18px; width: 18px; border-radius: 50%; background: var(--control); margin-top: -7.5px; border: 2px solid var(--accent); box-shadow: 0 1px 3px #2b354220; }
.field input[type=range]::-moz-range-track { height: 3px; background: var(--range); border-radius: 3px; }
.field input[type=range]::-moz-range-progress { height: 3px; background: var(--accent); }
.field input[type=range]::-moz-range-thumb { height: 14px; width: 14px; background: var(--control); border: 2px solid var(--accent); border-radius: 50%; }
.field input[type=range]:disabled { opacity: .35; cursor: not-allowed; }
.reset { grid-column: 4; grid-row: 1; position: relative; font-size: 11px; min-height: 40px; padding: 8px 0; color: var(--muted); background: transparent; border: 0; text-align: right; white-space: nowrap; }
.reset:hover:not(:disabled) { background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.savebar { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 16px; padding: 24px var(--inset); background: var(--surface); border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: -1px; box-shadow: 0 8px 16px var(--shadow); }
.save-description { display: flex; align-items: center; gap: 8px; font-size: 12px; }.save-description strong { font-weight: 400; }
.save-dot { flex: none; width: 6px; height: 6px; background: var(--muted); border-radius: 50%; }
[data-state=edited] .save-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
[data-state=fault] .save-dot { background: #bd4a38; }
.buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.buttons button { font-size: 12px; }
#revert { border-color: transparent; background: transparent; }
#status { grid-column: 1/-1; font-size: 12px; line-height: 24px; min-height: 24px; margin: 0; }
details { margin: 24px calc(var(--inset) + 1px) 0; color: var(--muted); font-size: 12px; line-height: 24px; }
summary { cursor: pointer; min-height: 32px; }
.preview-entry { margin: 24px calc(var(--inset) + 1px) 0; font-size: 12px; }
[hidden] { display: none!important; }
[data-theme=dark] { color: #e4ebf5; background: #1c222b; color-scheme: dark; --surface: #252d38; --line: #3b4655; --muted: #a5b1c1; --ink: #e4ebf5; --soft: #303c4c; --accent: #9bb8d9; --accent-soft: #304357; --range: #8595a9; --hover: #2b3542; --control: #2c3643; --shadow: #00000018; }
@media(max-width:1200px) {
  :root { --label-width: 208px; --value-width: 120px; --reset-width: 96px; --gap: 16px; --inset: 24px; }
  .shell { grid-template-columns: 192px minmax(0,1fr); }main { padding: 24px; }.badge { display: none; }.nav-item small { display: none; }
  .savebar { grid-template-columns: 1fr; }.buttons { justify-content: flex-start; grid-row: 3; }
}
@media(max-width:1000px) {
  :root { --label-width: 176px; --value-width: 112px; --reset-width: 88px; }
  .shell { grid-template-columns: 160px minmax(0,1fr); }aside { padding: 32px 16px; }.nav-item { font-size: 12px; }.sidebar-bottom p { white-space: normal; }
  header { padding: 16px; gap: 16px; }#theme span { display: none; }.field-title { gap: 4px; }.changed-tag { font-size: 9px; }
}
@media(max-width:850px) {
  .shell { display: block; }aside { padding: 16px 24px; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; gap: 16px; align-items: center; }
  aside>.eyebrow,.sidebar-bottom .eyebrow,.sidebar-bottom p { display: none; }
  nav { display: flex; gap: 8px; margin: 0; overflow-x: auto; flex: 1; }.nav-item { width: auto; height: 40px; padding: 8px; }.nav-item svg { display: none; }.nav-item.active::before { display: none; }
  .sidebar-bottom { margin: 0; padding: 0; }#vial { width: auto; white-space: nowrap; }
}
@media(max-width:650px) {
  :root { --inset: 16px; --gap: 16px; --value-width: 104px; }
  header { flex-wrap: wrap; gap: 8px 16px; }.brand { font-size: 22px; }.header-actions { flex-wrap: wrap; }main { padding: 24px 16px; }
  aside { padding: 8px 16px; flex-wrap: wrap; }nav { flex-basis: 100%; }.sidebar-bottom { margin: 0 0 8px; }
  .heading { margin-bottom: 24px; flex-direction: column; align-items: flex-start; gap: 16px; }h1 { font-size: 26px; }
  .settings-title { padding: 24px 0 8px; gap: 8px; }.column-headings { display: none; }
  .field { grid-template-columns: minmax(0,1fr) var(--value-width); row-gap: 16px; min-height: 0; padding: 24px 0; }
  .field>div:first-child { grid-column: 1/-1; grid-row: 1; }.field-title { gap: 8px; }.changed-tag { font-size: 10px; }
  .range-control,.range-placeholder { grid-column: 1; grid-row: 2; }.field-controls select { grid-column: 2; grid-row: 2; }.reset { grid-column: 2; grid-row: 3; }
  .field::before { inset: 8px -8px; }.savebar { position: static; padding: 16px; }.buttons { gap: 8px; }.buttons .primary { flex: 1; }
}
@media(prefers-reduced-motion:reduce) { *,*::before { transition: none!important; scroll-behavior: auto; } }