:root{
  --stereo-blue:#155eef;
  --stereo-dark:#071b5f;
  --stereo-cyan:#06b6d4;
  --stereo-text:#334155;
  --stereo-muted:#64748b;
  --stereo-border:#d6e6ff;
  --stereo-soft:#f4f8ff;
  --stereo-green:#0f9f75;
  --stereo-orange:#f59e0b;
}

body.stereo-lesson{
  color:var(--stereo-text);
  background:
    radial-gradient(circle at 6% 4%,rgba(21,94,239,.12),transparent 26rem),
    radial-gradient(circle at 96% 20%,rgba(6,182,212,.11),transparent 28rem),
    #f5f8ff;
}

.stereo-lesson .hero{
  position:relative;
  overflow:hidden;
}

.stereo-lesson .hero::after{
  content:"";
  position:absolute;
  right:-65px;
  bottom:-105px;
  width:280px;
  height:280px;
  border:2px solid rgba(255,255,255,.19);
  border-radius:48px;
  transform:rotate(18deg);
}

.hero-path{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}

.hero-path span{
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.13);
  font-size:.86rem;
  font-weight:850;
}

.section-lead{
  max-width:880px;
  color:var(--stereo-muted);
  font-size:1.04rem;
  line-height:1.7;
}

.stereo-grid,
.formula-grid,
.example-grid,
.comparison-grid,
.practice-grid{
  display:grid;
  gap:17px;
  margin-top:22px;
}

.stereo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.stereo-grid.two,.example-grid,.comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.formula-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.stereo-card,
.formula-card,
.worked-card,
.practice-card,
.diagram-card{
  border:1px solid var(--stereo-border);
  border-radius:21px;
  background:#fff;
  box-shadow:0 12px 30px rgba(24,72,151,.06);
}

.stereo-card,.worked-card,.practice-card{padding:21px}

.stereo-card h3,.worked-card h3,.practice-card h3{
  margin:0 0 9px;
  color:var(--stereo-dark);
}

.stereo-card p,.worked-card p,.practice-card p{
  margin:0;
  color:var(--stereo-muted);
  line-height:1.6;
}

.card-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin-bottom:14px;
  border-radius:13px;
  color:#fff;
  background:linear-gradient(135deg,var(--stereo-blue),var(--stereo-cyan));
  font-weight:950;
}

