@font-face {
  font-family: Libron;
  src: url("/fonts/libron/Libron-Regular.woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Libron;
  src: url("/fonts/libron/Libron-Bold.woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --blue: #084b9e;
  --paper: #f7f9fc;
  --navy: #1c3049;
  --ink: #404040;
  --green: #089e4b;
  --red: #9e382e;
  --line: #c4ceda;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    18px/1.55 Libron,
    Georgia,
    serif;
}
a {
  color: var(--blue);
  text-underline-offset: 4px;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select,
summary {
  touch-action: manipulation;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.shell {
  max-width: 1300px;
  margin: auto;
  padding: 24px 4%;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-block: 1px solid var(--blue);
  padding: 12px 0;
}
.brand {
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
}
header > a:last-child {
  font: 14px monospace;
}
.intro {
  padding: 44px 0 28px;
  max-width: 850px;
}
.eyebrow,
.label {
  font: 12px/1.5 monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
h1 {
  font-size: clamp(35px, 5vw, 64px);
  line-height: 1.06;
  color: var(--navy);
  margin: 14px 0 20px;
  letter-spacing: -0.025em;
}
h1 span {
  color: var(--red);
}
h2 {
  font-size: 27px;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 18px;
}
h3 {
  font-size: 21px;
  color: var(--navy);
  margin: 0 0 12px;
}
p {
  margin: 0 0 16px;
}
.intro > p:last-child {
  font-size: 21px;
  max-width: 750px;
}
.workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  border: 1px solid var(--line);
  background: white;
}
.controls {
  padding: 26px;
  border-right: 1px solid var(--line);
}
label {
  display: block;
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 6px;
}
.field {
  margin-bottom: 22px;
}
input[type="number"],
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #91a3b9;
  border-radius: 3px;
  padding: 8px;
  background: var(--paper);
  color: var(--navy);
}
input[type="range"] {
  width: 100%;
  accent-color: var(--blue);
  min-height: 28px;
}
small,
.hint {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #53647b;
  margin-top: 6px;
}
.visual {
  min-width: 0;
  padding: 28px;
}
.figure {
  border: 1px solid var(--line);
  background: var(--paper);
  margin: 20px 0;
  overflow: hidden;
}
.figure svg,
.figure canvas {
  display: block;
  width: 100%;
  height: auto;
}
.figure figcaption {
  font-size: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.metric {
  border-top: 3px solid var(--blue);
  padding: 14px 0;
}
.metric strong {
  display: block;
  color: var(--navy);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.metric .unit {
  font-size: 15px;
  color: var(--ink);
}
.formula {
  font-size: 25px;
  line-height: 1.5;
  color: var(--blue);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.error {
  color: var(--red);
  font-size: 16px;
  margin: 12px 0;
  min-height: 1.5em;
}
.error:empty {
  display: none;
}
button {
  min-height: 44px;
  border: 1px solid var(--blue);
  padding: 9px 15px;
  background: var(--blue);
  color: white;
  cursor: pointer;
  border-radius: 3px;
}
button.secondary {
  background: transparent;
  color: var(--blue);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.notes {
  margin: 30px 0;
  border-block: 1px solid var(--line);
  padding: 20px 0;
}
.notes summary {
  cursor: pointer;
  color: var(--navy);
  font-size: 20px;
  padding: 8px 0;
}
.notes p,
.notes li {
  font-size: 16px;
}
.notes ul {
  padding-left: 22px;
}
.tag {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line);
  font: 11px/1.6 monospace;
  color: var(--navy);
}
.legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
}
.legend span:before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  background: var(--swatch);
}
.steps {
  padding: 20px;
  border-left: 3px solid var(--red);
  background: var(--paper);
  margin: 20px 0;
  overflow-wrap: anywhere;
}
.result-number {
  font-size: clamp(30px, 5vw, 58px);
  color: var(--blue);
  line-height: 1.2;
  margin: 18px 0;
}
.reference-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pressure {
  border-top: 1px solid var(--line);
  padding-top: 25px;
  margin-top: 25px;
}
.pressure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.skip {
  position: absolute;
  top: -100px;
}
.skip:focus {
  top: 5px;
  background: white;
  padding: 8px;
}
footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--blue);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font: 12px/1.6 monospace;
}
.probe-readout {
  min-height: 3em;
  font-size: 15px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
[hidden] {
  display: none !important;
}
@media (max-width: 850px) {
  .workspace {
    grid-template-columns: 1fr;
  }
  .controls {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
  .controls > h2,
  .controls > .wide {
    grid-column: 1/-1;
  }
  .intro {
    padding-top: 32px;
  }
}
@media (max-width: 500px) {
  .shell {
    padding: 16px 5%;
  }
  .controls {
    display: block;
    padding: 20px;
  }
  .visual {
    padding: 20px;
  }
  .readouts {
    gap: 8px;
  }
  .metric strong {
    font-size: 24px;
  }
  .formula {
    font-size: 22px;
  }
  .pressure-grid {
    grid-template-columns: 1fr;
  }
  .brand {
    font-size: 23px;
  }
  .intro > p:last-child {
    font-size: 19px;
  }
  footer {
    display: block;
  }
  footer span {
    display: block;
    margin-top: 8px;
  }
}

@media (max-width: 500px) {
  .readouts {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
  }
  .metric .unit {
    grid-column: 2;
  }
  .metric .label {
    letter-spacing: 0.04em;
  }
  .result-number {
    overflow-wrap: anywhere;
  }
}


/* Guided Bragg lesson — share the same restrained Frameworked visual language. */
.guided-controls { padding: 16px 16px 0; margin: 0 -8px 18px; background: #edf4fc; border: 1px solid #d0deee; border-left: 3px solid var(--blue); }
.activity-label { margin: 0 0 5px; color: var(--blue); font: 700 11px/1.5 monospace; letter-spacing: .09em; }
.activity-prompt { margin: 0 0 17px; color: var(--navy); font: 15px/1.55 Libron,Georgia,serif; }
.guided-controls .field { margin-bottom: 17px; }
.guided-controls label { font-weight: 700; font-size: 15px; }
.guided-controls input[type=number] { background: #fff; }
.advanced-panel { border-block: 1px solid #cedceb; margin: 10px 0 18px; padding: 8px 0; }
.advanced-panel summary { font: 700 13px/1.5 sans-serif; padding: 6px 0; cursor: pointer; color: var(--blue); }
.advanced-panel[open] { padding-bottom: 0; }
.advanced-note { font-size: 12px; line-height: 1.5; color: #5f7288; margin: 10px 0; }
.visual-toggle { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); background: #fff; padding: 9px; flex-wrap: wrap; }
.visual-toggle button { min-height: 38px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--blue); font: 700 12px/1.4 sans-serif; padding: 7px 10px; }
.visual-toggle button.selected { background: #eaf2fd; border-color: #b7cde7; color: #084b9e; }
.figure svg { background: #f5f8fd; }
.teaching-takeaway { background: #eaf2fd; border-left: 3px solid var(--blue); padding: 13px 16px; margin: 14px 0; }
.teaching-takeaway strong { color: var(--navy); font: 700 18px/1.4 Libron,Georgia,serif; display: block; }
.teaching-takeaway p { font: 15px/1.6 Libron,Georgia,serif; margin: 5px 0 0; color: #405a76; }
#explanation { font-size: 14px; color: #566e88; line-height: 1.6; }
@media(max-width:850px){ .controls > .guided-controls, .controls > .advanced-panel { grid-column:1/-1; } }
@media(max-width:500px){ .guided-controls { margin:0 0 16px; } .visual-toggle button { flex:1; } }


/* Guided Bragg lesson: introductory concept, connected lattice/ray diagrams,
   prominent angle metrics, and responsive reading order. */
.shell{max-width:1510px}
.intro{max-width:1000px;padding-bottom:20px}
.bragg-primer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.95fr);gap:clamp(26px,3.5vw,55px);align-items:center;margin:0 0 32px;border-block:1px solid var(--line);padding:30px 0 33px}
.bragg-primer .eyebrow{margin:0 0 8px}
.bragg-primer h2{font-size:clamp(28px,2.6vw,41px);letter-spacing:-.035em;margin:0 0 14px}
.primer-copy p{font-size:17px;line-height:1.64;margin:0 0 13px}
.primer-copy strong{color:var(--navy)}
.primer-copy .primer-equation{font:700 clamp(28px,2.8vw,43px)/1.25 Libron,Georgia,serif;color:var(--blue);margin:14px 0;padding-left:14px;border-left:3px solid var(--red);letter-spacing:.01em}
.primer-copy .primer-implication{background:#eaf2fd;border-left:3px solid var(--blue);padding:12px 15px;font-size:16px;margin:16px 0 0}
.primer-figure{margin:0;background:#eff5fc;border:1px solid var(--line);min-width:0;overflow-x:auto}
.primer-figure svg{display:block;width:100%;height:auto;min-width:430px}
.primer-figure figcaption{font:13px/1.5 Libron,Georgia,serif;padding:9px 14px;border-top:1px solid var(--line);color:#506b86}
.workspace{grid-template-columns:300px minmax(0,1fr)}
.visual{padding:22px 24px}
.experiment-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:7px}
.experiment-heading h2{font-size:clamp(21px,2.2vw,31px);line-height:1.25;margin:4px 0 0}
.experiment-heading .eyebrow{margin:0}
.experiment-equation{display:inline-block;border:1px solid #b6cde5;background:#eff5fc;color:var(--blue);font:700 21px/1.4 Libron,Georgia,serif;padding:7px 14px;white-space:nowrap}
.experiment-helper{font:15px/1.55 Libron,Georgia,serif;color:#516c88;max-width:850px;margin:0 0 16px}
.readouts-bragg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.readouts-bragg .metric{padding:11px 12px 12px;border-top:3px solid var(--blue);background:#f2f6fc;min-width:0;display:block}
.readouts-bragg .metric.featured-metric{border-top-color:var(--red);background:#fdf3f0}
.readouts-bragg .metric .label{font:700 10px/1.4 system-ui,sans-serif;letter-spacing:.07em;display:block;color:#496988}
.readouts-bragg .metric.featured-metric .label{color:#9e382e}
.readouts-bragg .metric strong{font:750 clamp(23px,2.25vw,34px)/1.3 system-ui,sans-serif;display:block;letter-spacing:-.04em;margin:4px 0;color:var(--navy)}
.readouts-bragg .metric.featured-metric strong{color:#9e382e}
.readouts-bragg .metric .unit{font:11px/1.45 system-ui,sans-serif;color:#58718c;display:block}
.visuals-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch;margin:17px 0}
.visuals-grid.advanced-layout{grid-template-columns:minmax(0,1fr)}
.visuals-grid.advanced-layout .ray-pane{max-width:850px}
.visuals-grid .figure{margin:0;min-width:0;background:#eff5fc;display:flex;flex-direction:column}
.visuals-grid .figure[hidden]{display:none}
.figure-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 13px;background:white;border-bottom:1px solid var(--line)}
.figure-heading strong{font:700 14px/1.3 system-ui,sans-serif;color:var(--navy)}
.figure-heading span{font:700 12px/1.35 system-ui,sans-serif;color:#527195}
.ray-pane .figure-heading span{color:#9e382e}
.visuals-grid svg{width:100%;height:auto;display:block;flex:1 0 auto}
.visuals-grid figcaption{font:12px/1.5 Libron,Georgia,serif;color:#536c87;padding:11px 13px;flex:1 1 auto}
.teaching-takeaway{background:#eaf2fd;border-left:3px solid var(--blue);padding:14px 17px;margin:16px 0}
.teaching-takeaway strong{font:700 20px/1.35 Libron,Georgia,serif;color:var(--navy);display:block}
.teaching-takeaway p{font:16px/1.55 Libron,Georgia,serif;color:#425b75;margin:7px 0 0}
#explanation{font:14px/1.6 Libron,Georgia,serif;color:#566f8b}
@media(max-width:1320px){
  .workspace{grid-template-columns:285px minmax(0,1fr)}
  .visuals-grid{grid-template-columns:minmax(0,1fr)}
  .visuals-grid .figure{max-width:950px}
  .readouts-bragg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:950px){
  .bragg-primer{grid-template-columns:1fr;gap:20px}
  .primer-figure{max-width:740px}
}
@media(max-width:850px){
  .workspace{grid-template-columns:1fr}
  .controls{display:block}
  .visuals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:670px){
  .visuals-grid{grid-template-columns:1fr}
  .visual{padding:20px 15px}
  .primer-figure svg{min-width:430px}
  .bragg-primer{margin-bottom:22px;padding:22px 0}
  .experiment-heading{display:block}
  .experiment-equation{margin-top:12px}
  .readouts-bragg{gap:8px}
}
@media(max-width:500px){
  .readouts-bragg .metric{display:block}
  .readouts-bragg .metric strong{font-size:clamp(22px,5.6vw,29px)}
  .readouts-bragg .metric .unit{grid-column:auto}
  .readouts-bragg .metric .label{font-size:9px}
  .primer-copy p{font-size:16px}
}

.primer-points{padding-left:19px;margin:8px 0 0}
.primer-points li{font:15px/1.48 Libron,Georgia,serif;margin:5px 0}
.primer-points strong{color:#084b9e}


/* Keep both diagrams visible together on laptop and landscape-tablet widths. */
@media(max-width:1290px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;border-right:0;border-bottom:1px solid var(--line)}
  .controls>h2,.controls>.guided-controls,.controls>.advanced-panel,.controls>.wide{grid-column:1/-1}
  .visuals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .readouts-bragg{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:900px){
  .visuals-grid{grid-template-columns:1fr}
  .readouts-bragg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .controls{display:block}
  .readouts-bragg{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Wave interference comparison: educational two-contribution model, not PXRD intensities. */
.interference-lesson{margin:30px 0 34px;padding:28px 0;border-top:1px solid var(--line);min-width:0;scroll-margin-top:16px}
.interference-heading{max-width:1020px;margin-bottom:21px}
.interference-heading .eyebrow{margin:0 0 10px}
.interference-heading h2{font-size:clamp(28px,3vw,43px);letter-spacing:-.04em;line-height:1.14;margin:0 0 13px}
.interference-heading>p:not(.eyebrow){font-size:17px;line-height:1.58;margin:0}
.interference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.interference-case{margin:0;background:#f7f9fc;border:1px solid #cbd8e8;min-width:0}
.interference-case.constructive{border-top:3px solid #089e4b}
.interference-case.destructive{border-top:3px solid #9e382e}
.interference-case-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:15px 15px 9px;background:#fff}
.interference-case-head strong{font:700 17px/1.4 Libron,Georgia,serif;color:#1c3049}
.interference-case-head>span{font:700 11px/1.5 system-ui,sans-serif;color:#58728e}
.interference-mark{font:700 16px/1.2 system-ui,sans-serif;display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;margin-right:5px;color:#fff;background:#089e4b}
.destructive .interference-mark{background:#9e382e}
.interference-case svg{display:block;width:100%;height:auto;background:#f5f8fc;max-height:310px}
.interference-values{display:flex;gap:14px 25px;flex-wrap:wrap;padding:10px 15px;background:#ecf2fa;font:700 13px/1.5 system-ui,sans-serif;color:#1c3049}
.interference-case figcaption{font:15px/1.52 Libron,Georgia,serif;padding:12px 15px 16px;color:#405b75}
.interference-caveat{font:14px/1.6 Libron,Georgia,serif;color:#536a84;max-width:1000px;margin:17px 0 0}
.mobile-activity-link,.mobile-live{display:none}
.mobile-live[hidden],.interference-grid[hidden]{display:none!important}
#braggActivity,#diagramPair{scroll-margin-top:12px}
@media(max-width:860px){
  .interference-grid{grid-template-columns:minmax(0,1fr)}
  .mobile-live{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;align-items:center;position:sticky;top:8px;z-index:5;background:#fff;border:1px solid #b7cee5;border-left:4px solid #9e382e;padding:8px 12px;margin:5px 0 18px;box-shadow:0 7px 19px #1c304914;border-radius:5px}
  .mobile-live svg{width:116px;max-width:100%;height:auto;display:block}
  .mobile-live-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mobile-live-label{font:700 10px/1.4 system-ui,sans-serif;letter-spacing:.045em;color:#486988}
  .mobile-live-copy strong{font:750 29px/1.15 system-ui,sans-serif;color:#9e382e;letter-spacing:-.035em}
  .mobile-live-copy>span:last-of-type{font:700 12px/1.35 system-ui,sans-serif;color:#1c3049}
  .mobile-live-copy a{font:700 11px/1.4 system-ui,sans-serif;text-decoration:underline;color:#084b9e;margin-top:3px}
}
@media(max-width:670px){
  .mobile-activity-link{display:inline-block;font:700 14px/1.5 system-ui,sans-serif;margin:13px 0 0;padding:8px 0;border-bottom:1px solid var(--blue)}
  .primer-figure{overflow:visible;max-width:100%}
  .primer-figure svg{min-width:0!important;max-width:100%;height:auto}
  .intro,.primer-copy,.bragg-primer,.workspace,.interference-lesson,.controls,.visual{min-width:0;max-width:100%}
  .intro h1{overflow-wrap:break-word}
  .primer-copy p,.primer-points li{overflow-wrap:break-word}
  .interference-case-head strong{font-size:16px}
  .interference-lesson{padding:21px 0}
}
@media(max-width:380px){
  .mobile-live{grid-template-columns:90px minmax(0,1fr);gap:6px;padding:6px 8px}
  .mobile-live svg{width:90px}
  .mobile-live-copy strong{font-size:23px}
  .mobile-live-label{font-size:9px}
  .interference-values{font-size:11px}
}



/* Classic Blue: chosen Frameworked color treatment. Scientific ray colors remain fixed. */
:root{
  --surface:#ffffff;
  --surface-soft:#f2f6fc;
  --surface-highlight:#eaf2fd;
  --surface-alert:#fdf3f0;
}
.workspace,.controls{background:var(--surface)}
.readouts-bragg .metric{background:var(--surface-soft)}
.readouts-bragg .metric.featured-metric{background:var(--surface-alert)}
.teaching-takeaway{background:var(--surface-highlight)}
.guided-controls{background:var(--surface-soft)}
.advanced-purpose{border-left:3px solid var(--blue);background:var(--surface-highlight);padding:10px 12px;margin:8px 0 15px}
.advanced-purpose strong{display:block;font:700 13px/1.4 system-ui,sans-serif;color:var(--navy)}
.advanced-purpose p{font:13px/1.5 Libron,Georgia,serif;color:var(--ink);margin:5px 0 0}
.advanced-example-button{display:block;width:100%;min-height:40px;margin:5px 0 16px;padding:8px 10px;border:1px solid var(--blue);background:white;color:var(--blue);font:700 12px/1.4 system-ui,sans-serif}
.advanced-example-button:hover{background:var(--surface-highlight)}
.readouts-bragg{grid-template-columns:repeat(3,minmax(0,1fr))}
.readouts-bragg.advanced-readouts{grid-template-columns:repeat(4,minmax(0,1fr))}
#qMetric[hidden],.lattice-pane[hidden],.relationship-chain[hidden]{display:none!important}
.parameter-hint{color:#4a6889;font:12px/1.45 system-ui,sans-serif;margin-top:4px}
.relationship-chain{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:12px 0 10px;padding:8px 12px;border-left:3px solid #084b9e;background:#f0f5fc;font:700 12px/1.35 system-ui,sans-serif;color:#446383}
.relationship-chain span:nth-child(2),.relationship-chain span:nth-child(4){color:#9e382e;font-size:17px;line-height:1}
.relationship-chain strong{color:#084b9e}
.lattice-pane .dimension-key{display:inline-flex;align-items:baseline;gap:6px;margin-right:18px}
.lattice-pane .dimension-key strong{color:var(--navy)}
.lattice-pane .key-blue,.lattice-pane .key-red{display:inline-block;width:17px;height:3px;vertical-align:middle;position:relative;top:-3px;flex:none}
.lattice-pane .key-blue{background:#084b9e}
.lattice-pane .key-red{background:#9e382e}
.lattice-previous-dot{stroke-dasharray:2 2;animation:lattice-ghost-fade .95s ease-out both;pointer-events:none}
@keyframes lattice-ghost-fade{0%{opacity:.7}60%{opacity:.28}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.lattice-previous-positions{display:none}}
@media(max-width:980px){
 .readouts-bragg,.readouts-bragg.advanced-readouts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
 .relationship-chain{font-size:11px;gap:5px 8px}
 .lattice-pane .dimension-key{display:flex;gap:5px;margin:5px 0}
}


/* Diagram-local interaction: manipulate the same geometric control while
   its visualization remains immediately visible. */
.diagram-slider{
  background:#fff;
  border-bottom:1px solid #ccd9ea;
  padding:12px 16px 10px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  flex:0 0 auto;
}
.diagram-slider[hidden]{display:none!important}
.diagram-slider-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.diagram-slider-head label{margin:0;font:700 13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#1c3049}
.diagram-slider-head output{font:700 17px/1.35 Libron,Georgia,serif;color:#084b9e;font-variant-numeric:tabular-nums;white-space:nowrap}
.diagram-slider input[type="range"]{
  display:block;width:100%;height:32px;min-height:32px;
  margin:8px 0 2px;padding:0;cursor:ew-resize;
  accent-color:#084b9e;
  touch-action:pan-y;
}
.diagram-slider-limits{display:flex;justify-content:space-between;gap:8px;color:#5a708b;font:11px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif}
@media(max-width:620px){
  .diagram-slider{padding:12px 13px 10px}
  .diagram-slider-head label{font-size:12px}
  .diagram-slider-head output{font-size:16px}
  .diagram-slider input[type="range"]{height:40px;min-height:40px}
}