* { box-sizing: border-box; }
:root { color-scheme:dark; --bg:#000; --panel:var(--panel-bg); --border:var(--panel-border); --text:var(--text-color); --muted:var(--muted-text); --blue:var(--research-cyan); --amber:var(--research-amber); --green:var(--research-emerald); }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:14px; line-height:1.5; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { min-height:36px; padding:7px 12px; border:1px solid #39566d; border-radius:7px; background:#152a3d; color:var(--text); cursor:pointer; transition:background .15s,border-color .15s; }
button:hover { background:#24415a; border-color:#6b9abb; }
button:disabled { opacity:.4; cursor:not-allowed; }
button[aria-pressed="true"] { border-color:var(--blue); background:#174362; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px max(22px,calc((100vw - 1440px)/2)); border-bottom:1px solid var(--border); background:#07121ee8; }
.hub-link { color:#c4def0; text-decoration:none; font-weight:650; }
.lab-label { letter-spacing:.18em; color:#9cb7ca; font-size:11px; font-weight:750; }
.quiet-button { background:transparent; }
main { max-width:1440px; padding:30px 22px 0; margin:auto; }
.intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }
.eyebrow { margin:0; color:#84bad4; font-size:10px; letter-spacing:.12em; font-weight:750; }
h1 { font-size:clamp(27px,3.1vw,40px); line-height:1.2; letter-spacing:-.045em; margin:6px 0 9px; }
.intro p:not(.eyebrow) { color:#b0c8d9; margin:0; font-size:15px; }
.sample-tag { display:flex; align-items:center; gap:8px; color:#b3cddd; padding:9px 12px; border:1px solid var(--border); border-radius:30px; white-space:nowrap; font-size:12px; }
.status-light { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 12px #70e4b944; }
.lab-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; grid-template-areas:"scene controls" "results controls" "details details"; gap:18px; align-items:start; }
.crystal-panel,.controls,.results,.details-panel { border:1px solid var(--border); border-radius:13px; background:linear-gradient(135deg,#102435,#0b1a28); box-shadow:0 14px 35px #0002; min-width:0; }
.crystal-panel { grid-area:scene; overflow:hidden; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:20px 21px 13px; }
h2 { margin:3px 0; font-size:19px; letter-spacing:-.025em; }
h3 { margin:0 0 10px; font-size:15px; }
.type-badge { color:#8ce9c7; background:#113d36; border:1px solid #26634f; border-radius:6px; padding:5px 11px; font-size:12px; white-space:nowrap; }
.presets { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:0 21px 16px; }
.presets>span { color:var(--muted); margin-right:3px; font-size:12px; }
.presets button { min-height:30px; padding:4px 11px; font-size:12px; border-radius:20px; background:#102a3d; }
.legend { display:flex; flex-wrap:wrap; gap:10px 17px; padding:12px 21px; border-block:1px solid #233c50; background:#0a1a29; font-size:11px; color:#bfd0dc; }
.legend>span { display:flex; align-items:center; gap:6px; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.bound { background:#bccfdf; }
.free { background:var(--blue); box-shadow:0 0 7px #5acbff66; }
.hole { background:transparent; width:12px; height:12px; border:2px solid var(--amber); }
.dopant-symbol { display:inline-grid; place-items:center; width:16px; height:16px; border:1px solid #c2a0ff; color:#ddc5ff; border-radius:4px; font-style:normal; font-size:9px; }
.acceptor-symbol { border-color:#ff9db0; color:#ffb4c2; }
.crystal-frame { position:relative; height:390px; background:radial-gradient(ellipse at center,#102e42,#071827 80%); }
canvas { display:block; width:100%; }
#crystalCanvas { height:100%; touch-action:pan-y; cursor:crosshair; }
.scene-footer { display:flex; justify-content:space-between; gap:15px; padding:8px 20px 12px; color:#8facbf; font-size:11px; }
.scene-footer span:first-child { color:#b8d7e9; }
.playback { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:13px 20px; border-top:1px solid var(--border); }
.playback button { font-size:12px; padding:6px 10px; }
.primary-button { background:#195476; border-color:#4da9d7; }
.speed-control { display:flex; align-items:center; gap:7px; margin-right:auto; font-size:12px; color:var(--muted); }
select { min-height:38px; max-width:100%; border:1px solid #3b566c; border-radius:6px; color:var(--text); background:#102637; padding:7px 9px; }
.speed-control select { min-height:34px; padding:4px; width:80px; }
.event-card { display:flex; gap:12px; align-items:flex-start; margin:0 20px 15px; padding:13px 14px; background:#123328; border:1px solid #2a5946; border-radius:8px; min-height:84px; }
.event-icon { color:var(--green); font-size:24px; }
.event-card .eyebrow { color:#8fe6be; font-size:9px; }
.event-card p { margin:4px 0 0; color:#d5eade; font-size:13px; line-height:1.5; }
.energy-section { padding:15px 20px 14px; border-top:1px solid var(--border); background:#091a29; }
.energy-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.energy-heading h3 { margin:0; font-size:13px; }
.energy-heading span { font-size:10px; color:var(--muted); }
#energyCanvas { height:155px; }
.energy-caption { color:#9bb4c8; font-size:11px; margin:3px 0 0; }
.controls { grid-area:controls; overflow:hidden; }
.control-section { padding:19px; border-bottom:1px solid var(--border); }
.control-section:last-child { border:0; }
.control-title { display:flex; align-items:center; gap:9px; margin-bottom:17px; }
.control-title h2 { font-size:16px; margin:0; }
.control-number { display:grid; place-items:center; width:26px; height:26px; font-size:10px; font-weight:750; border-radius:7px; color:#8ed8fa; background:#193a52; }
.violet { background:#332d4c; color:#ceb0ff; }
.green { background:#163d33; color:#8ce9c2; }
output { color:#e8f6ff; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.control-title output { margin-left:auto; color:var(--blue); }
.control-section>label,.label-row label,#placementLabel { color:#c0d0dd; font-size:12px; }
.control-section select { width:100%; margin:6px 0 4px; font-size:12px; }
.control-section p { font-size:12px; color:#9cb5c9; line-height:1.65; margin:12px 0 0; }
.label-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:16px; }
input[type="range"] { display:block; appearance:none; -webkit-appearance:none; width:100%; height:7px; border-radius:10px; margin:16px 0 13px; cursor:pointer; background:linear-gradient(to right,#5acbff var(--fill,0%),#30495e var(--fill,0%)); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:20px; height:20px; border:3px solid #e2f5ff; border-radius:50%; background:#34ace2; box-shadow:0 2px 8px #0005; }
input[type="range"]::-moz-range-thumb { width:14px; height:14px; border:3px solid #e2f5ff; border-radius:50%; background:#34ace2; }
.range-labels { display:flex; justify-content:space-between; align-items:center; gap:4px; font-size:10px; color:#8fa9bd; }
.range-labels button { border:0; background:none; padding:0 3px; min-height:25px; font-size:10px; color:#bddcea; text-decoration:underline; text-underline-offset:3px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; font-size:13px; cursor:pointer; }
input[type="checkbox"] { width:19px; height:19px; accent-color:#6edeb2; cursor:pointer; }
.wide-button { width:100%; margin-top:13px; font-size:12px; }
#placementControls { margin-top:15px; }
#placementControls select { margin-bottom:0; }
[hidden] { display:none !important; }
.results { grid-area:results; padding:17px 20px; }
.result-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.result-heading h2 { font-size:15px; }
.result-heading>span { font-size:10px; color:#a1b6c7; }
.result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.result-grid>div { display:flex; flex-direction:column; border-left:2px solid #3b596f; padding-left:10px; }
.result-grid span { font-size:11px; color:#adbfce; }
.result-grid strong { font-size:24px; line-height:1.5; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.result-grid small { font-size:10px; color:#8eaabe; }
.result-grid .electron-result { border-color:var(--blue); }
.electron-result strong { color:var(--blue); }
.result-grid .hole-result { border-color:var(--amber); }
.hole-result strong { color:var(--amber); }
.details-panel { grid-area:details; padding:0 20px; }
summary { cursor:pointer; padding:18px 0; font-weight:650; color:#d5e9f8; }
summary span { margin-left:10px; font-size:12px; font-weight:400; color:#8eaabc; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 35px; padding:8px 0 25px; }
.detail-grid p { color:#a9bfce; font-size:12px; }
.equation { font-family:ui-monospace,Consolas,monospace; color:#c7e9fb !important; line-height:1.9; }
dl { margin:0; }
dl>div { display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid #233b4e; padding:5px 0; font-size:12px; }
dt { color:#a5bccd; } dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
footer { padding:25px 0; text-align:center; color:#7895ab; font-size:11px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.high-contrast { --border:#7492a9; --muted:#d5e4ef; }
.high-contrast p,.high-contrast small,.high-contrast .scene-footer,.high-contrast .range-labels { color:#d9e7f0; }
@media(min-width:1400px) { .crystal-frame { height:435px; } }
@media(max-width:1000px) { .lab-layout { grid-template-columns:minmax(0,1fr) 280px; gap:12px; } main { padding:24px 15px 0; } .sample-tag { display:none; } .control-section { padding:16px; } .playback { padding:12px; } .panel-heading,.legend { padding-inline:15px; } .presets { padding-inline:15px; } .result-grid { grid-template-columns:1fr 1fr; } .crystal-frame { height:365px; } }
@media(max-width:760px) { .lab-layout { grid-template-columns:1fr; grid-template-areas:"scene" "results" "controls" "details"; } .intro { margin-bottom:19px; } .intro p:not(.eyebrow) { font-size:13px; } .controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .control-section { border-bottom:0; border-right:1px solid var(--border); } .control-title { flex-wrap:wrap; gap:5px; } .crystal-frame { height:380px; } }
@media(max-width:540px) { .topbar { padding:12px; gap:7px; } .lab-label { display:none; } main { padding:21px 10px 0; } h1 { font-size:29px; } .intro .eyebrow { font-size:8px; } .controls { display:block; } .control-section { border-right:0; border-bottom:1px solid var(--border); padding:19px; } .control-title { flex-wrap:nowrap; } .panel-heading { padding:16px 13px 12px; } .panel-heading .eyebrow { font-size:8px; max-width:180px; } h2 { font-size:17px; } .presets { gap:5px; padding-inline:13px; } .presets button { font-size:10px; padding-inline:9px; } .legend { padding:10px 13px; gap:8px 12px; font-size:10px; } .crystal-frame { height:335px; } .scene-footer { padding-inline:13px; font-size:10px; flex-direction:column; gap:3px; } .playback { gap:6px; } .playback button { min-height:37px; font-size:11px; } .speed-control { font-size:11px; } .event-card { margin-inline:12px; padding:11px; } .event-card p { font-size:12px; } .energy-section { padding:13px 12px; } .energy-heading { align-items:flex-start; } .energy-heading h3 { font-size:12px; } .energy-heading span { font-size:9px; text-align:right; max-width:82px; } .result-heading { align-items:flex-start; } .result-heading>span { max-width:150px; text-align:right; } .detail-grid { grid-template-columns:1fr; } summary span { display:block; margin-left:0; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* The same research palette, surfaces and controls as the other Electricsim labs. */
#bgCanvas { height:100%; }
.topbar { background:rgba(4,6,12,.96); }
.hub-link { color:var(--accent); }
.lab-label,.eyebrow { color:var(--muted); }
.crystal-panel,.controls,.results,.details-panel {
    background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 160px),rgba(7,9,13,.94);
    border-radius:8px; border-top-color:rgba(139,157,255,.35); box-shadow:var(--shadow-deep);
}
button,select,.presets button { background:rgba(255,255,255,.055); border-color:var(--border); }
button:hover { background:rgba(139,157,255,.12); border-color:var(--accent); }
button[aria-pressed="true"],.primary-button { background:rgba(139,157,255,.18); border-color:var(--accent); }
.legend,.energy-section { background:rgba(255,255,255,.015); border-color:var(--border); }
.crystal-frame { background:radial-gradient(ellipse at center,rgba(139,157,255,.045),transparent 70%),#050609; }
.type-badge { background:rgba(55,224,161,.08); border-color:rgba(55,224,161,.24); color:var(--green); }
.event-card { background:rgba(139,157,255,.06); border-color:rgba(139,157,255,.2); }
.event-card .eyebrow,.event-icon { color:var(--accent); }
.event-card p { color:#d5dbe7 !important; }
.control-number { background:rgba(139,157,255,.14); color:var(--accent); }
.control-number.violet { background:rgba(169,155,255,.14); color:#a99bff; }
.control-number.green { background:rgba(55,224,161,.12); color:var(--green); }
input[type="range"] { background:linear-gradient(to right,var(--accent) var(--fill,0%),#292e3b var(--fill,0%)); }
input[type="range"]::-webkit-slider-thumb { background:var(--accent); border-color:#dce1ff; }
input[type="range"]::-moz-range-thumb { background:var(--accent); border-color:#dce1ff; }
.transfer-guide { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px 0; border-top:1px solid var(--border); color:var(--muted); font-size:11px; }
.transfer-guide span { padding:6px 8px; border:1px solid transparent; border-radius:5px; }
.transfer-guide span.active { border-color:rgba(61,217,255,.3); background:rgba(61,217,255,.07); color:var(--blue); }
.transfer-guide b { font-weight:400; color:#525c70; }
.transfer-note { margin:8px 20px 13px; font-size:10px; text-align:center; }
dl>div { border-color:var(--border); }
@media(max-width:540px) { .transfer-guide { gap:3px; padding-inline:8px; font-size:9px; } .transfer-guide span { padding:5px 3px; } .transfer-note { font-size:9px; margin-inline:13px; } }
.high-contrast .transfer-guide,.high-contrast .transfer-note { color:#d9e7f0 !important; }
.transfer-closeup { padding:14px 20px 10px; border-top:1px solid var(--border); background:rgba(139,157,255,.025); }
.transfer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.transfer-heading h3 { margin:0; font-size:13px; }
.transfer-heading span { color:var(--muted); font-size:10px; }
#transferCanvas { height:142px; }
.transfer-closeup p { margin:0; min-height:36px; font-size:12px; color:#cbd5e3 !important; }
@media(max-width:540px) { .transfer-closeup { padding:13px 12px 9px; } .transfer-heading span { font-size:9px; text-align:right; max-width:115px; } .transfer-closeup p { font-size:11px; min-height:50px; } }