:root{color-scheme:light;--bg:#f6f7f9;--panel:#ffffff;--panel-soft:#fbfcfe;--line:#d9dde5;--line-strong:#c5cad6;--text:#101828;--muted:#667085;--muted-light:#98a2b3;--blue:#2563eb;--blue-soft:rgba(37,99,235,0.08);--teal:#059669;--teal-soft:rgba(5,150,105,0.08);--red:#dc2626;--red-soft:rgba(220,38,38,0.08);--yellow:#b45309;--yellow-soft:rgba(180,83,9,0.08);--green:#027a48}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,SF Pro Display,SF Pro Text,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-height:100vh}button,input,select{font:inherit}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.58}.training-page{min-height:100vh}.training-header{position:-webkit-sticky;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;background:rgba(246,247,249,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(197,202,214,.72)}.brand-block{display:flex;flex-direction:column;gap:4px}.brand-title{margin:0;font-size:24px;font-weight:720;letter-spacing:0}.brand-subtitle{margin:0;color:var(--muted);font-size:14px}.status-chip,.transport-pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.92);color:var(--muted);font-size:12px;font-weight:650}.transport-pill{align-self:flex-start}.transport-pill strong{color:var(--text)}.status-dot{width:8px;height:8px;border-radius:999px;background:var(--line-strong)}.status-dot[data-state=connected]{background:var(--green)}.status-dot[data-state=warning]{background:var(--yellow)}.status-dot[data-state=critical]{background:var(--red)}.training-main{width:min(1500px,calc(100vw - 40px));margin:0 auto;padding:24px 0 34px}.chart-section,.controls-panel,.guide-panel,.records-section,.status-section{background:var(--panel);border:1px solid rgba(197,202,214,.86);border-radius:22px}.guide-panel--full{padding:20px}.guide-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}.guide-copy{display:flex;flex-direction:column;gap:6px;max-width:620px}.panel-eyebrow{font-size:11px;font-weight:760;text-transform:uppercase;color:var(--muted)}.section-title{margin:0;font-size:18px;font-weight:720}.section-copy{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.45}.guide-image{width:min(260px,34vw);height:auto;border-radius:16px;border:1px solid rgba(197,202,214,.78);object-fit:cover}.guide-flow{display:grid;grid-template-columns:minmax(220px,.95fr) minmax(220px,.95fr) minmax(320px,1.25fr);grid-gap:16px;gap:16px;align-items:start}.code-panel,.guide-section{min-height:100%;padding:14px;border:1px solid rgba(197,202,214,.68);border-radius:16px;background:var(--panel-soft)}.guide-section-title{font-size:14px;font-weight:780;color:var(--text)}.guide-list{display:flex;flex-direction:column;gap:11px;margin-top:12px}.guide-list--plain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.guide-item{display:grid;grid-template-columns:14px minmax(0,1fr);grid-gap:10px;gap:10px;align-items:flex-start}.guide-index{width:10px;height:10px;border-radius:999px;background:var(--blue);margin-top:5px}.guide-item-title{font-size:13px;font-weight:720}.guide-item-copy{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}.code-panel-header,.records-header,.section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.code-error,.code-note{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.4}.code-error{color:var(--red)}.code-block{max-height:212px;margin:12px 0 0;padding:12px;overflow:auto;border-radius:14px;background:#111827;color:#edf2f7;font-size:11px;line-height:1.5}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-gap:20px;gap:20px;margin-top:20px;align-items:start}.workspace-primary{display:flex;flex-direction:column;gap:16px;min-width:0}.controls-panel{position:-webkit-sticky;position:sticky;top:86px;display:flex;flex-direction:column;gap:18px;padding:18px}.controls-grid{display:grid;grid-template-columns:1fr;grid-gap:14px;gap:14px}.toolbar-field{display:flex;flex-direction:column;gap:8px}.toolbar-field--wide{grid-column:1/-1}.field-label,.metric-label{font-size:11px;font-weight:760;color:var(--muted);text-transform:uppercase}.select,.text-input{width:100%;height:40px;padding:0 14px}.button,.select,.text-input{border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text)}.button{min-height:38px;padding:0 16px;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease}.button:hover:not(:disabled){border-color:var(--line-strong);transform:translateY(-1px)}.button--small{min-height:34px;padding:0 13px;font-size:12px}.button--pill{border-radius:999px}.connection-segment,.segmented-control{position:relative;display:grid;min-height:44px;padding:4px;border:1px solid rgba(197,202,214,.9);border-radius:999px;background:#f1f3f7;overflow:hidden}.segmented-control{grid-template-columns:repeat(var(--option-count),minmax(0,1fr))}.connection-segment-thumb,.segmented-thumb{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:#fff;box-shadow:0 8px 20px rgba(16,24,40,.11);pointer-events:none;transition:transform .19s ease}.segmented-thumb{width:calc((100% - 8px) / var(--option-count));transform:translateX(calc(var(--active-index) * 100%))}.segmented-option{position:relative;z-index:1;min-height:34px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:720;cursor:pointer;transition:color .15s ease}.segmented-option[data-active=true]{color:var(--text)}.connection-segment{grid-template-columns:repeat(2,minmax(0,1fr))}.connection-segment-thumb{width:calc(50% - 4px)}.connection-segment[data-state=connected] .connection-segment-thumb{transform:translateX(100%)}.connection-action-button,.connection-state-label{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:34px;border-radius:999px;font-size:13px;font-weight:720}.connection-state-label{color:var(--muted)}.connection-segment[data-state=connected] .connection-state-label{order:2;color:var(--green)}.connection-segment[data-state=connected] .connection-action-button{order:1}.connection-action-button{border:0;background:transparent;color:var(--text);cursor:pointer}.series-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;gap:8px}.series-toggle{min-height:38px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:13px;font-weight:720;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease}.series-toggle--filtered[data-active=true]{border-color:rgba(37,99,235,.28);background:var(--blue-soft);color:var(--blue)}.series-toggle--envelope[data-active=true]{border-color:rgba(5,150,105,.28);background:var(--teal-soft);color:var(--teal)}.session-panel{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid rgba(197,202,214,.72);border-radius:18px;background:var(--panel-soft)}.session-summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.session-summary strong{font-size:20px}.session-summary span{color:var(--muted);font-size:12px}.session-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px}.session-button{min-height:58px;border:0;border-radius:999px;color:#fff;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 14px 26px rgba(16,24,40,.12);transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease}.session-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 30px rgba(16,24,40,.14)}.session-button--run{grid-column:1/-1;background:var(--text)}.session-button--pause{background:var(--blue)}.session-button--resume{background:var(--green)}.session-button--reset{background:var(--red)}.chart-section{min-width:0;padding:18px 18px 14px}.legend-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px 12px}.legend-item{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.legend-swatch{width:9px;height:9px;border-radius:999px}.waveform-shell{display:flex;flex-direction:column;gap:12px}.chart-frame{min-height:430px;border:1px solid rgba(197,202,214,.55);border-radius:18px;background:var(--panel-soft);overflow:hidden}.chart-stack{display:flex;flex-direction:column;gap:12px}.chart-panel{border:1px solid rgba(197,202,214,.62);border-radius:18px;background:var(--panel-soft);overflow:hidden}.chart-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 0}.chart-panel-header span{font-size:13px;font-weight:780}.chart-panel-header small{color:var(--muted);font-size:11px}.chart-scroll{width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:8px 8px 10px}.chart-scroll-inner{position:relative;min-width:920px;flex:0 0 auto}.chart-empty{display:grid;place-items:center;min-height:430px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center}.time-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;grid-gap:12px;gap:12px;padding:0 2px}.live-button{min-height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:12px;font-weight:760;cursor:pointer}.live-button[data-active=true]{border-color:rgba(5,150,105,.28);background:var(--teal-soft);color:var(--teal)}.time-slider{width:100%;accent-color:var(--blue)}.time-window-label{color:var(--muted);font-size:12px;white-space:nowrap}.status-section{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px;padding:14px}.status-tile{display:flex;flex-direction:column;gap:9px;min-height:144px;padding:14px;border:1px solid rgba(197,202,214,.62);border-radius:16px;background:var(--panel-soft)}.status-tile[data-tone=warning]{border-color:rgba(180,83,9,.22);background:var(--yellow-soft)}.status-tile[data-tone=critical]{border-color:rgba(220,38,38,.22);background:var(--red-soft)}.metric-value{font-size:22px;font-weight:760;line-height:1.12}.metric-subvalue{color:var(--muted);font-size:12px;line-height:1.42}.progress-track{width:100%;height:7px;border-radius:999px;background:rgba(16,24,40,.08);overflow:hidden}.progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--text) 0,var(--blue) 100%)}.badge{display:inline-flex;align-items:center;align-self:flex-start;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:720;border:1px solid transparent}.badge[data-tone=normal]{background:var(--teal-soft);color:var(--teal);border-color:rgba(5,150,105,.18)}.badge[data-tone=warning]{background:var(--yellow-soft);color:var(--yellow);border-color:rgba(180,83,9,.2)}.badge[data-tone=critical]{background:var(--red-soft);color:var(--red);border-color:rgba(220,38,38,.2)}.port-text{font-family:SF Mono,Roboto Mono,ui-monospace,monospace;font-size:15px;word-break:break-word}.records-section{padding:16px}.records-empty{display:grid;place-items:center;min-height:92px;margin-top:12px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);font-size:13px}.record-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}.record-card{display:grid;grid-template-columns:124px minmax(110px,.45fr) minmax(0,1fr);grid-gap:12px;gap:12px;align-items:center;padding:10px;border:1px solid rgba(197,202,214,.64);border-radius:16px;background:var(--panel-soft)}.record-sparkline{width:124px;height:54px;border-radius:12px;background:#fff;border:1px solid rgba(197,202,214,.58)}.record-sparkline polyline{fill:none;stroke:var(--blue);stroke-width:3;vector-effect:non-scaling-stroke}.record-meta{display:flex;flex-direction:column;gap:3px}.record-meta strong{font-size:18px}.record-meta span,.record-stats span{color:var(--muted);font-size:12px}.record-stats{display:flex;flex-wrap:wrap;gap:7px}.record-stats span{display:inline-flex;padding:5px 9px;border-radius:999px;background:rgba(16,24,40,.05)}@media (max-width:1220px){.guide-flow,.workspace-grid{grid-template-columns:1fr}.controls-panel{position:static}.status-section{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:820px){.training-header{align-items:flex-start;flex-direction:column;padding:18px 20px}.training-main{width:min(100vw - 24px,1500px);padding-top:16px}.guide-heading,.records-header,.section-header{flex-direction:column}.guide-image{width:100%}.guide-list--plain,.status-section{grid-template-columns:1fr}.legend-row{justify-content:flex-start}.record-card{grid-template-columns:1fr}.record-sparkline{width:100%}.time-controls{grid-template-columns:1fr}}