.formula-card{
  padding:19px 16px;
  background:linear-gradient(145deg,#fff,#f5f9ff);
  text-align:center;
}

.formula-card small{
  display:block;
  margin-bottom:9px;
  color:var(--stereo-muted);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.formula-card strong{
  color:var(--stereo-dark);
  font-size:1.12rem;
}

.diagram-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
  gap:22px;
  align-items:stretch;
  margin-top:22px;
}

.diagram-card{
  display:flex;
  min-height:310px;
  margin:0;
  padding:20px;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(145deg,#f8fbff,#ecf7ff);
}

.diagram-card>svg{display:block;width:100%;height:auto;max-height:280px}
.diagram-card figcaption{margin-top:12px;color:var(--stereo-muted);line-height:1.5;text-align:center}
.solid-model-panel{position:relative;display:flex;min-width:0;margin:0;padding:15px;border:1px solid #d5e5fb;border-radius:19px;flex-direction:column;background:linear-gradient(145deg,#f8fbff,#eaf5ff)}
.reading-3d-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.reading-3d-hint{display:inline-flex;align-items:center;min-height:39px;padding:8px 12px;border:1px solid #c7dcfb;border-radius:12px;color:#174785;background:rgba(255,255,255,.92);font-size:.86rem;font-weight:850}
.reading-3d-hint::before{content:"↔";margin-right:8px;color:var(--stereo-blue);font-size:1.1rem;font-weight:950}
.solid-model-panel .reading-3d-reset{min-height:39px;padding:8px 12px;border:1px solid #a9caf7;border-radius:12px;color:#124db5;background:#fff;font:inherit;font-size:.82rem;font-weight:900;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.solid-model-panel .reading-3d-reset:hover{transform:translateY(-1px);border-color:var(--stereo-blue);color:#124db5;background:#eff6ff}
.solid-model-panel .reading-3d-reset:focus-visible{outline:3px solid rgba(21,94,239,.25);outline-offset:2px}
.reading-3d-stage{position:relative;overflow:hidden;width:100%;height:clamp(285px,32vw,350px);border:1px solid #cbdffb;border-radius:18px;background:radial-gradient(circle at 48% 42%,#fff 0,#f5faff 54%,#e8f3ff 100%);box-shadow:inset 0 0 34px rgba(21,94,239,.06)}
#readingSolidCanvas{display:block;width:100%;height:100%;border-radius:inherit;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
#readingSolidCanvas.is-dragging{cursor:grabbing}
#readingSolidCanvas:focus-visible{outline:3px solid var(--stereo-blue);outline-offset:-5px}
.reading-3d-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin-top:12px;padding:11px 12px;border:1px solid #d6e6ff;border-radius:14px;background:rgba(255,255,255,.9)}
.reading-3d-legend span{display:flex;align-items:center;gap:9px;min-width:0;color:#405570;font-size:.78rem;font-weight:800;line-height:1.3}
.reading-legend-line{display:block;flex:0 0 29px;width:29px;height:0;border-top:3px solid #17305f;border-radius:999px}
.reading-legend-line.is-hidden{border-top-color:#64748b;border-top-style:dashed}
.reading-legend-line.is-face-diagonal{border-top-color:#f59e0b}
.reading-legend-line.is-body-diagonal{border-top-color:#ef4444}
.reading-3d-caption{margin:11px 3px 0;color:var(--stereo-muted);font-size:.82rem;line-height:1.48;text-align:center}
.reading-3d-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.solid-face{fill:#dbeafe;fill-opacity:.88;stroke:var(--stereo-blue);stroke-width:4;stroke-linejoin:round}
.solid-face-alt{fill:#a5f3fc;fill-opacity:.65;stroke:#0891b2;stroke-width:4;stroke-linejoin:round}
.solid-edge{fill:none;stroke:var(--stereo-dark);stroke-width:3.2;stroke-linejoin:round}
.solid-hidden{fill:none;stroke:#64748b;stroke-width:2.7;stroke-dasharray:8 7}
.solid-measure{fill:none;stroke:#ef4444;stroke-width:3.5;stroke-dasharray:7 5}
.solid-guide{fill:none;stroke:var(--stereo-orange);stroke-width:3.5}
.solid-label{fill:var(--stereo-dark);font:800 20px Inter,system-ui,sans-serif}
.solid-note{fill:#64748b;font:700 15px Inter,system-ui,sans-serif}

.property-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.property-list li{
  position:relative;
  padding:12px 13px 12px 42px;
  border-radius:13px;
  background:var(--stereo-soft);
  line-height:1.48;
}

.property-list li::before{
  content:"✓";
  position:absolute;
  top:11px;
  left:13px;
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border-radius:50%;
  color:var(--stereo-green);
  background:#dff8ef;
  font-size:.78rem;
  font-weight:950;
}

.steps-list{
  display:grid;
  gap:10px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
  counter-reset:stereo-step;
}

.steps-list li{
  position:relative;
  padding:12px 13px 12px 45px;
  border-radius:13px;
  background:var(--stereo-soft);
  line-height:1.5;
  counter-increment:stereo-step;
}

.steps-list li::before{
  content:counter(stereo-step);
  position:absolute;
  top:10px;
  left:12px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:8px;
  color:#fff;
  background:var(--stereo-blue);
  font-size:.75rem;
  font-weight:900;
}

.worked-card{border-top:5px solid var(--stereo-blue)}
.worked-card .answer{
  margin-top:15px;
  padding:13px 15px;
  border-radius:13px;
  color:#08765a;
  background:#eafbf5;
  font-weight:850;
}

.stereo-examples{
  display:grid;
  gap:24px;
  margin-top:22px;
}

.stereo-example{
  min-width:0;
  overflow:hidden;
  border:1px solid #c7d2fe;
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 30px rgba(21,94,239,.08);
}

.stereo-example-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid #dbeafe;
  background:linear-gradient(135deg,#eef2ff,#eff6ff);
}

.stereo-example-title{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px;
}

.stereo-example-title h3{
  margin:0;
  color:var(--stereo-dark);
  font-size:1.08rem;
  font-weight:900;
  line-height:1.35;
}

.stereo-example-number{
  display:grid;
  flex:0 0 36px;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,var(--stereo-blue),var(--stereo-cyan));
  font-weight:900;
}

.stereo-example-tag{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  color:#1d4ed8;
  background:#dbeafe;
  font-size:.78rem;
  font-weight:900;
  white-space:nowrap;
}

.stereo-example-body{
  min-width:0;
  padding:22px;
  overflow-x:auto;
  overflow-y:visible;
}

.stereo-example-body p{
  color:#475569;
  line-height:1.7;
}

.stereo-example-body>p:first-child{margin-top:0}
.stereo-example-body>p:last-child{margin-bottom:0}

.stereo-example-body p strong{
  color:var(--stereo-dark);
}

.stereo-example-body mjx-container[display="true"]{
  margin:17px 0!important;
  color:var(--stereo-dark);
}

.stereo-example-note{
  margin:18px 0;
  padding:16px 18px;
  border:1px solid #fed7aa;
  border-left:6px solid var(--stereo-orange);
  border-radius:18px;
  color:#7c4a00;
  background:#fff7ed;
}

.stereo-example-note strong{
  display:block;
  margin-bottom:5px;
  color:#92400e!important;
}

.stereo-example-note p{
  margin:0;
  color:#7c4a00;
}

.stereo-example-result{
  margin-top:16px;
  padding:15px 18px;
  border:1px solid #a7f3d0;
  border-radius:16px;
  color:#08765a;
  background:#ecfdf5;
  font-weight:850;
  text-align:center;
}

.stereo-example-result mjx-container[display="true"]{
  margin:4px 0 8px!important;
  color:#065f46;
}

.stereo-example-result span{
  display:block;
  line-height:1.55;
}

.warning-card{
  margin-top:18px;
  padding:17px 19px;
  border:1px solid #fed7aa;
  border-radius:17px;
  color:#7c4a00;
  background:#fff8eb;
  line-height:1.6;
}

.table-wrap{
  overflow-x:auto;
  margin-top:22px;
  border:1px solid var(--stereo-border);
  border-radius:19px;
}

.stereo-table{width:100%;min-width:720px;border-collapse:collapse;background:#fff}
.stereo-table th,.stereo-table td{padding:14px;border-bottom:1px solid #e6eefb;text-align:left;vertical-align:top}
.stereo-table th{color:#fff;background:var(--stereo-dark)}
.stereo-table tr:last-child td{border-bottom:0}
.stereo-table tbody tr:nth-child(even){background:#f8fbff}

.exercise-list{display:grid;gap:13px;margin-top:21px}
.exercise-item{overflow:hidden;border:1px solid var(--stereo-border);border-radius:17px;background:#fff}
.exercise-item summary{position:relative;padding:17px 50px 17px 18px;color:var(--stereo-dark);font-weight:850;line-height:1.5;cursor:pointer;list-style:none}
.exercise-item summary::-webkit-details-marker{display:none}
.exercise-item summary::after{content:"+";position:absolute;top:13px;right:17px;color:var(--stereo-blue);font-size:1.45rem}
.exercise-item[open] summary::after{content:"−"}
.exercise-answer{padding:0 18px 18px;color:#475569;line-height:1.65}

.module-test-callout{
  margin-top:22px;
  padding:22px;
  border-radius:22px;
  color:#fff;
  background:linear-gradient(135deg,var(--stereo-dark),var(--stereo-blue),var(--stereo-cyan));
}

.module-test-callout h3{margin:0 0 7px;color:#fff}
.module-test-callout p{margin:0 0 15px;color:rgba(255,255,255,.88)}
.module-test-callout .btn{background:#fff;color:var(--stereo-blue)}

.print-nets-callout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  margin-top:24px;
  padding:26px 28px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:24px;
  color:#fff;
  background:linear-gradient(125deg,#071b5f 0%,#155eef 58%,#06b6d4 100%);
  box-shadow:0 18px 36px rgba(21,94,239,.2);
}

.print-nets-icon{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border:2px solid rgba(255,255,255,.74);
  border-radius:19px;
  color:#071b5f;
  background:#fff;
  font-size:1.25rem;
  font-weight:950;
  box-shadow:0 10px 22px rgba(7,27,95,.18);
}

.print-nets-copy{min-width:0}
.print-nets-eyebrow{display:block;margin-bottom:4px;color:#cffafe;font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.print-nets-callout h3{margin:0 0 6px!important;color:#fff!important;font-size:clamp(1.35rem,2.5vw,1.8rem)!important;line-height:1.2!important}
.print-nets-callout p{margin:0!important;color:#fff!important;font-size:1rem;line-height:1.55}
.print-nets-callout .btn{min-width:205px;border:2px solid #fff!important;background:#fff!important;color:#0b46bd!important;box-shadow:0 10px 22px rgba(7,27,95,.16)}
.print-nets-callout .btn:hover{transform:translateY(-2px);background:#eff6ff!important}

@media(max-width:760px){
  .print-nets-callout{grid-template-columns:auto minmax(0,1fr);padding:22px}
  .print-nets-callout .btn{grid-column:1/-1;width:100%;min-width:0}
}

.solid-lab{
  display:grid;
  grid-template-columns:minmax(190px,.5fr) minmax(0,1.5fr);
  gap:18px;
  margin-top:22px;
}

#studio-bryl{scroll-margin-top:105px}

.solid-picker{
  display:grid;
  align-content:start;
  gap:9px;
  padding:16px;
  border:1px solid var(--stereo-border);
  border-radius:20px;
  background:var(--stereo-soft);
}

.solid-picker .solid-choice{
  width:100%;
  min-height:45px;
  padding:10px 13px;
  border:1px solid #c8daf8;
  border-radius:13px;
  color:#17305f;
  background:#fff;
  font:inherit;
  font-weight:850;
  text-align:left;
  cursor:pointer;
}

.solid-picker .solid-choice[aria-pressed="true"]{
  color:#fff;
  border-color:var(--stereo-blue);
  background:linear-gradient(135deg,var(--stereo-blue),var(--stereo-cyan));
  box-shadow:0 9px 20px rgba(21,94,239,.2);
}

.solid-workspace{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(240px,.85fr);
  gap:18px;
  align-items:center;
  padding:18px;
  border:1px solid var(--stereo-border);
  border-radius:22px;
  background:linear-gradient(145deg,#eff6ff,#fff);
}

.solid-info h3{margin:0 0 8px;color:var(--stereo-dark);font-size:1.4rem}
.solid-description{margin:0 0 13px;color:var(--stereo-muted);line-height:1.55}
.solid-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.solid-fact{padding:10px 8px;border:1px solid #d5e5fb;border-radius:12px;background:#fff;text-align:center}
.solid-fact strong{display:block;color:var(--stereo-dark);font-size:1.15rem}.solid-fact span{display:block;color:var(--stereo-muted);font-size:.72rem;font-weight:800}
.solid-formulas{display:grid;gap:8px}.solid-formula{padding:10px 11px;border:1px solid #cfe1ff;border-radius:12px;color:var(--stereo-dark);background:#fff;font-weight:850}

.solid-reading{
  margin-top:12px;
  border:1px solid #bae6fd;
  border-radius:13px;
  background:#ecfeff;
}

.solid-reading summary{padding:11px 13px;color:#0e3a63;font-weight:900;cursor:pointer}
.solid-reading p{margin:0;padding:0 13px 13px;color:#405d76;font-size:.9rem;line-height:1.5}

.drawing-steps{
  margin-top:12px;
  border:1px solid #bae6fd;
  border-radius:14px;
  background:#ecfeff;
  overflow:hidden;
}

.drawing-steps summary{
  padding:12px 14px;
  color:#0e3a63;
  font-weight:900;
  cursor:pointer;
}

.drawing-steps ol{
  margin:0;
  padding:0 20px 15px 35px;
  color:#334155;
}

@media(max-width:960px){
  .stereo-grid,.formula-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .diagram-layout,.solid-lab,.solid-workspace{grid-template-columns:1fr}
  .solid-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){
  .stereo-grid,.stereo-grid.two,.formula-grid,.example-grid,.comparison-grid,.practice-grid{grid-template-columns:1fr}
  .diagram-card{min-height:240px;padding:13px}
  .solid-model-panel{min-height:0;padding:13px}
  .reading-3d-toolbar{align-items:stretch;flex-direction:column}
  .reading-3d-hint,.reading-3d-reset{width:100%;justify-content:center;text-align:center}
  .reading-3d-stage{height:285px}
  .reading-3d-legend{grid-template-columns:1fr}
  .solid-picker{grid-template-columns:1fr}
  .solid-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stereo-example-header{align-items:flex-start;flex-direction:column}
  .stereo-example-tag{margin-left:47px}
  .stereo-example-body{padding:19px}
}