.opt-reflection-hero {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:34px;
  align-items:center;
  padding:74px 0 54px;
  scroll-margin-top:calc(var(--header-h) + 22px);
}
.opt-reflection-hero > * { min-width:0; }
.opt-reflection-hero-copy h2 {
  margin:12px 0 18px;
  max-width:900px;
  font-size:clamp(2.35rem,5vw,4.7rem);
  line-height:.99;
  letter-spacing:-.05em;
}
.opt-reflection-hero-copy h2 em { color:var(--accent); font-style:normal; }
.opt-reflection-hero-copy > p { margin:0; max-width:790px; color:var(--muted); font-size:1.04rem; }
.opt-reflection-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.opt-reflection-hero-card,
.opt-reflection-card,
.opt-reflection-panel,
.opt-reflection-assumption,
.opt-reflection-note,
.opt-reflection-caution,
.opt-reflection-scope-grid article {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.opt-reflection-hero-card { padding:25px; }
.opt-reflection-hero-card > span,
.opt-reflection-card > span,
.opt-reflection-scope-grid article > span {
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.opt-reflection-equation {
  display:grid;
  place-items:center;
  min-height:70px;
  margin:14px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:color-mix(in srgb,var(--bg-elevated) 78%,transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  text-align:center;
  overflow-wrap:anywhere;
}
.opt-reflection-equation.large { min-height:108px; font-size:clamp(1.02rem,1.9vw,1.3rem); line-height:1.65; }
.opt-reflection-mini-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.opt-reflection-mini-grid div { min-width:0; padding:11px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--panel-solid) 72%,transparent); }
.opt-reflection-mini-grid span { display:block; color:var(--muted); font-size:.69rem; }
.opt-reflection-mini-grid strong { display:block; margin-top:4px; font-size:.82rem; overflow-wrap:anywhere; }

.opt-reflection-derive { padding:42px 0 68px; }
.opt-reflection-derive-grid,
.opt-reflection-law-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.opt-reflection-card { padding:22px; box-shadow:none; }
.opt-reflection-card.primary { background:color-mix(in srgb,var(--accent) 8%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); }
.opt-reflection-card p { margin:8px 0 0; color:var(--muted); font-size:.91rem; }
.opt-reflection-note,
.opt-reflection-caution { display:grid; grid-template-columns:190px minmax(0,1fr); gap:18px; align-items:start; margin-top:14px; padding:20px 22px; box-shadow:none; }
.opt-reflection-note strong { color:var(--warm); }
.opt-reflection-caution strong { color:var(--accent-3); }
.opt-reflection-note p,.opt-reflection-caution p { margin:0; color:var(--muted); }

.opt-reflection-law { padding:66px 0; border-block:1px solid var(--line); background:color-mix(in srgb,var(--bg-elevated) 52%,transparent); }

.opt-reflection-lab-section { padding:72px 0 64px; }
.opt-reflection-lab-shell { display:grid; grid-template-columns:292px minmax(0,1fr); gap:14px; align-items:start; }
.opt-reflection-controls {
  position:sticky;
  top:calc(var(--header-h) + 16px);
  display:grid;
  gap:13px;
  min-width:0;
  padding:18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg-elevated) 92%,transparent);
  box-shadow:var(--shadow);
}
.opt-reflection-control-head { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:4px; }
.opt-reflection-control-head > div { display:grid; gap:3px; min-width:0; }
.opt-reflection-control-head span { color:var(--muted); font-size:.72rem; }
.opt-reflection-control-head strong { font-size:.87rem; overflow-wrap:anywhere; }
.opt-reflection-status { min-width:max-content; padding:4px 7px; border:1px solid var(--line); border-radius:999px; color:var(--accent)!important; font-weight:800; letter-spacing:.04em; }
.opt-reflection-controls label { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 10px; align-items:center; min-width:0; font-size:.78rem; font-weight:700; }
.opt-reflection-controls label > span { min-width:0; overflow-wrap:anywhere; }
.opt-reflection-controls output { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.74rem; }
.opt-reflection-controls input[type="range"] { grid-column:1/-1; width:100%; min-width:0; accent-color:var(--accent); }
.opt-reflection-presets { min-width:0; margin:0; padding:10px; border:1px solid var(--line); border-radius:12px; }
.opt-reflection-presets legend { padding:0 5px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.opt-reflection-presets > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.opt-reflection-presets button { min-width:0; padding:8px 7px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); font:inherit; font-size:.7rem; cursor:pointer; }
.opt-reflection-presets button:hover,.opt-reflection-presets button.is-active { border-color:color-mix(in srgb,var(--accent) 52%,var(--line)); color:var(--text); background:color-mix(in srgb,var(--accent) 9%,transparent); }
.opt-reflection-reset { width:100%; }
.opt-reflection-assumption { padding:11px 12px; border-radius:12px; box-shadow:none; }
.opt-reflection-assumption strong { font-size:.76rem; }
.opt-reflection-assumption p { margin:5px 0 0; color:var(--muted); font-size:.7rem; line-height:1.48; }

.opt-reflection-stage { display:grid; gap:14px; min-width:0; }
.opt-reflection-panel { min-width:0; padding:16px; box-shadow:none; }
.opt-reflection-panel-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.opt-reflection-panel-head > div:first-child { display:grid; gap:3px; min-width:0; }
.opt-reflection-panel-head span { color:var(--muted); font-size:.69rem; }
.opt-reflection-panel-head strong { font-size:.87rem; overflow-wrap:anywhere; }
.opt-reflection-readout { text-align:right; min-width:0; }
.opt-reflection-readout strong { display:block; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; overflow-wrap:anywhere; }
.opt-reflection-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.opt-reflection-geometry-svg,
.opt-reflection-boundary-svg,
.opt-reflection-k-svg { width:100%; overflow:hidden; }
.or-medium-bg { fill:color-mix(in srgb,var(--accent) 4%,transparent); stroke:var(--line); stroke-width:1.2; }
.or-grid line { stroke:var(--line); stroke-width:1; }
.or-interface { stroke:var(--line-strong); stroke-width:4; }
.or-normal-axis { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:7 7; }
.or-front { fill:none; stroke-width:2.2; opacity:.55; }
.or-front.incident { stroke:var(--accent); }
.or-front.reflected { stroke:var(--accent-3); }
.or-front.highlight { stroke-width:3.6; opacity:.95; }
.or-k { stroke-width:4; stroke-linecap:round; }
.or-k.incident { stroke:var(--accent); }
.or-k.reflected { stroke:var(--accent-3); }
#or-arrow-i path,#or-k-arrow-i path { fill:var(--accent); }
#or-arrow-r path,#or-k-arrow-r path { fill:var(--accent-3); }
.or-angle-arc { fill:none; stroke-width:2.2; }
.or-angle-arc.incident { stroke:var(--accent); }
.or-angle-arc.reflected { stroke:var(--accent-3); }
.or-hit { fill:var(--warm); stroke:var(--bg-elevated); stroke-width:3; }
.or-svg-label { fill:var(--muted); font:600 15px Inter,ui-sans-serif,system-ui,sans-serif; }
.or-svg-label.incident { fill:var(--accent); font-weight:750; }
.or-svg-label.reflected { fill:var(--accent-3); font-weight:750; }
.or-axis,.or-k-axis { stroke:var(--line-strong); stroke-width:1.35; }
.or-axis.muted { stroke:var(--line); }
.or-boundary-wave { fill:none; stroke-width:3; stroke-linecap:round; }
.or-boundary-wave.incident { stroke:var(--accent); }
.or-boundary-wave.reflected { stroke:var(--accent-3); opacity:.82; }
.or-k-circle { fill:none; stroke:var(--line); stroke-width:1.4; }
.or-k-projection { stroke:var(--muted); stroke-width:1.4; stroke-dasharray:5 5; }
.or-k-vector { stroke-width:4; stroke-linecap:round; }
.or-k-vector.incident { stroke:var(--accent); }
.or-k-vector.reflected { stroke:var(--accent-3); }

.opt-reflection-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.opt-reflection-metrics div { min-width:0; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.opt-reflection-metrics span,.opt-reflection-metrics small { display:block; color:var(--muted); font-size:.67rem; }
.opt-reflection-metrics strong { display:block; margin:4px 0 2px; color:var(--text); font-size:.88rem; overflow-wrap:anywhere; }
.opt-reflection-check-panel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.opt-reflection-check-panel div { min-width:0; padding:11px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--bg-elevated) 62%,transparent); }
.opt-reflection-check-panel span,.opt-reflection-check-panel small { display:block; color:var(--muted); font-size:.64rem; }
.opt-reflection-check-panel strong { display:block; margin:4px 0 2px; color:var(--accent-3); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.76rem; overflow-wrap:anywhere; }
.opt-reflection-cross-reference { margin:18px 0 0; color:var(--muted); font-size:.84rem; }
.opt-reflection-cross-reference a { color:var(--text); }

.opt-reflection-scope { padding:48px 0 54px; }
.opt-reflection-scope-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.opt-reflection-scope-grid article { padding:18px; border-radius:var(--radius-sm); box-shadow:none; }
.opt-reflection-scope-grid strong { display:block; margin-top:6px; font-size:.97rem; }
.opt-reflection-scope-grid p { margin:7px 0 0; color:var(--muted); font-size:.82rem; }

@media (max-width:1040px) {
  .opt-reflection-hero { grid-template-columns:1fr; }
  .opt-reflection-hero-card { max-width:680px; }
  .opt-reflection-lab-shell { grid-template-columns:1fr; }
  .opt-reflection-controls { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .opt-reflection-control-head,.opt-reflection-presets,.opt-reflection-reset,.opt-reflection-assumption { grid-column:1/-1; }
}
@media (max-width:780px) {
  .opt-reflection-hero { padding-top:54px; }
  .opt-reflection-derive-grid,.opt-reflection-law-grid,.opt-reflection-scope-grid { grid-template-columns:1fr; }
  .opt-reflection-note,.opt-reflection-caution { grid-template-columns:1fr; gap:5px; }
  .opt-reflection-detail-grid { grid-template-columns:1fr; }
  .opt-reflection-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .opt-reflection-check-panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .opt-reflection-hero-copy h2 { font-size:clamp(2.12rem,11.5vw,3.35rem); overflow-wrap:anywhere; }
  .opt-reflection-mini-grid { grid-template-columns:1fr; }
  .opt-reflection-controls { grid-template-columns:1fr; padding:14px; }
  .opt-reflection-controls label,.opt-reflection-control-head,.opt-reflection-presets,.opt-reflection-reset,.opt-reflection-assumption { grid-column:1; }
  .opt-reflection-panel { padding:12px; }
  .opt-reflection-panel-head { display:grid; gap:6px; }
  .opt-reflection-readout { text-align:left; }
  .opt-reflection-metrics { grid-template-columns:1fr 1fr; }
  .or-svg-label { font-size:17px; }
  .opt-reflection-law .section-heading h2,
  .opt-reflection-scope .section-heading h2 { overflow-wrap:anywhere; }
}
@media (max-width:350px) {
  .opt-reflection-metrics,.opt-reflection-check-panel { grid-template-columns:1fr; }
  .opt-reflection-hero-actions { display:grid; }
  .opt-reflection-presets > div { grid-template-columns:1fr; }
}
