:root{--ink:#162b3d;--muted:#647486;--line:#dce6eb;--paper:#f3f7f8;--white:#fff;--orange:#ffb068;--cyan:#86d9ec;--mint:#a5e8c2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans TC',sans-serif;line-height:1.6}
button,select,input{font:inherit}
button,select{color:inherit}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,#source-handle:focus-visible{outline:3px solid #ed9043;outline-offset:3px}
.skip-link{position:absolute;left:16px;top:-50px;background:#fff;padding:8px 14px;z-index:10}.skip-link:focus{top:10px}
.site-header{height:68px;border-bottom:1px solid #e5ecef;background:rgba(255,255,255,.86);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,72px)}
.home-link{color:#34506a;text-decoration:none;font-size:14px;font-weight:700}.home-link:hover{text-decoration:underline}.home-link span{margin-right:8px;font-size:19px}.site-name{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;color:#688198}.site-mark{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e3f1f4;color:#21748d;font-size:15px;margin-right:7px;letter-spacing:0}
.page-shell{max-width:1510px;margin:auto;padding:42px clamp(24px,4vw,72px) 70px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:34px}.eyebrow{font:700 11px 'DM Sans','Noto Sans TC',sans-serif;letter-spacing:.17em;color:#3f8094;margin:0 0 10px}.page-heading h1{font-size:clamp(32px,3.3vw,51px);line-height:1.2;letter-spacing:-.035em;margin:0 0 12px;font-weight:800}.title-dot{color:#e89450}.lead{color:#637789;margin:0;font-size:15px}.lesson-index{min-width:104px;text-align:right;display:flex;flex-direction:column;line-height:1.2;color:#77909f;font:700 10px 'DM Sans','Noto Sans TC',sans-serif;letter-spacing:.12em}.lesson-index strong{font-size:54px;letter-spacing:-.08em;color:#bed4dd;font-weight:500;line-height:1}
.lab-layout{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr);gap:18px;align-items:stretch}
.control-panel,.experiment-panel,.snell-card,.stat-card,.intensity-panel,.explain-panel{border:1px solid var(--line);box-shadow:0 12px 35px rgba(25,52,67,.04)}
.control-panel{border-radius:21px;background:#fff;padding:26px 25px 23px;display:flex;flex-direction:column}.panel-title{display:flex;gap:14px;align-items:center;padding-bottom:24px;border-bottom:1px solid #e7eef1;margin-bottom:23px}.panel-number{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;color:#2b7083;background:#e7f4f4;font:700 14px 'DM Sans',sans-serif}.panel-title .eyebrow{margin-bottom:1px;color:#86a1ad}.panel-title h2{font-size:18px;margin:0;line-height:1.3}.control-group{margin-bottom:20px}.control-group label,.preset-label{display:block;font-size:13px;font-weight:700;margin-bottom:9px}.medium-role{float:right;font-size:11px;font-weight:500;color:#94a3af}.control-group select{width:100%;height:45px;border:1px solid #d8e3e8;border-radius:10px;background:#f9fbfc;padding:0 13px;font-size:13px;font-weight:600;cursor:pointer}.control-group select:hover{border-color:#86b5c2}.label-row{display:flex;align-items:center;justify-content:space-between}.label-row label{margin:0}.math-symbol{font-family:Georgia,serif;font-weight:400;color:#738d9e;margin-left:4px}.label-row output{font:700 23px 'DM Sans',sans-serif;color:#c57940}.angle-group{margin-top:4px;margin-bottom:18px}.angle-group input{width:100%;margin:16px 0 2px;accent-color:#e38d4f;cursor:pointer}.range-ends{display:flex;justify-content:space-between;font:600 11px 'DM Sans',sans-serif;color:#96a7b2}.control-hint{font-size:11px;color:#78909e;margin:11px 0 0;line-height:1.5}.preset-area{border-top:1px solid #e7eef1;padding-top:20px}.preset-label{margin:0 0 10px}.preset-buttons{display:grid;gap:8px}.preset-buttons button{width:100%;border:1px solid #dce7ec;border-radius:9px;background:#f7fafb;padding:10px 12px;text-align:left;font-size:12px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .15s,border-color .15s}.preset-buttons button span{color:#74a3b0;font-size:16px}.preset-buttons button:hover{background:#eaf4f5;border-color:#a9ccd3}.control-footnote{display:flex;gap:10px;color:#67808c;background:#edf5f4;border-radius:12px;padding:13px 14px;margin-top:auto}.control-footnote>span{color:#3f92a0}.control-footnote p{font-size:11px;margin:0;line-height:1.6}
.experiment-panel{background:#fff;border-radius:21px;overflow:hidden;min-width:0;display:flex;flex-direction:column}.stage-heading{height:61px;padding:0 23px;display:flex;align-items:center;justify-content:space-between}.stage-heading>div{display:flex;align-items:center;gap:10px}.stage-heading h2{font-size:14px;margin:0}.live-dot{width:8px;height:8px;border-radius:50%;background:#68c7a3;box-shadow:0 0 0 4px #e3f8ee}.stage-tag{font-size:11px;font-weight:700;color:#2c8a76;background:#e6f5f0;padding:4px 10px;border-radius:999px}.stage-tag.is-tir{color:#ae7041;background:#fff1e5}.diagram-wrap{background:#11253a;min-width:0}.diagram-wrap svg{display:block;width:100%;height:auto;max-height:600px;touch-action:none}.diagram-medium{fill:#e9f5f8;font:700 21px 'Noto Sans TC',sans-serif}.diagram-index{fill:#a5c7d2;font:600 14px 'DM Sans',sans-serif}.diagram-minor{fill:#9ab8c7;font:500 12px 'Noto Sans TC',sans-serif}.ray{fill:none;stroke-width:4;stroke-linecap:round}.incident{stroke:var(--orange)}.reflected{stroke:var(--cyan)}.refracted{stroke:var(--mint)}.ray-glow{fill:none;stroke-width:16;stroke-opacity:.38;filter:url(#ray-glow)}#incident-glow{stroke:var(--orange)}#reflected-glow{stroke:var(--cyan)}#refracted-glow{stroke:var(--mint)}.angle-arc{fill:none;stroke-width:1.5;stroke-dasharray:3 3}.incident-stroke{stroke:var(--orange)}.reflected-stroke{stroke:var(--cyan)}.refracted-stroke{stroke:var(--mint)}.angle-text{font:700 17px 'DM Sans',sans-serif}.incident-fill{fill:var(--orange)}.reflected-fill{fill:var(--cyan)}.refracted-fill{fill:var(--mint)}.ray-name{font:700 15px 'Noto Sans TC',sans-serif;paint-order:stroke;stroke:#11253a;stroke-width:4}.source-handle{cursor:grab;outline:none}.source-handle:active{cursor:grabbing}.handle-halo{fill:#ffb068;fill-opacity:.16;stroke:#ffb068;stroke-opacity:.75;stroke-width:1.5}.handle-core{fill:#ffbd7d;stroke:#fff0dc;stroke-width:2}.source-handle:hover .handle-halo,.source-handle:focus-visible .handle-halo{fill-opacity:.35;stroke-width:3}.diagram-bottom{min-height:57px;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}.diagram-bottom p{font-size:11px;color:#617c89;margin:0}.legend{display:flex;gap:16px;white-space:nowrap}.legend span{font-size:11px;color:#63808d}.legend-line{display:inline-block;vertical-align:3px;width:15px;height:3px;border-radius:2px;margin-right:5px}.incident-bg{background:#e9a15f}.reflected-bg{background:#79c2d6}.refracted-bg{background:#73c69b}
.result-section{display:grid;grid-template-columns:minmax(300px,1.7fr) repeat(3,minmax(130px,1fr));gap:14px;margin-top:18px}.snell-card,.stat-card{background:#fff;border-radius:17px;min-height:138px;padding:22px 24px}.snell-card{background:#e7f2f0;border-color:#cfe5df}.snell-card .eyebrow{color:#5d9688;margin-bottom:5px}.snell-card h2{font-size:17px;margin:0 0 5px}.snell-symbolic{font:600 13px Georgia,serif;color:#5a807a;margin:0 0 7px}.snell-equation{display:flex;align-items:center;flex-wrap:wrap;column-gap:7px;font:700 clamp(16px,1.45vw,21px) 'DM Sans',sans-serif;color:#1e5a60;line-height:1.35}.snell-equation #snell-relation{color:#a36534}.snell-note{font-size:11px;color:#466b69;margin:8px 0 0;line-height:1.5}.stat-card{display:flex;flex-direction:column;justify-content:space-between}.stat-card span{font-size:12px;font-weight:700;color:#728594}.stat-card em{font:italic 15px Georgia,serif;margin-left:4px}.stat-card strong{font:700 30px 'DM Sans',sans-serif;letter-spacing:-.04em}.stat-card:last-child strong{color:#399575}
.intensity-panel{margin-top:18px;padding:23px 25px 21px;border-radius:17px;background:#fff}.intensity-heading{display:flex;align-items:end;justify-content:space-between;gap:18px}.intensity-heading .eyebrow{margin-bottom:4px}.intensity-heading h2{font-size:17px;margin:0}.intensity-heading>p{font-size:12px;color:#557482;margin:0;text-align:right}.intensity-flow{display:flex;align-items:center;gap:23px;margin-top:22px}.incident-total{min-width:105px;display:flex;flex-direction:column;border-left:4px solid #e5a067;padding-left:14px}.incident-total span{font-size:12px;color:#738795;font-weight:700}.incident-total strong{font:700 27px 'DM Sans',sans-serif;color:#a65e2a}.flow-arrow{font-size:23px;color:#9db2bb}.intensity-result{flex:1;min-width:0}.intensity-values{display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#5c7482;font-weight:700}.intensity-values span{white-space:nowrap}.intensity-values strong{font:700 21px 'DM Sans',sans-serif;color:#193e53;margin-left:7px}.intensity-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.intensity-bar{height:16px;display:flex;overflow:hidden;border-radius:999px;background:#edf3f5;margin-top:11px}.reflection-bar{width:2%;background:#499db5;transition:width .16s ease}.transmission-bar{width:98%;background:#79caa3;transition:width .16s ease}.intensity-note{font-size:11px;color:#8496a1;margin:17px 0 0;line-height:1.6}
.explain-panel{border-radius:17px;background:#fff;margin-top:18px;overflow:hidden}.explain-heading{padding:19px 25px;display:flex;align-items:center;gap:10px}.explain-heading h2{font-size:14px;margin:0}.explain-icon{width:23px;height:23px;border-radius:50%;background:#e3f0f2;display:inline-grid;place-items:center;color:#2d8292;font:700 13px 'DM Sans',sans-serif}.explain-content{border-top:1px solid #e7eef1;padding:23px 25px 27px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.explain-content h3{font-size:13px;margin:0 0 8px}.explain-content p{font-size:12px;color:#5f7480;margin:0;line-height:1.8}.explain-content .formula{font:600 18px Georgia,serif;color:#23677a;letter-spacing:.02em;margin-bottom:8px}
@media(max-width:1050px){.page-shell{padding:32px 24px 60px}.lab-layout{grid-template-columns:265px minmax(0,1fr);gap:13px}.control-panel{padding:20px}.result-section{grid-template-columns:repeat(3,1fr)}.snell-card{grid-column:1/-1;min-height:auto}.diagram-bottom{align-items:flex-start;flex-direction:column;gap:6px}}
@media(max-width:720px){.site-header{padding:0 18px}.site-name{font-size:10px}.page-shell{padding:28px 16px 50px}.page-heading{margin-bottom:24px}.lesson-index{display:none}.lab-layout{grid-template-columns:1fr}.control-panel{padding:20px}.control-footnote{margin-top:20px}.diagram-wrap{overflow-x:auto}.diagram-wrap svg{width:max(650px,100%);max-width:none}.result-section{gap:8px}.stat-card{padding:17px 13px;min-height:105px}.stat-card strong{font-size:25px}.intensity-heading{align-items:start;flex-direction:column;gap:4px}.intensity-heading>p{text-align:left}.intensity-flow{gap:12px}.incident-total{min-width:76px;padding-left:9px}.incident-total strong{font-size:22px}.intensity-values{gap:8px;font-size:11px}.intensity-values strong{display:block;font-size:19px;margin-left:16px}.explain-content{grid-template-columns:1fr;gap:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.preset-buttons button{transition:none}.reflection-bar,.transmission-bar{transition:none}}
.reflected.normal-overlap{stroke-dasharray:12 10}

/* All three media use pale fields, so diagram labels and rays use dark colors. */
.diagram-wrap{background:#FDFFFF}
#ray-diagram .diagram-medium{fill:#163e56}
#ray-diagram .diagram-index,#ray-diagram .diagram-minor{fill:#315e73}
#ray-diagram .incident,#ray-diagram .incident-stroke{stroke:#a84d17}
#ray-diagram .reflected,#ray-diagram .reflected-stroke{stroke:#096486}
#ray-diagram .refracted,#ray-diagram .refracted-stroke{stroke:#1e7354}
#ray-diagram #incident-glow{stroke:#a84d17;stroke-opacity:.2}
#ray-diagram #reflected-glow{stroke:#096486;stroke-opacity:.2}
#ray-diagram #refracted-glow{stroke:#1e7354;stroke-opacity:.2}
#ray-diagram .incident-fill{fill:#9b4613}
#ray-diagram .reflected-fill{fill:#075a79}
#ray-diagram .refracted-fill{fill:#175f45}
#ray-diagram .ray-name{stroke:#f6fcff}
#ray-diagram .handle-halo{fill:#a84d17;stroke:#a84d17}
#ray-diagram .handle-core{fill:#b45b23;stroke:#fff1df}