:root { --ink:#1b2c33; --muted:#5a6b70; --panel:#fffdf8; --line:#ddd8cc; --teal:#0b6a69; --rust:#a34a24; --focus:#e3522a; font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif; color:var(--ink); background:#e6e1d6; }
:root { --lk-accent:#0b6a69; --lk-ink:#1b2c33; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 12% 0%, #f6efe2, transparent 32rem), #e6e1d6; }
button, select, input { font:inherit; } button { cursor:pointer; }
button:focus-visible, select:focus-visible, input:focus-visible, .table-wrap:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.app-shell { max-width:1180px; margin:auto; padding:clamp(1rem,3vw,3.2rem); }
.masthead { display:flex; justify-content:space-between; gap:2rem; align-items:start; padding:1rem 0 1.7rem; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2.1rem,5vw,4.4rem); line-height:.98; letter-spacing:-.05em; max-width:760px; margin:.35rem 0 .75rem; }
h2 { font-size:1.15rem; margin:.2rem 0 0; }
h3 { font-size:.9rem; margin:1.2rem 0 .5rem; }
.lede { color:var(--muted); font-size:1.05rem; max-width:680px; margin-bottom:0; line-height:1.5; }
.eyebrow { font-size:.69rem; font-weight:800; letter-spacing:.13em; color:#7a5a3a; margin:0; }
.text-button,.copy-button { border:0; color:var(--teal); font-weight:750; background:transparent; text-decoration:underline; text-underline-offset:3px; padding:.4rem; }
.model-notes { background:#f1ebdf; border-left:4px solid var(--rust); padding:1rem 1.1rem; line-height:1.5; margin-bottom:1rem; border-radius:0 .7rem .7rem 0; }
.question-card,.panel { background:var(--panel); border:1px solid rgba(60,45,25,.12); box-shadow:0 14px 38px rgba(60,45,25,.08); border-radius:1rem; }
.question-card { padding:1.1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.question-card h2 { font-size:1.25rem; max-width:620px; }
.prediction-field { display:grid; gap:.4rem; color:var(--muted); font-size:.82rem; font-weight:700; min-width:260px; }
.prediction-field small { font-weight:500; line-height:1.35; }
select { background:#fff; border:1px solid var(--line); border-radius:.55rem; padding:.6rem; color:var(--ink); width:100%; max-width:100%; }
.step-label { margin:.25rem 0 .55rem .2rem; }
.workspace { display:grid; grid-template-columns:1.32fr .68fr; gap:1rem; margin-bottom:1rem; align-items:start; }
.evidence-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:1rem; margin-bottom:1rem; }
.panel { padding:1.15rem; min-width:0; }
.panel-heading { display:flex; justify-content:space-between; gap:1rem; align-items:start; margin-bottom:.8rem; }
.time-badge { padding:.35rem .6rem; border-radius:999px; background:#f3e4d2; color:#7a3b18; white-space:nowrap; font-size:.8rem; font-weight:850; }
.scene-sub { color:var(--muted); font-size:.8rem; margin:.2rem 0 0; }

/* scene */
.scene-wrap { position:relative; border-radius:.75rem; overflow:hidden; border:1px solid rgba(0,0,0,.1); background:#c9e2ec; }
#scene { display:block; width:100%; height:auto; }
.scene-label { font-size:13px; font-weight:800; fill:#1b2c33; paint-order:stroke; stroke:rgba(255,253,248,.75); stroke-width:3px; }
.scene-label.light { fill:#fffdf8; stroke:rgba(20,30,35,.55); }
.scene-label.muted { fill:#4b5a5e; font-weight:700; font-size:12px; }
.scene-label.age { font-size:11px; }
.quake.new { animation:quake-pop .5s ease-out both; animation-delay:var(--d); transform-box:fill-box; transform-origin:center; }
@keyframes quake-pop { from { transform:scale(2.4); opacity:0; } to { transform:scale(1); } }
.glow { animation:glow 1.4s ease-in-out infinite alternate; }
@keyframes glow { to { opacity:.25; } }
.event-card { position:absolute; left:.75rem; right:.75rem; bottom:.75rem; background:rgba(255,253,248,.92); border:1px solid rgba(60,45,25,.14); border-radius:.55rem; padding:.45rem .65rem; text-align:center; font-size:.8rem; font-weight:800; }
.legend { display:flex; flex-wrap:wrap; gap:.4rem 1rem; list-style:none; padding:0; margin:.75rem 0 0; color:var(--muted); font-size:.78rem; font-weight:700; }
.legend li { display:flex; align-items:center; gap:.35rem; }
.sw { display:inline-block; width:16px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,.2); }
.sw-quake { background:#ffd23f; border-radius:50%; width:12px; border-color:#7a2e00; }
.sw-volcano { background:#6a4636; clip-path:polygon(50% 0, 100% 100%, 0 100%); border:0; }
.sw-ocean { background:#3f4c5a; } .sw-cont { background:#c8a36a; } .sw-mantle { background:#e3a77b; } .sw-magma { background:#e4572e; }
.sw-normal { background:#25313d; } .sw-reversed { background:#ece5d3; }

/* controls */
fieldset { border:0; padding:0 0 1.1rem; margin:0 0 1.1rem; border-bottom:1px solid var(--line); min-width:0; }
legend { font-size:.85rem; font-weight:800; margin-bottom:.6rem; padding:0; }
.segmented-control { display:grid; gap:.4rem; }
.segmented-control.two-col { grid-template-columns:1fr 1fr; }
.choice { text-align:left; border:1px solid var(--line); border-radius:.55rem; background:#fff; color:var(--ink); padding:.55rem .7rem; font-weight:750; display:grid; gap:.1rem; min-width:0; }
.choice small { font-weight:600; font-size:.74rem; color:var(--muted); }
.choice.active { color:#fff; background:var(--teal); border-color:var(--teal); }
.choice.active small { color:#d6ece9; }
.choice:disabled { opacity:.6; cursor:wait; }
.hint { font-size:.83rem; color:var(--muted); line-height:1.45; margin:.65rem 0 0; }
.hint.small { font-size:.76rem; }
.range-label { display:flex; justify-content:space-between; gap:.5rem; font-size:.85rem; font-weight:750; }
.range-label output { color:var(--teal); white-space:nowrap; }
input[type=range] { accent-color:var(--teal); width:100%; margin-top:.6rem; }
.run-controls { display:grid; gap:.55rem; }
.primary-button,.secondary-button { min-height:2.75rem; border-radius:.6rem; font-weight:800; border:1px solid var(--teal); padding:.4rem .7rem; }
.primary-button { color:#fff; background:var(--teal); } .secondary-button { color:var(--teal); background:#eef5f1; }
.primary-button:disabled,.secondary-button:disabled { opacity:.6; cursor:wait; }
.utility-controls { display:flex; flex-wrap:wrap; margin-top:.5rem; }
.seed-readout { margin:1rem 0 0; color:var(--muted); font-size:.75rem; } .seed-readout code { color:var(--ink); } .copy-button { font-size:.75rem; }

/* evidence */
.outcome-copy { min-height:4.5rem; line-height:1.5; color:var(--muted); }
.stat-row { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem .6rem; margin:0; }
.stat-row div { border-left:3px solid #e6cdb0; padding-left:.55rem; min-width:0; }
.stat-row dt { font-size:.72rem; color:var(--muted); font-weight:750; line-height:1.3; }
.stat-row dd { margin:.15rem 0 0; font-size:1.35rem; font-weight:850; }
.chart-measure { display:grid; gap:.3rem; font-size:.78rem; font-weight:800; color:var(--muted); max-width:320px; margin-bottom:.4rem; }
.chart-wrap { overflow-x:auto; }
#chart { display:block; width:100%; min-width:460px; font-size:10px; fill:#5d6c69; overflow:visible; }
.grid line { stroke:#e3ddd1; stroke-dasharray:3 4; }
.line { fill:none; stroke:#a34a24; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.point-mark { fill:#a34a24; }
.chart-point { cursor:pointer; } .chart-point:focus-visible { outline:none; } .chart-point:focus-visible .point-hit, .selected-point .point-hit { stroke:var(--focus); stroke-width:3; }
.range-band { fill:#e3522a; opacity:.12; }
.annotation line { stroke:#53716a; stroke-dasharray:3 3; } .annotation text { fill:#395851; font-size:9px; font-weight:700; }
.axis-label { fill:#3d4b49; font-size:10px; font-weight:800; }
.chart-selection { min-height:2.6rem; margin:.45rem 0 0; color:#4b4135; font-size:.82rem; line-height:1.4; }

/* rocks */
.rocks-panel, .table-panel, .checks-panel { margin-bottom:1rem; }
.rocks-intro { color:var(--muted); line-height:1.5; max-width:820px; }
.stripe-bar { display:block; width:100%; height:auto; margin:.25rem 0 .8rem; border-radius:.4rem; }
.depth-bars { display:grid; gap:.4rem; max-width:560px; }
.depth-row { display:grid; grid-template-columns:minmax(8.5rem, 11rem) 1fr 3rem; align-items:center; gap:.6rem; font-size:.82rem; }
.depth-row .bar { height:.75rem; background:#efe9de; border-radius:999px; overflow:hidden; }
.depth-row .bar i { display:block; height:100%; background:#d38b3a; }
.depth-row b { text-align:right; }

/* table */
.table-note { color:var(--muted); font-size:.82rem; margin:0; max-width:420px; }
.table-wrap { max-height:22rem; overflow:auto; border:1px solid var(--line); border-radius:.65rem; }
.table-wrap.small-table { max-height:15rem; margin-bottom:.4rem; }
table { width:100%; border-collapse:collapse; min-width:720px; font-size:.84rem; }
.small-table table { min-width:480px; }
th,td { text-align:left; padding:.6rem .45rem; border-bottom:1px solid var(--line); }
th { color:#6a5a48; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; vertical-align:bottom; }
thead { position:sticky; top:0; z-index:1; background:var(--panel); }
tr.chart-selected td { background:#fff1dc; }
.reflection { margin-top:1rem; background:#f3ece0; border-radius:.65rem; padding:.8rem .9rem; }
.reflection p:last-child { margin:.35rem 0 0; color:#4b4135; line-height:1.5; font-size:.9rem; }
footer { color:#6a5a48; text-align:center; font-size:.78rem; padding:1rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.model-notes .lk-term, .hint .lk-term, .reflection .lk-term, .lede .lk-term, h2 .lk-term, .rocks-intro .lk-term, .table-note .lk-term { font-weight:inherit; }

@media (max-width:860px) { .workspace,.evidence-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .masthead,.question-card { display:block; } .masthead .text-button { margin-top:.8rem; } .prediction-field { margin-top:1rem; min-width:0; } .panel { padding:1rem; } .question-card { padding:1rem; } .event-card { position:static; border-radius:0; border-width:0 0 1px; } .scene-wrap { display:flex; flex-direction:column-reverse; } }
@media (max-width:420px) { .segmented-control.two-col { grid-template-columns:1fr 1fr; } .choice { padding:.5rem; } .stat-row dd { font-size:1.15rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0ms!important; transition-duration:.01ms!important; } }

#chart line, #chart polyline, #chart text, #chart rect.range-band { pointer-events:none; }