/* Graphen visual system: porcelain, graphite and the cabinet's silver curves.
   Ornament lives outside plots. All process colours remain semantic. */
:root {
  --bg:#EFF3F6; --surface:#FFFFFF; --alt:#E9EEF0; --text:#252D32;
  --muted:#69767E; --line:#DEE4E7; --accent:#28734B;
  --nav:#1C2227; --nav-active:#333D44; --soft-green:#EAF3ED;
  --instrument:#FFFFFF; --instrument-line:#E7ECEE; --instrument-soft:#F4F7F8;
  --shadow:0 10px 36px #22303908; --radius:20px;
  --glow-blue:#BDD6F164; --glow-mint:#C5E7DB68;
}
:root[data-theme=dark] {
  --bg:#121619; --surface:#1C2227; --alt:#2A333A; --text:#EDF1F3;
  --muted:#A2ADB5; --line:#303A41; --accent:#7AD4A3;
  --nav:#171C20; --nav-active:#303B43; --soft-green:#21382D;
  --instrument:#20282E; --instrument-line:#364149; --instrument-soft:#252F36;
  --shadow:0 8px 28px #00000012;
  --glow-blue:#29466164; --glow-mint:#224A405C;
}
body { letter-spacing:.05px; position:relative; isolation:isolate; }
/* Only these two composited decorative layers move; charts and text never do. */
.ambient { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(125deg,transparent 20%,var(--glow-blue) 130%); }
.ambient-light { position:absolute; width:82vmax; height:70vmax; max-width:1300px; max-height:1000px; border-radius:50%; }
.ambient-one { top:-25vmax; right:-18vmax; background:radial-gradient(ellipse,var(--glow-blue),transparent 65%); }
.ambient-two { bottom:-32vmax; left:1vw; background:radial-gradient(ellipse,var(--glow-mint),transparent 67%); }
.ambient-option { margin-top:14px; }
.wordmark { display:flex; flex-direction:column; align-items:center; line-height:1; letter-spacing:.5px; }
.brand .wordmark strong { font-size:22px; font-weight:700; letter-spacing:.3px; }
.brand .wordmark>span { font-size:16px; font-weight:400; letter-spacing:1.3px; margin-top:4px; }
button,.button,input,select { border-radius:12px; }
button,.button { min-height:46px; }
input,select { background:var(--surface); }
h1 { letter-spacing:-.9px; }
h2 { letter-spacing:-.3px; }
.signed-in .topbar { display:none; }
.main-nav {
  top:0; width:216px; padding:22px 16px; border:0; background:var(--nav);
  isolation:isolate; overflow:hidden;
}
.main-nav::after {
  content:''; position:absolute; z-index:-1; pointer-events:none; left:0; right:0; bottom:0;
  height:380px; background:url('brand/cabinet-lines.svg') no-repeat center bottom / cover; opacity:.44;
  mask-image:linear-gradient(transparent,#000 40%);
}
.main-nav a { color:#B5C0C8; border-radius:13px; padding:15px 18px; font-size:14px; }
.main-nav a[aria-current=page] { background:var(--nav-active); color:#FFFFFF; box-shadow:inset 0 0 0 1px #FFFFFF08; }
.main-nav a:hover { background:#FFFFFF0A; color:#FFFFFF; }
.main-nav a[aria-current=page]:hover { background:var(--nav-active); }
.main-nav .nav-brand { color:#F6F8F9; justify-content:center; margin:3px 0 35px; padding:14px 7px; }
.nav-brand img { filter:none; }
.nav-brand:hover { background:transparent!important; }
.signed-in main { max-width:1440px; margin-left:216px; padding:36px 40px 60px; min-height:100dvh; }
.page-heading { margin-bottom:26px; }
.page-heading h1 { font-size:32px; }
.back-link { display:inline-flex; align-items:center; margin-bottom:18px; font-size:13px; }
.account-name { display:flex; align-items:center; gap:8px; font-size:12px; }
.account-avatar { display:none; }
.section-label { letter-spacing:1.5px; font-size:11px; margin-bottom:14px; }
.empty { border-style:solid; background:var(--surface); padding:48px 24px; }
.notice { border-radius:0 12px 12px 0; }

/* One instrument, not a collection of identical button-like data cards. */
.furnace-heading h1 { font-size:28px; }
.furnace-heading>.subtle-link { font-size:14px; }
.furnace-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:34px; align-items:start; }
.furnace-primary { min-width:0; }
.reading-panel { margin:0; padding:0; text-align:left; background:transparent; }
.instrument { background:var(--instrument); border:1px solid var(--line); border-radius:26px; box-shadow:0 18px 55px #243E4B0A; overflow:hidden; }
.instrument-head {
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:23px 32px; border-bottom:1px solid var(--instrument-line);
  background:linear-gradient(110deg,var(--instrument-soft),var(--instrument) 85%);
  position:relative; isolation:isolate;
}
.instrument-head::after { content:''; position:absolute; z-index:-1; pointer-events:none; top:0; bottom:0; right:24%; width:110px; background:url('brand/cabinet-lines.svg') no-repeat center 48% / 110px 185px; opacity:.22; }
.instrument-head .program-name { color:var(--text); font-size:24px; line-height:1.2; font-weight:700; margin:0; }
.instrument-head .program-name:hover { color:var(--accent); }
.stage-indicator { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; white-space:nowrap; }
.stage-indicator strong { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:var(--alt); color:var(--text); font-size:14px; }
.instrument-body { display:grid; grid-template-columns:minmax(290px,.95fr) minmax(0,1.5fr); align-items:center; gap:30px; padding:26px 32px 24px; }
.primary-reading { min-width:0; padding:12px 0; }
.rate-line { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; margin-bottom:16px; }
.rate-line strong { font-size:16px; font-weight:400; color:var(--text); }
.reading-panel .temperature { margin:0; font-size:clamp(78px,7.6vw,116px); letter-spacing:-4.5px; line-height:1.05; }
.primary-reading .status { display:inline-block; margin-top:21px; font-size:18px; line-height:1.4; max-width:100%; }
.primary-reading .status::before { width:8px; height:8px; margin-right:9px; }
.offline .rate-line strong { color:var(--muted); }
.reading-panel .temperature,.furnace-card .temperature { color:var(--text); }
.run-active .temperature { color:var(--accent); }
.stabilizing .status { color:#2574A1; }.cooling .status { color:#487BBE; }.holding .status { color:var(--accent); }
[data-theme=dark] .stabilizing .status { color:#54C7EC; }[data-theme=dark] .cooling .status { color:#6FA8FF; }
.reading-panel.alarm-state .temperature,.furnace-card.alarm-state .temperature { color:var(--danger); }
.reading-panel.offline .temperature,.furnace-card.offline .temperature,.reading-panel .temperature.invalid,.furnace-card .temperature.invalid { color:var(--muted); }
.main-profile { position:relative; color:var(--accent); min-width:0; }
.profile-heading { display:flex; justify-content:space-between; align-items:center; min-height:44px; margin-bottom:4px; color:var(--muted); font-size:12px; }
.profile-caption { margin:6px 0 0; color:var(--muted); font-size:12px; text-align:right; }
.profile-caption strong { font-weight:400; color:var(--text); margin-left:7px; }
#program-profile { display:block; width:100%; height:260px; overflow:visible; }
.profile-axis { fill:var(--muted); font:11px Lato,sans-serif; }
.profile-baseline { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.profile-future { fill:none; stroke:var(--muted); stroke-opacity:.8; stroke-width:2; vector-effect:non-scaling-stroke; }
.profile-progress { fill:none; stroke:currentColor; stroke-width:2.5; vector-effect:non-scaling-stroke; }
.profile-dot { fill:currentColor; stroke:var(--instrument); stroke-width:2; vector-effect:non-scaling-stroke; }
.profile-empty { fill:var(--muted); font:16px Lato,sans-serif; }
.profile-chart,.graph-card .mini-chart { color:var(--accent); }
.offline .profile-chart,.offline .main-profile { color:var(--muted); }
.profile-zoom { display:grid; place-items:center; width:44px; height:44px; padding:10px; color:var(--muted); border-radius:10px; margin-right:-10px; }
.profile-zoom:hover { background:var(--alt); color:var(--text); }
.profile-zoom .icon { width:18px; height:18px; }
.reading-panel .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; }
.reading-panel .run-metrics { margin:0 32px; padding:22px 0 25px; border-color:var(--instrument-line); }
.run-metrics dt { font-size:12px; }
.run-metrics dd { font-size:29px; margin-top:6px; }
.reading-panel .warning { margin:0; padding:12px 32px 17px; font-size:13px; line-height:1.5; background:var(--instrument-soft); }
.furnace-actions { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:17px 0 0; max-width:650px; }
.furnace-actions a { display:flex; gap:14px; align-items:center; padding:13px 18px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.furnace-actions strong { font-size:15px; font-weight:700; }
.action-icon { width:30px; height:34px; display:grid; place-items:center; color:var(--muted); }
.action-icon .icon { width:21px; height:21px; }
.furnace-actions a>.icon { width:16px; height:16px; margin-left:auto; color:var(--muted); }
.recent-history { min-width:0; padding:0 4px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; }
.recent-history .section-heading { grid-column:1/-1; }
.section-heading h2 { font-size:19px; margin:0 0 14px; }
.history-entry { display:flex; align-items:center; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line); padding:14px 0; }
.history-mark { display:grid; place-items:center; flex-shrink:0; width:38px; height:42px; color:var(--muted); }
.history-mark .icon { width:24px; height:24px; }
.history-mark.finished { color:var(--accent); }.history-mark.stopped { color:var(--orange); }.history-mark.alarm { color:var(--danger); }
.history-title { min-width:0; flex:1; }
.history-entry strong { display:block; font-size:15px; overflow-wrap:anywhere; }
.history-entry .result { display:block; font-size:12px; margin:3px 0 0; }
.history-duration { padding-left:46px; width:100%; font-size:12px; white-space:nowrap; color:var(--muted); }
.history-entry>.icon { display:none; }

/* Fleet and archive: clickable surfaces have a distinct edge and feedback. */
.overview-toolbar { display:flex; justify-content:flex-end; }
.overview-toolbar .search-label { margin:0; }
.furnace-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,410px),1fr)); gap:22px; margin:24px 0; }
.furnace-card { border:1px solid var(--line); border-radius:22px; padding:25px 28px; box-shadow:var(--shadow); }
.furnace-card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }
.furnace-card h2 { font-size:23px; }.furnace-card .device-id { margin:0; font-size:11px; }
.furnace-card .status { font-size:12px; max-width:50%; padding-top:4px; }
.furnace-card-body { display:grid; grid-template-columns:1fr 1.1fr; gap:22px; align-items:center; margin:24px 0; }
.furnace-card .temperature { font-size:64px; margin:0 0 13px; white-space:nowrap; }
.furnace-card .section-label { display:none; }.furnace-card .program-name { font-size:18px; color:var(--text); font-weight:700; }
.card-curve { min-width:0; }.card-curve svg { height:125px; margin:0; }
.card-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; border-top:1px solid var(--line); padding-top:17px; margin:0; }
.card-metrics dt { font-size:12px; color:var(--muted); }.card-metrics dd { font-size:17px; margin:4px 0 0; font-weight:700; }
.card-open { display:none; }.offline .card-metrics dd,.offline .program-name { color:var(--muted); }
.current-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:12px; margin-bottom:24px; }
.current-link { display:flex; align-items:center; gap:16px; border:1px solid var(--line); border-radius:17px; background:var(--surface); padding:18px 20px; }
.current-link strong { display:block; font-size:17px; }.current-link small { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.current-symbol { display:grid; place-items:center; color:var(--accent); background:var(--soft-green); border-radius:12px; width:44px; height:44px; flex-shrink:0; }
.current-link>.icon:last-child { width:17px; height:17px; margin-left:auto; }
.library-filter { margin:24px 0 10px; }.filters { margin-top:6px; }.filters summary { font-size:13px; }
.filter-fields { border:1px solid var(--line); padding:20px; }
.graph-grid { gap:20px; margin-top:16px; }
.graph-card { border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:var(--shadow); }
.graph-card h2 { font-size:19px; }.graph-card .mini-chart { margin:20px 0; }.graph-card .mini-metrics strong { font-size:22px; }
.graph-card .result { display:inline-block; font-size:12px; padding:4px 9px; margin:0 0 18px; border-radius:7px; background:var(--bg); }
.card-foot { font-size:11px; padding-top:14px; }
.chart-panel { border:1px solid var(--line); border-radius:20px; padding:16px 18px 10px; margin-top:20px; box-shadow:var(--shadow); }
.chart-toolbar { padding:0 4px 8px; }.legend button { font-size:13px; }
.graph-info { border:0; padding:18px 4px; background:transparent; margin-top:0; }
.graph-info .metrics { margin:0; padding:0; border:0; gap:24px; }.graph-info .setting { margin-top:24px; }
.graph-info .setting summary { padding-left:0; padding-right:0; }
.compare-side { border:1px solid var(--line); }.compare-side.left { border-top:3px solid var(--accent); }.compare-side.right { border-top:3px solid var(--compare); }
.program { border:1px solid var(--line); border-radius:20px; }.program summary { padding:24px; }.program .mini-chart { height:170px; }

/* Settings: recognisable controls instead of nested identical containers. */
.settings-layout { max-width:1060px; grid-template-columns:1fr 1fr; gap:32px; }
.setting-list,.form-panel { border:1px solid var(--line); }
.setting-row,.setting summary { min-height:68px; gap:13px; justify-content:flex-start; }
.setting summary>.icon:last-child,.setting-row>.icon:last-child { width:16px; height:16px; color:var(--muted); margin-left:auto; }
.setting summary .icon,.setting[open]>summary .icon { transform:none; }
.setting[open]:not(.disclosure-closing)>summary>.icon:last-child { transform:rotate(90deg); }
.setting-symbol { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; color:var(--muted); }
.setting-symbol .icon { width:21px!important; height:21px!important; }
.setting-value { margin-left:auto; font-size:12px; color:var(--muted); }
.setting summary .setting-value+.icon { margin-left:0; }
.setting-body { padding:4px 22px 22px; }
.theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:4px; margin:4px 0 0; border:0; border-radius:13px; background:var(--bg); gap:3px; }
.theme-options label { position:relative; margin:0; cursor:pointer; }
.theme-options input,.toggle-row input { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:0; opacity:0; }
.theme-options label>span { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:77px; padding:10px 3px; border-radius:10px; font-size:12px; border:1px solid transparent; }
.theme-options .icon { width:22px; height:22px; }
.theme-options input:checked+span { color:var(--text); background:var(--surface); border-color:var(--line); box-shadow:0 2px 6px #00000006; }
.theme-options input:focus-visible+span,.toggle-row input:focus-visible+.switch { outline:3px solid var(--blue); outline-offset:2px; }
.account-card { display:flex; gap:13px; align-items:center; margin:0 0 18px; padding:0 4px; overflow-wrap:anywhere; }
.profile-avatar { display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border-radius:50%; background:var(--alt); color:var(--text); font-size:17px; }
.account-card strong { min-width:0; font-size:16px; }
.toggle-row { display:flex; align-items:center; gap:12px; min-height:51px; margin:0; position:relative; color:var(--text); cursor:pointer; }
.toggle-row+.toggle-row { border-top:1px solid var(--line); }
.toggle-row .line-dot { width:8px; height:8px; margin:0; }
.toggle-row .switch { display:block; margin-left:auto; width:40px; height:24px; background:var(--line); border-radius:20px; position:relative; flex-shrink:0; }
.switch::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; top:3px; left:3px; background:#FFFFFF; box-shadow:0 1px 3px #00000020; }
.toggle-row input:checked+.switch { background:var(--accent); }.toggle-row input:checked+.switch::after { transform:translateX(16px); }
.logout { color:var(--danger); }.logout .setting-symbol { color:inherit; }
.disclosure-animating { overflow:hidden; }
.signed-out { background:var(--bg); }.signed-out .topbar { height:112px; }
.auth-panel { border:1px solid var(--line); box-shadow:var(--shadow); padding:36px; border-radius:24px; }
.auth-panel h1 { font-size:32px; }

@media(min-width:1600px) { .signed-in main { margin-left:216px; margin-right:auto; transform:none; } }
@media(max-width:1100px) {
  .signed-in main { padding:30px 26px 50px; }.settings-layout { grid-template-columns:1fr; max-width:650px; }
  .instrument-body { grid-template-columns:1fr; gap:14px; }.reading-panel .temperature { font-size:100px; }
  #program-profile { height:220px; }.furnace-card .temperature { font-size:58px; }
  .recent-history { grid-template-columns:1fr; }.history-entry { flex-wrap:nowrap; gap:12px; }.history-duration { width:auto; padding:0; margin-left:auto; }
  .history-entry>.icon { display:block; width:14px; height:14px; color:var(--muted); }
}
@media(max-width:1000px) {
  .main-nav { width:180px; padding:20px 10px; }.signed-in main { margin-left:180px; }
  .main-nav .nav-brand { padding:14px 3px; }.nav-brand .wordmark strong { font-size:20px; }.nav-brand .wordmark>span { font-size:15px; }
  .main-nav a { padding:15px 12px; }.instrument-head { padding:23px 24px; gap:14px; }
  .instrument-head .program-name { font-size:23px; }.instrument-body { padding:24px; }
}
@media(max-width:700px) {
  .signed-in .topbar { display:flex; position:static; height:60px; background:transparent; padding:0 20px; border:0; }
  .topbar .brand { padding-top:2px; }.topbar .wordmark strong { font-size:16px; }.topbar .wordmark>span { font-size:11px; margin-top:3px; letter-spacing:1px; }
  .main-nav { top:auto; bottom:calc(12px + env(safe-area-inset-bottom)); left:14px; right:14px; width:auto; flex-direction:row; border:1px solid var(--line); border-radius:21px; padding:5px; gap:4px; background:var(--surface); box-shadow:0 5px 30px #00000013; overflow:visible; }
  .main-nav::after,.main-nav .nav-brand { display:none; }.main-nav a { padding:7px 4px; min-height:53px; font-size:10px; gap:4px; color:var(--muted); border-radius:15px; }
  .main-nav a[aria-current=page],.main-nav a[aria-current=page]:hover { background:var(--alt); color:var(--text); box-shadow:none; }
  .main-nav a:hover { background:var(--bg); color:var(--text); }.main-nav a .icon { width:22px; height:22px; }
  .signed-in main { margin:0; padding:13px 16px calc(108px + env(safe-area-inset-bottom)); min-height:calc(100dvh - 60px); }
  .page-heading { margin-bottom:21px; gap:12px; }.page-heading h1 { font-size:27px; }.back-link { margin-bottom:16px; font-size:12px; }
  .page-heading>.primary { font-size:12px; min-height:40px; padding:8px 11px; }
  .furnace-heading { margin-bottom:18px; padding:0 3px; }.furnace-heading h1 { font-size:23px; }.furnace-heading>.subtle-link { font-size:13px; }
  .furnace-layout { gap:28px; }.instrument { border-radius:22px; }
  .instrument-head { padding:16px 19px; gap:12px; }.instrument-head .program-name { font-size:20px; }
  .stage-indicator { font-size:11px; gap:6px; }.stage-indicator strong { width:25px; height:25px; font-size:12px; }
  .status:before { margin-right:5px; width:6px; height:6px; vertical-align:1px; }
  .instrument-body { padding:19px 19px 14px; gap:8px; }.primary-reading { padding:0; }
  .rate-line { font-size:11px; margin-bottom:10px; }.rate-line strong { font-size:14px; }
  .reading-panel .temperature { font-size:82px; letter-spacing:-3.5px; }.primary-reading .status { font-size:15px; margin-top:10px; }
  .profile-heading { font-size:11px; margin-bottom:0; min-height:38px; }.profile-zoom { width:38px; height:38px; padding:8px; }
  #program-profile { height:156px; }.profile-axis { font-size:10px; }.profile-caption { font-size:11px; margin-top:4px; }
  .reading-panel .metrics { gap:12px; }.reading-panel .run-metrics { margin:0 19px; padding:17px 0 19px; }
  .reading-panel .metrics dt { font-size:11px; }.reading-panel .metrics dd { font-size:19px; margin-top:5px; white-space:nowrap; }
  .reading-panel .warning { margin:0; padding:10px 19px 12px; font-size:11px; }
  .furnace-actions { gap:12px; margin-top:14px; }.furnace-actions a { padding:11px 13px; gap:9px; border-radius:14px; }.furnace-actions strong { font-size:14px; }
  .action-icon { width:25px; height:29px; }.action-icon .icon { width:19px; height:19px; }.furnace-actions a>.icon { width:13px; height:13px; }
  .recent-history { padding:0 3px; }.section-heading h2 { font-size:18px; margin-bottom:7px; }
  .history-entry { gap:10px; padding:16px 0; }.history-entry strong { font-size:14px; }.history-duration { font-size:12px; }.history-mark { width:29px; }
  .overview-toolbar .search-label { width:100%; }.furnace-grid { margin:19px 0; gap:16px; }.furnace-card { padding:21px; }
  .furnace-card-heading { gap:10px; flex-wrap:wrap; }.furnace-card h2 { font-size:21px; }.furnace-card .status { font-size:11px; max-width:100%; }
  .furnace-card-body { grid-template-columns:1fr; gap:0; margin:20px 0; }.furnace-card .temperature { font-size:60px; margin-bottom:8px; }.furnace-card .program-name { font-size:17px; margin-top:0; }
  .card-curve svg { height:120px; margin-top:16px; }.card-metrics dt { font-size:10px; }.card-metrics dd { font-size:14px; white-space:nowrap; }
  .current-link { padding:16px; gap:13px; }.current-link strong { font-size:16px; }.current-link small { font-size:11px; }
  .current-symbol { width:39px; height:39px; border-radius:11px; }
  .graph-grid { gap:16px; }.graph-card { padding:22px; }.graph-card .mini-chart { margin:18px 0; }
  .chart-panel { padding:10px 6px 6px; margin:17px 0; border-radius:17px; }.chart-toolbar { padding:0 3px 6px; }.legend button { font-size:11px; }
  .graph-info { padding:5px 3px 17px; }.graph-info .metrics dd { font-size:20px; }.graph-info .metrics dt { font-size:12px; }
  .settings-layout { gap:28px; }.setting-row,.setting summary { font-size:15px; min-height:65px; padding:17px 18px; gap:11px; }
  .setting-body { padding:4px 18px 19px; }.setting-value { font-size:11px; }.theme-options label>span { font-size:11px; }
  .program .mini-chart { height:130px; }.program summary { padding:21px; }.auth-panel { padding:28px 24px; }
}
@media(max-width:370px) { .reading-panel .temperature { font-size:75px; }.reading-panel .metrics dd { font-size:17px; }.furnace-actions a { padding:11px 10px; gap:7px; }.furnace-actions strong { font-size:13px; }.instrument-head .program-name { font-size:18px; }.setting-symbol { width:24px; } }

/* Entry motion never delays navigation and does not depend on cross-document
   ViewTransition lifecycle. Only an explicit theme change uses that API. */
@media(prefers-reduced-motion:no-preference) {
  [data-ambient=on] .ambient-light { animation:ambient-drift 28s ease-in-out infinite alternate; }
  [data-ambient=on] .ambient-two { animation-direction:alternate-reverse; animation-duration:34s; }
  [data-page-hidden=true] .ambient-light { animation-play-state:paused; }
  main { animation:page-in 200ms cubic-bezier(.2,.7,.2,1) both; }
  ::view-transition-old(root),::view-transition-new(root) { animation-duration:180ms; }
  .main-nav a,.setting-row,.setting summary,.furnace-actions a,.history-entry,.current-link,button,.button { transition:background .16s,color .16s,border-color .16s,transform .16s; }
  .furnace-card,.graph-card { transition:border-color .18s,box-shadow .18s,transform .18s; }
  .theme-options label>span,.switch,.switch::after { transition:background .18s,transform .18s,color .18s; }
  .setting summary>.icon:last-child { transition:transform .2s; }
  button:active,.button:active,.furnace-actions a:active { transform:scale(.98); }
}
@media(hover:hover) { .graph-card:hover,.furnace-card:hover { transform:translateY(-2px); border-color:var(--muted); box-shadow:0 9px 28px #1828300D; }.setting-row:hover,.setting summary:hover { background:var(--bg); }.furnace-actions a:hover,.current-link:hover { border-color:var(--muted); color:var(--text); } }
@keyframes page-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes ambient-drift { from { transform:translate3d(-2%,0,0); } to { transform:translate3d(7%,8%,0); } }
@media(prefers-reduced-motion:reduce) { .ambient-light { animation:none!important; transform:none!important; } }

/* Main instrument: the recipe, stage, temperature and state lead; the chart
   has its own neutral plotting surface and explicit, separate data sources. */
.reading-label { display:block; color:var(--muted); font-size:12px; margin-bottom:9px; }
.program-heading { min-width:0; width:100%; }
.instrument-head .program-name { display:flex; align-items:center; gap:18px; width:fit-content; max-width:100%; font-size:30px; }
.program-name .icon { width:18px; height:18px; color:var(--muted); }
.program-title { min-width:0; }
.live-summary { display:grid; grid-template-columns:minmax(250px,1.4fr) minmax(110px,.6fr) minmax(160px,1fr); gap:28px; padding:28px 32px 25px; align-items:start; }
.live-summary>div { min-width:0; }
.live-summary .temperature { font-size:clamp(72px,6.8vw,100px); letter-spacing:-4px; white-space:nowrap; }
.live-summary .rate-line { margin:10px 0 0; }
.stage-number { display:flex; align-items:baseline; gap:9px; line-height:1.05; margin:9px 0 11px; font-variant-numeric:tabular-nums; }
.stage-number strong { font-size:64px; font-weight:700; letter-spacing:-2px; }
.stage-number>span { font-size:23px; color:var(--muted); white-space:nowrap; }
#stage-target { font-size:13px; color:var(--muted); display:block; line-height:1.4; }
.status-focus .status { margin:18px 0 0; font-size:25px; line-height:1.3; overflow-wrap:anywhere; }
.status-focus .status::before { width:9px; height:9px; margin-right:9px; vertical-align:3px; }
.offline .stage-number strong { color:var(--muted); }
.main-run-chart { border-top:1px solid var(--instrument-line); margin:0 32px; padding:12px 0 14px; position:relative; }
.run-chart-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; margin-bottom:8px; }
.run-mode { display:flex; gap:3px; padding:3px; border-radius:11px; background:var(--instrument-soft); }
.run-mode button { font-size:12px; min-height:38px; border:0; border-radius:8px; padding:7px 14px; font-weight:400; color:var(--muted); background:transparent; }
.run-mode button[aria-pressed=true] { background:var(--surface); box-shadow:0 1px 4px #0000000D; color:var(--text); font-weight:700; }
.run-mode button:disabled { opacity:.45; cursor:default; }
.run-legend { display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font-size:12px; margin:3px 0 9px; }
.run-legend>span { display:flex; align-items:center; gap:7px; }
.run-legend .line-dot { width:8px; height:8px; margin:0; }
.main-run-chart #program-profile { height:310px; overflow:hidden; touch-action:pan-y; user-select:none; }
#program-profile:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:3px; }
.run-axis { fill:var(--muted); font:11px Lato,sans-serif; }
.run-grid { stroke:var(--instrument-line); stroke-width:1; }
.run-grid-time { stroke-dasharray:2 5; }
.run-axis-line { stroke:var(--line); stroke-width:1; }
.run-stage { fill:var(--blue); fill-opacity:.055; }
.run-stage-label { fill:var(--muted); font:11px Lato,sans-serif; }
.run-plan { stroke:var(--blue); stroke-width:1.8; stroke-dasharray:5 4; }
.run-setpoint { stroke:var(--orange); stroke-width:1.8; }
.run-temperature { stroke:var(--accent); stroke-width:2.3; }
.run-plan,.run-setpoint,.run-temperature { stroke-linecap:round; stroke-linejoin:round; }
.run-temperature-point { fill:var(--accent); }.run-setpoint-point { fill:var(--orange); }.run-plan-point { fill:var(--blue); }
.run-current-point,.run-selection-point { stroke:var(--instrument); stroke-width:1.5; }
.run-cursor { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 5; opacity:.65; }
.run-selection-cursor { stroke:var(--muted); stroke-width:1; stroke-dasharray:2 3; }
.run-empty { fill:var(--muted); font:12px Lato,sans-serif; }
.run-chart-footer { display:flex; justify-content:space-between; align-items:baseline; gap:8px 20px; font-size:11px; color:var(--muted); padding-top:6px; min-height:28px; }
.run-chart-footer p { margin:0; }
.run-elapsed { flex-shrink:0; }.run-elapsed strong { color:var(--text); margin-left:5px; font-weight:400; }
#run-selected { display:block; position:absolute; left:50%; bottom:70px; transform:translateX(-50%); width:max-content; max-width:95%; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); color:var(--text); font-size:12px; pointer-events:none; }
@media(max-width:1100px) {
  .live-summary { grid-template-columns:minmax(200px,1.3fr) minmax(100px,.7fr); gap:20px 30px; }
  .status-focus { grid-column:1/-1; display:flex; align-items:baseline; gap:14px; }
  .status-focus .reading-label { margin:0; }.status-focus .status { margin:0; font-size:23px; }
  .live-summary .temperature { font-size:90px; }
}
@media(max-width:1000px) { .live-summary { padding:25px 24px; }.main-run-chart { margin:0 24px; } }
@media(max-width:700px) {
  .reading-label { font-size:11px; margin-bottom:7px; }
  .instrument-head .program-name { font-size:24px; gap:12px; }
  .live-summary { padding:20px 19px; grid-template-columns:minmax(0,1.6fr) minmax(75px,.8fr); gap:18px 14px; }
  .live-summary .temperature { font-size:clamp(60px,17vw,82px); letter-spacing:-3.5px; }
  .live-summary .rate-line { margin-top:7px; }
  .stage-number { gap:6px; margin:4px 0 9px; }.stage-number strong { font-size:49px; }.stage-number>span { font-size:17px; }
  #stage-target { font-size:11px; }.status-focus { gap:12px; }.status-focus .status { font-size:21px; }
  .status-focus .status::before { width:7px; height:7px; vertical-align:2px; margin-right:7px; }
  .main-run-chart { margin:0 12px; padding:9px 0 12px; }
  .run-chart-controls,.run-legend,.run-chart-footer { margin-left:7px; margin-right:7px; }
  .run-chart-controls { margin-bottom:5px; }.run-legend { font-size:11px; gap:8px 14px; margin-bottom:8px; }
  .run-mode button { font-size:11px; min-height:36px; padding:7px 12px; }
  .main-run-chart #program-profile { height:220px; }.run-axis,.run-stage-label { font-size:10px; }
  .run-chart-footer { flex-wrap:wrap; font-size:10px; row-gap:5px; padding-top:4px; }
  #run-selected { font-size:11px; bottom:65px; padding:8px 10px; }
}