html:has(.refraction-page) { scroll-padding-top: 72px; }
.refraction-page { background: var(--ink); color: var(--paper); }
.refraction-page .story-site-header { position: sticky; top: 0; background: #090b10f5; }
.refraction-page h1, .refraction-page h2 { margin: 0; font-family: var(--display); line-height: 1.05; font-weight: 600; }
.refraction-page figure { margin: 0; }
.refraction-page em { color: #ecc486; font-style: normal; }
.refraction-page .primary-action { font: 600 .95rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; margin: 0; }
.refraction-page .optics-eyebrow { color: #c4b4eb; font: .72rem/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 12px; }
.refraction-intro, .optics-workshop { width: min(1180px,90%); margin: 0 auto; }
.refraction-intro { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 6%; padding: 38px 0 54px; }
.refraction-intro h1 { font-size: clamp(3rem,5.1vw,5rem); letter-spacing: -.015em; }
.refraction-intro p:not(.optics-eyebrow) { margin: 24px 0; color: #cdc6bc; font-size: 1.06rem; max-width: 480px; }
.refraction-intro-art { height: 390px; position: relative; overflow: hidden; border: 1px solid #76614355; }
.refraction-intro-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.refraction-intro-art figcaption { position: absolute; bottom: 0; width: 100%; background: #090b10e8; color: #d4c1a5; padding: 10px; text-align: center; font-size: .73rem; }
.optics-predict { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 28px 0; border-top: 1px solid #ffffff26; }
.optics-predict h2 { font-size: clamp(1.7rem,2.5vw,2.1rem); }
.optics-predict p:not(.optics-eyebrow) { color: #bcb6af; margin: 8px 0 0; font-size: .9rem; }
.optics-choices { display: flex; gap: 10px; }
.refraction-page button { min-height: 44px; padding: 10px 12px; border: 1px solid #ffffff35; border-radius: 5px; color: var(--paper); background: #232530; cursor: pointer; font: 500 .88rem/1.35 var(--sans); }
.refraction-page button:hover:not(:disabled) { border-color: #e9ba67; background: #32333c; }
.refraction-page button:disabled { opacity: .45; cursor: not-allowed; }
.refraction-page button[aria-pressed="true"] { border-color: #d9b173; background: #493823; color: #fff0d5; }
.refraction-page :is(button,input,a):focus-visible { outline: 2px solid #f8d188; outline-offset: 4px; }
.optics-lab { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,1fr); background: #13151d; border: 1px solid #a38a604d; border-radius: 9px; overflow: clip; }
.optics-scene { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(ellipse at 55% 85%,#162325,#101319 70%); }
.optics-scene-top { display: flex; justify-content: space-between; gap: 10px; padding: 13px 18px; color: #cfc6b8; font-size: .75rem; border-bottom: 1px solid #ffffff12; }
#optics-state { color: #b8c9c2; }
#optics-diagram { width: 100%; height: clamp(280px,49svh,430px); display: block; }
#optics-diagram text { font: 500 18px var(--sans); fill: #e6ddd0; }
#optics-diagram .optics-medium text { font: 14px var(--mono); letter-spacing: 2px; fill: #b9c9c3; }
#optics-normal text { font-size: 15px; fill: #bec8c2; }
#optics-image-text { fill: #ffe0a0; }
#optics-labels text:not(#optics-image-text) { fill: #d4bfff; }
.optics-ready #optics-eye { cursor: grab; touch-action: none; }
.optics-ready #optics-eye:active { cursor: grabbing; }
.optics-reveal { visibility: hidden; }
.optics-lab[data-revealed="true"] .optics-reveal { visibility: visible; }
.optics-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; min-height: 42px; align-items: center; padding: 10px 18px; border-top: 1px solid #ffffff12; font-size: .73rem; color: #d3cabd; }
.optics-legend span { display: flex; align-items: center; gap: 7px; }
.optics-legend i { width: 17px; border-top: 3px solid #e5b368; }
.optics-legend .optics-key-actual { border-color: #c2a4f4; }
.optics-legend .optics-key-trace { border-color: #eee9df; border-top-style: dashed; border-top-width: 2px; }
.optics-console { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(18px,2vw,28px); }
.optics-readout { min-height: 112px; }
.optics-readout .optics-eyebrow { margin-bottom: 6px; }
.optics-readout h2 { font: 600 1.35rem/1.2 var(--sans); margin: 0 0 8px; }
.optics-readout > p:last-child { font-size: .92rem; line-height: 1.5; color: #d1cbc3; margin: 0; }
.optics-view-control label { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; }
#optics-angle { color: #eac689; white-space: nowrap; }
#optics-view { width: 100%; height: 44px; margin: 0; accent-color: #e8bd76; cursor: ew-resize; }
.refraction-page #optics-view:focus-visible { outline-offset: 0; }
.optics-view-control > div { display: flex; justify-content: space-between; margin-top: -4px; color: #b8b6b1; font-size: .72rem; }
.refraction-page .optics-primary { color: #241a0c; background: #ecc278; border-color: #ecc278; font-weight: 600; }
.refraction-page .optics-primary:hover:not(:disabled) { background: #ffe0a6; }
.optics-secondary { display: grid; grid-template-columns: 1.2fr 1fr; gap: 9px; }
.optics-result { min-height: 43px; margin: 0; color: #e9d3ae; font-size: .82rem; line-height: 1.45; }
.refraction-page .optics-source { color: #c4b3e9; font-size: .77rem; text-underline-offset: 3px; line-height: 1.5; }
.optics-model-note { grid-column: 1/-1; margin: 0; padding: 11px 18px; background: #0d1016; border-top: 1px solid #ffffff12; color: #b8b4ab; font-size: .73rem; line-height: 1.5; }
.optics-model-note a { color: #d7c6f2; white-space: nowrap; }
.optics-instruction { margin: 14px 0 0; font-size: .8rem; color: #aaa9a6; }
.optics-explanation { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; margin: 80px 0; }
.optics-explanation h2, .optics-takeaway h2 { font-size: clamp(2.4rem,4vw,3.6rem); }
.optics-explanation p:not(.optics-eyebrow), .optics-takeaway > p:last-child { color: #cfc6b9; line-height: 1.7; }
.optics-reading-key article { display: flex; gap: 18px; border-top: 1px solid #ffffff26; padding: 18px 0; }
.optics-key-number { color: #e6c28c; font: .85rem var(--mono); padding-top: 3px; }
.optics-reading-key h3 { margin: 0; font: 500 1.04rem var(--sans); }
.optics-reading-key p { margin: 8px 0 0; font-size: .92rem; }
.optics-takeaway { padding: 36px; background: #181821; border-left: 2px solid #d7af72; }
.optics-takeaway > p:last-child { margin-bottom: 0; }
.optics-science { padding: 65px 0 45px; }
.optics-science h2, .optics-next h2 { font-size: clamp(1.8rem,3vw,2.6rem); }
.optics-science-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin: 25px 0; }
.optics-science h3 { font: 500 .98rem var(--sans); }
.optics-science p { font-size: .85rem; color: #bcb7af; line-height: 1.7; }
.optics-science a { color: #cfbfee; }
.optics-review { border-top: 1px solid #ffffff20; padding-top: 20px; }
.optics-next { display: grid; grid-template-columns: 1fr 230px; gap: 40px; align-items: center; border-top: 1px solid #ffffff26; padding: 40px 0 60px; }
.optics-next p:not(.optics-eyebrow) { color: #c3bbb0; }
.optics-next img { width: 100%; height: 230px; object-fit: cover; object-position: center 60%; border: 1px solid #ffffff20; }
.optics-noscript { padding: 20px; border: 1px solid #ac8e5b; }
@media (min-width: 851px) and (max-height: 740px) {
  .optics-console { gap: 10px; padding: 15px 20px; }
  .optics-readout { min-height: 98px; }
  .optics-readout h2 { font-size: 1.18rem; }
  .optics-readout > p:last-child { font-size: .85rem; }
  .optics-result { font-size: .77rem; min-height: 34px; }
  #optics-diagram { height: 310px; }
}
@media (max-width: 850px) {
  .refraction-intro { gap: 25px; }
  .refraction-intro-art { height: 340px; }
  .optics-predict { flex-direction: column; align-items: start; gap: 18px; }
  .optics-lab { grid-template-columns: 1fr; }
  #optics-diagram { height: min(40svh,340px); }
  .optics-console { gap: 14px; }
  .optics-readout { min-height: 0; }
  .optics-explanation { gap: 35px; }
  .optics-science-grid { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .refraction-page .site-header nav a:last-child { display: none; }
  .refraction-intro, .optics-workshop { width: 91%; }
  .refraction-intro { padding: 25px 0 32px; grid-template-columns: 1fr; gap: 25px; }
  .refraction-intro h1 { font-size: clamp(2.7rem,10vw,3.5rem); }
  .refraction-intro p:not(.optics-eyebrow) { margin: 18px 0; font-size: .95rem; }
  .refraction-intro-art { height: 220px; }
  .refraction-intro-art img { object-position: center 58%; }
  .optics-choices { width: 100%; }
  .optics-choices button { flex: 1; padding: 9px 10px; font-size: .82rem; }
  .optics-scene-top { padding: 10px 12px; font-size: .65rem; }
  #optics-diagram { height: min(31svh,260px); }
  #optics-diagram text { font-size: 28px; }
  #optics-diagram .optics-medium text { font-size: 24px; letter-spacing: 1px; }
  #optics-normal text { font-size: 24px; }
  #optics-eye rect { x: -65px; y: -65px; width: 130px; height: 130px; }
  .optics-legend { padding: 8px 12px; gap: 8px 12px; font-size: .65rem; min-height: 34px; }
  .optics-legend i { width: 12px; }
  .optics-console { padding: 14px; gap: 9px; }
  .optics-readout .optics-eyebrow { display: none; }
  .optics-readout h2 { font-size: 1.13rem; margin-bottom: 5px; }
  .optics-readout > p:last-child { font-size: .86rem; line-height: 1.45; }
  .optics-result { min-height: 0; }
  .optics-instruction { font-size: .75rem; }
  .optics-explanation { grid-template-columns: 1fr; margin: 50px 0; gap: 25px; }
  .optics-takeaway { padding: 24px; }
  .optics-takeaway h2 { font-size: 2.1rem; }
  .optics-next { grid-template-columns: 1fr; gap: 24px; }
  .optics-next img { height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .refraction-page * { scroll-behavior: auto !important; } }