.pe-suite-preview { padding: 8px; }
  .pe-optics {
    --pes-surface: light-dark(#fff,#151c29); --pes-text: light-dark(#1a2d43,#eef3fa); --pes-muted: light-dark(#536579,#a9b7cb);
    --pes-line: light-dark(#e0e6ee,#303c50); --pes-control: light-dark(#f0f4f9,#25334a); --pes-blue: light-dark(#1765c1,#78b6ff);
    --pes-selected: light-dark(#e9f1fc,#263c58); --pes-active: light-dark(#226bcb,#4f98f2);
    color-scheme: light; color: var(--pes-text); background: var(--pes-surface); border: 1px solid var(--pes-line); border-radius: 20px;
    box-shadow: 0 8px 30px light-dark(#142b4110,#00000020); font: 14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    width: 100%; max-width: 920px; margin-inline: auto; overflow: hidden;
  }
  .pe-optics * { box-sizing: border-box; }
  .pe-optics [hidden] { display: none !important; }
  .pe-optics .pe-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 17px; }
  .pe-optics .pe-eyebrow { color: var(--pes-muted); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; }
  .pe-optics .pe-eyebrow > span { padding: 0 5px; opacity: .55; }
  .pe-optics h2 { color: var(--pes-text); font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.45px; margin: 4px 0 0; }
  .pe-optics .pe-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: 11px; color: var(--pes-muted); background: var(--pes-control); border-radius: 6px; white-space: nowrap; }
  .pe-optics .pe-badge > span { width: 5px; height: 5px; background: var(--pes-blue); border-radius: 50%; }
  .pe-optics .pe-tabs { display: flex; gap: 3px; flex-wrap: wrap; padding: 0 18px 15px; }
  .pe-optics .pe-tabs button { padding: 8px 10px; border: 0; border-radius: 7px; color: var(--pes-muted); background: transparent; line-height:1.4; font-family: inherit; font-size: 12px; min-height: 34px; white-space: nowrap; }
  .pe-optics .pe-tabs button:hover { background: var(--pes-control); }
  .pe-optics .pe-tabs button[aria-selected="true"] { background: var(--pes-selected); color: var(--pes-blue); font-weight: 500; }
  .pe-optics .pe-mobile-picker { display: none; padding: 0 16px 15px; }
  .pe-optics .pe-mobile-picker label { display: block; color: var(--pes-muted); font-size: 11px; margin-bottom: 5px; }
  .pe-optics select { border: 1px solid var(--pes-line); border-radius: 7px; padding: 9px 26px 9px 10px; background: var(--pes-surface); color: var(--pes-text); font-family: inherit; font-size: 13px; min-height: 39px; width: 100%; }
  .pe-optics .pe-experiment { margin: 0 16px; border: 1px solid #27364b; background: #0c1524; color-scheme: dark; border-radius: 13px; overflow: hidden; }
  .pe-optics .pe-scene-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 0; color: #a1b0c6; }
  .pe-optics [data-scene-caption] { font-size: 11px; letter-spacing: 1.2px; }
  .pe-optics .pe-schematic { font-size: 11px; color: #a1b0c6; white-space: nowrap; }
  .pe-optics .pe-lamp-control { display: inline-flex; align-items: center; gap: 7px; color: #d8e1ed; font-size: 12px; min-height: 32px; position: relative; }
  .pe-optics .pe-lamp-control input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; }
  .pe-optics .pe-switch { display: inline-block; width: 28px; height: 17px; border: 1px solid #6c7d94; background: #23354b; border-radius: 12px; pointer-events: none; }
  .pe-optics .pe-switch::after { content: ""; display: block; border-radius: 50%; width: 11px; height: 11px; margin: 2px; background: #c1cfdf; transition: transform .16s ease; }
  .pe-optics .pe-lamp-control input:checked + .pe-switch { background: #ffd16c; border-color: #ffd16c; }
  .pe-optics .pe-lamp-control input:checked + .pe-switch::after { transform: translateX(11px); background: #283549; }
  .pe-optics .pe-lamp-control input:focus-visible + .pe-switch { outline: 2px solid #8ec7ff; outline-offset: 3px; }
  .pe-optics .pe-svg { width: 100%; height: 300px; display: block; overflow: hidden; }
  .pe-optics .pe-svg text { font-family: inherit; font-size: 12px; fill: #c3cfdf; }
  .pe-optics .pe-svg .pes-small { font-size: 11px; }
  .pe-optics .pe-observation { display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 0 18px 17px; min-height: 38px; color: #c4cfde; font-size: 12px; text-align: center; }
  .pe-optics .pe-observation-dot { margin-top: 7px; width: 5px; height: 5px; border-radius: 50%; background: #ffd16c; flex-shrink: 0; }
  .pe-optics[data-dark="true"] .pe-observation-dot { background: #8191a9; }
  .pe-optics .pe-controls { padding: 18px 24px 16px; }
  .pe-optics .pe-controls-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--pes-muted); font-size: 12px; margin-bottom: 15px; }
  .pe-optics .pe-reset { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 12px; min-height: 30px; border: 0; border-radius: 6px; padding: 5px 7px; margin: -5px -7px -5px 0; background: transparent; color: var(--pes-blue); }
  .pe-optics .pe-reset > span { font-size: 18px; line-height: 1; }
  .pe-optics .pe-reset:hover { background: var(--pes-selected); }
  .pe-optics .pe-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  .pe-optics .pe-fields[data-count="3"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .pe-optics .pe-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; min-height: 19px; }
  .pe-optics .pe-field-label label { font-size: 12px; font-weight: 500; }
  .pe-optics .pe-field-label output { color: var(--pes-muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pe-optics input[type="range"] { width: 100%; min-width: 0; margin: 0; height: 24px; accent-color: var(--pes-active); cursor: ew-resize; }
  .pe-optics .pe-note { margin: 15px 0 0; font-size: 11px; color: var(--pes-muted); text-align: center; }
  @container pe-optics (max-width:650px) {
    .pe-optics .pe-fields[data-count="3"] { grid-template-columns: minmax(0,1fr); gap: 16px; }
  }
  @container pe-optics (max-width:500px) {
    .pe-suite-preview { padding: 3px; }
    .pe-optics { border-radius: 15px; }
    .pe-optics .pe-header { padding: 18px 16px 15px; }
    .pe-optics h2 { font-size: 20px; }
    .pe-optics .pe-badge { padding: 4px 7px; }
    .pe-optics .pe-tabs { display: none; }
    .pe-optics .pe-mobile-picker { display: block; }
    .pe-optics .pe-experiment { margin: 0 9px; border-radius: 10px; }
    .pe-optics .pe-scene-top { padding: 6px 11px 0; min-height: 48px; }
    .pe-optics [data-scene-caption] { letter-spacing: .8px; font-size: 11px; }
    .pe-optics .pe-schematic { display: none; }
    .pe-optics .pe-lamp-control { min-height: 44px; }
    .pe-optics .pe-controls { padding: 17px 17px 15px; }
    .pe-optics .pe-fields { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .pe-optics select { font-size: 16px; min-height: 44px; }
    .pe-optics input[type="range"] { height: 34px; }
    .pe-optics .pe-reset { min-height: 44px; }
  }
  @media(pointer:coarse) { .pe-optics input[type="range"], .pe-optics select, .pe-optics .pe-tabs button { min-height: 44px; } }
  @media(prefers-reduced-motion:reduce) { .pe-optics * { transition: none !important; } }

/* Platform-owned integration: no global selectors or inherited SVG size overrides. */
.pe-optics-host{display:block;container:pe-optics / inline-size;width:100%;min-width:0}
.pe-optics{--pes-surface:#fff;--pes-text:#1a2d43;--pes-muted:#536579;--pes-line:#e0e6ee;--pes-control:#f0f4f9;--pes-blue:#1765c1;--pes-selected:#e9f1fc;--pes-active:#226bcb;min-width:0}
.pe-v2[data-theme=dark] .pe-optics,.pe-optics-host[data-theme=dark] .pe-optics{color-scheme:dark;--pes-surface:#151c29;--pes-text:#eef3fa;--pes-muted:#a9b7cb;--pes-line:#303c50;--pes-control:#25334a;--pes-blue:#78b6ff;--pes-selected:#263c58;--pes-active:#4f98f2;box-shadow:0 8px 30px #00000020}
.pe-v2[data-theme=light] .pe-optics,.pe-optics-host[data-theme=light] .pe-optics{color-scheme:light}
.pe-optics .pe-svg{width:100%;height:300px;min-height:0;max-width:100%;background:none}
.pe-optics .pe-svg [data-plate]{cursor:ns-resize;touch-action:none}
.pe-optics .pe-touch-area{fill:transparent}
.pe-optics .pe-plate-halo{opacity:0}
.pe-optics [data-plate]:hover .pe-plate-halo,.pe-optics [data-dragging] .pe-plate-halo{opacity:1}
.pe-optics :is(button,input,select):focus-visible{outline:3px solid #78b6ff;outline-offset:3px}
.pe-optics [role=tab]{cursor:pointer}
.pe-optics .pe-derived{padding:0 24px 16px;font-size:12px;color:var(--pes-muted)}
.pe-optics .pe-derived:empty{display:none}
.pe-optics .pe-derived dl{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.pe-optics .pe-derived dl>div{flex:1;min-width:130px;padding:10px;background:var(--pes-control);border-radius:8px}
.pe-optics .pe-derived dt{font-size:11px}.pe-optics .pe-derived dd{margin:4px 0 0;font-weight:600;color:var(--pes-text)}
.pe-optics [data-note],.pe-optics .pe-observation{overflow-wrap:anywhere}
.pe-optics .pe-header>div{min-width:0}.pe-optics h2{overflow-wrap:anywhere}
.pe-optics .pe-lamp-control{flex-shrink:0;min-height:44px}
.pe-optics-host[data-narrow=true] .pe-optics{border-radius:15px}
.pe-optics .pe-legacy-link{margin:12px 24px}
@container pe-optics (max-width:500px){.pe-optics .pe-fields[data-count="3"]{grid-template-columns:minmax(0,1fr)}.pe-optics .pe-scene-top{gap:5px}.pe-optics .pe-header{align-items:flex-start}.pe-optics .pe-badge{margin-top:3px}}