@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/access/fonts/lato-400.woff2') format('woff2'); }
  @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/access/fonts/lato-700.woff2') format('woff2'); }
  @font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('/access/fonts/lato-900.woff2') format('woff2'); }
  @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: optional; src: url('/access/fonts/manrope-400.woff2') format('woff2'); }
  @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: optional; src: url('/access/fonts/manrope-500.woff2') format('woff2'); }
  @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: optional; src: url('/access/fonts/manrope-600.woff2') format('woff2'); }
  @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: optional; src: url('/access/fonts/manrope-700.woff2') format('woff2'); }
  @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: optional; src: url('/access/fonts/manrope-800.woff2') format('woff2'); }

    :root {
      color-scheme: dark;
      --font-family-brand-primary: 'Lato', ui-sans-serif, system-ui, sans-serif;
      --font-family-brand-data: 'Manrope', ui-sans-serif, system-ui, sans-serif;
      --font-family-brand-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
      --font-family-brand-body: var(--font-family-brand-primary);
      --font-family-brand-numeric: var(--font-family-brand-data);
      --font-family-body: var(--font-family-brand-primary);
      --font-family-heading: var(--font-family-brand-primary);
      --font-size-action: .75rem;
      --line-height-action: 1rem;
      --font-size-action-primary: .8125rem;
      --line-height-action-primary: 1.125rem;
      --font-weight-action: 600;
      --font-weight-action-primary: 600;
      font-family: var(--font-family-brand-primary);
      font-synthesis: none;
      --lab-modal-inset:var(--spacing-4);
      --lab-header-gap: var(--spacing-2, 8px);
      --lab-header-height: calc(var(--lab-header-control-height) + 2 * var(--lab-header-gap) + 1px);
      --lab-mobile-header-height: var(--lab-header-height);
      --lab-header-control-fill: color-mix(in srgb, var(--ground) 94%, var(--text));
      --lab-header-control-hover: color-mix(in srgb, var(--ground) 86%, var(--text));
      --lab-header-control-height: 36px;
      --mode-build-fill: #276fb4;
      --mode-preview-fill: #7550ab;
      --caution: #efd36b;
      --canvas-panel-gap: 12px;
      --canvas-panel-inset: 20px;
      --canvas-element-border-width: 1px;
      --canvas-element-border: var(--canvas-element-border-width) solid color-mix(in srgb, var(--surface) 76%, var(--text));
      --ground: #0c0d0d;
      --surface: #171818;
      --surface-raised: #252626;
      --surface-quiet: #111212;
      --line: rgba(255, 255, 255, .12);
      --line-strong: rgba(255, 255, 255, .22);
      --text: #f5f1ed;
      --muted: #d4d2ce;
      --faint: #8e8d8a;
      /*
       * Light-tint roles derived from the five BSL logo anchors used by the storefront:
       * orange #ff6600, magenta #ff3377, green #a5c400, teal #00b5ad, purple #8a3ffc.
       * The darker brand colors stay in the identity; this workstation uses quieter tints so
       * dense routes remain legible over photography without turning the canvas into neon UI.
       */
      --bsl-orange-soft: #ff9d57;
      --bsl-magenta-soft: #ff9aba;
      --bsl-green-soft: #d6e79a;
      --bsl-teal-soft: #88d8d2;
      --bsl-purple-soft: #c5b0f4;
      --measure: #78b9ff;
      --bsl-orange-muted: #3a281f;
      --bsl-teal-muted: #193331;
      --focus: var(--bsl-teal-soft);
      --run: var(--bsl-teal-soft);
      --extension: var(--bsl-orange-soft);
      --scale: var(--measure);
      --good: var(--bsl-green-soft);
      --warn: var(--bsl-orange-soft);
      --bad: #ff7070;
      --mask: var(--bsl-purple-soft);
      --time: #e8c776;
      --planner-toolbar-gap: 4px;
      --planner-minibar-gap: 2px;
      --lab-control-radius: var(--radius-element, 8px);
      --lab-surface-radius: var(--radius-container, 12px);
      --shadow: 0 18px 52px rgba(0, 0, 0, .34);

    }

    :root {--material-menu-surface: var(--material-surface-strong);
--material-control-idle-opacity: .94;
--material-symbol-muted-opacity: 1;
--material-symbol-surface: var(--material-surface);
--material-symbol-muted-surface: var(--material-surface);
--material-control-surface: var(--surface-quiet);
--material-fill-subtle: color-mix(in srgb, color-mix(in srgb, var(--surface) 96%, var(--text)) 90%, transparent);
--material-fill: color-mix(in srgb, color-mix(in srgb, var(--surface) 93%, var(--text)) 90%, transparent);
--material-fill-strong: color-mix(in srgb, color-mix(in srgb, var(--surface) 90%, var(--text)) 90%, transparent);
--material-selected-surface: var(--surface-quiet);
--material-border-color: var(--line);
--material-border-highlight: var(--line);
--material-highlight: none;
--material-wash: none;
--material-surface-subtle: var(--material-fill-subtle);
--material-surface: var(--material-fill);
--material-surface-strong: var(--material-fill-strong);
--material-backdrop-overlay: none;
--material-backdrop-checkpoint: none;
--material-backdrop-port: none;
--material-blur: 0px;
--material-blur-strong: 0px;
--material-backdrop: none;
--material-backdrop-strong: none;
--material-inner-border: none;
--material-elevation-low: none;
--material-elevation-medium: none;
--material-elevation-modal: none;
--material-surface-border: 1px solid var(--line-strong);}
:root[data-interface-style="glass"] {--material-menu-surface: color-mix(in srgb, var(--surface) 90%, transparent);
--material-control-idle-opacity: .9;
--material-symbol-muted-opacity: .72;
--material-symbol-surface: rgba(6,10,14,.78);
--material-symbol-muted-surface: rgba(6,10,14,.62);
--material-control-surface: var(--material-surface-strong);
--material-fill-subtle: color-mix(in srgb, var(--surface) 26%, transparent);
--material-fill: color-mix(in srgb, var(--surface) 38%, transparent);
--material-fill-strong: color-mix(in srgb, var(--surface) 46%, transparent);
--material-selected-surface: var(--surface-quiet);
--material-border-color: rgba(255, 255, 255, .14);
--material-border-highlight: rgba(255, 255, 255, .24);
--material-highlight: radial-gradient(110% 82% at 0% 0%, rgba(255, 255, 255, .105) 0%, rgba(255, 255, 255, .035) 30%, transparent 60%),
        radial-gradient(68% 58% at 100% 100%, rgba(255, 255, 255, .025), transparent 72%);
--material-wash: radial-gradient(100% 130% at -10% 30%, color-mix(in srgb, var(--bsl-teal-soft) 3.5%, transparent), transparent 60%),
        radial-gradient(90% 120% at 110% 76%, color-mix(in srgb, var(--bsl-purple-soft) 3%, transparent), transparent 66%);
--material-surface-subtle: var(--material-highlight), var(--material-wash), var(--material-fill-subtle);
--material-surface: var(--material-highlight), var(--material-wash), var(--material-fill);
--material-surface-strong: var(--material-highlight), var(--material-wash), var(--material-fill-strong);
--material-backdrop-overlay: blur(2px);
--material-backdrop-checkpoint: blur(3px);
--material-backdrop-port: blur(8px) saturate(1.08);
--material-blur: 14px;
--material-blur-strong: 18px;
--material-backdrop: blur(var(--material-blur)) saturate(1.18) brightness(1.015);
--material-backdrop-strong: blur(var(--material-blur-strong)) saturate(1.22) brightness(1.02);
--material-inner-border: inset 0 1px 0 rgba(255, 255, 255, .16), inset 1px 0 0 rgba(255, 255, 255, .035), inset 0 -1px 0 rgba(0, 0, 0, .16);
--material-elevation-low: var(--material-inner-border), 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px -18px rgba(0, 0, 0, .54);
--material-elevation-medium: 0 3px 8px rgba(0, 0, 0, .2), 0 18px 42px -18px rgba(0, 0, 0, .66);
--material-elevation-modal: 0 5px 12px rgba(0, 0, 0, .24), 0 26px 64px -20px rgba(0, 0, 0, .72);
--material-surface-border: 0;}
.canvas-symbol-marker.is-review-issue .canvas-symbol-glyph.astryx-button {--material-state-surface: var(--material-surface-strong);}
html[data-interface-style="glass"] :is(.canvas-symbol-marker.is-review-issue .canvas-symbol-glyph.astryx-button) {--material-state-surface: linear-gradient(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 12%, transparent)), var(--material-surface-strong);}
.canvas-symbol-marker.is-draft-preview .canvas-symbol-glyph.astryx-button {--material-state-surface: var(--material-surface);}
html[data-interface-style="glass"] :is(.canvas-symbol-marker.is-draft-preview .canvas-symbol-glyph.astryx-button) {--material-state-surface: linear-gradient(color-mix(in srgb, currentColor 9%, transparent), color-mix(in srgb, currentColor 9%, transparent)), var(--material-surface);}
.canvas-symbol-leader {--material-state-surface: currentColor;}
html[data-interface-style="glass"] :is(.canvas-symbol-leader) {--material-state-surface: radial-gradient(circle, currentColor 0 1px, transparent 1.2px) 0 50% / 8px 2px repeat-x;}
#canvas-symbol-filter-astryx .canvas-symbol-filter-options button[aria-pressed="true"] {--material-state-surface: var(--material-selected-surface);}
html[data-interface-style="glass"] :is(#canvas-symbol-filter-astryx .canvas-symbol-filter-options button[aria-pressed="true"]) {--material-state-surface: var(--material-selected-surface);}
.canvas-tooltip {--material-state-surface: var(--material-surface-strong);}
html[data-interface-style="glass"] :is(.canvas-tooltip) {--material-state-surface: linear-gradient(color-mix(in srgb, var(--canvas-tooltip-tone) 6%, transparent), color-mix(in srgb, var(--canvas-tooltip-tone) 6%, transparent)), var(--material-surface-strong);}
.planner-context-action.astryx-button[data-tone][data-active="true"] {--material-state-surface: var(--material-selected-surface);}
html[data-interface-style="glass"] :is(.planner-context-action.astryx-button[data-tone][data-active="true"]) {--material-state-surface: var(--material-selected-surface);}
.planner-context-action.astryx-button[data-tone]:hover:not(:disabled):not([data-active="true"]),
    .planner-context-action.astryx-button[data-tone]:focus-visible:not([data-active="true"]) {--material-state-surface: var(--material-surface-subtle);}
html[data-interface-style="glass"] :is(.planner-context-action.astryx-button[data-tone]:hover:not(:disabled):not([data-active="true"]),
    .planner-context-action.astryx-button[data-tone]:focus-visible:not([data-active="true"])) {--material-state-surface: linear-gradient(color-mix(in srgb, var(--planner-context-tone) 10%, transparent), color-mix(in srgb, var(--planner-context-tone) 10%, transparent)), var(--material-surface-subtle);}
.planner-context-action.astryx-button[data-tone][data-active="true"]:is(:hover, :focus-visible):not(:disabled) {--material-state-surface: var(--material-selected-surface);}
html[data-interface-style="glass"] :is(.planner-context-action.astryx-button[data-tone][data-active="true"]:is(:hover, :focus-visible):not(:disabled)) {--material-state-surface: var(--material-selected-surface);}
.planner-context-action.astryx-button[data-destructive="true"]:hover:not(:disabled),
    .planner-context-action.astryx-button[data-destructive="true"]:focus-visible {--material-state-surface: var(--material-surface);}
html[data-interface-style="glass"] :is(.planner-context-action.astryx-button[data-destructive="true"]:hover:not(:disabled),
    .planner-context-action.astryx-button[data-destructive="true"]:focus-visible) {--material-state-surface: linear-gradient(color-mix(in srgb, var(--color-text-red) 9%, transparent), color-mix(in srgb, var(--color-text-red) 9%, transparent)), var(--material-surface);}
.planner-context-filter-group [data-planner-filter="true"].astryx-button[aria-pressed="true"] {--material-state-surface: var(--material-selected-surface);}
html[data-interface-style="glass"] :is(.planner-context-filter-group [data-planner-filter="true"].astryx-button[aria-pressed="true"]) {--material-state-surface: var(--material-selected-surface);}
.reference-grid-button span {--material-state-surface: var(--surface);}
html[data-interface-style="glass"] :is(.reference-grid-button span) {--material-state-surface: linear-gradient(transparent, rgba(0,0,0,.82));}
    body :is(.astryx-tooltip, .astryx-popover-surface, .astryx-hover-card, .astryx-hovercard),
    :is(.canvas-tooltip, .planner-tool-tooltip, .planner-tool-hover-card, .plan-rail-info-popover, .canvas-placement-cursor-copy) {
      text-wrap: balance;
    }
    * { box-sizing: border-box; }
    .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
    html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--ground); color: var(--text); }
    /* Do not let an unlayered reset replace Astryx's compact semantic sizes. */
    button, input, select { font-family: inherit; }
    button { cursor: pointer; }
    a { text-underline-offset: 3px; }
    a:not(.astryx-button):not(.astryx-link) { color: inherit; }
    :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):not(.astryx-button):focus-visible:not([data-astryx-theme] *) { outline: 2px solid var(--focus); outline-offset: 2px; }
    ::selection { background: var(--focus); color: var(--surface); }

    .lab-loading-screen {
      position: fixed;
      z-index: 1000;
      inset: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: var(--ground);
      color: var(--text);
      opacity: 1;
      visibility: visible;
      transition: opacity 220ms ease-out, visibility 0s linear 220ms;
    }
    .lab-loading-content {
      display: grid;
      justify-items: center;
      gap: 20px;
      padding: 24px;
      text-align: center;
    }
    .lab-loading-brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-family: var(--font-family-brand-primary);
      font-size: 24px;
      line-height: 30px;
      letter-spacing: .035em;
      text-transform: uppercase;
    }
    .lab-loading-brand-name { display: inline-flex; align-items: baseline; }
    .lab-loading-brand-chroma { font-weight: 900; }
    .lab-loading-brand-glow { color: var(--run); font-weight: 400; }
    .lab-loading-brand-lab {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 9px;
      border: 1px solid var(--line-strong);
      border-radius: 6px;
      color: var(--muted);
      font-family: var(--font-family-brand-data);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
    }
    .lab-loading-status { margin: 0; color: var(--muted); font-size: 13px; line-height: 18px; text-wrap: balance; }
    .lab-loading-indicator { width: 48px; height: 12px; display: flex; align-items: center; justify-content: space-between; }
    .lab-loading-indicator > span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      animation: lab-loading-pulse 1350ms ease-in-out infinite;
    }
    .lab-loading-indicator > span:nth-child(2) { animation-delay: -900ms; }
    .lab-loading-indicator > span:nth-child(3) { animation-delay: -450ms; }
    body[data-app-ready="true"][data-start-screen="closed"] .lab-loading-screen { opacity: 0; pointer-events: none; visibility: hidden; }
    @keyframes lab-loading-pulse { 0%, 100% { opacity: .22; } 50% { opacity: .8; } }

    
  @view-transition { navigation: auto; }
  html {
    animation: pro-lab-page-in 220ms cubic-bezier(.22, 1, .36, 1) both;
  }
  html.pro-lab-leaving {
    pointer-events: none;
    animation: pro-lab-page-out 140ms ease both;
  }
  ::view-transition-group(root),
  ::view-transition-group(pro-lab-header) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  ::view-transition-old(root) { animation: pro-lab-page-out 140ms ease both; }
  ::view-transition-new(root) { animation: pro-lab-page-in 220ms cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes pro-lab-page-out {
    to { opacity: 0; transform: translateY(2px); }
  }
  @keyframes pro-lab-page-in {
    from { opacity: 0; transform: translateY(4px); }
  }
  .pro-lab-header {
    view-transition-name: pro-lab-header;
    position: relative;
    height: var(--lab-header-height, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--lab-header-gap, 8px);
    --lab-header-edge-inset: var(--lab-header-gap, 8px);
    padding: var(--lab-header-edge-inset);
    border-bottom: 1px solid var(--material-border-color);
    background: color-mix(in srgb, var(--ground) 90%, transparent);
    box-shadow: 0 10px 28px -24px rgba(0, 0, 0, .8);
    backdrop-filter: var(--material-backdrop-strong);
    -webkit-backdrop-filter: var(--material-backdrop-strong);
  }
  .pro-lab-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--text, #f5f1ed);
    font-family: var(--font-family-brand-body, 'Lato', ui-sans-serif, system-ui, sans-serif);
    font-size: 14px;
    line-height: 18px;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  .pro-lab-brand-name { display: inline-flex; align-items: baseline; }
  .pro-lab-brand-chroma { font-weight: 900; }
  .pro-lab-brand-glow { color: var(--run, #88d8d2); font-weight: 400; }
  .pro-lab-brand-lab { display: inline-flex; align-items: center; justify-content: center; }
  .pro-lab-brand-lab { min-height: 22px; padding: 0 7px; border: 1px solid var(--material-border-color); border-radius: 5px; background: var(--material-surface-subtle); font-family: var(--font-family-brand-numeric, 'Manrope', ui-sans-serif, system-ui, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .12em; backdrop-filter: var(--material-backdrop); -webkit-backdrop-filter: var(--material-backdrop); }
  .pro-lab-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .pro-lab-identity-actions { display: flex; align-items: center; margin-left: -2px; }
  .pro-lab-identity-actions > [data-astryx-theme] { display: flex; }
  .pro-lab-job {
    min-width: min(260px, 32vw);
    max-width: 360px;
  }
  .pro-lab-job > [data-astryx-theme] { width: 100%; }
  .pro-lab-header-center {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    transform: translate(-50%, -50%);
  }
  .pro-lab-nav {
    display: flex;
    gap: 3px;
    padding: 2px;
    border: 1px solid var(--material-border-color);
    border-radius: 8px;
    background: var(--material-surface-subtle);
    backdrop-filter: var(--material-backdrop);
    -webkit-backdrop-filter: var(--material-backdrop);
  }
  .pro-lab-nav a {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--muted, #b0aaa5);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: color 140ms ease-out, background-color 140ms ease-out;
  }
  .pro-lab-nav a[aria-current="page"] {
    background: var(--surface-raised, #242220);
    color: var(--text, #f5f1ed);
  }
  .pro-lab-nav > [data-astryx-theme] { display: flex; }
  .header-navigation { min-width: 0; }
  .pro-lab-preview-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .pro-lab-preview-status > span:last-child {
    color: var(--muted, #b0aaa5);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
  }
  .pro-lab-runtime {
    min-width: 0;
    color: var(--muted, #b0aaa5);
    font-family: var(--font-family-brand-numeric, ui-sans-serif, system-ui, sans-serif);
    font-size: 10px;
    line-height: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .pro-lab-runtime strong {
    display: block;
    overflow: hidden;
    color: var(--good, #b8f3d0);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pro-lab-runtime span { display: none; }
  .pro-lab-actions {
    min-width: 0;
    justify-self: end;
  }
  .pro-lab-header-actions {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: var(--lab-header-gap, 8px);
    padding-inline-end: 0;
  }
  @media (max-width: 700px) {
    .pro-lab-header {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--lab-header-gap, 8px);
      padding: var(--lab-header-gap, 8px);
    }
    .pro-lab-runtime,
    .pro-lab-job { display: none; }
    .pro-lab-nav a { padding-inline: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html,
    html.pro-lab-leaving { animation-duration: 1ms; }
    ::view-transition-group(root),
    ::view-transition-group(pro-lab-header) { animation-duration: 1ms; }
  }


    /* Plan and Preview live beside save state; the legacy center navigation slot is intentionally unused. */
    .pro-lab-nav { display: none; }
    .pro-lab-job {width:100%;min-width:0;max-width:none;container:header-left / inline-size;}
    .pro-lab-header {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
    .pro-lab-header-center {position:static;transform:none;}
    .pro-lab-header-actions {min-width:0;width:100%;justify-content:flex-end;container:header-right / inline-size;}
    .job-save-controls {justify-content:flex-end;}
    .header-job-name {display:grid;grid-template-columns:16px minmax(0,1fr) 12px;text-align:left;}
    .header-job-switcher>.header-lessons-control,.header-settings-button {flex-shrink:0;}
    .header-mode-switcher { flex: 0 0 auto; }


    .header-view-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:max-content;gap:var(--lab-header-gap);height:var(--lab-header-control-height);flex-shrink:0;}
    .header-view-modes {display:contents;}
    .header-mode-primary[data-mode="installation"] {--mode-accent:var(--scale);--mode-fill:var(--mode-build-fill);}
    .header-mode-primary[data-mode="preview"] {--mode-accent:var(--mask);--mode-fill:var(--mode-preview-fill);}
    .header-mode-primary.astryx-button {height:100%;width:100%;padding-inline:var(--spacing-3);border:0;background:var(--lab-header-control-fill);color:var(--mode-accent);box-shadow:none;font-size:var(--font-size-base);white-space:nowrap;transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease;}
    .header-mode-primary.astryx-button svg {color:inherit;}
    .header-mode-primary.astryx-button:hover:not(:disabled),.header-mode-primary.astryx-button:focus-visible {background:var(--lab-header-control-hover);}
    :is(body:not([data-lab-pending-mode]) .header-mode-primary[aria-pressed="true"],body[data-lab-pending-mode="preview"] .header-mode-primary[data-mode="preview"],body[data-lab-pending-mode="installation"] .header-mode-primary[data-mode="installation"]) {background:var(--mode-fill);color:white;border-color:transparent;}
    :is(body:not([data-lab-pending-mode]) .header-mode-primary[aria-pressed="true"],body[data-lab-pending-mode="preview"] .header-mode-primary[data-mode="preview"],body[data-lab-pending-mode="installation"] .header-mode-primary[data-mode="installation"]):hover:not(:disabled),:is(body:not([data-lab-pending-mode]) .header-mode-primary[aria-pressed="true"],body[data-lab-pending-mode="preview"] .header-mode-primary[data-mode="preview"],body[data-lab-pending-mode="installation"] .header-mode-primary[data-mode="installation"]):focus-visible {background:color-mix(in srgb,var(--mode-fill) 88%,white);}
    .pro-lab-header .astryx-button:where(:not(dialog *):not([popover] *):not(.header-mode-primary)) {border:0;background:var(--lab-header-control-fill);}
    .pro-lab-header .astryx-button:where(:not(dialog *):not([popover] *):not(.header-mode-primary)):hover:not(:disabled) {background:var(--lab-header-control-hover);}
    .pro-lab-header .astryx-button:where(:not(dialog *):not([popover] *)) {height:var(--lab-header-control-height);min-height:var(--lab-header-control-height);font-size:var(--font-size-base);font-weight:500;padding-inline:var(--spacing-3);}
    .pro-lab-header .astryx-button:where(:not(dialog *):not([popover] *)) {border-radius:var(--radius-element);}
    .header-settings-button.astryx-button,.header-lessons-button.astryx-button {background:var(--lab-header-control-fill);}
    .header-settings-button.astryx-button:hover:not(:disabled),.header-lessons-button.astryx-button:hover:not(:disabled) {background:var(--lab-header-control-hover);}
    .pro-lab-header .header-save-status {width:var(--lab-header-control-height);height:var(--lab-header-control-height);padding:0;gap:0;flex-shrink:0;color:var(--good);transition:color 240ms ease,background-color 160ms ease;}
    .header-save-status[data-save-state="changes"] {color:var(--warn);}
    .header-save-status[data-save-state="saving"] {color:var(--muted);}
    .header-save-status[data-save-state="error"] {color:var(--bad);}
    .save-status-icon {position:relative;display:grid;width:18px;height:18px;place-items:center;color:inherit;}
    .save-status-glyph {grid-area:1/1;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.65) rotate(-12deg);transition:opacity 220ms ease,transform 320ms cubic-bezier(.22,1,.36,1);pointer-events:none;}
    .save-status-glyph[data-visible="true"] {opacity:1;transform:scale(1) rotate(0);}
    .save-status-glyph>svg {color:inherit;}
    @media(prefers-reduced-motion:reduce){.pro-lab-header .header-save-status,.save-status-glyph {transition:none;}.save-status-glyph {transform:none;}}
    .header-save-slot {display:grid;place-items:center;width:var(--lab-header-control-height);height:var(--lab-header-control-height);flex:0 0 var(--lab-header-control-height);}
    .pro-lab-header :is(.header-mode-primary,.header-export-button) {width:100%;height:var(--lab-header-control-height);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-element);gap:var(--spacing-2);}
    .pro-lab-header .header-lesson-navigation .astryx-button {width:var(--lab-header-control-height);padding:var(--spacing-2);}
    .pro-lab-header .job-history-action.astryx-button {width:var(--lab-header-control-height);height:var(--lab-header-control-height);min-height:var(--lab-header-control-height);}
    .header-job-context {grid-template-columns:minmax(0,1fr);min-width:var(--lab-header-control-height);max-width:34ch;flex:1 1 0;overflow:visible;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-caption-size,12px);}
    .header-job-name.astryx-button {min-width:0;max-width:100%;width:100%;justify-content:flex-start;min-height:var(--lab-header-control-height);height:var(--lab-header-control-height);padding:var(--spacing-1) var(--spacing-3);border:0;background:var(--lab-header-control-fill);}
    .header-job-name strong {min-width:0;font-weight:500;overflow:hidden;white-space:nowrap;}
    .header-job-text {display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:clip;}
    .header-job-text[data-overflow="true"] {mask-image:linear-gradient(to right,#000 calc(100% - var(--spacing-4)),transparent);}
    .header-settings-button svg {color:var(--mask);}
    .header-lessons-button svg {color:var(--bsl-teal-soft);}
    .bsl-brand-icon {display:inline-block;width:16px;height:16px;object-fit:contain;flex-shrink:0;}
    .bom-export-saved-list.bom-export-fallback.astryx-button {
    background:var(--material-symbol-surface);color:var(--text);
  }
  .bom-export-note {margin:8px 0 0;color:var(--muted);font-size:var(--font-size-sm);line-height:1.4;text-align:center;}
  .bsl-store-link-label {display:inline-flex;align-items:center;gap:var(--spacing-1);}
    .inspector-tabs {--size-element-lg:44px;grid-column:1/-1;width:100%;position:relative;}
    .inspector-tabs::before {content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line);}
    .inspector-tabs::after {content:'';position:absolute;bottom:0;left:0;width:50%;height:2px;background:var(--scale);transition:transform 240ms cubic-bezier(.2,.8,.2,1),background-color 240ms ease;pointer-events:none;}
    .inspector-tabs[data-panel="materials"]::after {transform:translateX(100%);background:var(--extension);}
    .inspector-tabs .astryx-tab {--radius-element:0px;gap:var(--spacing-2);height:44px;min-height:44px;padding-block:var(--spacing-3);border-radius:0;background:color-mix(in srgb,var(--text) 4%,transparent);border-inline-end:1px solid var(--line);}
    .inspector-tabs .astryx-tab:last-child {border-inline-end:0;}
    .inspector-tabs .astryx-tab[aria-selected="true"] {background:color-mix(in srgb,var(--text) 9%,transparent);}
    .inspector-tabs .astryx-tab[aria-disabled="true"] {opacity:.4;}
    .panel-tab-counter {display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding-inline:4px;border-radius:var(--radius-rounded,999px);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;background:var(--extension);color:var(--surface-quiet);}
    .panel-tab-counter[data-tone="error"] {background:var(--bad);}
    .materials-mini-summary {display:grid;gap:var(--spacing-3);}
    .materials-mini-summary ul {margin:0;padding:0;list-style:none;display:grid;gap:var(--spacing-2);}
    .materials-mini-summary li {display:flex;justify-content:space-between;gap:var(--spacing-3);font-size:var(--font-size-sm);}
    #canvas-panel-controls-astryx {position:absolute;inset:0;z-index:13;pointer-events:none;}

    :is(.canvas-bottom-panel-toggle,.canvas-right-panel-toggle) .astryx-button:not(:disabled) {opacity:var(--material-control-idle-opacity);}
    :is(.canvas-bottom-panel-toggle,.canvas-right-panel-toggle) .astryx-button:hover:not(:disabled),:is(.canvas-bottom-panel-toggle,.canvas-right-panel-toggle) .astryx-button:focus-visible {opacity:1;}
    .canvas-keyboard-hints {position:absolute;top:var(--spacing-3);left:calc((100% - var(--canvas-ui-right-inset))/2);transform:translateX(-50%);display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-2);width:max-content;max-width:min(720px,calc(100% - var(--canvas-ui-right-inset) - 150px));pointer-events:none;}
    .canvas-keyboard-hint {display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-page);background:var(--material-selected-surface);color:var(--text);font-size:var(--font-size-sm);}
    .lab-desktop-shortcut {display:inline-flex;align-items:center;border-radius:var(--radius-inner);}
    .canvas-keyboard-hint[data-disabled="true"] {opacity:.45;}
    @media(max-width:820px),(pointer:coarse),(hover:none){.canvas-keyboard-hints,.lab-desktop-shortcut{display:none;}}
    html[data-canvas-shortcut="select"] [data-shortcut-id="select"],
    html[data-canvas-shortcut="pan"] [data-shortcut-id="pan"],
    html[data-canvas-shortcut="light-run"] [data-shortcut-id="light-run"],
    html[data-canvas-shortcut="extension"] [data-shortcut-id="extension"],
    html[data-canvas-shortcut="route-toggle"] [data-shortcut-id="route-toggle"],
    html[data-canvas-shortcut="mask"] [data-shortcut-id="mask"],
    html[data-canvas-shortcut="measure"] [data-shortcut-id="measure"],
    html[data-canvas-shortcut="mode"] [data-shortcut-id="mode"],
    html[data-canvas-shortcut="undo"] [data-shortcut-id="undo"],
    html[data-canvas-shortcut="redo"] [data-shortcut-id="redo"],
    html[data-canvas-shortcut="delete"] [data-shortcut-id="delete"],
    html[data-canvas-shortcut="escape"] [data-shortcut-id="escape"],
    html[data-canvas-shortcut="space"] [data-shortcut-id="space"] {background:color-mix(in srgb,var(--run) 30%,var(--material-selected-surface));outline:1px solid var(--run);outline-offset:2px;}
    .canvas-right-panel-toggle {position:absolute;top:var(--spacing-3);right:calc(var(--spacing-3) + var(--canvas-ui-right-inset));transition:right var(--planner-panel-motion-duration) var(--planner-panel-motion-ease);}
    .canvas-bottom-panel-toggle {position:absolute;right:calc(var(--spacing-3) + var(--canvas-ui-right-inset));bottom:calc(var(--canvas-panel-gap) + var(--active-bottom-panel-height));transition:right var(--planner-panel-motion-duration) var(--planner-panel-motion-ease),bottom var(--planner-panel-motion-duration) var(--planner-panel-motion-ease);}
    .checkpoint-manager>p {margin:0;color:var(--muted);font-size:var(--font-size-sm);line-height:1.5;}
    .checkpoint-list {display:grid;gap:var(--spacing-1);max-height:40dvh;overflow:auto;}
    .checkpoint-list>.astryx-button {justify-content:flex-start;width:100%;min-height:36px;}
    .checkpoint-list>.astryx-button[aria-pressed="false"] {background:color-mix(in srgb,var(--text) 4%,transparent);}
    .checkpoint-list svg,.checkpoint-number {color:var(--run);}
    .checkpoint-number {width:18px;text-align:center;font-variant-numeric:tabular-nums;}
    .checkpoint-create {border-top:1px solid var(--line);padding-top:var(--spacing-3);}



    .workbench {
      /* Use the BSL cart's compact drawer width; Preview must not expand to the 32rem large-panel variant. */
      --workbench-rail-width: min(calc(100vw - 1rem), 28rem);
      --canvas-ui-right-inset: 0px;
      position: relative;
      height: calc(100dvh - var(--lab-header-height));
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 0px;
      overflow: clip;
      transition: grid-template-columns 280ms cubic-bezier(.22, 1, .36, 1);
    }
    .workbench[data-sidebar-open="true"] { grid-template-columns: minmax(0, 1fr) var(--workbench-rail-width); }
    .guide, .inspector {
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overflow: hidden;
      background: var(--surface);
    }
    .guide { display: none; }
    .inspector { --inspector-inline-inset: 12px; --inspector-section-gap: 12px; --inspector-row-gap: 4px; position: relative; z-index: 20; grid-column: 2; grid-row: 1; min-width: 0; width: var(--workbench-rail-width); gap: 0; border-left: 1px solid var(--line); padding: 0; opacity: 1; transform: translate3d(0, 0, 0); will-change: transform, opacity; transition: opacity 180ms ease-out, transform 280ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear; }
    .workbench[data-sidebar-open="false"] .inspector { visibility: hidden; opacity: 0; pointer-events: none; transform: translate3d(100%, 0, 0); border-left-color: transparent; transition-delay: 0ms, 0ms, 280ms; }
    .inspector-primary-header { position: relative; flex: 0 0 auto; min-width: 0; padding: 7px var(--inspector-inline-inset); border-bottom: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); }
    body[data-lab-mode="installation"] .inspector-primary-header {padding:0;}
    .inspector-primary-navigation[data-planning="true"] {gap:0;}
    #sidebar-navigation-astryx, .inspector-header-scope { width: 100%; min-width: 0; }
    .inspector-primary-navigation { width: 100%; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 6px; }
    .inspector-header-action-slot { width: 32px; height: 32px; display: block; }
    .inspector-header-action.astryx-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: var(--lab-control-radius); }
    .inspector-header-action.astryx-button svg { width: 16px; height: 16px; }
    .materials-header-icon { position: relative; width: 18px; height: 18px; display: grid; place-items: center; }
    .materials-header-icon > svg { width: 16px; height: 16px; }
    .materials-header-count { position: absolute; top: -6px; right: -8px; min-width: 13px; height: 13px; display: grid; place-items: center; padding-inline: 3px; border: 1px solid color-mix(in srgb, var(--surface) 82%, transparent); border-radius: 999px; background: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 72%, transparent), 0 2px 7px color-mix(in srgb, black 32%, transparent); color: var(--surface); font-family: var(--font-family-brand-data); font-size: 8px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; animation: materials-count-arrive 240ms cubic-bezier(.16, 1, .3, 1) both; }
    .inspector-header-title { min-width: 0; overflow: hidden; color: var(--text); font-size: 13px; line-height: 18px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
    .inspector-body { position: relative; display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
    #inspector-tabs-astryx { flex: 0 0 auto; padding: 8px var(--inspector-inline-inset); background: var(--surface); }
    #inspector-tabs-astryx:empty { display: none; }
    #inspector-tabs-astryx > [data-astryx-theme] { width: 100%; }
    .inspector-switcher { width: max-content; max-width: 100%; }
    .inspector-panel { flex: 1 1 auto; min-height: 0; }
    .inspector-panel[hidden] { display: none; }
    #inspector-overview-panel { flex:0 0 var(--plan-tree-height,240px);min-height:100px; overflow: auto; overscroll-behavior: contain; }
    #inspector-splitter-astryx { flex:0 0 9px;display:grid;align-items:center;z-index:2; }
    #inspector-splitter-astryx[hidden],#inspector-checks-panel[hidden] {display:none;}
    #inspector-checks-panel {flex:1;min-height:0;overflow:auto;padding:var(--inspector-inline-inset);}
    #inspector-checks-panel p {line-height:1.5;}
    .inspector-tree-output-row.astryx-button[aria-current="true"],.inspector-tree-node-action.astryx-button[aria-current="true"],.inspector-tree-controller-row.astryx-button[aria-current="true"] {background:var(--color-neutral);box-shadow:none;}
    .inspector-mode-switcher {display:grid;grid-template-columns:repeat(2,1fr);}
    .inspector-mode-switcher > button {width:100%;padding-inline:var(--spacing-6);}
    #inspector-overview-panel > [data-astryx-theme] { width: 100%; min-height: 100%; }
    .inspector-overview { min-height: 100%; padding: 10px var(--inspector-inline-inset) 18px; }
    .inspector-tree-row-copy, .inspector-capacity-alert > span { min-width: 0; display: grid; gap: 1px; }
    .inspector-tree-actions {justify-content:flex-end; display: flex; min-width: 0; min-height: 28px; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 4px; }
    .inspector-review-panel {display:grid;min-width:0;gap:var(--spacing-2);}
    .inspector-section-heading {margin:0;}
    .inspector-review-content { max-height: min(56dvh, 440px); padding: calc(var(--focus-outline-width) + var(--focus-outline-offset)); overflow: auto; overscroll-behavior: contain; }
    .plan-check-heading, .plan-check-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .plan-check-context { margin: 0; color: var(--muted); font-size: 11px; line-height: 16px; text-wrap: balance; }
    .plan-check-section + .plan-check-section { margin-top: var(--inspector-section-gap); }
    .plan-check-section-heading { padding-block: 4px 6px; font-size: 11px; line-height: 16px; }
    .plan-check-section {--check-tone:var(--caution);}
    .plan-check-section[data-severity="error"] {--check-tone:var(--bad);}
    .plan-check-section[data-severity="info"] {--check-tone:var(--scale);}
    .plan-check-section>.plan-check-section-heading {color:var(--check-tone);}
    .plan-check-section-heading>.panel-tab-counter {background:var(--check-tone);color:var(--surface-quiet);}
    .plan-check-list, .plan-check-targets { display: grid; gap: var(--inspector-row-gap); list-style: none; margin: 0; padding: 0; }
    .plan-check-row {--check-tone:var(--caution);min-width:0;color:var(--check-tone);border:1px solid color-mix(in srgb,var(--check-tone) 48%,var(--surface));border-left:3px solid var(--check-tone);border-radius:var(--radius-element);background:color-mix(in srgb,var(--check-tone) 8%,var(--surface));}
    .plan-check-row[data-severity="error"] {--check-tone:var(--bad);}
    .plan-check-row[data-severity="info"] {--check-tone:var(--scale);}
    .plan-check-row[data-severity="site"] {--check-tone:var(--caution);}
    .plan-check-action.astryx-button, .plan-check-target-action.astryx-button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; min-height: 44px; height: auto; align-items: start; padding: 8px; color: inherit; text-align: left; white-space: normal; }
    .plan-check-action.astryx-button svg,.plan-check-static>svg {color:var(--check-tone);}
    .plan-check-action.astryx-button > svg, .plan-check-static > svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; }
    .plan-check-copy { display: grid; flex: 1; min-width: 0; gap: 3px; white-space: normal; overflow-wrap: anywhere; }
    .plan-check-copy > strong { color: var(--check-tone); font-size: 12px; font-weight: 650; line-height: 16px; }
    .plan-check-copy > span { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 16px; }
    .plan-check-copy>.plan-check-subject {color:var(--text);font-weight:500;}
    .plan-check-meta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .plan-check-meta > svg, .plan-check-target-action.astryx-button svg { width: 12px; height: 12px; flex: 0 0 12px; }
    .plan-check-static { display: flex; align-items: flex-start; gap: 8px; padding: 8px; }
    .plan-check-targets { margin: 8px 0 8px 24px; gap: 8px; }
    .plan-check-target-action.astryx-button { grid-template-columns: minmax(0, 1fr) auto; align-items: center; color: var(--muted); }
    .plan-check-empty { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12px; line-height: 18px; }
    .plan-check-empty > svg { width: 16px; height: 16px; color: var(--good); }
    .inspector-tree-disclosure.astryx-button { width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0; border-radius: 6px; color: var(--muted); }
    .inspector-tree-toggle-all.astryx-button, .inspector-plan-checks-trigger.astryx-button { width: auto; min-width: 0; height: 28px; min-height: 28px; align-self: center; padding-inline: 8px; border-radius: 6px; color: var(--text); font-size: 11px; line-height: 16px; }
    .inspector-tree-toggle-all.astryx-button {margin-inline-start:auto;}
    .inspector-heading-action.astryx-button {height:28px;min-height:28px;padding-inline:var(--spacing-2);border:0;border-radius:var(--radius-element);background:transparent;color:var(--muted);font-size:11px;line-height:16px;font-weight:500;transition:color 160ms ease,background-color 160ms ease;}
    .inspector-heading-action.astryx-button:hover:not(:disabled),.inspector-heading-action.astryx-button:focus-visible {color:var(--text);background:var(--color-neutral);}
    .inspector-heading-action.astryx-button svg {width:14px;height:14px;color:inherit;}
    .inspector-tree-toggle-all.astryx-button svg, .inspector-plan-checks-trigger.astryx-button svg { width: 14px; height: 14px; }
    .inspector-tree-disclosure.astryx-button svg { width: 12px; height: 12px; }
    .inspector-capacity-alert { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 9px; margin-bottom: 12px; padding: 10px; border: 1px solid color-mix(in srgb, var(--bad) 42%, transparent); border-radius: var(--lab-control-radius); background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }
    .inspector-capacity-alert > svg { width: 18px; height: 18px; margin-top: 1px; }
    .inspector-capacity-alert strong { font-size: 12px; line-height: 16px; }
    .inspector-capacity-alert small { color: color-mix(in srgb, var(--bad) 72%, var(--text)); font-size: 11px; line-height: 16px; }
    .inspector-tree { display: grid; gap: 12px; }
    .inspector-tree-controller { min-width: 0; }
    .inspector-tree-controller-row.astryx-button, .inspector-tree-output-row.astryx-button, .inspector-tree-node-action.astryx-button { min-width: 0; height: auto; justify-content: stretch; border: 0; border-radius: var(--lab-control-radius); background: transparent; box-shadow: none; text-align: left; transform: none; }
    .inspector-tree-controller-row.astryx-button { min-height: 40px; padding: 5px 6px; }
    .inspector-tree-output-row.astryx-button > span:first-child > :has(> .inspector-tree-row-content) { min-width: 0; flex: 1 1 auto; }
    .inspector-tree-controller-row.astryx-button:hover, .inspector-tree-output-row.astryx-button:hover, .inspector-tree-node-action.astryx-button:hover { background: color-mix(in srgb, var(--text) 5%, transparent); box-shadow: none; }
    .inspector-tree-controller-row.astryx-button:active, .inspector-tree-output-row.astryx-button:active, .inspector-tree-node-action.astryx-button:active { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: none; transform: none; }
    .inspector-tree-row-content { width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; }
    .inspector-tree-compound-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 2px; min-width: 0; border-radius: var(--lab-control-radius); }
    .inspector-tree-disclosure-icon { width: 12px; height: 12px; display: grid; place-items: center; transform: rotate(0deg); transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }
    .inspector-tree-disclosure-icon[data-open="true"] { transform: rotate(90deg); }
    .inspector-overview,.inspector-review-panel {position:relative;}
    .sequence-heading {display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;}
    .sequence-spinner {display:none;align-items:center;}
    :is([data-sequence-state="loading"],[data-sequence-state="revealing"]) .sequence-spinner {display:inline-flex;}
    [data-sequence-state="loading"]>.inspector-tree,[data-sequence-state="loading"]>.inspector-review-content {visibility:hidden;}
    .inspector-tree-reveal { display: grid; grid-template-rows: 0fr; min-width: 0; opacity: 0; visibility: hidden; transform:none;transition:none; }
    .inspector-tree-reveal[data-open="true"] { grid-template-rows: 1fr; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
    .inspector-tree-reveal-inner { min-height: 0; overflow: hidden; }
    .inspector-tree-row-icon { width: 24px; height: 24px; display: grid; flex: 0 0 24px; place-items: center; color: var(--good); }
    .inspector-tree-row-icon svg { width: 22px; height: 22px; }
    .inspector-tree-row-copy { flex: 1 1 auto; }
    .inspector-tree-row-copy strong { overflow: hidden; color: var(--text); font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
    .inspector-tree-row-copy small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .inspector-tree-outputs, .inspector-tree-children { min-width: 0; margin-left: 16px; }
    .inspector-tree-node { position: relative; min-width: 0; padding-left: 18px; }
    .inspector-tree-output-row.astryx-button, .inspector-tree-node-action.astryx-button { min-height: 34px; padding: 3px 5px; }
    .inspector-tree-connector { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 12px; color: var(--line); pointer-events: none; }
    .inspector-tree-connector svg { position: absolute; top: 0; left: 0; width: 12px; height: 19px; overflow: visible; }
    .inspector-tree-connector path { fill: none; stroke: currentColor; stroke-linecap: butt; stroke-linejoin: round; stroke-width: 1; vector-effect: non-scaling-stroke; }
    .inspector-tree-connector-path {stroke-dasharray:1;stroke-dashoffset:0;}
    .inspector-tree-connector-tail {position:absolute;top:19px;bottom:0;left:0;width:1px;background:currentColor;transform-origin:top;}
    .inspector-output-port {position:relative;width:24px;height:24px;display:grid;flex:0 0 24px;place-items:center;border:var(--canvas-element-border);border-radius:50%;background:var(--material-control-surface);font-family:var(--font-family-brand-data);font-size:10px;font-weight:750;line-height:1;}
    .inspector-tree-output[data-tone="danger"] .inspector-tree-row-copy strong { color: var(--bad); }
    .inspector-tree-output[data-tone="danger"] .astryx-badge { flex: 0 0 auto; }
    .inspector-output-status-badge { margin-inline-start: auto; }
    .inspector-tree-run-icon { color: var(--run); }
    .inspector-tree-cable-icon, .inspector-tree-connector-icon, .inspector-tree-cut-icon, .inspector-tree-booster-icon { color: var(--extension); }
    .inspector-tree-branch-icon, .inspector-tree-power-icon { color: var(--good); }
    @keyframes materials-count-arrive { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
    #inspector-details-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
    .edit-inspector-header { min-width: 0; border-bottom: 1px solid var(--line); }
    .edit-inspector-header > [data-astryx-theme], .edit-inspector-footer > [data-astryx-theme] { width: 100%; }
    .edit-inspector-header-content { display: grid; min-width: 0; gap: 2px; padding: var(--inspector-inline-inset); }
    .edit-inspector-eyebrow {display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2);min-width:0;}
    .edit-inspector-product-actions {margin-inline-start:auto;flex-shrink:0;}
    .edit-inspector-product-actions .astryx-button {width:28px;min-width:28px;min-height:28px;height:28px;padding:0;font-size:var(--font-size-xs);gap:var(--spacing-1);background:color-mix(in srgb,var(--text) 4%,transparent);}
    .edit-inspector-product-actions svg {width:16px;height:16px;}
    .edit-inspector-product-actions .astryx-button:first-child svg {color:var(--extension);}
    .edit-inspector-type {display:flex;align-items:center;gap:var(--spacing-1);min-width:0;}
    .edit-inspector-type>svg {width:14px;height:14px;flex-shrink:0;color:var(--run);}
    .edit-inspector-type>span {min-width:0;}
    .edit-inspector-type { color: var(--faint); font-size: 10px; font-weight: 750; line-height: 14px; letter-spacing: .07em; text-transform: uppercase; }
    .edit-inspector-title-button,
    .edit-inspector-title-static,
    .edit-inspector-title-input { width: 100%; min-width: 0; min-height: 28px; margin: 0; padding: 1px 7px; border: 1px solid transparent; border-radius: var(--lab-control-radius); color: var(--text); font-family: var(--font-family-brand-primary); font-size: 18px; font-weight: 750; line-height: 24px; letter-spacing: -.02em; text-align: left; }
    .edit-inspector-title-button { margin-inline: -7px; background: transparent; }
    .edit-inspector-title-button:hover { border-color: color-mix(in srgb, var(--text) 16%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); }
    .edit-inspector-title-button:focus-visible { border-color: var(--focus); background: var(--surface-raised); outline: 0; }
    .edit-inspector-title-static { min-height: 0; padding: 0; }
    .edit-inspector-title-input { background: var(--surface-raised); border-color: var(--focus); outline: 0; }
    .edit-inspector-summary { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 16px; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .edit-inspector-product-actions { padding-top: 6px; }
    .edit-inspector-scroll { min-width: 0; min-height: 0; overflow: auto; }
    .edit-inspector-scroll > .control-group:not([hidden]) { padding: var(--inspector-inline-inset); border-bottom: 0; }
    .edit-inspector-scroll .path-control-section { padding-bottom: 8px; border-bottom: 0; }
    .edit-inspector-footer { min-width: 0; padding: 10px var(--inspector-inline-inset); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); }
    .edit-inspector-footer-actions .astryx-button { flex: 1 1 auto; }
    #inspector-bom-panel { display: flex; overflow: hidden; }
    #inspector-overview-panel[hidden], #inspector-details-panel[hidden], #inspector-bom-panel[hidden] { display: none; }
    .eyebrow { margin: 0 0 5px; color: var(--faint); font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; }
    .panel-heading { margin: 0 0 5px; font-size: 15px; line-height: 20px; letter-spacing: -.02em; }
    .panel-copy { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 16px; }

    .button-stack { display: grid; gap: 7px; }
    .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .astryx-action-stack { display: grid; gap: 8px; }
    .astryx-action-stack > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .astryx-action-stack > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .astryx-action-stack button { width: 100%; }
    #job-save-astryx > [data-astryx-theme] { width: max-content; }
    .job-save-controls { white-space: nowrap; }
    .job-save-status { display: inline-flex; min-height: 32px; align-items: center; gap: 6px; padding: 0 5px 0 2px; color: var(--muted); font-family: var(--font-family-brand-primary); font-size: 12px; font-weight: 700; line-height: 16px; }
    .job-save-status > .lab-header-icon { color: var(--faint); }
    .job-save-status[data-state="saved"] > .lab-header-icon { color: var(--good); }
    .job-save-status[data-state="error"] { color: var(--bad); }
    .job-save-status[data-state="error"] > .lab-header-icon { color: inherit; }
    .sidebar-visibility-action { display: inline-flex; }
    .pro-lab-settings-control.astryx-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: var(--lab-control-radius); }
    .pro-lab-settings-control.astryx-button svg { width: 16px; height: 16px; }
    .checkpoint-setup-copy { margin: 0; color: var(--muted); font-size: 11px; line-height: 16px; }
    .header-job-switcher { width: 100%; min-width: 0; }
    .header-job-selector.astryx-button { min-width: 0; flex: 1 1 auto; justify-content: space-between; }
    .header-job-checkpoint { display: grid; min-width: 0; text-align: left; }
    .header-job-checkpoint > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-xs); line-height: 1.1; color: var(--muted); font-weight: 500; }
    .header-job-checkpoint > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; line-height: 1.25; font-weight: 500; }
    .header-job-actions.astryx-button,
    .pro-lab-settings-control.astryx-button { flex: 0 0 32px; }
    .header-job-actions-menu { min-width: 220px; }
    .lab-compact-header-control {
      --text-label-size: .8125rem;
      --text-body-size: .8125rem;
      --text-supporting-size: .75rem;
    }
    .lab-header-icon,
    .lab-header-chevron {
      display: inline-grid;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      place-items: center;
    }
    .lab-header-chevron { width: 12px; height: 12px; flex-basis: 12px; }
    .lab-header-icon > svg { width: 16px; height: 16px; }
    .lab-header-chevron > svg { width: 12px; height: 12px; }
    .lab-header-panel-icon { color:var(--muted); transition:color 160ms ease-out; display: inline-grid; width: 16px; height: 16px; place-items: center; }
    .lab-header-panel-icon[data-active="true"] { color:var(--text); }
    .lab-header-panel-icon > span { grid-area: 1 / 1; display: inline-grid; width: 16px; height: 16px; place-items: center; transition: opacity 160ms ease-out; }
    .lab-header-panel-icon > span:first-child,
    .lab-header-panel-icon[data-active="true"] > span:last-child { opacity: 1; }
    .lab-header-panel-icon > span:last-child,
    .lab-header-panel-icon[data-active="true"] > span:first-child { opacity: 0; }
    .lab-header-panel-icon svg { width: 16px; height: 16px; }
    .lab-compact-button-label { font: inherit; }
    .lab-compact-menu {
      --font-size-base: .75rem;
      --text-body-size: .75rem;
      --text-label-size: .75rem;
      --text-supporting-size: .6875rem;
    }
    .saved-version-popover { min-width: 0; padding: 0; }
    .saved-version-heading { display: grid; gap: 2px; }
    .saved-version-heading strong { color: var(--text); font-size: 13px; line-height: 16px; }
    .saved-version-heading span,
    .saved-version-empty,
    .saved-version-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 16px; }
    .saved-version-list { max-height: 216px; overflow: auto; }
    .saved-version-list .astryx-button { justify-content: space-between; }
    .saved-version-time { color: var(--muted); font-family: var(--font-family-brand-data); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .saved-version-note { color: var(--warning, #ffd479); }
    .save-advanced-divider { height: 1px; margin: 1px 0; background: var(--line); }
    .job-menu-dropdown { max-height: min(340px, calc(100dvh - 130px)); }
    .job-menu-dropdown .astryx-dropdown-menu-indicator-icon svg { width: 12px; height: 12px; }
    .job-menu-primary-label { display: block; width: 100%; cursor: pointer; }
    .checkpoint-setup-copy p,
    .checkpoint-replacement-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 17px; }
    .checkpoint-setup-copy strong,
    .checkpoint-replacement-copy strong { color: var(--text); font-weight: 650; }
    .small-button, .primary-button {
      min-height: 36px;
      border: 1px solid var(--line-strong);
      border-radius: var(--lab-control-radius);
      background: var(--surface-raised);
      color: var(--text);
      padding: 0 10px;
      font-size: 10px;
      font-weight: 700;
    }
    .primary-button { border-color: var(--focus); background: var(--bsl-teal-soft); color: var(--surface); }
    .small-button[aria-pressed="true"] { border-color: var(--focus); background: var(--bsl-teal-muted); color: var(--bsl-teal-soft); }
    .small-button:disabled, .primary-button:disabled { opacity: .38; cursor: default; }

    .canvas-guidance-stack { position: absolute; z-index: 12; top: 12px; right: calc(12px + var(--canvas-ui-right-inset)); left: 12px; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
    .canvas-guidance-stack:has(.tutorial-coach-dock[data-dock="app"]) {z-index:46;}
    .canvas-guidance-stack:has(.tutorial-coach-dock) {z-index:70;}
    .canvas-coach-mount { width: min(310px, 100%); pointer-events: none; }
    .tutorial-coach-dock { width:min(340px,calc(100vw - 24px)); position:fixed; z-index:60; pointer-events:none; }
    .tutorial-coach-dock[data-pointer] .learning-action {position:relative;}
    .tutorial-coach-dock[data-pointer] .learning-action::after {content:'';position:absolute;width:14px;height:14px;border-radius:2px;background:var(--surface-raised);transform:rotate(45deg);}
    .tutorial-coach-dock[data-pointer="top"] .learning-action::after {top:-7px;left:calc(var(--coach-pointer-offset,50%) - 7px);}
    .tutorial-coach-dock[data-pointer="right"] .learning-action::after {right:-7px;top:calc(var(--coach-pointer-offset,50%) - 7px);}
    .tutorial-coach-dock[data-pointer="bottom"] .learning-action::after {bottom:-7px;left:calc(var(--coach-pointer-offset,50%) - 7px);}
    .tutorial-coach-dock[data-pointer="left"] .learning-action::after {left:-7px;top:calc(var(--coach-pointer-offset,50%) - 7px);}
    .tutorial-compass-cursor { position:fixed; z-index:90; width:32px; height:32px; margin:-16px; display:grid; place-items:center; color:var(--bsl-teal-soft); pointer-events:none; animation:tutorial-compass-pulse 1.4s ease-in-out infinite; }
    .tutorial-compass-cursor .tutorial-compass-ring { position:absolute; inset:0; border:2px solid currentColor; border-radius:50%; opacity:.85; }
    .tutorial-compass-cursor .tutorial-compass-arrow { width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:11px solid currentColor; transform:translateX(8px); }
    @keyframes tutorial-compass-pulse { 50% { opacity:.72; } }
    #tutorial-sidebar-guide:empty { display:none; }
    #tutorial-sidebar-guide { flex:0 0 auto; max-height:42dvh; overflow:auto; padding:12px; border-bottom:1px solid var(--line); }
    .connection-zones {position:absolute;inset:0;pointer-events:none;}
    .connection-zone {position:absolute;transform:translate(-50%,-50%);border:1px solid var(--extension);border-radius:50%;background:color-mix(in srgb,var(--extension) calc(var(--zone-approach)*16%),transparent);box-shadow:0 0 0 calc(var(--zone-approach)*6px) color-mix(in srgb,var(--extension) 10%,transparent);transition:opacity 120ms ease,width 160ms ease,height 160ms ease,box-shadow 160ms ease;}
    .connection-zone[data-ready="true"] {border-color:var(--good);background:color-mix(in srgb,var(--good) 16%,transparent);}
    .tutorial-switch-target {display:block;width:100%;padding:var(--spacing-2);border-radius:var(--radius-container);}
    .tutorial-switch-target[data-tutorial-attention="true"] {outline:none;box-shadow:inset 0 0 0 2px var(--bsl-teal-soft);background:color-mix(in srgb,var(--bsl-teal-soft) 10%,transparent);animation:learning-row-pulse 2.2s ease-in-out infinite;}
    @keyframes learning-row-pulse {50%{box-shadow:inset 0 0 0 2px var(--bsl-teal-soft),0 0 0 3px color-mix(in srgb,var(--bsl-teal-soft) 16%,transparent);}}
    .tutorial-progress-header {width:max-content;max-width:52vw;}
    .tutorial-header-progress {min-width:0;width:180px;display:grid;gap:var(--spacing-1);font-size:var(--text-caption-size,12px);}
    .tutorial-header-progress>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .tutorial-header-count {font-variant-numeric:tabular-nums;font-size:var(--text-caption-size,12px);color:var(--muted);white-space:nowrap;}
    .learning-action .installer-coach-instruction {margin:0;}
    .tutorial-inline-demo {position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-container);background:var(--material-surface-subtle);}
    .tutorial-inline-demo>.tutorial-demo-expand.astryx-button {position:absolute;right:var(--spacing-2);top:var(--spacing-2);bottom:auto;background:var(--ground);color:var(--text);border:1px solid var(--line);box-shadow:var(--material-elevation-low);}
    .tutorial-demo-expand svg {width:18px;height:18px;}
    .tutorial-watch-link.astryx-button {align-self:flex-start;font-size:var(--text-caption-size,12px);color:var(--muted);}
    .tutorial-watch-link[data-attention="true"] {color:var(--bsl-teal-soft);animation:learning-row-pulse 2.2s ease-in-out 2;}
    .tutorial-inline-demo .tutorial-demo-image {display:block;width:100%;height:100%;object-fit:contain;background:var(--ground);}
    video.tutorial-demo-image {display:block;max-width:100%;max-height:70dvh;object-fit:contain;}
    .learning-eyebrow {font-size:var(--text-caption-size,12px);color:var(--muted);}
    .learning-concept-copy {font-size:var(--text-body-size);line-height:1.6;text-wrap:pretty;margin:0;}
    .learning-concept-icon {color:var(--bsl-teal-soft);}
    .learning-concept-icon svg {width:48px;height:48px;}
    .learning-concept-title {font-size:32px;line-height:38px;letter-spacing:-.03em;}
    .learning-intro {background:var(--surface-raised);backdrop-filter:none;-webkit-backdrop-filter:none;}
    .tutorial-demo-dialog .tutorial-demo-image {width:100%;max-height:min(600px,calc(100dvh - 250px));aspect-ratio:1;object-fit:contain;background:var(--ground);}
    .learning-notice {display:flex;gap:var(--spacing-2);font-size:var(--text-caption-size,12px);color:var(--muted);line-height:1.5;}
    .learning-notice svg {width:18px;height:18px;flex-shrink:0;}
    .learning-recovery {display:grid;gap:var(--spacing-2);padding:var(--spacing-3);border-radius:var(--radius-container);background:var(--material-surface-subtle);}
    body:has(.learning-intro) :is(.practice-canvas-target,[data-tutorial-control-indicator],.canvas-placement-cursor) {visibility:hidden;}
    .lab-settings-dialog {--settings-inset:var(--lab-modal-inset);--font-weight-action:500;--font-weight-action-primary:600;overflow:hidden;}
    .lab-settings-frame {height:min(640px,calc(100dvh - 42px));display:flex;flex-direction:column;min-height:0;}
    .lab-settings-header {display:flex;align-items:center;justify-content:space-between;gap:var(--settings-inset);padding:var(--settings-inset);border-bottom:1px solid var(--line);flex-shrink:0;}
    .lab-settings-layout {display:grid;grid-template-columns:180px minmax(0,1fr);min-height:0;flex:1;}
    .lab-settings-layout>nav {display:flex;flex-direction:column;gap:var(--spacing-1);border-right:1px solid var(--line);padding:var(--spacing-2);overflow:auto;}
    .lab-settings-layout>nav .astryx-button {justify-content:flex-start;flex-shrink:0;font-weight:500;}
    .lab-dialog-description {margin:0;color:var(--muted);font-size:var(--text-body-size);line-height:1.5;}
    .lab-dialog-close.astryx-button {width:var(--size-element-lg);height:var(--size-element-lg);min-width:var(--size-element-lg);min-height:var(--size-element-lg);padding:0;}
    .lab-dialog-close-glyph {display:inline-flex;width:var(--spacing-6);min-width:var(--spacing-6);height:var(--spacing-6);}
    .lab-dialog-close-glyph svg {width:100%;height:100%;}
    .lab-settings-pane {display:flex;flex-direction:column;min-width:0;min-height:0;}
    .lab-settings-content {min-width:0;min-height:0;flex:1;overflow:auto;padding:var(--settings-inset);}
    .lab-settings-content .astryx-selector {width:100%;}
    .lab-settings-footer {flex-shrink:0;padding:var(--settings-inset);border-top:1px solid var(--line);font-size:var(--font-size-sm);color:var(--muted);}
    .lab-settings-footer .learning-library-footer {padding:0;margin:0;border:0;}
    .lab-settings-content .learning-library {max-height:none;}
    .lab-settings-content .learning-tree,.lab-settings-content .learning-tree-content {max-height:none;overflow:visible;}
    .learning-library-summary {display:flex;align-items:center;gap:var(--spacing-3);}
    .learning-library-summary>svg {width:40px;height:40px;color:var(--good);}
    .learning-library-summary p {margin:var(--spacing-1) 0;color:var(--muted);}
    .learning-library-lesson {border-top:1px solid var(--line);padding-top:var(--spacing-4);display:grid;gap:var(--spacing-2);}
    @media(max-width:600px){.lab-settings-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);}.lab-settings-layout>nav{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);}.lab-settings-layout>nav .astryx-button{width:auto;}}
    .visual-field {align-content:start;display:grid;gap:var(--spacing-2);}
    .visual-field-label {display:flex;align-items:center;gap:var(--spacing-2);font-weight:700;font-size:var(--text-caption-size,12px);}
    .visual-field-label>svg {width:18px;height:18px;color:var(--extension);}
    .visual-field[data-field*="Units"] .visual-field-label>svg {color:var(--scale);}
    .visual-field[data-field*="Controller"] .visual-field-label>svg {color:var(--good);}
    .visual-field[data-field*="Track"] .visual-field-label>svg {color:var(--run);}
    .visual-field[data-field="Finish"] .visual-field-label>svg {color:var(--mask);}
    .visual-choice-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-1);}
    .visual-choice-grid>.astryx-button {height:auto;min-height:36px;white-space:normal;text-align:left;justify-content:flex-start;}
    .visual-choice-grid>.astryx-button[aria-pressed="false"] {background:color-mix(in srgb,var(--text) 5%,transparent);}
    .visual-choice-grid>.astryx-button[aria-pressed="true"] {box-shadow:inset 0 0 0 1px var(--bsl-teal-soft);}
    .finish-swatch {width:16px;height:16px;border-radius:var(--radius-container);border:1px solid var(--line);flex-shrink:0;}
    .astryx-popover-surface:has(>.astryx-dropdown-menu) {background:transparent;border:0;box-shadow:none;backdrop-filter:none;}
    .job-photo-drop {display:grid;grid-template-columns:96px 1fr;gap:var(--spacing-3);align-items:center;padding:var(--spacing-3);border:1px solid var(--line-strong);border-radius:var(--radius-element);background:var(--material-surface);}
    .job-photo-drop[data-dragging="true"] {border-color:var(--run);background:var(--material-selected-surface);}
    .job-photo-drop img {width:96px;height:72px;object-fit:cover;border-radius:var(--radius-inner);}
    .job-photo-drop p {margin:0 0 var(--spacing-2);color:var(--muted);font-size:var(--font-size-sm);}
    .job-settings-content {--size-element-sm:36px;}
    .job-defaults-grid>.visual-field+div>.visual-field-label {margin-bottom:var(--spacing-2);}
    .header-job-edit-field {display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:var(--spacing-2);height:var(--lab-header-control-height);width:100%;padding:var(--spacing-1) var(--spacing-3);border:0;border-radius:var(--radius-element);background:var(--lab-header-control-fill);color:var(--text);font:500 var(--font-size-base) var(--font-family-brand-primary);outline-color:var(--run);box-sizing:border-box;}
    .header-job-edit-field:focus-within {outline:1px solid var(--focus-outline-color);outline-offset:1px;}
    .header-job-edit-copy>small {font-size:var(--font-size-xs);line-height:1.1;color:var(--muted);}
    .header-job-editor {display:block;width:100%;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;line-height:1.25;outline:none;}
    .job-defaults-form {display:grid;gap:var(--spacing-3);margin-top:var(--spacing-5);}
    .job-defaults-grid {align-items:start;display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4);}
    .header-lessons-link {margin-left:var(--spacing-3);}
    @media(max-width:600px){.job-defaults-grid{grid-template-columns:1fr;}.header-lessons-link{display:none;}}
    .installation-stage-list {display:grid;gap:var(--spacing-2);}
    .installation-stage-row.astryx-button {width:100%;justify-content:flex-start;height:auto;min-height:48px;}
    .stage-number {display:grid;place-items:center;min-width:28px;height:28px;border:1px solid var(--line);border-radius:50%;color:var(--bsl-teal-soft);}
    .stage-create {display:grid;gap:var(--spacing-2);border-top:1px solid var(--line);padding-top:var(--spacing-4);}
    .canvas-cable-pill {position:absolute;z-index:5;transform-origin:center;}
    .lab-loading-content {position:relative;width:min(480px,calc(100vw - 32px));height:min(560px,calc(100dvh - 64px));padding:0;}
    .lab-loading-brand {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;transition:top 480ms cubic-bezier(.2,.8,.2,1);}
    .lab-loading-status {position:absolute;top:calc(50% + 28px);left:0;width:100%;}
    .lab-loading-indicator {position:absolute;top:calc(50% + 76px);left:50%;transform:translateX(-50%);}
    #lab-start-astryx {position:absolute;top:96px;left:0;width:100%;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity 300ms 160ms ease,transform 300ms 160ms ease;}
    body[data-app-ready="true"][data-start-screen="open"] .lab-loading-brand {top:40px;}
    body[data-app-ready="true"][data-start-screen="open"] :is(.lab-loading-status,.lab-loading-indicator) {display:none;}
    body[data-app-ready="true"][data-start-screen="open"] #lab-start-astryx {opacity:1;visibility:visible;transform:none;}
    .lab-start-options {display:grid;gap:var(--spacing-3);text-align:left;}
    .lab-start-options>p {text-align:center;color:var(--muted);margin:0 0 var(--spacing-3);}
    .lab-start-options .astryx-button {white-space:normal;height:auto;min-height:44px;}
    .lab-start-options>.astryx-button {justify-content:flex-start;text-align:left;padding-inline:var(--spacing-4);}
    .start-option-copy {display:grid;gap:var(--spacing-1);padding-block:var(--spacing-2);text-align:left;}
    .start-option-copy small {font-weight:400;color:inherit;opacity:.85;font-size:var(--text-caption-size,12px);line-height:1.5;}
    .start-sign-in {display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-size:var(--text-caption-size,12px);color:var(--muted);margin-top:var(--spacing-3);}
    @media(prefers-reduced-motion:reduce){.lab-loading-brand,#lab-start-astryx{transition:none;}}
    .learning-tree {display:grid;gap:var(--spacing-3);width:100%;text-align:left;}
    .learning-lessons {display:grid;gap:var(--spacing-2);}
    .learning-sections {display:grid;gap:0;}
    .learning-sections>.learning-branch:not(:last-child) {padding-bottom:var(--spacing-2);}
    .learning-tree .learning-tree-steps {margin-left:16px;padding-left:0;gap:0;}
    .learning-step-node:not(:last-of-type) {padding-bottom:var(--spacing-1);}
    .learning-tree .learning-step-row {min-height:34px;padding:3px 5px;text-align:left;justify-content:flex-start;}
    .learning-tree .learning-step-row .inspector-tree-row-icon {color:var(--muted);}
    .learning-tree .learning-tree-sections,.learning-tree .learning-tree-steps {margin-left:16px;padding-left:0;border:0;}
    .learning-tree .learning-tree-trigger {gap:var(--spacing-2);}
    .learning-tree .learning-tree-copy strong {font-size:12px;font-weight:600;line-height:16px;}
    .learning-tree .learning-tree-copy small {font-size:10px;line-height:14px;}
    .learning-tree .learning-tree-trigger>svg {width:22px;height:22px;flex-shrink:0;}
    .learning-tree .learning-certificate-button {background:var(--good);color:var(--surface-quiet);}
    .learning-tree .learning-certificate-button:hover {background:color-mix(in srgb,var(--good) 85%,white);}
    .workspace-loading-brand {font-size:22px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:center;}
    .workspace-loading-brand>span {color:var(--bsl-teal-soft);font-weight:400;}
    .workspace-loading-brand>small {font-size:12px;letter-spacing:.1em;margin-left:var(--spacing-2);}
    #lab-mode-cover .lab-loading-indicator {position:static;margin:0;transform:none;}
    #workspace-loading-icon {height:28px;}
    #workspace-loading-icon>svg {display:none;width:28px;height:28px;margin:auto;}
    body[data-lab-pending-mode="installation"] #workspace-loading-icon>.loading-build-icon {display:block;color:var(--scale);}
    body[data-lab-pending-mode="preview"] #workspace-loading-icon>.loading-preview-icon {display:block;color:var(--mask);}
    body[data-workspace-loading] #workspace-loading-icon>svg {display:none;}
    body[data-workspace-loading] #workspace-loading-icon>.loading-job-icon {display:block;color:var(--bsl-teal-soft);}
    .learning-tree-count {font-size:var(--text-caption-size,12px);color:var(--muted);font-variant-numeric:tabular-nums;}
    .learning-tree-content {max-height:min(520px,calc(100dvh - 220px));overflow:auto;}
    .learning-tree-trigger {display:flex;align-items:center;gap:var(--spacing-3);width:100%;text-align:left;min-width:0;}
    .learning-tree-trigger>svg {width:20px;height:20px;color:var(--bsl-teal-soft);flex-shrink:0;}
    .learning-tree-copy {display:grid;gap:var(--spacing-1);flex:1;min-width:0;}
    .learning-tree-copy strong {font-size:var(--text-body-size,13px);font-weight:700;}
    .learning-tree-copy small {font-size:var(--text-caption-size,11px);color:var(--muted);font-weight:400;}
    .learning-tree-meter {width:56px;flex:0 0 56px;display:grid;gap:var(--spacing-1);font-size:10px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);}
    .learning-tree-sections {padding-left:var(--spacing-4);border-left:1px solid var(--line);margin-left:var(--spacing-2);}
    .learning-section-trigger>svg {width:16px;height:16px;}
    .learning-section-trigger .learning-tree-copy strong {font-size:var(--text-caption-size,12px);}
    .learning-tree-steps {margin-left:var(--spacing-2);padding-left:var(--spacing-3);border-left:1px solid var(--line);display:grid;gap:var(--spacing-1);}
    .learning-section-actions {padding-block:var(--spacing-2);}
    .learning-library-footer {padding:0;}
    .learning-overall-progress {font-size:var(--text-caption-size,12px);color:var(--muted);font-variant-numeric:tabular-nums;}
    .learning-complete-icon {width:40px;height:40px;color:var(--good);flex-shrink:0;animation:checkpoint-seal-arrive 500ms ease-out;}
    @media(max-width:480px){.learning-library-footer{flex-wrap:wrap;row-gap:var(--spacing-2);}.learning-library-footer>div{margin-left:auto;}}
    .header-lessons-control {flex:0 1 auto;min-width:0;}
    .header-lessons-main {min-width:0;width:fit-content;position:relative;}
    .header-lessons-button.astryx-button {position:relative;height:var(--lab-header-control-height);min-width:0;overflow:hidden;}
    .header-lessons-button.astryx-button[data-course-active="true"] {width:220px;min-width:220px;justify-content:flex-start;}
    .header-lessons-copy {display:grid;min-width:0;text-align:left;gap:1px;}
    .header-lessons-copy strong {font-size:inherit;font-weight:inherit;}
    .header-lessons-copy small {font-size:10px;font-weight:400;color:var(--muted);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .header-lessons-button .header-course-progress {position:absolute;left:0;right:0;bottom:0;overflow:hidden;border-radius:0 0 var(--radius-element) var(--radius-element);}
    .header-lesson-navigation .astryx-button {width:var(--lab-header-control-height);min-width:var(--lab-header-control-height);height:var(--lab-header-control-height);min-height:var(--lab-header-control-height);padding:var(--spacing-2);}
    .header-job-context {flex:1 1 140px;}
    .header-job-switcher:not(:has(.header-lessons-control)) .header-job-context {max-width:34ch;}
    @media(max-width:1300px){.header-lessons-copy small{display:none;}.job-save-status{display:none;}}
    .tutorial-header { display:flex; align-items:center; gap:var(--spacing-1); width:100%; }
    .tutorial-header-lessons { display:flex; flex:1; min-width:max-content; gap:var(--spacing-1); }
    .tutorial-header-lesson { flex:0 0 auto; min-width:max-content; height:32px; gap:var(--spacing-2); }
    .tutorial-header-lesson-label { display:inline-flex;align-items:center;gap:var(--spacing-2);white-space:nowrap; }
    .tutorial-header-step { display:grid; place-items:center; min-width:18px; font-variant-numeric:tabular-nums; color:var(--muted); }
    .tutorial-header-step svg { width:18px;height:18px; }
    .tutorial-header-step[data-complete="true"] { color:var(--good); }
    .tutorial-header-lesson[aria-current="step"] { color:var(--bsl-teal-soft); }
    .tutorial-header-lesson[data-complete="true"] { color:var(--good); }
    .tutorial-entry-copy { margin:0 0 var(--spacing-4); color:var(--muted); font-size:var(--text-body-size);line-height:1.5; }
    .tutorial-settings-row { min-height:44px; }
    .tutorial-curriculum-section { width:100%;padding-block:var(--spacing-3);border-top:1px solid var(--line); }
    .inspector-mode-switcher { width:max-content; justify-self:center; }
    .materials-count-value { font-variant-numeric:tabular-nums; }
    .inspector-mode-switcher [data-updated="true"] { animation:tutorial-control-pulse 2.2s ease-in-out; }
    .materials-update-dot { color:var(--good);display:flex;width:18px; }
    .tutorial-demo-trigger { align-self:flex-start; }
    .tutorial-demo-media { display:block;width:100%; }
    .tutorial-demo-image { display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 210px);margin-inline:auto;object-fit:contain;border-radius:var(--lab-control-radius); }
    body[data-tutorial-entry="true"] .workbench { visibility:hidden;opacity:0;pointer-events:none; }
    .tutorial-settings-row svg { width:18px; height:18px; }
    [data-tutorial-control-indicator] { z-index:70;pointer-events:none;--cue-color:var(--bsl-teal-soft); }
    [data-tutorial-control-indicator][data-positive="true"] { --cue-color:var(--good); }
    .tutorial-control-ring { position:absolute;inset:0;border:var(--canvas-element-border-width) solid var(--cue-color);border-radius:calc(var(--cue-radius,var(--lab-control-radius)) + 4px);background:color-mix(in srgb,var(--cue-color) 9%,transparent);box-shadow:none;animation:tutorial-control-pulse 2.2s ease-in-out infinite; }
    [data-tutorial-control-indicator][data-near="true"] .tutorial-control-ring { border-style:solid;background:color-mix(in srgb,var(--cue-color) 12%,transparent);animation:none;box-shadow:0 0 0 2px var(--surface),0 0 0 5px color-mix(in srgb,var(--cue-color) 18%,transparent); }
    .tutorial-control-label { position:absolute;bottom:calc(100% + var(--cue-label-gap,12px));transform:translateX(-50%);padding:6px 10px;white-space:nowrap;font-size:13px;line-height:18px;font-weight:800;border:var(--canvas-element-border-width) solid var(--cue-color);border-radius:var(--lab-control-radius);background:var(--surface);color:var(--text); }
    .tutorial-control-label[data-below="true"] { bottom:auto;top:calc(100% + 12px); }
    @keyframes tutorial-control-pulse { 0%,100% { opacity:.72;box-shadow:none; } 50% { opacity:1;box-shadow:0 0 0 2px var(--surface),0 0 0 5px color-mix(in srgb,var(--cue-color) 18%,transparent); } }
    @media(prefers-reduced-motion:reduce){.tutorial-control-ring{animation:none;}}
    [data-tutorial-attention="true"] { border-radius:var(--lab-control-radius);box-shadow:0 0 0 2px var(--bsl-teal-soft),0 0 0 5px color-mix(in srgb,var(--bsl-teal-soft) 16%,transparent);animation:tutorial-tool-attention 2.2s ease-in-out infinite; }
    .tutorial-ui-target { animation:tutorial-tool-attention 2.2s ease-in-out infinite;--lesson-tool-color:var(--bsl-teal-soft); }
    .canvas-controller-port:disabled { opacity:.4;cursor:default; }
    #tutorial-power-panel:empty { display:none; }
    .plan-rail[data-tutorial-power] > .rail-card { display:none; }
    #tutorial-power-panel { grid-column:1 / -1; }
    .tutorial-power-panel { display:flex; align-items:center; gap:var(--spacing-4); padding:var(--spacing-3); border:1px solid var(--bad);border-radius:var(--lab-surface-radius);background:color-mix(in srgb,var(--bad) 8%,var(--surface));transition:border-color 440ms ease,background-color 440ms ease; }
    .tutorial-power-panel[data-resolved="true"] {border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface));animation:practice-power-resolved 700ms cubic-bezier(.22,1,.36,1) both;}
    @keyframes practice-power-resolved {0%{transform:translateY(4px);filter:saturate(.55)}55%{transform:translateY(-2px);filter:saturate(1.35)}100%{transform:none;filter:none}}
    .tutorial-power-panel .practice-power-budget { flex:1;min-width:0;border:0;background:transparent;padding:0; }
    .tutorial-power-panel .practice-power-row { max-width:420px; }
    .canvas-app-frame[inert] { pointer-events:none; }
    @media(prefers-reduced-motion:reduce){.tutorial-coach-dock{transition:none}.tutorial-ui-target{animation:none;outline:2px solid var(--bsl-teal-soft)}}
    .canvas-coach-mount:not(:has(.installer-coach, .installation-checkpoint, .tutorial-welcome, .learning-intro)), #canvas-toast-astryx:not(:has(.canvas-toast-notice)) { display: none; }
    .canvas-coach-mount [data-astryx-theme] { width: 100%; }
    .installer-coach {
      width: 100%;
      margin: 0;
      padding: 12px;
      border: 0;
      border-radius: var(--lab-surface-radius);
      background: var(--surface-raised);
      background-clip: padding-box;
      box-shadow: var(--material-elevation-medium);
      pointer-events: auto;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: padding 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease;
    }
    .installer-coach.is-milestone { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 35%, transparent), var(--material-elevation-medium); }
    .installer-coach.is-milestone .installer-coach-heading > svg { animation: practice-checkpoint-arrive 600ms cubic-bezier(.22, 1, .36, 1) both; }
    @keyframes practice-checkpoint-arrive { 0% { transform: scale(.75); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
    @media (prefers-reduced-motion: reduce) { .installer-coach.is-milestone .installer-coach-heading > svg { animation: none; } }
    .installer-coach.is-minimized { width: 100%; padding: 7px 8px 7px 10px; }
    .installer-coach-controls { flex: 0 0 auto; }
    .installer-coach-controls .astryx-button { width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: var(--lab-control-radius); color: var(--muted); }
    .installer-coach-controls .astryx-button svg { width: 14px; height: 14px; }
    .installer-coach-controls .astryx-button:hover:not(:disabled),
    .installer-coach-controls .astryx-button:focus-visible { background: var(--material-surface); color: var(--text); box-shadow: var(--material-elevation-low); }
    .installer-coach-count { color: var(--muted); font-family: var(--font-family-brand-data); font-size: 10px; line-height: 16px; font-variant-numeric: tabular-nums; }
    .installer-coach-status { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--bsl-teal-soft); font-size: 10px; font-weight: 800; line-height: 14px; letter-spacing: .045em; text-transform: uppercase; }
    .installer-coach-status svg { width: 15px; height: 15px; flex: 0 0 auto; }
    .installer-coach-status--warning { color: var(--warn); }
    .installer-coach-status--success { color: var(--good); }
    .installer-coach-status--info { color: var(--bsl-teal-soft); }
    .installer-coach-status svg, .installer-coach-minimized-label > svg { color: var(--coach-tone); }
    .onboarding-region-highlight { outline: 2px solid var(--bsl-teal-soft); outline-offset: -2px; }
    .installer-coach-heading { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
    .installer-coach-heading > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--coach-tone); }
    .installer-coach-heading .installer-coach-title { margin: 0; }
    .installer-coach-title { margin: 0 0 5px; font-size: 16px; font-weight: 800; line-height: 22px; letter-spacing: -.015em; }
    .installer-coach-copy { margin: 0; color: var(--muted); font-size: 13px; line-height: 19px; }
    .installer-coach-instruction { margin: 0; color: var(--text); font-size: 16px; line-height: 23px; }
    .installer-coach-instruction strong { font-weight: 800; }
    .installer-coach-word { display: inline-block; transform-origin: center 75%; animation: practice-caption-word 260ms cubic-bezier(.2,.8,.2,1) var(--caption-delay) both; }
    @keyframes practice-caption-word {
      0% { opacity: 0; transform: translateY(.22em) scale(.94); color: var(--bsl-teal-soft); }
      60% { opacity: 1; transform: translateY(-.02em) scale(1.025); color: var(--bsl-teal-soft); }
      100% { opacity: 1; transform: none; color: var(--text); }
    }
    @media (prefers-reduced-motion: reduce) { .installer-coach-word { animation: none; opacity: 1; transform: none; color: var(--text); } }
    .practice-power-budget { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--lab-control-radius); background: var(--material-surface); font-size: 11px; line-height: 16px; }
    .practice-power-row { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); }
    .practice-power-row strong { flex-shrink: 0; color: var(--text); }
    .practice-power-meter { position: relative; margin-block: 4px; }
    .practice-power-limit { position: absolute; top: -3px; bottom: -3px; border-left: 2px solid var(--text); }
    .practice-power-budget small { color: var(--muted); font-size: 10px; line-height: 14px; text-wrap: balance; }
    .practice-power-result { color: var(--good); }
    .practice-power-budget[data-over-budget="true"] .practice-power-result { color: var(--bad); }
    .practice-power-budget:not([data-over-budget="true"]) .practice-power-result { animation:practice-power-result 560ms ease 140ms both; }
    @keyframes practice-power-result {from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
    .length-value-nudge.astryx-button,.length-value-nudge.astryx-button:hover:not(:disabled),.length-value-nudge.astryx-button:focus-visible {width:28px;min-width:28px;height:28px;min-height:28px;padding:0;border-radius:50%;}
    .practice-site-checklist { margin-top: 8px; }
    .practice-site-items { display: grid; gap: 10px; margin: 0; padding: 8px 0; list-style: none; font-size: 11px; line-height: 16px; }
    .practice-site-items li { display: grid; gap: 2px; }
    .practice-site-items span { color: var(--muted); }
    .installer-coach-tool-notice { margin: 0; color: var(--muted); font-size: 11px; line-height: 16px; }
    :is(.installer-coach-title, .chromaglow-onboarding-popover .driver-popover-title) { text-wrap: balance; }
    .installer-coach-instruction { text-wrap: balance; }
    .practice-tool-pill { flex-wrap: wrap; justify-content: center; max-width: 100%; }
    .installer-coach-action { display: flex; justify-content: flex-end; }
    .installer-coach-action button { width: auto; min-width: 0; justify-content: center; }
    .installer-coach-primary { --coach-action-color: var(--bsl-teal-soft); }
    .installer-coach-primary[data-variant="success"] { --coach-action-color: var(--good); }
    .installer-coach-primary[data-attention="true"]:not(:hover):not(:focus-visible) { animation: practice-required-action 6s ease-in-out 1s infinite; }
    @keyframes practice-required-action {
      0%, 30%, 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 0 transparent; }
      12% { transform: scale(1.025); filter: brightness(1.18); box-shadow: 0 0 0 5px color-mix(in srgb, var(--coach-action-color, var(--bsl-teal-soft)) 20%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) { .installer-coach-primary[data-attention="true"]:not(:hover):not(:focus-visible) { animation: none; } }
    .installation-checkpoint { background:transparent;border:0;box-shadow:none; }
    .installation-checkpoint::backdrop { background:var(--ground);backdrop-filter:none; }
    .installation-checkpoint-content { text-align: center; --coach-tone: var(--good); font-family:var(--font-family-brand-primary); }
    .installation-checkpoint-emblem { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; color: var(--good); animation: checkpoint-seal-arrive 760ms cubic-bezier(.16,1,.3,1) both; }
    .installation-checkpoint-emblem > svg { width: 48px; height: 48px; }
    .installation-checkpoint-emblem::before,.installation-checkpoint-emblem::after { display:none; }
    .installation-checkpoint-title { color: var(--text); }
    .installation-checkpoint-summary { margin: 0; color: var(--good); font-family:var(--font-family-brand-primary); font-size: 14px; line-height: 20px; }
    .installation-checkpoint-copy { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
    .tutorial-lesson-progress { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; width:100%; padding:0; margin:0; list-style:none; font-size:11px; line-height:16px; color:var(--muted); }
    .tutorial-lesson-progress li { display:flex; gap:4px; align-items:center; }
    .tutorial-lesson-progress li[data-current="true"] { color:var(--text);font-weight:800; }
    .tutorial-lesson-progress li[data-complete="true"] { color:var(--good); }
    .tutorial-lesson-progress svg { width:14px;height:14px; }
    .tutorial-lessons-intro { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap:var(--spacing-6); }
    .tutorial-lesson-group { min-width:0; border-top:1px solid var(--line); padding-top:var(--spacing-3); }
    .tutorial-lesson-mode { color:var(--muted); }
    .tutorial-lesson-group ol { display:grid; gap:var(--spacing-4); margin:var(--spacing-3) 0 0; padding-left:var(--spacing-6); }
    .tutorial-lesson-group li { padding-left:var(--spacing-1); font-size:var(--text-body-size); line-height:var(--text-body-leading); }
    .tutorial-lesson-group li::marker { color:var(--muted); font-size:var(--text-supporting-size); }
    .tutorial-lessons-intro p { color:var(--muted);margin:var(--spacing-1) 0 0;font-size:var(--text-label-size);line-height:var(--text-body-leading); }
    .tutorial-settings { padding-bottom:16px;border-bottom:1px solid var(--line); }
    .tutorial-error { color:var(--bad);font-size:12px;line-height:18px; }
    .tutorial-award-icon { width:80px;height:80px;color:var(--good); }
    .tutorial-award-page { min-height:100svh;display:grid;place-items:center;padding:32px; }
    .tutorial-award { max-width:560px;padding:32px;background:var(--material-surface-strong);border-radius:var(--lab-surface-radius);text-align:center; }
    .tutorial-award h1 { margin:0;font-size:32px;line-height:38px; }
    .tutorial-award p { margin:0;color:var(--muted); }
    .tutorial-award .tutorial-award-name { font-size:24px;color:var(--text); }
    .tutorial-award-lessons { display:flex;flex-wrap:wrap;justify-content:center;gap:16px;color:var(--good); }
    .tutorial-award-lessons span,.tutorial-award-verification { display:flex;align-items:center;gap:6px; }
    .tutorial-award-lessons svg,.tutorial-award-verification svg { width:18px;height:18px; }
    .tutorial-award small { color:var(--muted);font-size:11px;line-height:16px; }
    .mask-action-rail { min-width:300px;max-width:100%;gap:8px; }
    .mask-action-space { flex:1;min-width:12px; }
    @keyframes checkpoint-seal-arrive { 0% { opacity: 0; transform: scale(.65) translateY(12px); } 65% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
    @keyframes checkpoint-seal-ring { 0% { opacity: .45; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.65); } }
    @media (prefers-reduced-motion: reduce) { .installation-checkpoint-emblem, .installation-checkpoint-emblem::before, .installation-checkpoint-emblem::after { animation: none; } }
    .installer-coach-minimized-label { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px; }
    .installer-coach-minimized-label span { min-width: 0; display: grid; }
    .installer-coach-minimized-label small { color: var(--faint); font-size: 10px; font-weight: 700; line-height: 12px; letter-spacing: .06em; text-transform: uppercase; }
    .installer-coach-minimized-label strong { overflow: hidden; font-size: 12px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
    .driver-popover.chromaglow-onboarding-popover {
      width: min(330px, calc(100vw - 24px));
      min-width: 0;
      max-width: 330px;
      padding: 14px;
      border: 1px solid var(--material-border-color);
      border-radius: var(--lab-surface-radius);
      background: var(--surface-raised);
      color: var(--text);
      font-family: var(--font-family-brand-primary);
      box-shadow: var(--material-elevation-modal);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .chromaglow-onboarding-popover .driver-popover-title { padding-right: 28px; font-size: 14px; font-weight: 800; line-height: 20px; letter-spacing: -.012em; }
    .chromaglow-onboarding-popover .driver-popover-description { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 18px; }
    .chromaglow-onboarding-popover .driver-popover-close-btn { top: 7px; right: 7px; width: 28px; height: 28px; color: var(--muted); font-size: 17px; border-radius: var(--lab-control-radius); }
    .chromaglow-onboarding-popover .driver-popover-close-btn:hover,
    .chromaglow-onboarding-popover .driver-popover-close-btn:focus-visible { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); outline: 2px solid var(--focus); outline-offset: 0; }
    .chromaglow-onboarding-popover .driver-popover-footer { gap: 10px; margin-top: 14px; }
    .chromaglow-onboarding-popover .driver-popover-progress-text { color: var(--faint); font-family: var(--font-family-brand-data); font-size: 10px; line-height: 16px; }
    .chromaglow-onboarding-popover .driver-popover-navigation-btns { gap: 6px; }
    .chromaglow-onboarding-popover .driver-popover-footer-btn {
      min-height: 28px;
      padding: 5px 10px;
      border: 1px solid var(--line);
      border-radius: var(--lab-control-radius);
      background: color-mix(in srgb, var(--surface) 66%, transparent);
      color: var(--text);
      font-family: var(--font-family-brand-primary);
      font-size: 12px;
      font-weight: 700;
      line-height: 16px;
      text-shadow: none;
    }
    .chromaglow-onboarding-popover .driver-popover-footer-btn:hover,
    .chromaglow-onboarding-popover .driver-popover-footer-btn:focus-visible { background: color-mix(in srgb, var(--text) 12%, transparent); outline: 2px solid var(--focus); outline-offset: 0; }
    .chromaglow-onboarding-popover .driver-popover-next-btn { border-color: transparent; background: var(--bsl-teal-soft); color: #111819; }
    .chromaglow-onboarding-popover .driver-popover-navigation-btns button + button { margin-left: 0; }
    .chromaglow-onboarding-popover .driver-popover-arrow-side-left { border-left-color: var(--surface-raised); }
    .chromaglow-onboarding-popover .driver-popover-arrow-side-right { border-right-color: var(--surface-raised); }
    .chromaglow-onboarding-popover .driver-popover-arrow-side-top { border-top-color: var(--surface-raised); }
    .chromaglow-onboarding-popover .driver-popover-arrow-side-bottom { border-bottom-color: var(--surface-raised); }
    #workflow-sidebar-astryx { display: flex; flex: 1 1 auto; min-height: 0; }
    #workflow-sidebar-astryx > [data-astryx-theme] { display: flex; flex: 1 1 auto; min-height: 0; }
    .workflow-sidebar { width: 100%; min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; }
    .workflow-sidebar-main { min-height: 0; display: grid; flex: 1 1 auto; align-content: start; gap: 14px; overflow: auto; overscroll-behavior: contain; padding: 12px; }
    .workflow-review-footer { flex: 0 0 auto; max-height: min(44vh, 330px); overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); background: var(--surface); padding: 8px 12px 12px; }
    .job-switcher { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
    .job-switcher [data-astryx-theme] { min-width: 0; }
    .job-switcher [data-astryx-theme] > div { min-width: 0; }
    .job-switcher button { flex: 0 0 auto; }
    .lab-disclosure-group .astryx-collapsible-trigger { min-height: 32px; padding-block: 6px; font-size: 11px; line-height: 16px; }
    .lab-disclosure-group .astryx-collapsible-trigger > span:first-child { min-width: 0; display: flex; flex: 1 1 auto; }
    .lab-disclosure-trigger { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; }
    .lab-disclosure-title { min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
    .lab-disclosure-title svg { width: 15px; height: 15px; }
    .review-severity-counters { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; margin: 0 8px 0 auto; }
    .review-severity-counter.astryx-badge, .disclosure-count-chip.astryx-badge, .review-repeat-count.astryx-badge { min-width: 18px; min-height: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-family: var(--font-family-brand-numeric); font-size: 10px; font-weight: 700; line-height: 14px; font-variant-numeric: tabular-nums; }
    .review-severity-counter.astryx-badge { width: 18px; padding: 0; border: 1px solid currentColor; background: transparent; }
    .review-severity-counter--error.astryx-badge { color: var(--color-text-red); }
    .review-severity-counter--warning.astryx-badge { color: var(--color-text-yellow); }
    .review-severity-counter--info.astryx-badge { color: var(--color-text-blue); }
    .disclosure-count-chip.astryx-badge, .review-repeat-count.astryx-badge { border: 1px solid var(--line); background: var(--surface-raised); color: var(--muted); }
    .disclosure-count-chip.astryx-badge { margin: 0 8px 0 auto; }
    .sidebar-empty-copy { margin: 0; padding: 2px 0 10px; color: var(--muted); font-size: 11px; line-height: 16px; }
    .component-palette { display: grid; gap: 8px; min-width: 0; }
    .component-palette-heading { display: grid; gap: 2px; }
    .component-palette-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .component-palette-heading-row > div { min-width: 0; display: grid; gap: 2px; }
    .component-palette-heading strong { color: var(--text); font-size: 12px; line-height: 16px; }
    .component-palette-heading span { color: var(--muted); font-size: 10px; line-height: 14px; }
    .component-palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .component-palette-card.astryx-button {
      min-width: 0;
      min-height: 42px;
      overflow: hidden;
      border: 1px solid transparent;
      background: var(--material-surface-subtle);
      box-shadow: var(--material-elevation-low);
      color: var(--text);
      text-align: left;
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
      transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out, box-shadow 180ms ease-out, opacity 120ms ease-out;
    }
    .component-palette-card.astryx-button:hover:not(:disabled),
    .component-palette-card.astryx-button:focus-visible {
      border-color: transparent;
      background: var(--material-surface);
      box-shadow: var(--material-elevation-low);
      color: var(--text);
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
    }
    .component-palette-card.astryx-button[data-variant="secondary"] {
      border-color: transparent;
      background: var(--material-surface-strong);
      color: var(--text);
    }
    .component-palette-card[data-component-drag-enabled="true"] { cursor: grab; }
    .component-palette-card.is-component-dragging {
      cursor: grabbing;
      border-color: transparent;
      background: var(--material-highlight), var(--material-wash), color-mix(in srgb, var(--material-fill-strong) 78%, transparent);
    }
    .component-drag-ghost {
      position: fixed;
      z-index: 1100;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      pointer-events: none;
      cursor: grabbing;
      color: var(--text);
      will-change: transform;
    }
    .component-drag-ghost[data-tone="control"] { color: var(--good); }
    .component-drag-ghost[data-tone="lighting"] { color: var(--run); }
    .component-drag-ghost[data-tone="cable"] { color: var(--extension); }
    .component-drag-ghost-surface,
    .component-drag-ghost-icon,
    .component-drag-ghost-label,
    .component-drag-ghost-hint {
      transition: transform 190ms cubic-bezier(.16, 1, .3, 1), opacity 140ms ease-out, border-color 160ms ease-out, background-color 160ms ease-out, filter 160ms ease-out;
    }
    .component-drag-ghost-surface {
      position: absolute;
      z-index: 0;
      display: flex;
      width: max-content;
      max-width: 220px;
      min-height: 38px;
      align-items: center;
      gap: 7px;
      transform: translate(-50%, -50%);
      transform-origin: center;
      padding: 4px 9px 4px 5px;
      border: 0;
      border-radius: 999px;
      background: var(--material-surface-strong);
      box-shadow: var(--material-elevation-medium);
      backdrop-filter: var(--material-backdrop-strong);
      -webkit-backdrop-filter: var(--material-backdrop-strong);
    }
    .component-drag-ghost-icon {
      display: grid;
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      place-items: center;
      transform: scale(.84);
      border: 0;
      border-radius: 50%;
      background: color-mix(in srgb, currentColor 12%, transparent);
      transform-origin: center;
    }
    .component-drag-ghost-icon svg { width: 18px; height: 18px; }
    .component-drag-ghost-label {
      display: grid;
      width: max-content;
      max-width: 172px;
      min-height: 28px;
      align-content: center;
      transform: none;
      padding: 2px 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--text);
      font-family: var(--font-family-brand-data);
      text-transform: uppercase;
      white-space: normal;
    }
    .component-drag-ghost-label strong { font-size: 9px; font-weight: 400; line-height: 11px; letter-spacing: .08em; }
    .component-drag-ghost-hint {
      position: static;
      overflow: hidden;
      max-height: 0;
      transform: translateY(-2px);
      opacity: 0;
      color: var(--muted);
      font-family: var(--font-family-brand-primary);
      font-size: 9px;
      font-weight: 400;
      line-height: 11px;
      letter-spacing: 0;
      text-transform: none;
    }
    .component-drag-ghost[data-stage="canvas"] .component-drag-ghost-surface {
      transform: translate(-50%, -50%) scale(1);
      background: var(--material-surface-strong);
      box-shadow: var(--material-elevation-medium);
    }
    .component-drag-ghost[data-stage="canvas"] .component-drag-ghost-icon {
      transform: scale(1);
      background: color-mix(in srgb, currentColor 16%, transparent);
    }
    .component-drag-ghost[data-stage="canvas"] .component-drag-ghost-label {
      transform: none;
    }
    .component-drag-ghost[data-stage="canvas"] .component-drag-ghost-hint {
      max-height: 11px;
      transform: translateY(0);
      opacity: 1;
    }
    .component-drag-ghost[data-stage="dropping"] .component-drag-ghost-surface {
      transform: translate(-50%, -50%) scale(.14);
      opacity: 0;
      filter: blur(3px);
    }
    body.is-component-dragging { user-select: none; }
    .canvas-frame[data-component-drag-over="true"] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bsl-teal-soft) 70%, transparent), var(--shadow); }
    .component-palette-icon { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; }
    .component-palette-icon svg { width: 18px; height: 18px; }
    .component-palette--bottom svg [data-color="color-2"],
    .canvas-symbol-glyph svg [data-color="color-2"],
    .component-drag-ghost svg [data-color="color-2"] { fill: none; opacity: 1; }
    .component-palette-card[data-tone="control"] .component-palette-icon { color: var(--good); }
    .component-palette-card[data-tone="lighting"] .component-palette-icon { color: var(--run); }
    .component-palette-card[data-tone="cable"] .component-palette-icon { color: var(--extension); }
    .component-palette-card-content { display: grid; width: 100%; min-width: 0; gap: 2px; }
    .component-palette-title-row { display: flex; min-width: 0; align-items: center; gap: 5px; }
    .component-palette-copy { display: -webkit-box; overflow: hidden; min-width: 0; margin: 0 0 0 25px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 14px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .component-palette-preview-tool { justify-content: flex-start; color: var(--muted); }
    .component-detail-dialog { min-width: 0; }
    .component-detail-product { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
    .component-detail-product .component-palette-icon { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface-raised) 84%, transparent); }
    .component-detail-product .component-palette-icon[data-tone="control"] { color: var(--good); }
    .component-detail-product .component-palette-icon[data-tone="lighting"] { color: var(--run); }
    .component-detail-product .component-palette-icon[data-tone="cable"] { color: var(--extension); }
    .component-detail-product > div { min-width: 0; display: grid; gap: 1px; }
    .component-detail-product span + div > span,
    .component-detail-training > span { color: var(--faint); font-family: var(--font-family-brand-primary); font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; }
    .component-detail-product strong { font-size: 13px; line-height: 18px; }
    .component-detail-product small { color: var(--muted); font-family: var(--font-family-brand-data); font-size: 11px; line-height: 15px; font-variant-numeric: tabular-nums; }
    .component-detail-catalog-status { margin: 0; color: var(--muted); font-size: 10px; line-height: 14px; }
    .component-detail-training { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
    .component-detail-training p { margin: 0; color: var(--text); font-size: 11px; line-height: 16px; }
    .calibration-control-copy,
    .calibration-dialog-copy { margin: 0; color: var(--muted); font-size: 11px; line-height: 16px; }
    .workflow-stepper { display: none; }
    .astryx-control-mount { width: 100%; }
    .astryx-control-mount [data-astryx-theme] { width: 100%; }
    .astryx-collapsible-trigger { appearance: none; border: 0; background: transparent; padding-inline: 0; }
    .astryx-toolbar-mount { flex: 1 1 auto; min-width: 0; }
    .astryx-toolbar-mount [data-astryx-theme] { min-width: 0; }
    .planner-toolbox { min-width: 0; }
    .planner-active-tool-label { min-width: 78px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 16px; }
    .planner-selection-status { min-width: 0; padding-left: 2px; }
    .planner-tool-tooltip { display: grid; max-width: 220px; gap: 2px; }
    .planner-tool-tooltip strong { font-size: 12px; line-height: 16px; }
    .planner-tool-tooltip span { color: inherit; font-size: 11px; line-height: 15px; opacity: .76; }
    .legacy-control-bridge[hidden] { display: none !important; }
    .component-palette-project-tools { min-width: 0; }
    .component-palette-project-tools > [data-astryx-theme] { min-width: 0; flex: 1 1 0; }
    .component-palette-project-tools button { min-width: 0; width: 100%; justify-content: flex-start; }
    .guide .astryx-collapsible-trigger,
    .inspector .astryx-collapsible-trigger {
      min-height: 40px;
      padding-block: 10px;
      font-size: 13px;
      font-weight: 700;
      line-height: 18px;
    }
    .guide .astryx-field-label,
    .inspector .astryx-field-label { font-size: 11px; line-height: 16px; }
    .guide .astryx-button,
    .inspector .astryx-button { font-size: 12px; line-height: 16px; }

    .workspace { --plan-bottom-panel-height: 0px; --active-bottom-panel-height: var(--plan-bottom-panel-height); --preview-bottom-panel-height: 118px; --planner-panel-motion-duration: 280ms; --planner-panel-motion-ease: cubic-bezier(.22, 1, .36, 1); position: relative; min-width: 0; min-height: 0; grid-column: 1; grid-row: 1; display: grid; grid-template-rows: minmax(0, 1fr) 0 0; overflow: hidden; background: #0d0e10; }
    .tool-bar { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 7px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #151616; }
    .tool-bar [role="toolbar"] { background: transparent; }
    .tool-bar button svg { color: currentColor; }
    .tool {
      flex: 0 0 auto;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: var(--lab-control-radius);
      background: var(--surface-quiet);
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }
    .tool[aria-pressed="true"] { border-color: var(--focus); background: var(--bsl-teal-muted); color: var(--bsl-teal-soft); }
    .tool-mark { width: 12px; height: 3px; display: block; border-radius: 2px; background: var(--run); }
    .tool[data-tool="feed"] .tool-mark, .tool[data-tool="jump"] .tool-mark { background: var(--extension); }
    .tool[data-tool="calibrate"] .tool-mark { background: var(--scale); }
    .tool[data-tool="controller"] .tool-mark { width: 9px; height: 9px; border-radius: 2px; background: var(--good); }
    .tool[data-tool="select"] .tool-mark { width: 9px; height: 9px; border: 2px solid var(--muted); border-radius: 50%; background: transparent; }

    .canvas-region { position: relative; grid-row: 1; grid-column: 1; min-height: 0; overflow: hidden; padding: 0; }
    .canvas-stage { width: 100%; height: 100%; min-height: 0; }
    .canvas-frame { position: relative; width: 100%; height: 100%; overflow: clip; background: #05070a; box-shadow: var(--shadow); }
    .canvas-frame[data-recalculating]::after { content: 'Recalculating plan…'; position: absolute; z-index: 14; top: 50%; left: calc((100% - var(--canvas-ui-right-inset)) / 2); display: grid; min-height: 28px; padding: 0 10px; place-items: center; border: 0; border-radius: 999px; background: var(--material-surface-strong); color: var(--text); font-family: var(--font-family-brand-primary); font-size: 10px; font-weight: 700; letter-spacing: .03em; transform: translate(-50%, -50%); box-shadow: var(--material-elevation-medium); backdrop-filter: var(--material-backdrop-strong); -webkit-backdrop-filter: var(--material-backdrop-strong); pointer-events: auto; transition: left 280ms cubic-bezier(.22, 1, .36, 1); }
    #planner-background,
    #planner-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    #planner-background { z-index: 1; pointer-events: none; }
    #planner-canvas { z-index: 2; touch-action: none; cursor: default; }
    #planner-canvas, .preview-simulator-viewport, #planner-frame { outline: none; }
    .preview-simulator { position: absolute; z-index: 3; inset: 0; display: block; overflow: hidden; background: #09101b; opacity: 0; pointer-events: none; visibility: hidden; }
    .preview-simulator-viewport { position: absolute; inset: 0; overflow: hidden; padding: 0; touch-action: none; cursor: default; }
    .preview-simulator-stage { position: absolute; left: var(--preview-stage-left, 0px); top: var(--preview-stage-top, 0px); width: var(--preview-stage-width, 100%); height: var(--preview-stage-height, 100%); max-width: none; max-height: none; aspect-ratio: 3 / 2; overflow: hidden; background: #08101d; transform: translate3d(var(--preview-pan-x, 0px), var(--preview-pan-y, 0px), 0) scale(var(--preview-zoom, 1)); transform-origin: 0 0; will-change: transform; }
    .preview-simulator-stage > img,
    .preview-simulator-stage > canvas,
    .preview-simulator-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
    .preview-simulator-stage > img { object-fit: contain; }
    .preview-simulator-stage > img, .preview-simulator-stage > .sim-mask-canvas { filter: brightness(var(--preview-daylight, 1)); transition: filter 160ms linear; }
    .preview-simulator-stage .sim-schematic,
    .preview-simulator-stage .sim-editor-layer,
    .preview-simulator-stage .sim-stage-toolbar,
    .preview-simulator-stage .sim-editor-bar,
    .preview-simulator-stage .sim-hierarchy,
    .preview-simulator-stage .sim-plan-context,
    .preview-simulator-stage .sim-tooltip { display: none; }
    .preview-simulator-stage[data-zones-visible="true"] .sim-schematic { display: block; pointer-events: none; }
    .preview-zone-halo, .preview-zone-route { fill: none; stroke: var(--preview-zone-color); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    .preview-zone-halo { stroke-width: 10px; opacity: .2; }
    .preview-zone-route { stroke-width: 2px; opacity: .85; }
    .preview-zone-label { fill: var(--text); stroke: var(--material-surface-strong); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke fill; font-family: var(--font-family-brand-primary); font-size: 22px; font-weight: 650; }
    .preview-simulator-stage .sim-empty { position: absolute; z-index: 4; inset: 50% auto auto 50%; width: min(300px, calc(100% - 40px)); padding: 12px 14px; transform: translate(-50%, -50%); border: 0; border-radius: var(--lab-surface-radius); background: var(--material-surface-strong); box-shadow: var(--material-elevation-medium); color: var(--muted); font-size: 12px; line-height: 17px; text-align: center; backdrop-filter: var(--material-backdrop-strong); -webkit-backdrop-filter: var(--material-backdrop-strong); }
    .preview-clock-popover { display: grid; gap: 12px; }
    .preview-clock-readout { padding-inline: 4px; color: var(--time); font-family: var(--font-family-brand-numeric); font-size: 12px; font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .preview-clock-popover-heading { display: grid; gap: 2px; }
    .preview-clock-popover-heading span { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .03em; line-height: 14px; text-transform: uppercase; }
    .preview-clock-popover-heading strong { color: var(--text); font-family: var(--font-family-brand-numeric); font-size: 18px; font-weight: 650; line-height: 24px; font-variant-numeric: tabular-nums; }
    .preview-clock-popover input[type="time"] { width: 100%; color-scheme: dark; font-family: var(--font-family-brand-numeric); font-variant-numeric: tabular-nums; }
    .preview-clock-popover > p { margin: 0; color: var(--faint); font-size: 10px; line-height: 15px; text-wrap: balance; }
    #canvas-symbol-markers-astryx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
    #canvas-symbol-markers-astryx > [data-astryx-theme], .canvas-symbol-markers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    .canvas-symbol-marker { z-index:2;position: absolute; width: 0; height: 0; display: block; color: var(--text); opacity: 1; pointer-events: none; transition: opacity 120ms ease-out; }
    .canvas-symbol-marker.is-dragging { opacity: .46; }
    .canvas-symbol-marker { --canvas-symbol-size: 26px; --canvas-symbol-icon-size: 16px; }
    .canvas-symbol-marker.canvas-symbol-size-detail { --canvas-symbol-size: 20px; --canvas-symbol-icon-size: 13px; }
    .canvas-symbol-marker.canvas-symbol-size-anchor { --canvas-symbol-size: 30px; --canvas-symbol-icon-size: 18px; }
    .canvas-symbol-marker.canvas-symbol-size-hub { --canvas-symbol-size: 54px; --canvas-symbol-icon-size: 22px; }
    .canvas-symbol-placement { position: absolute; width: var(--canvas-symbol-size); height: var(--canvas-symbol-size); display: block; transform: translate(calc(var(--canvas-marker-offset-x) + var(--canvas-edge-nudge-x, 0px) - 50%), calc(var(--canvas-marker-offset-y) + var(--canvas-edge-nudge-y, 0px) - 50%)); transition: transform 220ms cubic-bezier(.2,.72,.2,1); pointer-events: none; }
    .canvas-symbol-glyph.astryx-button,
    .canvas-symbol-glyph.canvas-symbol-passive-glyph {
      position: relative;
      z-index: 1;
      width: max-content;
      min-width: var(--canvas-symbol-size);
      max-width: var(--canvas-symbol-size);
      height: var(--canvas-symbol-size);
      min-height: var(--canvas-symbol-size);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      overflow: hidden;
      padding: 0;
      border: var(--canvas-element-border);
      border-radius: 50%;
      background: var(--material-surface);
      box-shadow: none;
      color: inherit;
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
      pointer-events: auto;
      transition: transform 180ms cubic-bezier(.22, 1, .36, 1), background-color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out;
    }
    .canvas-symbol-marker.is-passive { z-index: 0; }
    .canvas-symbol-marker.is-passive .canvas-symbol-glyph.canvas-symbol-passive-glyph {
      border-color: color-mix(in srgb, currentColor 54%, transparent);
      background: rgba(6, 10, 14, .48);
      box-shadow: 0 0 0 1px rgba(6, 10, 14, .72);
      opacity: .5;
      pointer-events: none;
    }
    .canvas-controller-ports { position: absolute; z-index: 4; inset: 0; display: block; pointer-events: none; }
    .canvas-controller-port {
      position: absolute;
      z-index: 4;
      left: 50%;
      top: 50%;
      width: 24px;
      min-width: 24px;
      height: 24px;
      min-height: 24px;
      display: grid;
      place-items: center;
      overflow: visible;
      padding: 0;
      border: var(--canvas-element-border);
      border-radius: 50%;
      background: var(--material-state-surface);
      box-shadow: none;
      color: var(--controller-port-number);
      cursor: pointer;
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%) translate(var(--controller-port-x), var(--controller-port-y));
      transition: opacity 150ms ease-out, transform 180ms cubic-bezier(.22, 1, .36, 1), box-shadow 140ms ease-out;
      touch-action: none;
      isolation: isolate;
      backdrop-filter: var(--material-backdrop-port);
      -webkit-backdrop-filter: var(--material-backdrop-port);
    }
    .capacity-ring {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke-width:1;}
    .capacity-ring-track {stroke:var(--line-strong);}
    .capacity-ring-fill {stroke:currentColor;transition:stroke-dasharray 180ms ease,stroke 180ms ease;}
    .capacity-number {position:relative;z-index:1;font-family:var(--font-family-brand-data);font-size:10px;font-weight:750;line-height:1;color:inherit;}
    .canvas-controller-port.astryx-button {color:var(--controller-port-number);background:var(--material-control-surface);}
    .canvas-symbol-controller .canvas-symbol-glyph {background:var(--material-control-surface);}
    html[data-interface-style="flat"] .canvas-symbol-controller .canvas-symbol-glyph.astryx-button {background:var(--material-control-surface);}
    .canvas-symbol-marker.is-selected .canvas-symbol-glyph {border-color:currentColor;}
    .canvas-controller-port:hover,
    .canvas-controller-port:focus-visible,
    .canvas-controller-port[data-active="true"] {
      border-color:var(--controller-port-color);
      box-shadow:0 0 12px color-mix(in srgb, var(--controller-port-color) 28%, transparent);
      transform: translate(-50%, -50%) translate(var(--controller-port-x), var(--controller-port-y)) scale(1.04);
      outline: none;
    }
    .canvas-controller-port:active { cursor: move; }
    .canvas-controller-ports[data-visible="false"] .canvas-controller-port {
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(.64);
    }
    .canvas-symbol-icon-art { position: relative; z-index: 1; width: var(--canvas-symbol-icon-size); height: var(--canvas-symbol-icon-size); display: grid; place-items: center; color: currentColor; transform-origin: 50% 50%; }
    .canvas-symbol-icon-art svg { width: 100%; height: 100%; color: currentColor; }
    .canvas-symbol-size-hub .canvas-symbol-icon-art svg { width: var(--canvas-symbol-icon-size); min-width: var(--canvas-symbol-icon-size); max-width: none; height: var(--canvas-symbol-icon-size); min-height: var(--canvas-symbol-icon-size); max-height: none; }
    .canvas-symbol-direction { color: var(--run); }
    .canvas-symbol-connector, .canvas-symbol-cut, .canvas-symbol-booster, .canvas-symbol-power, .canvas-symbol-cable { color: var(--extension); }
    .canvas-symbol-branch, .canvas-symbol-controller { color: var(--good); }
    .canvas-symbol-controller {z-index:12;}
    .canvas-symbol-marker.is-review-error { color: #ff6b80; }
    .canvas-symbol-marker.is-review-warning { color: #ffd051; }
    .canvas-symbol-marker.is-review-info { color: #78b9ff; }
    .canvas-symbol-marker.is-review-issue .canvas-symbol-glyph.astryx-button {
      border-color: currentColor;
      background: var(--material-state-surface);
      box-shadow: 0 0 14px color-mix(in srgb, currentColor 28%, transparent);
      animation: canvas-review-attention-pulse 1500ms cubic-bezier(.22, 1, .36, 1) infinite;
    }
    @keyframes canvas-review-attention-pulse {
      0%, 42%, 100% { box-shadow: 0 0 8px color-mix(in srgb, currentColor 18%, transparent); }
      20%, 62% { box-shadow: 0 0 16px color-mix(in srgb, currentColor 34%, transparent); }
    }
    .canvas-symbol-glyph.astryx-button:hover:not(:disabled), .canvas-symbol-glyph.astryx-button:focus-visible {
      border-color: currentColor;
      background-color: rgba(6, 10, 14, .82);
      color: inherit;
      box-shadow: none;
    }
    .canvas-symbol-glyph.astryx-button[data-canvas-draggable="true"] { cursor: move; }
    .canvas-symbol-glyph.astryx-button:focus-visible { outline: none; }
    #planner-frame[data-canvas-navigation="ready"] :is(.canvas-symbol-glyph.astryx-button, .canvas-controller-port) { cursor: grab; }
    #planner-frame[data-canvas-navigation="dragging"],
    #planner-frame[data-canvas-navigation="dragging"] :is(.canvas-symbol-glyph.astryx-button, .canvas-controller-port) { cursor: grabbing; }
    .canvas-symbol-marker.is-selected .canvas-symbol-glyph {
      background:var(--material-selected-surface);
      box-shadow: none;
    }
    .canvas-symbol-marker.is-subtle:not(.is-hovered):not(.is-selected) .canvas-symbol-glyph {
      border-color: currentColor;
      background:var(--material-symbol-muted-surface);
      box-shadow:none;
      opacity:var(--material-symbol-muted-opacity);
    }
    .planner-selection-actions {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border:var(--canvas-element-border);
      border-radius: 10px;
      background: var(--material-surface-strong);
      box-shadow:none;
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
      pointer-events: auto;
      animation: canvas-selection-actions-in 150ms cubic-bezier(.22, 1, .36, 1) both;
    }
    .planner-selection-actions .astryx-button:not(.selection-submenu-button) { width: 28px; min-width: 28px; height: 28px; min-height: 28px; border-radius: 6px; }
    .planner-selection-actions .selection-submenu-button {font-size:var(--text-supporting-size);width:auto;min-height:28px;height:28px;padding-inline:var(--spacing-2);gap:var(--spacing-1);}
    .planner-selection-actions .selection-submenu-button svg {width:14px;height:14px;}
    .planner-selection-actions .selection-action-divider {height:20px;margin-inline:var(--spacing-1);}
    .planner-selection-actions {max-width:calc(100vw - 32px);flex-wrap:wrap;}
    .planner-selection-actions .canvas-selection-delete { color: var(--bad); }
    .planner-selection-actions .canvas-selection-delete svg {color:var(--bad);}
    .planner-selection-actions .canvas-selection-delete:hover:not(:disabled),
    .planner-selection-actions .canvas-selection-delete:focus-visible { box-shadow: 0 0 12px color-mix(in srgb, var(--bad) 28%, transparent); }
    @keyframes canvas-selection-actions-in {
      from { opacity: 0; filter: blur(2px); scale: .94; }
      to { opacity: 1; filter: none; scale: 1; }
    }
    .canvas-symbol-direction .canvas-symbol-glyph { background:var(--material-symbol-surface); opacity: 1; }
    .canvas-symbol-marker.is-edge-pinned { --canvas-symbol-size: 32px; --canvas-symbol-icon-size: 19px; }
    .canvas-symbol-marker.is-edge-pinned[data-edge-pin-side="bottom"] {
      --canvas-edge-nudge-y: calc(0px - var(--plan-bottom-panel-height) - 111px);
    }
    .canvas-symbol-marker.is-edge-pinned .canvas-symbol-glyph.astryx-button {
      border-color: color-mix(in srgb, currentColor 68%, transparent);
      background: var(--material-surface-strong);
      box-shadow: none;
    }
    .canvas-symbol-marker.is-edge-pinned .canvas-symbol-glyph[data-tutorial-attention="true"] {animation:canvas-offscreen-cue-pulse 1800ms cubic-bezier(.22,1,.36,1) infinite;}
    .canvas-symbol-marker.is-edge-pinned .canvas-symbol-icon-art { transition: none; }
    .canvas-symbol-marker.is-edge-pinned[data-edge-pin-side="left"] .canvas-symbol-label-tooltip {
      top: 50%; right: auto; bottom: auto; left: calc(100% + 8px); transform: translateY(-50%);
    }
    .canvas-symbol-marker.is-edge-pinned[data-edge-pin-side="right"] .canvas-symbol-label-tooltip {
      top: 50%; right: calc(100% + 8px); bottom: auto; left: auto; transform: translateY(-50%);
    }
    .canvas-symbol-marker.is-edge-pinned[data-edge-pin-side="top"] .canvas-symbol-label-tooltip {
      top: calc(100% + 8px); right: auto; bottom: auto; left: 50%; transform: translateX(-50%);
    }
    .canvas-symbol-marker.is-edge-pinned[data-edge-pin-side="bottom"] .canvas-symbol-label-tooltip {
      top: auto; right: auto; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    }
    @keyframes canvas-offscreen-cue-pulse {
      0%, 100% { box-shadow: 0 0 9px color-mix(in srgb, currentColor 18%, transparent); }
      50% { box-shadow: 0 0 17px color-mix(in srgb, currentColor 32%, transparent); }
    }
    .canvas-symbol-marker.is-draft-preview { z-index: 2; }
    .canvas-symbol-marker.is-draft-preview .canvas-symbol-glyph.astryx-button {
      border-color: currentColor;
      background: var(--material-state-surface);
      box-shadow: 0 0 14px color-mix(in srgb, currentColor 18%, transparent);
      opacity: .9;
      pointer-events: none;
    }
    .canvas-symbol-marker.is-draft-invalid { color: var(--bad); }
    .canvas-symbol-leader { position: absolute; z-index: 0; left: calc(50% + var(--canvas-symbol-leader-start-x, 0px)); top: calc(50% + var(--canvas-symbol-leader-start-y, 0px) - 1px); height: 2px; transform: rotate(var(--canvas-symbol-leader-angle, 0rad)); transform-origin: 0 50%; border-radius: 999px; background: var(--material-state-surface); opacity: .35; pointer-events: auto; transition: left 180ms cubic-bezier(.22, 1,.36, 1), top 180ms cubic-bezier(.22, 1,.36, 1), opacity 140ms ease-out, width 180ms cubic-bezier(.22, 1,.36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1); }
    .canvas-symbol-marker.is-hovered .canvas-symbol-leader, .canvas-symbol-marker.is-selected .canvas-symbol-leader { opacity: .92; animation: canvas-symbol-leader-flow 620ms linear infinite; }
    @keyframes canvas-symbol-leader-flow { from { background-position: 0 0; } to { background-position: 16px 0; } }
    .selected-symbol-product { display: grid; gap: 8px; margin: 0 0 2px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
    .selected-symbol-product-copy { display: grid; gap: 3px; min-width: 0; }
    .selected-symbol-product-copy > span { color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 14px; text-transform: uppercase; }
    .selected-symbol-product-copy > strong { font-family: var(--font-family-brand-primary); font-size: 12px; font-weight: 700; line-height: 17px; }
    .selected-symbol-product-copy > p { margin: 0; color: var(--muted); font-family: var(--font-family-brand-data); font-size: 11px; line-height: 16px; font-variant-numeric: tabular-nums; }
    @media (prefers-reduced-motion: reduce) { .canvas-symbol-placement, .canvas-symbol-glyph, .canvas-controller-port, .catalog-bom-item, .component-drag-ghost-surface, .component-drag-ghost-icon, .component-drag-ghost-label, .component-drag-ghost-hint, .inspector-tree-disclosure-icon, .inspector-tree-reveal { transition: none; } .planner-selection-actions, .canvas-symbol-leader, .canvas-review-leader-line, .canvas-review-leader-reveal, .materials-header-count, .inspector-tree-connector-path, .inspector-tree-connector-tail, .inspector-tree-output-row.astryx-button, .inspector-tree-node-action.astryx-button { animation: none !important; } .canvas-review-leader-reveal { transform: none !important; } .inspector-tree-connector-path { stroke-dashoffset: 0; } .inspector-tree-connector-tail { transform: scaleY(1); } }
    #canvas-issue-markers-astryx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
    #canvas-issue-markers-astryx > [data-astryx-theme], .canvas-issue-markers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    .canvas-review-leader { position: absolute; z-index: -1; height: 16px; overflow: visible; transform-origin: 0 50%; color: var(--review-leader-tone, rgba(245,241,237,.94)); filter: drop-shadow(0 0 1px rgba(7,10,13,.92)); opacity: .94; pointer-events: none; }
    .canvas-review-leader--error { --review-leader-tone: #ff6b80; }
    .canvas-review-leader--warning { --review-leader-tone: #ffd051; }
    .canvas-review-leader--info { --review-leader-tone: #78b9ff; }
    .canvas-review-leader-line,
    .canvas-review-leader-arrow { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
    .canvas-review-leader-line { stroke-dasharray: 5 6; animation: canvas-review-leader-flow 680ms linear infinite; }
    .canvas-review-leader-reveal { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; animation: canvas-review-leader-reveal 420ms cubic-bezier(.22, 1, .36, 1) 180ms both; }
    @keyframes canvas-review-leader-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -11; } }
    @keyframes canvas-review-leader-reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .canvas-top-controls { position: absolute; z-index: 9; top: 10px; left: 10px; max-height: calc(100% - 20px); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    .canvas-symbol-filter, .canvas-zoom { width: auto; max-width: 100%; }
    .canvas-symbol-filter [data-astryx-theme], .canvas-zoom [data-astryx-theme] { width: max-content; max-width: 100%; }
    .canvas-symbol-filter-control { width: max-content; max-width: 100%; }
    .canvas-floating-control {
      border-radius: var(--radius-element, 10px);
      border-color: transparent;
      background: var(--material-surface);
      background-clip: padding-box;
      box-shadow: var(--material-elevation-low);
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
    }
    .canvas-diagram-action {
      color: rgba(225,222,217,.42) !important;
      transition: color 140ms ease-out, background-color 140ms ease-out;
    }
    .canvas-diagram-action:hover:not(:disabled), .canvas-diagram-action:focus-visible {
      color: var(--text) !important;
    }
    .canvas-diagram-action.is-active { color: var(--run) !important; }
    .canvas-diagram-action.is-hidden-state { color: var(--bad) !important; }
    .canvas-diagram-action.is-labels-hidden { color: var(--warn) !important; }
    .canvas-diagram-action.is-issues-active { color: var(--warn) !important; }
    .canvas-diagram-action.is-disclosure-active { color: var(--run) !important; }
    #canvas-symbol-filter-astryx .canvas-symbol-filter-options button {
      color: rgba(225,222,217,.42) !important;
      transition: color 140ms ease-out, background-color 140ms ease-out;
    }
    #canvas-symbol-filter-astryx .canvas-symbol-filter-options button:hover:not(:disabled), #canvas-symbol-filter-astryx .canvas-symbol-filter-options button:focus-visible {
      color: var(--text) !important;
    }
    #canvas-symbol-filter-astryx .canvas-symbol-filter-options button[aria-pressed="true"] {
      background: var(--material-state-surface);
      color: var(--filter-tone) !important;
      box-shadow: var(--material-elevation-low), inset 0 0 0 1px color-mix(in srgb, var(--filter-tone) 28%, transparent);
    }
    #canvas-symbol-filter-astryx .canvas-symbol-filter-options button[aria-pressed="false"] svg {
      color: rgba(225,222,217,.42) !important;
    }
    #canvas-symbol-filter-astryx .canvas-symbol-filter-options button[aria-pressed="true"] svg {
      color: var(--filter-tone) !important;
    }
    .canvas-symbol-filter-options { max-height: min(310px, calc(100dvh - 120px)); overflow: auto; overscroll-behavior: contain; }
    .canvas-badge { position: static; width: max-content; max-width: min(320px, calc(100vw - 24px)); padding: 6px 9px; border: 0; border-radius: var(--lab-control-radius); background: var(--material-surface-strong); box-shadow: var(--material-elevation-low); font-size: 10px; line-height: 14px; text-align: center; pointer-events: none; backdrop-filter: var(--material-backdrop); -webkit-backdrop-filter: var(--material-backdrop); }
    .canvas-badge span { color: var(--muted); }
    .canvas-tooltip, .cable-length-trigger.astryx-button {
      --canvas-tooltip-tone: var(--line-strong);
      box-sizing: border-box;
      position: absolute;
      z-index: 4;
      min-height: 20px;
      max-width: 280px;
      width: max-content;
      display: grid;
      align-items: center;
      overflow: hidden;
      padding: 3px 7px;
      border: var(--canvas-element-border);
      border-radius: 999px;
      background: var(--material-state-surface);
      background-clip: padding-box;
      box-shadow:none;
      color: var(--text);
      font-family: var(--font-family-brand-data);
      font-size: var(--canvas-symbol-label-font-size, 8px);
      font-weight: 400;
      line-height: calc(var(--canvas-symbol-label-font-size, 8px) + 2px);
      letter-spacing: .08em;
      text-align: left;
      text-overflow: ellipsis;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
      text-transform: uppercase;
      white-space: nowrap;
      pointer-events: none;
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
    }
    .canvas-tooltip[data-tone="run"], .canvas-tooltip[data-tone="run-start"], .canvas-tooltip[data-tone="direction"] { --canvas-tooltip-tone: var(--run); }
    .canvas-tooltip[data-tone="invalid"] { --canvas-tooltip-tone: var(--bad); color: var(--bad); }
    .cable-length-trigger.astryx-button {position:static;display:inline-flex;gap:var(--spacing-1);height:20px;min-height:20px;min-width:20px;max-width:none;pointer-events:auto;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--surface-quiet) 85%,transparent);}
    .cable-length-trigger.astryx-button[data-selected="true"] {background:var(--material-selected-surface);}
    .cable-length-trigger.astryx-button svg {color:var(--extension);width:12px;height:12px;}
    .cable-length-trigger.astryx-button:hover,.cable-length-trigger.astryx-button:focus-visible {border-color:var(--extension);background:var(--material-selected-surface);}
    .cable-length-trigger.astryx-button:focus-visible {outline:2px solid var(--extension);outline-offset:2px;}
    .canvas-tooltip[data-tone="controller"], .canvas-tooltip[data-tone="branch"] { --canvas-tooltip-tone: var(--good); }
    .canvas-tooltip[data-tone="extension"], .canvas-tooltip[data-tone="quick-connector"], .canvas-tooltip[data-tone="cut-termination"], .canvas-tooltip[data-tone="booster"], .canvas-tooltip[data-tone="power-t"], .canvas-tooltip[data-tone="connector"], .canvas-tooltip[data-tone="cut"], .canvas-tooltip[data-tone="power"], .canvas-tooltip[data-tone="cable"] { --canvas-tooltip-tone: var(--extension); }
    .canvas-tooltip[data-tone="mask"] { --canvas-tooltip-tone: var(--mask); }
    .canvas-tooltip[data-tone="calibration"] { --canvas-tooltip-tone: var(--scale); }
    .canvas-tooltip[hidden] { display: none; }
    .canvas-symbol-label-tooltip {
      top: auto;
      right: auto;
      bottom: calc(100% + 12px);
      left: 50%;
      z-index: 3;
      max-width: 180px;
      transform: translateX(-50%);
    }
    .canvas-symbol-size-hub .canvas-symbol-label-tooltip { bottom: calc(100% + 22px); }
    .canvas-empty { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 30px calc(30px + var(--canvas-ui-right-inset)) 30px 30px; background: #0c0e11; color: var(--muted); font-size: 12px; text-align: center; transition: padding-right 280ms cubic-bezier(.22, 1, .36, 1); }
    .canvas-empty[hidden] { display: none; }
    .canvas-empty-content { display: grid; width: min(280px, 100%); justify-items: center; gap: 10px; }
    .canvas-empty-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 15px; }
    .canvas-app-overlay { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; background: #0b0c10; }
    .schematic-reference[data-frontmost="true"] { z-index: 8; }
    .contained-astryx-controls { --focus-outline-offset: 0px; }
    .canvas-app-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0b0c10; }
    .canvas-app-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0b0c10; }
    .canvas-app-loading { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; gap: 8px; background: #0b0c10; color: var(--muted); font-family: var(--font-family-brand-primary); font-size: var(--font-size-base,13px); font-weight: 500; letter-spacing: 0; text-align: center; opacity: 0; pointer-events: none; transition: opacity 160ms ease-out, visibility 0s linear 160ms; visibility: hidden; }
    .canvas-app-overlay[data-loading="true"] .canvas-app-loading { opacity: 1; pointer-events: auto; transition-delay: 0s; visibility: visible; }
    .canvas-app-loading-spinner { width: 18px; height: 18px; margin: 0 auto; border: 2px solid rgba(245,241,237,.24); border-top-color: var(--text); border-radius: 999px; animation: canvas-app-loading-spin 720ms linear infinite; }
    @keyframes canvas-app-loading-spin { to { transform: rotate(360deg); } }
    .floating-corner-resize {
      --floating-resize-offset: 5px;
      --floating-resize-radius: calc(var(--floating-surface-radius) + var(--floating-resize-offset));
      position: absolute;
      z-index: 4;
      top: -8px;
      right: -8px;
      width: 16px;
      height: 16px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      cursor: nesw-resize;
      opacity: 0;
      transition: opacity 140ms ease-out;
    }
    .floating-corner-resize::before {
      content: '';
      position: absolute;
      top: 3px;
      right: 3px;
      width: var(--floating-resize-radius);
      height: var(--floating-resize-radius);
      box-sizing: border-box;
      border-top: 3px solid currentColor;
      border-right: 3px solid currentColor;
      border-radius: 0 var(--floating-resize-radius) 0 0;
      pointer-events: none;
    }
    .floating-corner-resize:hover,
    .floating-corner-resize:active,
    .floating-corner-resize:focus-visible { opacity: 1; }
    .floating-corner-resize:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
    .mobile-canvas-actions { display: none; }
    .mobile-planner-sheet { min-height: 0; }
    .mobile-planner-sheet-heading { min-width: 0; }
    .mobile-planner-sheet-heading strong { display: block; font-size: 14px; line-height: 18px; letter-spacing: -.01em; }
    .mobile-planner-sheet-heading span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 16px; }
    .mobile-planner-sheet-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 18px; }
    .mobile-planner-sheet-selection { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
    .mobile-planner-sheet-selection strong { font-size: 13px; line-height: 18px; }
    .canvas-context-anchor { width: 1px; height: 1px; display: block; pointer-events: none; }
    #canvas-measure-editor-astryx { position: absolute; z-index: 14; inset: 0; pointer-events: none; }
    #canvas-measure-editor-astryx > [data-astryx-theme] { width: 100%; height: 100%; pointer-events: none; }
    #canvas-run-editor-astryx { position: static; z-index: 15; width: max-content; max-width: 100%; pointer-events: none; }
    #canvas-run-editor-astryx:empty { display: none; }
    #canvas-run-editor-astryx > [data-astryx-theme] { width: max-content; max-width: 100%; pointer-events: none; }
    .canvas-measure-editor {
      position: absolute;
      display: grid;
      grid-template-columns: auto auto auto;
      align-items: center;
      gap: 4px;
      width: max-content;
      max-width: calc(100% - 24px);
      padding: 5px;
      border:var(--canvas-element-border);
      border-radius: 999px;
      background: var(--material-surface-strong);
      box-shadow:none;
      transform: translate(12px, -50%);
      pointer-events: auto;
      backdrop-filter: var(--material-backdrop-strong);
      -webkit-backdrop-filter: var(--material-backdrop-strong);
    }
    /* The editor owns the one visible field surface. The NumberInput root is
       deliberately chromeless through its public className slot so a nested
       field can never create a second border or dark container here. */
    .canvas-measure-value.astryx-number-input,
    .canvas-measure-value.astryx-number-input:hover,
    .canvas-measure-value.astryx-number-input:focus-within {
      --font-family-body: var(--font-family-brand-data);
      --text-body-size: var(--font-size-sm);
      --text-body-leading: 1.3334;
      min-width: 0;
      border-width: 0;
      border-color: transparent;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      padding-inline: 8px;
    }
    .canvas-measure-editor:focus-within {
      border-color:var(--focus);
      box-shadow:none;
    }
    .canvas-measure-value input { font-family: var(--font-family-brand-data); font-variant-numeric: tabular-nums; }
    .canvas-measure-action.astryx-button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; }
    .canvas-run-editor {
      position: static;
      display: flex;
      align-items: center;
      gap: 4px;
      width: max-content;
      max-width: 100%;
      min-height: 38px;
      padding: 5px;
      border:var(--canvas-element-border);
      border-radius: 999px;
      background: var(--material-surface-strong);
      box-shadow:none;
      transform: none;
      pointer-events: auto;
      backdrop-filter: var(--material-backdrop-strong);
      -webkit-backdrop-filter: var(--material-backdrop-strong);
    }
    .canvas-run-editor:focus-within {
      border-color:var(--focus);
      box-shadow:none;
    }
    .canvas-run-segment-label {
      padding-inline: 7px 5px;
      color: var(--muted);
      font: 600 10px/1 var(--font-family-brand-data);
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .canvas-run-point-actions { display: flex; align-items: center; gap: 3px; padding-left: 2px; }
    .canvas-run-action.astryx-button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 50%; }
    .canvas-run-corner-menu { min-width: 0; }
    .canvas-run-corner-menu .astryx-button { width: 100%; justify-content: flex-start; }
    [data-astryx-theme="chromaglow-lab"][data-theme="dark"] :is(.canvas-success-action, .installer-coach-confirm).astryx-button[data-variant="primary"] {
      border-color: color-mix(in srgb, var(--good) 58%, transparent);
      background: color-mix(in srgb, var(--good) 20%, var(--material-fill-strong));
      color: var(--good);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 20%, transparent), 0 0 14px color-mix(in srgb, var(--good) 18%, transparent);
    }
    [data-astryx-theme="chromaglow-lab"][data-theme="dark"] :is(.canvas-success-action, .installer-coach-confirm).astryx-button[data-variant="primary"]:hover:not(:disabled),
    [data-astryx-theme="chromaglow-lab"][data-theme="dark"] :is(.canvas-success-action, .installer-coach-confirm).astryx-button[data-variant="primary"]:focus-visible {
      border-color: color-mix(in srgb, var(--good) 78%, transparent);
      background: color-mix(in srgb, var(--good) 28%, var(--material-fill-strong));
      color: color-mix(in srgb, var(--good) 86%, white);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 34%, transparent), 0 0 18px color-mix(in srgb, var(--good) 30%, transparent);
    }
    .canvas-run-name.astryx-text-input,
    .canvas-run-name.astryx-text-input:hover,
    .canvas-run-name.astryx-text-input:focus-within {
      min-width: 0;
      border-width: 0;
      border-color: transparent;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .schematic-reference {
      --schematic-reference-header-height: 32px;
      --schematic-reference-bottom-inset: 12px;
      --floating-surface-radius: 12px;
      --floating-surface-border-width: 1px;
      --floating-surface-inner-radius: max(0px, calc(var(--floating-surface-radius) - var(--floating-surface-border-width)));
      position: absolute;
      z-index: 7;
      left: 12px;
      bottom: var(--schematic-reference-bottom-inset);
      width: 302px;
      display: block;
      overflow: visible;
      border: var(--floating-surface-border-width) solid var(--line-strong);
      border-radius: var(--floating-surface-radius);
      background: #171514;
      box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
      transform: translateY(0);
      transition: transform 180ms cubic-bezier(.2,.8,.2,1);
      contain: layout;
    }
    .schematic-reference[data-resizing="true"] { --floating-surface-border-width: 1px; border-color: #fff; }
    .schematic-reference[data-minimized="true"] { transform: translateY(calc(100% - var(--schematic-reference-header-height) + var(--schematic-reference-bottom-inset) - 1px)); }
    .schematic-reference[data-minimized="true"] .schematic-reference-body { pointer-events: none; }
    .schematic-reference[data-compact-placement="true"] { transform: translateY(0); }
    .schematic-reference[data-compact-placement="true"] .schematic-reference-body { display: none; }
    .schematic-reference header { box-sizing: border-box; height: var(--schematic-reference-header-height); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 9px; overflow: hidden; border-bottom: 1px solid var(--line); border-radius: var(--floating-surface-inner-radius) var(--floating-surface-inner-radius) 0 0; background: var(--surface); cursor: grab; touch-action: none; user-select: none; }
    .schematic-reference header:active { cursor: grabbing; }
    .schematic-reference-title { min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
    .schematic-reference-title strong { flex: 0 0 auto; overflow: hidden; font-size: 11px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
    .schematic-reference-title span { flex: 0 1 auto; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .schematic-reference-body { min-height: 0; max-height: min(52dvh, 500px); overflow: auto; border-radius: 0 0 var(--floating-surface-inner-radius) var(--floating-surface-inner-radius); background: #f8f8f7; }
    .schematic-reference img { width: 100%; display: block; object-fit: contain; background: #fff; }
    .schematic-reference p { margin: 0; padding: 8px 10px 10px; color: #5f5953; font-size: 10px; line-height: 15px; }
    .schematic-reference[data-empty="true"] .schematic-reference-body { display: grid; min-height: 92px; align-content: center; }
    .schematic-reference[data-empty="true"] img { display: none; }
    #schematic-reference-controls-astryx, #schematic-reference-controls-astryx [data-astryx-theme] { width: max-content; }

    .plan-rail { position: absolute; z-index: 10; inset: auto calc(12px + var(--canvas-ui-right-inset)) var(--canvas-panel-inset) 12px; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; overflow: hidden; border: 0; border-radius: var(--lab-surface-radius); background: var(--material-surface-strong); box-shadow: var(--material-elevation-medium); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 12px, 0) scale(.985); transform-origin: 50% 100%; will-change: transform, opacity; backdrop-filter: var(--material-backdrop-strong); -webkit-backdrop-filter: var(--material-backdrop-strong); transition: right var(--planner-panel-motion-duration) var(--planner-panel-motion-ease), opacity 180ms ease-out, transform var(--planner-panel-motion-duration) var(--planner-panel-motion-ease), visibility 0s linear var(--planner-panel-motion-duration); }
    body[data-lab-mode="installation"]:not([data-practice-setup="true"]) .workspace[data-plan-bottom-panel-open="true"] .plan-rail { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0ms, 0ms, 0ms; }
    .rail-card { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 11px 10px; background: transparent; }
    .rail-card + .rail-card { border-left: 1px solid var(--material-border-color); }
    .rail-card-label { display: flex; min-width: 0; align-items: center; gap: 2px; color: var(--faint); font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: .06em; }
    .rail-card-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rail-card-label > [id$="-info-astryx"] { display: inline-flex; flex: 0 0 auto; }
    #selection-summary-astryx {grid-column:1/-1;min-width:0;}
    #selection-summary-astryx:empty {display:none;}
    .plan-rail:has(#selection-summary-astryx:not(:empty))>.rail-card {display:none;}
    .selection-rail {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:1fr;min-width:0;}
    .selection-rail .rail-card {min-height:72px;}
    .selection-output-chart[data-single="true"] {height:var(--spacing-2);margin-block:var(--spacing-2);}
    .selection-output-chart[data-single="true"] .selection-output-column {align-items:stretch;}
    .selection-output-chart {display:flex;align-items:end;gap:var(--spacing-2);height:26px;margin-block:3px;}
    .selection-output-column {flex:1;height:100%;display:flex;align-items:end;background:color-mix(in srgb,var(--text) 8%,transparent);border-radius:var(--radius-inner);overflow:hidden;}
    .selection-output-column > span {width:100%;min-height:2px;transition:height 200ms ease,background-color 200ms ease;}
    .plan-rail-info.astryx-button { width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0; color: var(--faint); }
    .plan-rail-info.astryx-button:hover { color: var(--text); }
    body .plan-rail-info-surface {
      border: 0;
      background: var(--material-surface);
      box-shadow: var(--material-elevation-medium);
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
    }
    .plan-rail-info-popover { min-width: 0; padding: 2px; }
    .plan-rail-info-popover > strong { color: var(--text); font-size: 13px; line-height: 18px; }
    .plan-rail-info-popover p { margin: 0; color: var(--muted); font-size: 11px; line-height: 16px; }
    .plan-rail-info-popover .plan-rail-info-current { display: grid; gap: 1px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--text); font-family: var(--font-family-brand-data); font-variant-numeric: tabular-nums; }
    .plan-rail-info-current strong { color: var(--faint); font-family: var(--font-family-brand-primary); font-size: 10px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; }
    .rail-card > strong { display: block; margin-top: 1px; overflow: hidden; font-family: var(--font-family-brand-numeric); font-size: 14px; line-height: 19px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
    .rail-card small { display: block; margin-top: 1px; color: var(--muted); font-family: var(--font-family-brand-primary); font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; }
    .rail-card[data-tone="danger"] { background: color-mix(in srgb, var(--bad) 9%, transparent); }
    .plan-rail[data-power-state="danger"] { background: color-mix(in srgb, var(--bad) 16%, var(--material-surface-strong)); border-color: color-mix(in srgb, var(--bad) 60%, var(--material-border-color)); }
    .rail-card[data-tone="danger"] :is(.rail-card-label, strong, small) { color: var(--bad); }
    .rail-card-label.is-metric-entering-up,
    .rail-card small.is-metric-entering-up { animation: rail-copy-enter-up 260ms cubic-bezier(.22, 1, .36, 1) both; }
    .rail-card-label.is-metric-entering-down,
    .rail-card small.is-metric-entering-down { animation: rail-copy-enter-down 260ms cubic-bezier(.22, 1, .36, 1) both; }
    @keyframes rail-copy-enter-up {
      from { opacity: 0; filter: blur(2px); transform: translateY(4px); }
      to { opacity: 1; filter: blur(0); transform: translateY(0); }
    }
    @keyframes rail-copy-enter-down {
      from { opacity: 0; filter: blur(2px); transform: translateY(-4px); }
      to { opacity: 1; filter: blur(0); transform: translateY(0); }
    }
    .component-strip { position: absolute; z-index: 11; right: var(--canvas-ui-right-inset); bottom: calc(var(--canvas-panel-gap) + var(--active-bottom-panel-height)); left: 0; display: grid; width: max-content; max-width: calc(100% - var(--canvas-ui-right-inset) - 24px); margin-inline: auto; justify-items: center; gap: 8px; overflow: visible; opacity: 1; transition: right var(--planner-panel-motion-duration) var(--planner-panel-motion-ease), bottom var(--planner-panel-motion-duration) var(--planner-panel-motion-ease), opacity 180ms ease-out; }
    .component-palette--bottom { display: grid; min-width: 0; width: max-content; max-width: 100%; justify-items: center; gap: 8px; }
    .planner-context-rail {
      display: flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      gap: var(--planner-minibar-gap);
      padding: 4px;
      overflow-x: auto;
      border: 0;
      border-radius: calc(var(--radius-container) + var(--spacing-1));
      background: var(--material-surface-strong);
      box-shadow: var(--material-elevation-low);
      backdrop-filter: var(--material-backdrop-strong);
      -webkit-backdrop-filter: var(--material-backdrop-strong);
      scrollbar-width: none;
      animation: planner-context-enter 180ms cubic-bezier(.22, 1, .36, 1) both;
    }
    .planner-context-rail::-webkit-scrollbar { display: none; }
    .planner-context-action.astryx-button {
      width: 38px;
      min-width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: var(--radius-container);
      background: transparent;
      color: var(--muted);
      box-shadow: none;
    }
    .planner-context-action-icon { position: relative; display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; line-height: 0; }
    .planner-context-action-icon svg { display: block; width: 100%; height: 100%; }
    .planner-context-action-state {
      position: absolute;
      right: -5px;
      bottom: -5px;
      display: grid;
      width: 10px;
      height: 10px;
      place-items: center;
      color: currentColor;
      filter: drop-shadow(0 1px 2px rgb(0 0 0 / .72));
      pointer-events: none;
    }
    .planner-context-action-state > span { grid-area: 1 / 1; display: grid; width: 10px; height: 10px; place-items: center; transition: opacity 140ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1); }
    .planner-context-action-state svg { width: 10px; height: 10px; }
    .planner-context-action-state-current { opacity: .84; transform: scale(1); }
    .planner-context-action-state-next { opacity: 0; transform: scale(.72); }
    .planner-context-action.astryx-button[data-has-next-state="true"]:is(:hover, :focus-visible) .planner-context-action-state-current { opacity: 0; transform: scale(.72); }
    .planner-context-action.astryx-button[data-has-next-state="true"]:is(:hover, :focus-visible) .planner-context-action-state-next { opacity: .6; transform: scale(1); }
    .planner-context-action.astryx-button svg [stroke] { stroke-width: 1.35; }
    .planner-context-action.astryx-button:hover:not(:disabled),
    .planner-context-action.astryx-button:focus-visible,
    .planner-context-action.astryx-button[data-open="true"] { border-color: transparent; background: var(--material-surface); color: var(--text); box-shadow: var(--material-elevation-low), 0 0 14px color-mix(in srgb, var(--text) 12%, transparent); }
    .planner-context-action.astryx-button[data-active="true"] { border-color: transparent; background:var(--material-selected-surface); color: var(--good); box-shadow: var(--material-elevation-low); }
    .planner-context-action.astryx-button[data-active="true"]:is(:hover, :focus-visible):not(:disabled) { border-color: transparent; background: var(--material-surface-strong); color: color-mix(in srgb, var(--good) 86%, white); box-shadow: var(--material-elevation-low), 0 0 16px color-mix(in srgb, var(--good) 24%, transparent); }
    .planner-context-action.astryx-button[data-tone="neutral"] { --planner-context-tone: var(--text); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="lighting"] { --planner-context-tone: var(--run); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="control"] { --planner-context-tone: var(--good); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="cable"] { --planner-context-tone: var(--extension); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="topology"] { --planner-context-tone: var(--good); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="signal"] { --planner-context-tone: var(--measure); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="mask"] { --planner-context-tone: var(--mask); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="time"] { --planner-context-tone: var(--time); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="electrical"] { --planner-context-tone: var(--measure); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone="custom"] { --planner-context-tone: var(--mask); color: var(--planner-context-tone); }
    .planner-context-action.astryx-button[data-tone][data-active="true"] {
      border-color: transparent;
      background: var(--material-state-surface);
      color: var(--planner-context-tone);
      box-shadow: var(--material-elevation-low), inset 0 0 0 1px color-mix(in srgb, var(--planner-context-tone) 28%, transparent);
    }
    .planner-context-action.astryx-button[data-tone]:hover:not(:disabled):not([data-active="true"]),
    .planner-context-action.astryx-button[data-tone]:focus-visible:not([data-active="true"]) {
      border-color: transparent;
      background: var(--material-state-surface);
      color: var(--planner-context-tone);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--planner-context-tone) 22%, transparent), 0 0 14px color-mix(in srgb, var(--planner-context-tone) 14%, transparent);
    }
    .planner-context-action.astryx-button[data-tone][data-active="true"]:is(:hover, :focus-visible):not(:disabled) {
      border-color: transparent;
      background: var(--material-state-surface);
      color: color-mix(in srgb, var(--planner-context-tone) 86%, white);
      box-shadow: var(--material-elevation-low), inset 0 0 0 1px color-mix(in srgb, var(--planner-context-tone) 46%, transparent), 0 0 16px color-mix(in srgb, var(--planner-context-tone) 26%, transparent);
    }
    .planner-context-action.astryx-button[data-destructive="true"] { color: var(--color-text-red); }
    .planner-context-action.astryx-button[data-destructive="true"]:hover:not(:disabled),
    .planner-context-action.astryx-button[data-destructive="true"]:focus-visible { border-color: transparent; background: var(--material-state-surface); color: color-mix(in srgb, var(--color-text-red) 86%, white); box-shadow: var(--material-elevation-low), 0 0 15px color-mix(in srgb, var(--color-text-red) 24%, transparent); }
    .planner-context-filter-group { display: flex; flex: 0 0 auto; align-items: center; }
    .planner-context-filter-group [data-planner-filter="true"].astryx-button {
      width: 38px;
      min-width: 38px;
      height: 38px;
      min-height: 38px;
      padding: 0;
      border: 1px solid transparent;
      border-radius: var(--lab-control-radius);
      background: transparent;
      color: var(--muted);
      box-shadow: none;
    }
    .planner-context-filter-group [data-planner-filter="true"].astryx-button svg { width: 20px; height: 20px; color: inherit; }
    .planner-context-filter-group [data-planner-filter="true"].astryx-button svg [stroke] { stroke-width: 1.35; }
    .planner-context-filter-group [data-planner-filter="true"].astryx-button:is(:hover, :focus-visible):not(:disabled):not([aria-pressed="true"]) { border-color: transparent; background: transparent; color: var(--filter-tone); box-shadow: 0 0 14px color-mix(in srgb, var(--filter-tone) 20%, transparent); }
    .planner-context-filter-group [data-planner-filter="true"].astryx-button[aria-pressed="true"] { border-color: transparent; background: var(--material-state-surface); color: var(--filter-tone); box-shadow: var(--material-elevation-low), inset 0 0 0 1px color-mix(in srgb, var(--filter-tone) 28%, transparent); }
    .planner-context-filter-group [data-planner-filter="true"].astryx-button[aria-pressed="true"]:is(:hover, :focus-visible) { box-shadow: var(--material-elevation-low), inset 0 0 0 1px color-mix(in srgb, var(--filter-tone) 40%, transparent), 0 0 15px color-mix(in srgb, var(--filter-tone) 18%, transparent); }
    .planner-context-divider { flex: 0 0 1px; width: 1px; height: 22px; margin-inline: 1px; background: var(--material-border-highlight); }
    .planner-custom-overlay-menu { min-width: 0; max-height: min(430px, calc(100dvh - 250px)); padding-inline-end: 2px; overflow: auto; }
    .planner-tool-menu .astryx-switch-label { color: var(--text); font-size: 12px; font-weight: 600; line-height: 16px; }
    .planner-tool-menu .astryx-switch-label svg { width: 16px; height: 16px; color: var(--muted); }
    .planner-custom-overlay-divider { width: 100%; height: 1px; background: var(--material-border-highlight); }
    @keyframes planner-context-enter {
      from { opacity: 0; transform: translateY(5px) scale(.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .planner-tool-pill {
      display: flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      gap: var(--planner-toolbar-gap);
      padding: 6px;
      overflow-x: auto;
      border: 0;
      border-radius: 999px;
      background: var(--material-surface-strong);
      box-shadow: var(--material-elevation-medium);
      backdrop-filter: var(--material-backdrop-strong);
      -webkit-backdrop-filter: var(--material-backdrop-strong);
      scrollbar-width: none;
    }
    .planner-tool-pill::-webkit-scrollbar { display: none; }
    .planner-tool-group { display: flex; flex: 0 0 auto; align-items: center; gap: var(--planner-toolbar-gap); }
    .planner-tool-divider { flex: 0 0 1px; width: 1px; height: 30px; margin-inline: 1px; background: var(--material-border-highlight); }
    :is(.planner-tool-button, .planner-tool-menu-trigger, .planner-context-action)[data-guided="true"] {
      --lesson-tool-color: var(--planner-tool-tone, var(--bsl-teal-soft));
      animation: tutorial-tool-attention 2.2s ease-in-out infinite;
    }
    :is(.planner-tool-button, .planner-tool-menu-trigger, .planner-context-action)[data-guided="true"]:is(:hover,:focus-visible) { animation-play-state: paused; }
    @keyframes tutorial-tool-attention {
      0%,100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lesson-tool-color) 55%, transparent); }
      45% { box-shadow: inset 0 0 0 2px var(--lesson-tool-color), 0 0 12px color-mix(in srgb, var(--lesson-tool-color) 30%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) {
      .component-palette :is(.planner-tool-button, .planner-tool-menu-trigger, .planner-context-action)[data-guided="true"] { animation: none; box-shadow: inset 0 0 0 2px var(--lesson-tool-color); }
    }
    .planner-tool-split { position: relative; isolation: isolate; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0; color: var(--muted); }
    .planner-tool-split[data-tone]::before {
      content: '';
      position: absolute;
      z-index: 0;
      top: 24px;
      left: 24px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--planner-tool-tone);
      filter: blur(11px);
      opacity: 0;
      transform: translate(-50%, -50%) scale(.68);
      transition: opacity 160ms ease-out, transform 200ms cubic-bezier(.22, 1, .36, 1);
      pointer-events: none;
    }
    .planner-tool-split[data-tone][data-active="true"]::before,
    .planner-tool-split[data-tone]:has(.planner-tool-button:hover)::before,
    .planner-tool-split[data-tone]:has(.planner-tool-button:focus-visible)::before {
      opacity: .46;
      transform: translate(-50%, -50%) scale(1);
    }
    .planner-tool-split[data-has-menu="true"] { margin-right: 1px; }
    .planner-tool-button.astryx-button { position: relative; z-index: 1; width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; overflow: visible; border: 1px solid transparent; border-radius: 50%; color: inherit; box-shadow: none; }
    .planner-tool-menu-trigger.astryx-button { position: relative; z-index: 2; width: 26px; min-width: 26px; height: 26px; min-height: 26px; margin-left: -6px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--faint); box-shadow: none; }
    .planner-tool-menu-trigger.astryx-button svg { width: 11px; height: 11px; transition: transform 160ms ease-out; }
    .planner-tool-menu-trigger.astryx-button[data-open="true"] svg { transform: rotate(180deg); }
    .planner-tool-button.astryx-button:hover:not(:disabled),
    .planner-tool-button.astryx-button:focus-visible { border-color: transparent; background: var(--material-surface); color: var(--text); box-shadow: var(--material-elevation-low), 0 0 14px color-mix(in srgb, var(--text) 12%, transparent); }
    .planner-tool-button.astryx-button[data-active="true"] { border-color: transparent; background:var(--material-selected-surface); color: var(--text); box-shadow: var(--material-elevation-low); }
    .planner-tool-button.astryx-button[data-active="true"]:is(:hover, :focus-visible):not(:disabled) { border-color: transparent; background: var(--material-selected-surface); color: var(--text); box-shadow: var(--material-elevation-low), 0 0 16px color-mix(in srgb, currentColor 18%, transparent); }
    .planner-tool-menu-trigger.astryx-button:hover:not(:disabled),
    .planner-tool-menu-trigger.astryx-button:focus-visible,
    .planner-tool-menu-trigger.astryx-button[data-open="true"] { border-color: color-mix(in srgb, var(--text) 16%, transparent); background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); box-shadow: none; }
    .planner-tool-icon { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; line-height: 0; }
    .planner-tool-icon svg { display: block; width: 22px; height: 22px; }
    .planner-tool-icon svg [stroke] { stroke-width: 1.35; }
    .planner-tool-split[data-tone="control"] { --planner-tool-tone: var(--good); color: var(--planner-tool-tone); }
    .planner-tool-split[data-tone="lighting"] { --planner-tool-tone: var(--run); color: var(--planner-tool-tone); }
    .planner-tool-split[data-tone="cable"] { --planner-tool-tone: var(--extension); color: var(--planner-tool-tone); }
    .planner-tool-split[data-tone="mask"] { --planner-tool-tone: var(--mask); color: var(--planner-tool-tone); }
    .planner-tool-split[data-tone="measure"] { --planner-tool-tone: var(--measure); color: var(--planner-tool-tone); }
    .planner-tool-split[data-tone="time"] { --planner-tool-tone: var(--time); color: var(--planner-tool-tone); }
    .planner-tool-button.astryx-button[data-tone="control"] { --planner-tool-tone: var(--good); color: var(--planner-tool-tone); }
    .planner-tool-button.astryx-button[data-tone="lighting"] { --planner-tool-tone: var(--run); color: var(--planner-tool-tone); }
    .planner-tool-button.astryx-button[data-tone="cable"] { --planner-tool-tone: var(--extension); color: var(--planner-tool-tone); }
    .planner-tool-button.astryx-button[data-tone="mask"] { --planner-tool-tone: var(--mask); color: var(--planner-tool-tone); }
    .planner-tool-button.astryx-button[data-tone="measure"] { --planner-tool-tone: var(--measure); color: var(--planner-tool-tone); }
    .planner-tool-button.astryx-button[data-tone="time"] { --planner-tool-tone: var(--time); color: var(--planner-tool-tone); }
    .planner-tool-component[data-tone] .planner-tool-icon { color: currentColor; }
    .planner-tool-split[data-tone] .planner-tool-button.astryx-button:hover:not(:disabled),
    .planner-tool-button.astryx-button[data-active="true"]:focus-visible {background:var(--material-selected-surface);}
    .planner-tool-split[data-tone] .planner-tool-button.astryx-button:focus-visible { border-color: transparent; background: var(--material-selected-surface); color: color-mix(in srgb, var(--planner-tool-tone) 86%, white); box-shadow: var(--material-elevation-low), 0 0 16px color-mix(in srgb, var(--planner-tool-tone) 24%, transparent); }
    .planner-tool-component[data-tone]:focus-visible { color: var(--planner-tool-tone); }
    .planner-mode-button:first-child { color: #78b9ff; }
    .planner-mode-button:last-child { color: #ffd051; }
    .planner-tool-menu { min-width: 0; }
    .planner-tool-menu-heading { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; }
    .planner-tool-menu-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--surface-raised) 82%, transparent); color: var(--text); }
    .planner-tool-menu-icon svg { width: 16px; height: 16px; }
    .planner-tool-menu-heading > div { min-width: 0; display: grid; gap: 2px; }
    .planner-tool-menu-heading strong { color: var(--text); font-size: 12px; font-weight: 700; line-height: 16px; }
    .planner-tool-menu-heading p,
    .planner-tool-menu-note,
    .planner-tool-menu-info p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 14px; }
    .planner-tool-menu-info { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
    .planner-tool-menu-info > span { color: var(--faint); font-size: 9px; font-weight: 700; line-height: 13px; letter-spacing: .06em; text-transform: uppercase; }
    body .planner-tool-hover-surface { margin-bottom: 10px; border: 0; background: var(--material-surface); box-shadow: var(--material-elevation-low); backdrop-filter: var(--material-backdrop); -webkit-backdrop-filter: var(--material-backdrop); }
    body.is-component-dragging .planner-tool-hover-surface { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
    .planner-tool-hover-card { display: grid; gap: 7px; align-items: start; }
    .planner-tool-hover-heading { display: flex; min-width: 0; align-items: center; gap: 7px; }
    .planner-tool-hover-icon { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; color: var(--planner-hover-tone, var(--text)); }
    .planner-tool-hover-icon svg { width: 20px; height: 20px; }
    .planner-tool-hover-heading strong { color: var(--text); font-size: 12px; font-weight: 700; line-height: 16px; }
    .planner-tool-hover-copy { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
    .planner-tool-hover-copy p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 14px; }
    .planner-tool-hover-more.astryx-button { flex: 0 0 auto; min-width: 0; min-height: 24px; height: 24px; padding: 0 7px; border: 0; border-radius: var(--lab-control-radius); background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); box-shadow: none; font-size: 10px; font-weight: 600; line-height: 14px; }
    .planner-tool-hover-more.astryx-button:hover:not(:disabled),
    .planner-tool-hover-more.astryx-button:focus-visible { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
    .planner-tool-hover-card[data-tone="control"], .planner-tool-info-header-icon[data-tone="control"] { --planner-hover-tone: var(--good); }
    .planner-tool-hover-card[data-tone="lighting"], .planner-tool-info-header-icon[data-tone="lighting"] { --planner-hover-tone: var(--run); }
    .planner-tool-hover-card[data-tone="mask"], .planner-tool-info-header-icon[data-tone="mask"] { --planner-hover-tone: var(--mask); }
    .planner-tool-hover-card[data-tone="measure"], .planner-tool-info-header-icon[data-tone="measure"] { --planner-hover-tone: var(--measure); }
    .planner-tool-hover-card[data-tone="cable"], .planner-tool-info-header-icon[data-tone="cable"] { --planner-hover-tone: var(--extension); }
    .planner-tool-info-header { display: grid; gap: 12px; }
    .planner-tool-info-title-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
    .planner-tool-info-title { display: flex; min-width: 0; align-items: center; gap: 12px; }
    .planner-tool-info-heading { margin: 0; font-size: 22px; line-height: 28px; }
    .planner-tool-info-dialog { padding-block: 0; }
    .planner-tool-info-summary { margin: 0; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 18px; text-wrap: balance; }
    .planner-tool-info-header-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; color: var(--planner-hover-tone, var(--text)); }
    .planner-tool-info-header-icon svg { width: 30px; height: 30px; }
    .planner-tool-info-section p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 17px; }
    .planner-tool-info-section { display: grid; gap: 3px; }
    .planner-tool-info-section > span { color: var(--faint); font-size: 10px; font-weight: 700; line-height: 14px; letter-spacing: .05em; text-transform: uppercase; }


    #canvas-toast-astryx { width: min(320px, 100%); display: flex; justify-content: center; pointer-events: none; }
    #canvas-toast-astryx > [data-astryx-theme] { width: min(320px, 100%); }
    .canvas-toast-notice {position:fixed;left:50%;top:calc(var(--lab-header-height) + var(--spacing-3));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);z-index:10000;pointer-events:auto;animation:toast-arrive 220ms ease-out both;}
    @keyframes toast-arrive {from{opacity:0;translate:0 -8px;}to{opacity:1;translate:0 0;}}
    @media(prefers-reduced-motion:reduce){.canvas-toast-notice{animation:none;}}
    .canvas-toast-notice .astryx-toast { width: 100%; min-width: 0; color: var(--text); box-shadow: var(--material-elevation-medium); }
    .canvas-toast-notice .astryx-toast [data-astryx-media] { color: var(--text); }
    .canvas-toast-notice .astryx-toast .astryx-button { min-height: 26px; color: var(--text); font-size: 10px; }
    #canvas-practice-target-astryx, #canvas-practice-target-astryx > [data-astryx-theme] { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
    body[data-lab-mode="preview"]:not([data-preview-tool="mask"]) #canvas-practice-target-astryx { display: none; }
    .practice-canvas-target { --target-color: var(--run); position: absolute; width: var(--target-diameter); height: var(--target-diameter); border:0;border-radius:50%;padding:0;background:transparent;transform: translate(-50%,-50%); color: var(--target-color); cursor:pointer;pointer-events:auto; transition: opacity 160ms ease-out; }
    .practice-canvas-target:focus-visible { outline:var(--focus-outline-width,2px) solid var(--target-color);outline-offset:6px; }
    .practice-canvas-target[data-kind="controller"] { --target-color: var(--good); }
    .practice-canvas-target:is([data-kind="extension"],[data-kind="connector"]) { --target-color: var(--extension); }
    .practice-canvas-target[data-kind="mask"] { --target-color: var(--mask); }
    .practice-canvas-target[data-kind="measure"] { --target-color: var(--measure); }
    .practice-canvas-target[data-kind="warning"] { --target-color: var(--bad); }
    .practice-target-arrival { position: absolute; inset: 0; animation: practice-target-intro 650ms cubic-bezier(.22,1,.36,1) both; }
    .practice-target-ring { position: absolute; inset: 0; border: var(--canvas-element-border-width) dashed var(--target-color); border-radius: 50%; background: color-mix(in srgb,var(--target-color) 7%,transparent); transform: scale(var(--target-growth)); transition: transform 160ms cubic-bezier(.22,1,.36,1), background 160ms ease-out, box-shadow 160ms ease-out; }
    .practice-canvas-target[data-ready="true"] .practice-target-ring { border-style: solid; background: color-mix(in srgb,var(--target-color) 15%,transparent); box-shadow: 0 0 12px color-mix(in srgb,var(--target-color) 24%,transparent); }
    .practice-canvas-target[data-ready="true"] .practice-target-ring::after { content: ''; position: absolute; inset: -3px; border: 1px solid var(--target-color); border-radius: inherit; animation: practice-target-arrive 420ms ease-out both; }
    .practice-target-entity, .practice-target-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
    .practice-target-entity .canvas-symbol-glyph { pointer-events: none; }
    .practice-canvas-target:is([data-kind="extension"],[data-kind="connector"]) .canvas-symbol-glyph { background: var(--extension); color: var(--color-on-accent); border-color: var(--color-on-accent); }
    .practice-target-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--target-color); }
    .practice-target-caption { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: var(--lab-control-radius); background: var(--material-surface-strong); color: var(--target-color); font-size: 13px; font-weight: 800; line-height: 18px; }
    .practice-canvas-target[data-caption="above"] .practice-target-caption { top: auto; bottom: calc(100% + 12px); }
    .practice-canvas-target[data-caption="left"] .practice-target-caption { top: 50%; left: auto; right: calc(100% + 12px); transform: translateY(-50%); }
    .practice-canvas-target[data-caption="right"] .practice-target-caption { top: 50%; left: calc(100% + 12px); transform: translateY(-50%); }
    @keyframes practice-target-intro { 0% { opacity: .35; transform: scale(.86); } 45% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
    @media (prefers-reduced-motion: reduce) { .practice-target-arrival { animation: none; } .practice-target-ring { transform: none; transition: none; } .practice-canvas-target[data-ready="true"] .practice-target-ring::after { animation: none; opacity: 0; } }
    .practice-placement-confirmation { position: absolute; width: var(--canvas-symbol-size); height: var(--canvas-symbol-size); border: var(--canvas-element-border-width) solid var(--good); border-radius: 50%; transform: translate(-50%, -50%); animation: practice-placement-confirm 550ms ease-out both; }
    @keyframes practice-target-arrive { from { opacity: .6; transform: scale(.92); } to { opacity: 0; transform: scale(1.3); } }
    @keyframes practice-placement-confirm { from { opacity: .8; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.65); } }
    @media (prefers-reduced-motion: reduce) { .practice-placement-confirmation { animation: none; } }
    #canvas-placement-cursor-astryx { position: absolute; z-index: 18; inset: 0; pointer-events: none; }
    #canvas-placement-cursor-astryx > [data-astryx-theme] { position: absolute; inset: 0; pointer-events: none; }
    .canvas-frame[data-placement-active="true"] :is(#canvas-symbol-markers-astryx, #canvas-issue-markers-astryx) { pointer-events: none; }
    .canvas-frame[data-placement-active="true"] :is(#canvas-symbol-markers-astryx, #canvas-issue-markers-astryx) * { pointer-events: none; }
    .canvas-placement-cursor {
      --placement-tone: var(--text);
      position: absolute;
      left: var(--cursor-x);
      top: var(--cursor-y);
      width: 0;
      height: 0;
      color: var(--placement-tone);
      transform: translateZ(0);
      pointer-events: none;
    }
    .canvas-placement-cursor[data-tone="control"] { --placement-tone: var(--good); }
    .canvas-placement-cursor[data-tone="lighting"] { --placement-tone: var(--run); }
    .canvas-placement-cursor[data-tone="cable"] { --placement-tone: var(--extension); }
    .canvas-placement-cursor[data-tone="signal"] { --placement-tone: var(--measure); }
    .canvas-placement-cursor[data-tone="mask"] { --placement-tone: var(--mask); }
    .canvas-placement-cursor[data-tone="measure"] { --placement-tone: var(--measure); }
    .canvas-placement-cursor[data-state="blocked"] { --placement-tone: var(--bad); }
    .canvas-placement-cursor[data-state="warning"] { --placement-tone: var(--warn); }
    .canvas-placement-cursor-icon {
      position: absolute;
      left: 0;
      top: 0;
      display: grid;
      width: 26px;
      height: 26px;
      place-items: center;
      border:var(--canvas-element-border);
      border-radius:50%;
      background: var(--material-surface-strong);
      color: var(--placement-tone);
      box-shadow:none;
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
      transform: translate(-50%, -50%);
      transition: color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
    }
    .canvas-placement-cursor-icon svg { width:16px;height:16px; }
    .canvas-placement-cursor-icon-art { display: grid; width:16px;height:16px; place-items: center; transform-origin: 50% 50%; transition: transform 80ms linear; }
    .canvas-placement-cursor:not([data-precision="none"]) .canvas-placement-cursor-icon {
      transform: translate(3px, 3px);
    }
    .canvas-placement-cursor[data-state="ready"] .canvas-placement-cursor-icon {
      border-color:var(--placement-tone);
      box-shadow:none;
    }
    .canvas-placement-cursor-tip {
      position: absolute;
      z-index: 2;
      left: -4px;
      top: -4px;
      display: grid;
      width: 17px;
      height: 17px;
      place-items: center;
      color: var(--text);
      filter: drop-shadow(0 1px 1px rgb(0 0 0 / 88%)) drop-shadow(0 0 3px rgb(0 0 0 / 62%));
    }

    .canvas-placement-cursor-tip svg { width: 17px; height: 17px; }
    .canvas-placement-cursor[data-state="blocked"] .canvas-placement-cursor-tip { color: var(--bad); }
    .canvas-placement-cursor-invalid {
      position: absolute;
      z-index: 3;
      left: 26px;
      top: -4px;
      display: grid;
      width: 17px;
      height: 17px;
      place-items: center;
      border-radius: 50%;
      background: var(--bad);
      color: var(--surface);
      box-shadow: 0 2px 7px rgb(0 0 0 / 38%), 0 0 11px color-mix(in srgb, var(--bad) 42%, transparent);
    }
    .canvas-placement-cursor-invalid svg { width: 11px; height: 11px; stroke-width: 2; }
    .canvas-placement-cursor-copy {
      position: absolute;
      left: 20px;
      top: -20px;
      display: grid;
      width: max-content;
      min-width: 0;
      max-width: 260px;
      gap: 0;
      padding: 6px 9px 7px;
      border-radius: var(--radius-container);
      background: var(--material-surface-strong);
      border:var(--canvas-element-border);
      box-shadow:none;
      backdrop-filter: var(--material-backdrop);
      -webkit-backdrop-filter: var(--material-backdrop);
    }
    .canvas-placement-cursor:not([data-precision="none"]) .canvas-placement-cursor-copy { left: 42px; top: 3px; }
    .canvas-placement-cursor[data-flip-x="true"] .canvas-placement-cursor-copy { right: 20px; left: auto; }
    .canvas-placement-cursor:not([data-precision="none"])[data-flip-x="true"] .canvas-placement-cursor-copy { right: 8px; }
    .canvas-placement-cursor[data-flip-y="true"] .canvas-placement-cursor-copy { top: auto; bottom: 20px; }
    .canvas-placement-cursor:not([data-precision="none"])[data-flip-y="true"] .canvas-placement-cursor-copy { bottom: 8px; }
    .canvas-placement-cursor-copy strong { color: var(--text); font-size: 11px; font-weight: 700; line-height: 15px; }
    .canvas-placement-cursor-copy > span { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 14px; }
    .canvas-placement-cursor[data-state="ready"] .canvas-placement-cursor-copy > span { color: color-mix(in srgb, var(--placement-tone) 72%, var(--text)); }
    .canvas-placement-cursor[data-state="blocked"] .canvas-placement-cursor-copy > span { color: var(--bad); }
    .inspector-installation-layer,
    .inspector-preview-layer { min-width: 0; min-height: 0; }
    .inspector-installation-layer { display: flex; flex: 1 1 auto; width: 100%; flex-direction: column; overflow: hidden; }
    .inspector-preview-layer { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; opacity: 0; pointer-events: none; visibility: hidden; }
    .reference-library { display: flex; width: 100%; height: 100%; min-height: 0; flex-direction: column; padding: 12px; overflow: auto; }
    .reference-library-heading { display: grid; gap: 2px; margin-bottom: 10px; }
    .reference-library-heading strong { font-size: 13px; font-weight: 650; line-height: 18px; }
    .reference-library-heading span { color: var(--muted); font-size: 11px; line-height: 15px; }
    .reference-drop-zone { display: grid; width: 100%; min-height: 104px; place-items: center; gap: 5px; padding: 16px; border: 1px dashed color-mix(in srgb, var(--text) 24%, transparent); border-radius: var(--lab-surface-radius); background: color-mix(in srgb, var(--surface-raised) 66%, transparent); color: var(--muted); text-align: center; transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out; }
    .reference-drop-zone:hover,
    .reference-drop-zone:focus-visible,
    .reference-drop-zone[data-dragging="true"] { border-color: color-mix(in srgb, var(--color-accent) 65%, transparent); background: color-mix(in srgb, var(--color-accent) 9%, var(--surface-raised)); color: var(--text); }
    .reference-drop-zone svg { width: 18px; height: 18px; color: var(--color-accent); }
    .reference-drop-zone strong { font-size: 12px; font-weight: 650; line-height: 16px; }
    .reference-drop-zone span { max-width: 250px; font-size: 10px; line-height: 14px; }
    .reference-drop-zone[hidden] { display: none; }
    .canvas-empty .reference-drop-zone { min-height: 88px; cursor: pointer; }
    .reference-drop-zone[data-practice="true"] { color: var(--text); border-color: color-mix(in srgb, var(--bsl-teal-soft) 65%, transparent); background: color-mix(in srgb, var(--bsl-teal-soft) 8%, var(--surface-raised)); }
    .reference-drop-zone[data-practice="true"] strong { font-size: 14px; line-height: 20px; }
    .reference-drop-zone[data-practice="true"] span { font-size: 12px; line-height: 18px; text-wrap: balance; }
    .reference-drop-zone[data-practice="true"]:not(:hover):not(:focus-visible) { animation: practice-upload-invite 6s ease-in-out infinite; }
    .reference-drop-zone[data-practice="true"]:hover,
    .reference-drop-zone[data-practice="true"]:focus-visible { border-color: var(--bsl-teal-soft); background: color-mix(in srgb, var(--bsl-teal-soft) 18%, var(--surface-raised)); }
    @keyframes practice-upload-invite {
      0%, 28%, 100% { transform: scale(1); border-color: color-mix(in srgb, var(--bsl-teal-soft) 65%, transparent); background-color: color-mix(in srgb, var(--bsl-teal-soft) 8%, var(--surface-raised)); }
      12% { transform: scale(1.035); border-color: var(--bsl-teal-soft); background-color: color-mix(in srgb, var(--bsl-teal-soft) 24%, var(--surface-raised)); }
    }
    @media (prefers-reduced-motion: reduce) { .reference-drop-zone[data-practice="true"]:not(:hover):not(:focus-visible) { animation: none; } }
    .reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .reference-grid-button { position: relative; display: block; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--lab-control-radius); background: var(--surface-raised); padding: 0; aspect-ratio: 1; }
    .reference-grid-button:hover,
    .reference-grid-button:focus-visible { border-color: color-mix(in srgb, var(--color-accent) 58%, var(--line)); }
    .reference-grid-button img { width: 100%; height: 100%; display: block; object-fit: cover; }
    .reference-grid-button span { position: absolute; inset: auto 0 0; overflow: hidden; padding: 18px 7px 6px; background: var(--material-state-surface); color: #fff; font-size: 10px; font-weight: 600; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .reference-lightbox { width: min(78vw, 980px); max-width: 100%; }
    .reference-lightbox-image { display: block; width: 100%; max-height: min(78dvh, 760px); object-fit: contain; background: #090a0c; }
    #preview-app-sidebar { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #0b0c10; }
    body[data-tutorial-active="true"] #preview-inspector-astryx { display:none; }
    #preview-inspector-astryx { display: flex; min-height: 0; height: 100%; width: 100%; }
    #preview-inspector-astryx > [data-astryx-theme] { min-height: 0; width: 100%; height: 100%; }
    .preview-diagnostics-scope { flex: 1; min-width: 0; width: 100%; }
    .preview-inspector { min-width: 0; width: 100%; min-height: 0; height: 100%; border-top: 1px solid rgba(255,255,255,.14); background: #0b0e12; }
    .preview-diagnostics-header { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .preview-diagnostics-header strong { color: var(--text); font-size: 11px; line-height: 16px; }
    .preview-diagnostics-header time { color: var(--faint); font-family: var(--font-family-brand-numeric); font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .preview-diagnostics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
    .preview-diagnostics-grid > div { min-width: 0; padding: 7px 10px 8px; border-right: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
    .preview-diagnostics-grid > div:nth-child(2n) { border-right: 0; }
    .preview-diagnostics-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
    .preview-diagnostics-grid dt { color: var(--faint); font-size: 10px; line-height: 14px; }
    .preview-diagnostics-grid dd { margin: 0; overflow: hidden; color: var(--text); font-family: var(--font-family-brand-numeric); font-size: 12px; font-weight: 600; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
    .preview-diagnostics-grid dd[data-state="good"] { color: var(--good); }
    .preview-diagnostics-grid dd[data-state="muted"] { color: var(--muted); }
    .preview-runtime-bottom { position: absolute; z-index: 12; inset: auto calc(12px + var(--canvas-ui-right-inset)) var(--canvas-panel-inset) 12px; min-width: 0; height: var(--preview-bottom-panel-height); overflow: hidden; border: 0; border-radius: var(--radius-container); background: var(--material-surface-strong); box-shadow: var(--material-elevation-medium), inset 0 1px 0 var(--material-border-highlight); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 10px, 0); backdrop-filter: var(--material-backdrop-strong); -webkit-backdrop-filter: var(--material-backdrop-strong); transition: right 280ms cubic-bezier(.22, 1, .36, 1), height var(--planner-panel-motion-duration) var(--planner-panel-motion-ease), opacity 180ms ease-out, transform 260ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 260ms; }
    .preview-runtime-bottom > [data-astryx-theme] { min-width: 0; min-height: 0; width: 100%; height: 100%; }
    .preview-event-dock-scope { flex: 1; min-width: 0; min-height: 0; width: 100%; height: 100%; }
    .preview-event-dock { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%; }
    .preview-event-dock-actions { position: absolute; z-index: 2; top: 5px; right: 6px; display: flex; align-items: center; gap: 2px; }
    .preview-event-heading { min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
    .preview-event-heading strong { color: rgba(245,241,237,.78); font-size: 10px; font-weight: 550; line-height: 14px; }
    .preview-event-heading i { color: rgba(245,241,237,.3); font-size: 7px; font-style: normal; }
    .preview-event-heading span { overflow: hidden; color: rgba(245,241,237,.42); font-size: 9px; font-weight: 450; line-height: 13px; text-overflow: ellipsis; }
    .preview-runtime-status.astryx-button,
    .preview-runtime-toggle.astryx-button { width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 50%; }
    .preview-runtime-toggle.astryx-button { color: var(--muted); }
    .preview-runtime-status.astryx-button svg,
    .preview-runtime-toggle.astryx-button svg { width: 14px; height: 14px; }
    .preview-runtime-status[data-runtime-state="online"] { color: var(--good); }
    .preview-runtime-status[data-runtime-state="changed"] { color: var(--color-accent); }
    .preview-runtime-status[data-runtime-state="offline"] { color: var(--bad); }
    .preview-runtime-status[data-runtime-state="checking"] svg { animation: runtime-status-spin 700ms linear infinite; }
    @keyframes runtime-status-spin { to { transform: rotate(360deg); } }
    .preview-event-dock-content { min-width: 0; min-height: 0; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .preview-event-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: 34px minmax(0, 1fr); background: transparent; }
    .preview-event-pane + .preview-event-pane { border-left: 1px solid var(--material-border-color); }
    .preview-event-pane-heading { min-width: 0; display: flex; align-items: center; padding: 3px; }
    .preview-event-copy.astryx-button { width: max-content; max-width: 100%; min-width: 0; height: 28px; min-height: 28px; justify-content: flex-start; gap: 7px; padding: 0 7px; border-radius: var(--lab-control-radius); background: transparent; color: var(--muted); }
    .preview-event-copy.astryx-button:hover,
    .preview-event-copy.astryx-button:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
    .preview-event-copy-icon { display: inline-grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; opacity: 0; transition: opacity 140ms ease-out, color 140ms ease-out; }
    .preview-event-copy-icon svg { width: 14px; height: 14px; }
    .preview-event-copy.astryx-button:hover .preview-event-copy-icon,
    .preview-event-copy.astryx-button:focus-visible .preview-event-copy-icon,
    .preview-event-copy.astryx-button[data-copied="true"] .preview-event-copy-icon { opacity: 1; }
    .preview-event-copy.astryx-button[data-copied="true"] .preview-event-copy-icon { color: var(--good); }
    .preview-terminal { min-height: 0; height: 100%; overflow: auto; overscroll-behavior: contain; padding: 6px 10px 10px; color: #e3e6eb; font-family: var(--font-family-brand-mono); font-size: 10px; line-height: 17px; }
    .preview-terminal-events { display: grid; align-content: end; min-height: 100%; row-gap: 4px; margin: 0; padding: 0; list-style: none; }
    .preview-terminal-events li { display: grid; grid-template-columns: max-content 10px minmax(0, 1fr); column-gap: 7px; align-items: baseline; min-width: 0; }
    .preview-terminal-events time { color: rgba(245,241,237,.46); font: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .preview-event-message { min-width: 0; overflow: hidden; color: rgba(245,241,237,.84); text-overflow: ellipsis; white-space: nowrap; }
    .preview-event-prompt { color: #b8f3d0; font-weight: 700; }
    .preview-terminal-events li[data-tone="error"] .preview-event-prompt { color: #ff6b80; }
    .preview-terminal-empty { margin: 0; color: #66717f; font: inherit; }
    .preview-terminal-empty[data-error="true"] { color: #ed8796; }

    body[data-lab-motion="ready"] #planner-canvas,
    body[data-lab-motion="ready"] .canvas-coach-mount,
    body[data-lab-motion="ready"] #canvas-symbol-markers-astryx,
    body[data-lab-motion="ready"] #canvas-issue-markers-astryx,
    body[data-lab-motion="ready"] .canvas-top-controls,
    body[data-lab-motion="ready"] #canvas-context-actions-astryx,
    body[data-lab-motion="ready"] #canvas-run-editor-astryx,
    body[data-lab-motion="ready"] .mobile-canvas-actions,
    body[data-lab-motion="ready"] .schematic-reference,
    body[data-lab-motion="ready"] .preview-simulator { transition: opacity 240ms ease-in-out, visibility 0s linear; }
    #planner-frame :is(#planner-canvas,#canvas-symbol-markers-astryx,#canvas-issue-markers-astryx,.canvas-guidance-stack,#canvas-practice-target-astryx,#canvas-placement-cursor-astryx,#canvas-context-actions-astryx,#canvas-measure-editor-astryx,#canvas-tooltip,.mobile-canvas-actions) {transition:opacity 240ms ease-out;}
    @media(prefers-reduced-motion:reduce) {#planner-frame :is(#planner-canvas,#canvas-symbol-markers-astryx,#canvas-issue-markers-astryx,.canvas-guidance-stack,#canvas-practice-target-astryx,#canvas-placement-cursor-astryx,#canvas-context-actions-astryx,#canvas-measure-editor-astryx,#canvas-tooltip,.mobile-canvas-actions),.workbench .component-strip {transition:none;}}
    body[data-lab-motion="ready"] .inspector-installation-layer,
    body[data-lab-motion="ready"] .inspector-preview-layer { transition: opacity 220ms ease-in-out, visibility 0s linear; }


    body[data-lab-mode="preview"] .plan-rail,
    body[data-lab-mode="preview"] #planner-canvas,
    body[data-lab-mode="preview"] #canvas-symbol-markers-astryx,
    body[data-lab-mode="preview"] #canvas-issue-markers-astryx,
    body[data-lab-mode="preview"] .canvas-top-controls,
    body[data-lab-mode="preview"] #canvas-context-actions-astryx,
    body[data-lab-mode="preview"] #canvas-run-editor-astryx,
    body[data-lab-mode="preview"] .mobile-canvas-actions,
    body[data-lab-mode="preview"] .schematic-reference { opacity: 0; pointer-events: none; visibility: hidden; transition-delay: 0ms, 220ms; }
    body[data-lab-mode="preview"] #planner-canvas { opacity: 0; pointer-events: none; visibility: hidden; transition-delay: 0ms, 220ms; }
    body[data-lab-mode="preview"][data-preview-tool="mask"] #planner-canvas,
    body[data-lab-mode="preview"][data-preview-tool="mask-edit"] #planner-canvas { opacity: 1; visibility: visible; pointer-events: auto; z-index: 5; transition: none; }
    body[data-lab-mode="preview"] .workspace { --active-bottom-panel-height: 0px; }
    body[data-lab-mode="preview"] .workspace[data-preview-bottom-panel-open="true"] { --active-bottom-panel-height: calc(var(--preview-bottom-panel-height) + var(--canvas-panel-inset)); }
    body[data-lab-mode="preview"] .component-strip { z-index: 9; }
    body[data-lab-mode="preview"] .preview-simulator { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 40ms, 0ms; }
    body[data-lab-mode="preview"] .workspace[data-preview-bottom-panel-open="true"] .preview-runtime-bottom { display: flex; opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition-delay: 0ms, 0ms, 80ms, 80ms, 0ms; }
    body[data-lab-mode="preview"][data-preview-runtime-expanded="true"] .workspace { --preview-bottom-panel-height: min(360px, 42vh); }
    body[data-lab-mode="preview"][data-preview-runtime-expanded="true"] .preview-terminal-events { align-content: start; row-gap: 8px; }
    body[data-lab-mode="preview"][data-preview-runtime-expanded="true"] .preview-event-message { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
    body[data-lab-mode="preview"] .inspector-installation-layer { opacity: 0; pointer-events: none; visibility: hidden; transition-delay: 0ms, 200ms; }
    body[data-lab-mode="preview"] .inspector-preview-layer { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0ms, 0ms; }
    body[data-lab-mode="installation"] .preview-simulator { opacity: 0; pointer-events: none; visibility: hidden; transition-delay: 0ms, 220ms; }
    body[data-lab-mode="installation"] .inspector-preview-layer { opacity: 0; pointer-events: none; transform: none; visibility: hidden; transition-delay: 0ms, 180ms; }
    @media(prefers-reduced-motion:reduce){body #lab-mode-cover,.header-mode-primary{transition:none;}#lab-mode-cover .canvas-app-loading-spinner{animation:none;}}
    #lab-mode-cover {position:absolute;z-index:90;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--spacing-3);background:var(--ground);color:var(--muted);text-align:left;font-size:var(--font-size-base);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 160ms ease,visibility 0s linear 160ms;}
    body[data-workspace-loading] #lab-mode-cover,body[data-mode-loading] #lab-mode-cover {opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;}
    body[data-workspace-loading] #lab-mode-cover {position:fixed;inset:0;}
    html[data-mode-crossfade],html[data-mode-crossfade] :is(.pro-lab-header,.pro-lab-brand,.lab-loading-brand) {view-transition-name:none;}
    html[data-mode-crossfade] #planner-frame {view-transition-name:lab-canvas-mode;}
    html[data-mode-crossfade]::view-transition {pointer-events:none;}
    ::view-transition-group(lab-canvas-mode),::view-transition-old(lab-canvas-mode),::view-transition-new(lab-canvas-mode) {animation-duration:220ms;animation-timing-function:ease-in-out;}

    body[data-lab-transition="preparing"] .workbench *,body[data-lab-transition="revealing"] .workbench * {transition:none;animation:none;}
    .canvas-app-overlay[data-error="true"] .canvas-app-loading-spinner {display:none;}

    .control-group { margin: 0; padding: 0 0 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
    .control-group[hidden] { display: none; }
    .control-group h3 { margin: 0 0 5px; font-size: 13px; line-height: 18px; }
    .control-group p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 17px; }
    .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(86px, auto); gap: 7px; align-items: end; }
    .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    /* Legacy bridge controls are intentionally isolated. A document-wide
       input/select or label rule leaks into Astryx fields and produces a
       second, conflicting visual surface inside composed controls. */
    .legacy-control-bridge label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: .05em; }
    .legacy-control-bridge :is(input, select) { width: 100%; min-height: 36px; border: 1px solid var(--line-strong); border-radius: var(--lab-control-radius); background: #101110; padding: 0 9px; font-size: 11px; }
    .status-line { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 16px; }
    .status-line.good { color: var(--good); }
    .selection-card { margin: 0 0 12px; padding: 0; border: 0; background: transparent; }
    .selection-card .selection-type { margin-bottom: 4px; color: var(--bsl-orange-soft); font-size: 11px; font-weight: 700; line-height: 16px; }
    .selection-card strong { display: block; margin-bottom: 5px; font-size: 14px; line-height: 18px; }
    .selection-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 17px; }
    .selection-card small { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--good); font-size: 11px; line-height: 16px; }
    .selection-card[hidden] { display: none; }
    .summary-list, .bom-list, .issue-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--lab-surface-radius); overflow: hidden; background: var(--line); }
    .summary-list li, .bom-list li, .issue-list li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 10px; background: var(--surface-quiet); color: var(--muted); font-size: 12px; line-height: 17px; }
    .summary-list strong, .bom-list strong { color: var(--text); font-family: var(--font-family-brand-data); font-variant-numeric: tabular-nums; }
    .issue-list { border: 0; border-radius: 0; background: transparent; }
    .issue-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; padding: 9px 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--warn); font-size: 11px; line-height: 16px; }
    .issue-list li:last-child { border-bottom: 0; }
    .issue-list li[data-severity="error"] { color: var(--bad); }
    .issue-list li[data-severity="warning"] { color: var(--warn); }
    .issue-list li[data-severity="info"] { color: var(--color-text-blue); }
    .issue-list li button { display: flex; margin-top: 5px; }
    .review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
    .review-actions button { margin-top: 5px; }
    .issue-copy-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
    .issue-copy-row > span:first-child { min-width: 0; }
    .subheading { margin: 16px 0 8px; color: var(--muted); font-size: 11px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .catalog-bom-empty { margin: 0; padding: 10px; color: var(--muted); font-size: 12px; line-height: 17px; }
    .catalog-bom-empty-loading { display: flex; align-items: center; gap: 7px; }
    #plan-support-astryx { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; margin-top: 0; }
    #plan-support-astryx > [data-astryx-theme] { height: 100%; min-height: 0; }
    .bill-of-materials { min-height: 0; height: 100%; }
    .bom-heading { display: grid; gap: 8px; }
    .bom-job-name { margin: 2px 0 0; max-width: 240px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
    .bom-catalog-status { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; line-height: 15px; }
    .bom-catalog-status > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bom-scroll { min-height: 0; }
    .bom-disclosure-group .astryx-collapsible-trigger { color: var(--muted); transition: color 140ms ease-out; }
    .bom-disclosure-group .astryx-collapsible-trigger > .astryx-icon { color: var(--muted); transition: color 140ms ease-out; }
    .bom-disclosure-group .astryx-collapsible-trigger:hover,
    .bom-disclosure-group .astryx-collapsible-trigger:focus-visible,
    .bom-disclosure-group .astryx-collapsible-trigger:hover > .astryx-icon,
    .bom-disclosure-group .astryx-collapsible-trigger:focus-visible > .astryx-icon { color: var(--text); }
    .bom-category-trigger > span:first-child { min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
    .bom-disclosure-group {--lab-disclosure-content-inset:0px;}
    .bom-category-trigger .panel-tab-counter {margin-inline-start:auto;}
    .bom-category-items {display:grid;gap:20px;padding:8px 0 12px;}
    .catalog-bom-item {position:relative;isolation:isolate;min-width:0;padding:0;scroll-margin-block:12px;border:0;background:none;}
    .catalog-bom-item::before {content:'';position:absolute;inset:-8px;z-index:-1;border:1px solid var(--extension);border-radius:var(--lab-surface-radius);background:color-mix(in srgb,var(--extension) 10%,var(--surface));opacity:0;pointer-events:none;transition:opacity 160ms ease;}
    .catalog-bom-item:is(:hover,:focus-within,.is-marker-highlighted,.is-plan-revealed)::before {opacity:1;}
    .catalog-bom-item.is-plan-revealed::before {animation:catalog-item-reveal-pulse 1500ms ease;}
    @keyframes catalog-item-reveal-pulse {0%,100%{opacity:.45}35%,70%{opacity:1}}
    .product-link-tooltip {display:inline-flex;align-items:center;gap:var(--spacing-2);}
    .product-link-tooltip>svg {width:14px;height:14px;flex-shrink:0;}
    .catalog-product-row { display: grid; min-width: 0; min-height: 56px; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
    .catalog-product-row + .catalog-product-row { margin-top: 10px; }
    .catalog-product-image, .catalog-product-image-placeholder { width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-radius: var(--lab-control-radius); object-fit: cover; background: #f5f4f2; color: #52504d; }
    .catalog-product-image-placeholder svg { width: 20px; height: 20px; }
    .catalog-product-copy { min-width: 0; }
    .catalog-product-title-tooltip { min-width: 0; display: block; }
    .catalog-product-title { display: -webkit-box; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 700; line-height: 18px; letter-spacing: -.01em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    a.catalog-product-title { text-decoration: none; }
    a.catalog-product-title:hover { text-decoration: underline; }
    .catalog-product-subtitle, .catalog-item-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .catalog-product-subtitle { margin-top: 1px; color: var(--muted); font-size: 11px; line-height: 16px; }
    .catalog-item-meta { margin-top: 1px; color: var(--faint); font-size: 10px; line-height: 14px; }
    .catalog-item-price { margin-top: 2px; color: var(--text); font-family: var(--font-family-brand-numeric); font-size: 11px; font-weight: 500; line-height: 15px; font-variant-numeric: tabular-nums; }
    .catalog-item-note { display: -webkit-box; margin: 6px 0 0 68px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .catalog-item-quantity { display: inline-flex; min-width: 30px; min-height: 22px; align-items: center; justify-content: center; gap: 2px; margin-top: 1px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); color: var(--text); font-family: var(--font-family-brand-numeric); font-size: 11px; font-weight: 600; line-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .catalog-item-quantity-placeholder { width: 0; }
    .bom-footer {background:color-mix(in srgb,var(--surface) 50%,var(--surface-raised));}
    .bom-footer .bom-export-saved-list { width: 100%; }
    .bom-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .bom-total-copy { min-width: 0; display: grid; gap: 1px; }
    .bom-total-copy > span { color: var(--muted); font-size: 10px; font-weight: 700; line-height: 14px; text-transform: uppercase; letter-spacing: .05em; }
    .bom-total-copy > strong { color: var(--text); font-family: var(--font-family-brand-numeric); font-size: 16px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; }
    .bom-market-selector { flex: 0 0 auto; }
    .bom-market-value, .bom-market-option { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
    .bom-market-value { height: 20px; vertical-align: middle; font-family: var(--font-family-brand-data); font-size: 11px; font-weight: 500; line-height: 20px; letter-spacing: .02em; }
    .bom-market-option { width: 100%; color: var(--text); font-family: var(--font-family-brand-data); font-size: 12px; font-weight: 600; line-height: 16px; }
    .bom-market-flag { width: 20px; height: 14px; flex: 0 0 auto; overflow: visible; border-radius: 0; box-shadow: none; }
    .bom-subtotal-status { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 14px; }
    .bom-export-saved-list.astryx-button {
      height: 48px;
      justify-content: center;
      gap: 0;
      margin-top: 16px;
      padding-block: 0;
      padding-inline: 20px;
      border-radius: var(--lab-control-radius);
      background: #fff;
      color: #0b0b0c;
      font-family: var(--font-family-brand-body);
      font-size: 15px;
      font-weight: 800;
      line-height: 20px;
    }
    .bom-export-leading-spacer, .bom-export-icon { width: 20px; height: 20px; flex: 0 0 20px; }
    .bom-export-leading-spacer { display: block; }
    .bom-export-icon { display: inline-flex; align-items: center; justify-content: center; }
    .bom-export-icon svg { width: 20px; height: 20px; }

    .canvas-product-preview-surface { overflow: visible; }
    .canvas-product-preview { min-width: 0; display: grid; overflow: hidden; margin: -12px; border-radius: inherit; color: var(--text); }
    .canvas-product-preview-caption {
      top: 100%;
      right: auto;
      bottom: auto;
      left: 50%;
      z-index: 2;
      max-width: calc(100% - 16px);
      transform: translate(-50%, -50%);
    }
    .canvas-product-preview-action { width: calc(100% + 24px); padding: 0; border: 0; border-radius: var(--radius-container); background: transparent; font: inherit; text-align: left; cursor: pointer; }
    .canvas-product-preview-action:focus-visible { outline: 2px solid var(--bsl-teal-soft); outline-offset: -3px; }
    .canvas-product-preview-action:hover { background: color-mix(in srgb, var(--surface-raised) 22%, transparent); }
    .canvas-product-preview-content { min-width: 0; min-height: 80px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0; align-items: stretch; }
    .canvas-product-preview-image { width: 96px; height: 100%; min-height: 80px; display: block; object-fit: cover; background: var(--surface-raised); color: var(--muted); }
    .canvas-product-preview-placeholder svg { width: 18px; height: 18px; }
    .canvas-product-preview-copy { min-width: 0; display: grid; align-content: center; gap: 2px; padding: 12px 14px; font-size: 12px; line-height: 16px; }
    .canvas-product-preview-kicker { color: var(--faint); font-size: 10px; font-weight: 800; line-height: 14px; letter-spacing: .05em; text-transform: uppercase; }
    .canvas-product-preview-title { min-width: 0; }
    .canvas-product-preview-subtitle { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
    .canvas-product-preview-link.astryx-link { width: fit-content; margin-top: 3px; font-size: 11px; line-height: 16px; }
    .canvas-product-preview-note { display: grid; gap: 3px; margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
    .canvas-product-preview-note > span { color: var(--faint); font-size: 10px; font-weight: 800; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; }
    .canvas-product-preview-note > p { margin: 0; color: var(--text); font-size: 11px; line-height: 16px; }
    @media(prefers-reduced-motion:reduce){.catalog-bom-item.is-plan-revealed::before{animation:none;opacity:1;}}

    .path-control-section { display: grid; gap: 9px; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
    .path-control-section + .path-control-section { padding-top: 4px; }
    .path-control-section-title { margin: 0 !important; color: var(--faint) !important; font-size: 10px !important; font-weight: 800; line-height: 14px !important; letter-spacing: .08em; text-transform: uppercase; }
    .multi-selection-summary { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 1px 0 8px; border-bottom: 1px solid var(--line); }
    .selection-count-label { flex: 0 0 auto; color: var(--text); font-family: var(--font-family-brand-numeric); font-size: 10px; font-weight: 700; line-height: 15px; font-variant-numeric: tabular-nums; }
    .selection-count-label strong { color: var(--bsl-teal-soft); }
    .multi-selection-summary p { min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
    .field-note { margin: 0 !important; color: var(--muted) !important; font-size: 10px !important; line-height: 15px !important; }
    .route-length-summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--lab-control-radius); background: var(--surface-quiet); }
    .route-length-summary span { color: var(--muted); font-size: 10px; line-height: 15px; }
    .route-length-summary strong { color: var(--text); font-family: var(--font-family-brand-numeric); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .lab-measurement-input.astryx-number-input { font-family: var(--font-family-brand-data); font-variant-numeric: tabular-nums; }
    .ral-color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--spacing-2); max-height: 42dvh; overflow: auto; padding: var(--spacing-1); min-height: 0; }
    .ral-color-option { min-width: 0; height: auto; min-height: 48px; justify-content: flex-start; text-align: left; }
    .ral-color-swatch { display: block; width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-inner); border: 1px solid var(--color-border-emphasized); }
    .ral-color-label { display: grid; min-width: 0; white-space: normal; line-height: 1.3; }
    .ral-color-label > span { font-size: var(--font-size-sm); font-weight: 400; }
    .component-key { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
    .component-key li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); }
    .component-key li:last-child { border-bottom: 0; }
    .component-key strong { display: block; font-size: 12px; line-height: 17px; }
    .component-key span { display: block; color: var(--muted); font-size: 11px; line-height: 16px; }
    .component-key > li > svg { color: var(--muted); }

    @media (max-width: 1020px) {
      .workbench { --workbench-rail-width: min(calc(100vw - 1rem), 28rem); height: calc(100dvh - var(--lab-header-height)); min-height: 0; }
    }
    @media (max-width: 820px) {
      body { overflow: hidden; }
      .pro-lab-header { grid-template-columns: minmax(0, 1fr) auto; }
      .pro-lab-runtime { display: none; }
      .sidebar-visibility-action { display: none; }
      .workbench,.workbench[data-sidebar-open="true"] { --canvas-ui-right-inset: 0px; height: calc(100dvh - var(--lab-header-height)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
      .guide, .inspector { display: none; }
      .workbench[data-sidebar-open="true"] .preview-runtime-bottom { right: 12px; }
      .workspace { min-height: 0; grid-column: 1; grid-row: 1; grid-template-rows: minmax(0, 1fr) 0 0; }
      .canvas-stage {grid-column:1;grid-row:1;}
      .tool-bar { padding-inline: 8px; }
      .planner-active-tool-label { display: none; }
      .canvas-guidance-stack { top: 8px; right: 8px; left: 8px; }
      .canvas-top-controls { top: 8px; left: 8px; }
      .mobile-canvas-actions { visibility:hidden; position: absolute; z-index: 8; top: 36px; right: 8px; bottom: auto; display: block; width: max-content; max-width: calc(100% - 16px); }
      .mobile-canvas-actions [data-astryx-theme] { width: max-content; max-width: 100%; }
      .pro-lab-runtime,.plan-rail,.preview-runtime-bottom {display:none;}
      body[data-lab-mode="preview"] .workspace[data-preview-bottom-panel-open] > .preview-runtime-bottom {display:none;}
      .canvas-toast-notice {top:calc(var(--lab-mobile-header-height) + var(--spacing-3));}
      .pro-lab-header {height:var(--lab-header-height);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
      .pro-lab-identity,.pro-lab-job {width:100%;min-width:0;max-width:none;}
      .pro-lab-job {display:block;}
      .header-job-switcher {display:flex;gap:var(--lab-header-gap);}
      .header-job-context {min-width:var(--lab-header-control-height);max-width:none;flex:1;}
      .pro-lab-header-center {display:flex;}
      .pro-lab-header-actions {position:static;width:max-content;}
      .workbench,.workbench[data-sidebar-open="true"] {height:calc(100dvh - var(--lab-header-height) - var(--mobile-dock-height,24px));}
      .canvas-bottom-panel-toggle,.canvas-right-panel-toggle {display:none;}
      .component-strip {--mobile-toolbar-gap:var(--spacing-3);display:grid;position:fixed;z-index:45;top:auto;bottom:calc(var(--mobile-dock-height,24px) + var(--mobile-toolbar-gap));left:0;right:0;margin:0 auto;max-width:calc(100% - 16px);transition:none;}
      .mobile-dock-scope {position:fixed;z-index:40;inset:auto 0 0;}
      .mobile-planner-dock {display:flex;flex-direction:column;width:100%;min-height:var(--spacing-6);overflow:clip;border-radius:var(--radius-container) var(--radius-container) 0 0;background:var(--material-surface-strong);}
      .mobile-dock-layout {display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;}
      .mobile-dock-handle {height:var(--spacing-6);flex:0 0 var(--spacing-6);display:flex;align-items:center;box-sizing:border-box;border-bottom:1px solid var(--line);cursor:ns-resize;touch-action:none;}
      .mobile-dock-handle:has([data-resizing="true"]) {--drawer-grip-width:60px;--drawer-grip-height:5px;--drawer-grip-color:var(--bsl-teal-soft);}
      .mobile-dock-handle[data-at-limit="true"]:has([data-resizing="true"]) {--drawer-grip-color:var(--good);}
      @media(prefers-reduced-motion:reduce){.mobile-dock-handle {--drawer-grip-transition:none;}}
      .mobile-dock-handle>* {width:100%;}
      .mobile-dock-body {display:flex;flex-direction:column;flex:1;min-height:0;}
      .mobile-dock-nav {--lab-tab-strip-gap:var(--spacing-2);--lab-tab-radius:var(--radius-element);--size-element-lg:calc(18px + 2 * var(--spacing-3));flex:0 0 auto;padding:var(--spacing-2);padding-bottom:max(var(--spacing-2),env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 50%,var(--surface-raised));}
      .mobile-dock-nav[hidden] {display:none;}
      .mobile-dock-tab[aria-disabled="true"] {opacity:.4;cursor:default;}
      .mobile-dock-tab[aria-current="true"] {background:var(--color-overlay-pressed);}
      .mobile-dock-body[aria-hidden="true"] {visibility:hidden;}
      .mobile-dock-body>[data-astryx-theme],.mobile-dock-body>.mobile-preview-host {min-height:0;flex:1;}
      .mobile-event-host {height:100%;}
      .mobile-event-host .preview-runtime-bottom {position:relative;display:flex;inset:auto;width:100%;height:100%;opacity:1;visibility:visible;transform:none;pointer-events:auto;}
      .mobile-event-host .preview-event-dock-content {grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));}
      .mobile-event-host .preview-event-pane + .preview-event-pane {border-left:0;border-top:1px solid var(--material-border-color);}
      .mobile-event-host .preview-terminal-events {align-content:start;row-gap:var(--spacing-2);}
      .mobile-event-host .preview-event-message {overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;}
      .header-panel-controls {display:none;}
      .mobile-preview-host {flex:1;width:100%;min-height:0;position:relative;}
      .mobile-preview-host .inspector-preview-layer {position:relative;inset:auto;height:100%;grid-template-rows:minmax(0,1fr);opacity:1;visibility:visible;pointer-events:auto;}
      .mobile-preview-host .canvas-app-overlay {height:100%;width:100%;}
      .mobile-planner-sheet {height:100%;min-height:0;overflow:hidden;}
      .mobile-sheet-content {flex:1;min-height:0;overflow:auto;padding:var(--spacing-3);padding-top:0;}
      .mobile-preview-host #preview-inspector-astryx {display:none;}
      .plan-rail { grid-template-columns: repeat(4, minmax(124px, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; }
      .schematic-reference { max-width: calc(100% - 24px); }
    }
    @container header-left (max-width: 430px) {
      .header-settings-copy,.header-lessons-copy,.header-course-progress,.header-lesson-navigation {display:none;}
      .pro-lab-header :is(.header-settings-button,.header-lessons-button) {width:var(--lab-header-control-height);padding:0;gap:0;}
      .header-lessons-button.astryx-button[data-course-active="true"] {min-width:var(--lab-header-control-height);}
    }
    @container header-left (max-width: 180px) {
      .header-job-title,.header-job-checkpoint,.header-job-name>svg:last-child {display:none;}
      .header-job-name.astryx-button {display:flex;justify-content:center;gap:0;padding:0;}
    }
    @container header-right (max-width: 400px) {
      .header-mode-label,.header-export-label {display:none;}
      .pro-lab-header :is(.header-save-status,.header-mode-primary,.header-export-button) {width:var(--lab-header-control-height);padding:0;gap:0;}
    }
    @media(max-width:820px) {
      .header-view-actions {grid-template-columns:minmax(0,1fr);}
      .pro-lab-header .header-job-context {width:var(--lab-header-control-height);min-width:var(--lab-header-control-height);max-width:var(--lab-header-control-height);flex:0 0 var(--lab-header-control-height);}
      .pro-lab-header .header-job-name.astryx-button {display:inline-flex;justify-content:center;align-items:center;width:var(--lab-header-control-height);padding:0;gap:0;}
      .header-export-label {display:none;}
      .pro-lab-header :is(.header-save-status,.header-mobile-mode,.header-more-button,.header-export-button) {width:var(--lab-header-control-height);padding:0;gap:0;}
    }
    @media(max-width:360px) {.pro-lab-brand-lab {display:none;}}
    .canvas-grid {position:absolute;z-index:0;inset:0;pointer-events:none;background:color-mix(in srgb,var(--muted) 20%,transparent);mask-image:radial-gradient(circle at center,#000 1px,transparent 1.2px);mask-size:24px 24px;}
    .canvas-grid-wash {position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--bsl-teal-soft) 14%,transparent) 50%,transparent 60%);animation:canvas-dot-wash 22s linear infinite;will-change:transform;}
    @keyframes canvas-dot-wash {from{transform:translateX(-65%);}to{transform:translateX(65%);}}
    body[data-app-ready="false"] .lab-loading-brand {view-transition-name:lab-brand;}
    body[data-app-ready="true"] .pro-lab-brand {view-transition-name:lab-brand;}
    ::view-transition-group(lab-brand) {animation-duration:560ms;animation-timing-function:cubic-bezier(.22,1,.36,1);}
    html[data-brand-transition]::view-transition-group(root) {animation:none;}
    html[data-brand-transition]::view-transition-old(root) {animation:none;opacity:0;}
    html[data-brand-transition]::view-transition-new(root) {animation:none;}
    @media(prefers-reduced-motion:reduce){.canvas-grid-wash{animation:none;will-change:auto;} .lab-loading-brand,.pro-lab-brand{view-transition-name:none;}}
    /* Initial entry only: logo lands, header settles, then canvas controls arrive. */
    body[data-entry-reveal="logo"] :is(.pro-lab-identity,.pro-lab-header-actions),
    body:is([data-entry-reveal="logo"],[data-entry-reveal="header"]) :is(.component-strip,#canvas-panel-controls-astryx,.mobile-dock-scope,.canvas-guidance-stack,.canvas-top-controls,#canvas-context-actions-astryx,#tutorial-header-astryx) {opacity:0;visibility:hidden;pointer-events:none;}
    body[data-entry-reveal="header"] .pro-lab-identity {animation:lab-entry-header-left 320ms cubic-bezier(.22,1,.36,1) both;}
    body[data-entry-reveal="header"] .pro-lab-header-actions {animation:lab-entry-header-right 320ms cubic-bezier(.22,1,.36,1) both;}
    body[data-entry-reveal="canvas"] .component-strip {animation:lab-entry-toolbar 420ms cubic-bezier(.22,1,.36,1) both;}
    body[data-entry-reveal="canvas"] .mobile-dock-scope {animation:lab-entry-drawer 420ms cubic-bezier(.22,1,.36,1) both;}
    body[data-entry-reveal="canvas"] :is(#canvas-panel-controls-astryx,.canvas-guidance-stack,.canvas-top-controls,#canvas-context-actions-astryx,#tutorial-header-astryx) {animation:lab-entry-controls 260ms ease-out both;}
    @keyframes lab-entry-header-left {from{opacity:0;translate:18px 0;}to{opacity:1;translate:0 0;}}
    @keyframes lab-entry-header-right {from{opacity:0;translate:-18px 0;}to{opacity:1;translate:0 0;}}
    @keyframes lab-entry-toolbar {from{opacity:0;translate:0 var(--entry-toolbar-distance,120px);}to{opacity:1;translate:0 0;}}
    @keyframes lab-entry-drawer {from{opacity:0;translate:0 100%;}to{opacity:1;translate:0 0;}}
    @keyframes lab-entry-controls {from{opacity:0;}to{opacity:1;}}
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }