.opt-refraction-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-refraction-hero > * { min-width:0; }
.opt-refraction-hero-copy h2 {
  margin:12px 0 18px;
  max-width:920px;
  font-size:clamp(2.35rem,5vw,4.7rem);
  line-height:.99;
  letter-spacing:-.05em;
}
.opt-refraction-hero-copy h2 em { color:var(--accent); font-style:normal; }
.opt-refraction-hero-copy > p { margin:0; max-width:800px; color:var(--muted); font-size:1.04rem; }
.opt-refraction-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.opt-refraction-hero-card,
.opt-refraction-card,
.opt-refraction-panel,
.opt-refraction-assumption,
.opt-refraction-note,
.opt-refraction-caution,
.opt-refraction-scope-grid article {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.opt-refraction-hero-card { padding:25px; }
.opt-refraction-hero-card > span,
.opt-refraction-card > span,
.opt-refraction-scope-grid article > span {
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.opt-refraction-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-refraction-equation.large { min-height:108px; font-size:clamp(1.02rem,1.9vw,1.3rem); line-height:1.65; }
.opt-refraction-mini-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.opt-refraction-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-refraction-mini-grid span { display:block; color:var(--muted); font-size:.69rem; }
.opt-refraction-mini-grid strong { display:block; margin-top:4px; font-size:.82rem; overflow-wrap:anywhere; }

.opt-refraction-derive { padding:42px 0 68px; }
.opt-refraction-derive-grid,
.opt-refraction-law-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.opt-refraction-card { padding:22px; box-shadow:none; }
.opt-refraction-card.primary { background:color-mix(in srgb,var(--accent) 8%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 34%,var(--line)); }
.opt-refraction-card p { margin:8px 0 0; color:var(--muted); font-size:.91rem; }
.opt-refraction-note,
.opt-refraction-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-refraction-note strong { color:var(--warm); }
.opt-refraction-caution strong { color:var(--accent-3); }
.opt-refraction-note p,.opt-refraction-caution p { margin:0; color:var(--muted); }
.opt-refraction-law { padding:66px 0; border-block:1px solid var(--line); background:color-mix(in srgb,var(--bg-elevated) 52%,transparent); }

.opt-refraction-lab-section { padding:72px 0 64px; }
.opt-refraction-lab-shell { display:grid; grid-template-columns:292px minmax(0,1fr); gap:14px; align-items:start; }
.opt-refraction-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-refraction-control-head { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:4px; }
.opt-refraction-control-head > div { display:grid; gap:3px; min-width:0; }
.opt-refraction-control-head span { color:var(--muted); font-size:.72rem; }
.opt-refraction-control-head strong { font-size:.87rem; overflow-wrap:anywhere; }
.opt-refraction-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-refraction-status.invalid { color:var(--warm)!important; border-color:color-mix(in srgb,var(--warm) 50%,var(--line)); }
.opt-refraction-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-refraction-controls label > span { min-width:0; overflow-wrap:anywhere; }
.opt-refraction-controls output { color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.74rem; }
.opt-refraction-controls input[type="range"] { grid-column:1/-1; width:100%; min-width:0; accent-color:var(--accent); }
.opt-refraction-presets { min-width:0; margin:0; padding:10px; border:1px solid var(--line); border-radius:12px; }
.opt-refraction-presets legend { padding:0 5px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.opt-refraction-presets > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.opt-refraction-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; overflow-wrap:anywhere; }
.opt-refraction-presets button:hover,.opt-refraction-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-refraction-reset { width:100%; }
.opt-refraction-assumption { padding:11px 12px; border-radius:12px; box-shadow:none; }
.opt-refraction-assumption strong { font-size:.76rem; }
.opt-refraction-assumption p { margin:5px 0 0; color:var(--muted); font-size:.7rem; line-height:1.48; }

.opt-refraction-stage { display:grid; gap:14px; min-width:0; }
.opt-refraction-panel { min-width:0; padding:16px; box-shadow:none; }
.opt-refraction-panel-head { display:flex; align-items:start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.opt-refraction-panel-head > div:first-child { display:grid; gap:3px; min-width:0; }
.opt-refraction-panel-head span { color:var(--muted); font-size:.69rem; }
.opt-refraction-panel-head strong { font-size:.87rem; overflow-wrap:anywhere; }
.opt-refraction-readout { text-align:right; min-width:0; }
.opt-refraction-readout strong { display:block; color:var(--accent); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; overflow-wrap:anywhere; }
.opt-refraction-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.opt-refraction-geometry-svg,
.opt-refraction-boundary-svg,
.opt-refraction-k-svg { width:100%; overflow:hidden; }
.orr-medium1 { fill:color-mix(in srgb,var(--accent) 5%,transparent); }
.orr-medium2 { fill:color-mix(in srgb,var(--accent-3) 6%,transparent); }
.orr-grid line { stroke:var(--line); stroke-width:1; }
.orr-interface { stroke:var(--line-strong); stroke-width:4; }
.orr-normal-axis { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:7 7; }
.orr-front { fill:none; stroke-width:2.2; opacity:.52; }
.orr-front.incident { stroke:var(--accent); }
.orr-front.transmitted { stroke:var(--accent-3); }
.orr-front.highlight { stroke-width:3.6; opacity:.96; }
.orr-k { stroke-width:4; stroke-linecap:round; }
.orr-k.incident { stroke:var(--accent); }
.orr-k.transmitted { stroke:var(--accent-3); }
#orr-arrow-i path,#orr-k-arrow-i path { fill:var(--accent); }
#orr-arrow-t path,#orr-k-arrow-t path { fill:var(--accent-3); }
.orr-angle-arc { fill:none; stroke-width:2.2; }
.orr-angle-arc.incident { stroke:var(--accent); }
.orr-angle-arc.transmitted { stroke:var(--accent-3); }
.orr-hit { fill:var(--warm); stroke:var(--bg-elevated); stroke-width:3; }
.orr-svg-label { fill:var(--muted); font:600 15px Inter,ui-sans-serif,system-ui,sans-serif; }
.orr-svg-label.incident { fill:var(--accent); font-weight:750; }
.orr-svg-label.transmitted { fill:var(--accent-3); font-weight:750; }
.orr-axis,.orr-k-axis { stroke:var(--line-strong); stroke-width:1.35; }
.orr-axis.muted { stroke:var(--line); }
.orr-boundary-wave { fill:none; stroke-width:3; stroke-linecap:round; }
.orr-boundary-wave.incident { stroke:var(--accent); }
.orr-boundary-wave.transmitted { stroke:var(--accent-3); opacity:.84; }
.orr-k-circle-1,.orr-k-circle-2 { fill:none; stroke-width:1.5; }
.orr-k-circle-1 { stroke:var(--accent); opacity:.5; }
.orr-k-circle-2 { stroke:var(--accent-3); opacity:.5; }
.orr-k-projection { stroke:var(--muted); stroke-width:1.4; stroke-dasharray:5 5; }
.orr-k-vector { stroke-width:4; stroke-linecap:round; }
.orr-k-vector.incident { stroke:var(--accent); }
.orr-k-vector.transmitted { stroke:var(--accent-3); }
.orr-invalid-overlay { fill:color-mix(in srgb,var(--bg-elevated) 84%,transparent); opacity:0; pointer-events:none; transition:opacity .16s ease; }
.orr-invalid-text { fill:var(--warm); font:750 18px Inter,ui-sans-serif,system-ui,sans-serif; opacity:0; pointer-events:none; transition:opacity .16s ease; }
[data-invalid="true"] .orr-invalid-overlay,[data-invalid="true"] .orr-invalid-text { opacity:1; }

.opt-refraction-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.opt-refraction-metrics div { min-width:0; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.opt-refraction-metrics span,.opt-refraction-metrics small { display:block; color:var(--muted); font-size:.67rem; }
.opt-refraction-metrics strong { display:block; margin:4px 0 2px; color:var(--text); font-size:.88rem; overflow-wrap:anywhere; }
.opt-refraction-check-panel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.opt-refraction-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-refraction-check-panel span,.opt-refraction-check-panel small { display:block; color:var(--muted); font-size:.64rem; }
.opt-refraction-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-refraction-check-panel strong.invalid { color:var(--warm); }
.opt-refraction-cross-reference { margin:18px 0 0; color:var(--muted); font-size:.84rem; }
.opt-refraction-cross-reference a { color:var(--text); }
.opt-refraction-scope { padding:48px 0 54px; }
.opt-refraction-scope-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.opt-refraction-scope-grid article { padding:18px; border-radius:var(--radius-sm); box-shadow:none; }
.opt-refraction-scope-grid strong { display:block; margin-top:6px; font-size:.97rem; }
.opt-refraction-scope-grid p { margin:7px 0 0; color:var(--muted); font-size:.82rem; }

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