:root {
  --object-wind:#997a36; --object-water:#185ba5; --object-deep:#1486b4;
  --object-air:#5f7894; --object-ground:#aa8668; --object-tracer:#e9b548;
  --object-land:#dfccad; --object-land-high:#ece0c8; --object-seabed:#7599b4;
  --object-ocean:#267cbc; --object-ocean-cold:#259dc5; --object-skirt:#aa9374;
  --object-grid:#66796e; --object-fog:#f2f6fa;
  font-family:var(--font-ui); font-size:var(--text-base);
}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink)}
main{max-width:var(--content-width);margin:auto;padding:32px 40px 24px}
button,input{font:inherit}button{cursor:pointer;color:var(--body);background:transparent;border:1px solid var(--line);border-radius:var(--control-radius);padding:6px 10px;font-size:var(--text-sm);min-height:32px;transition:background .15s,color .15s}
button:hover{background:#ebece6;color:var(--ink)}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--control);outline-offset:3px}
button[aria-pressed=true],button.active{color:var(--control-ink);background:var(--control);border-color:var(--control)}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{color:var(--muted);font-size:var(--text-xs);letter-spacing:.12em;margin:0 0 9px}h1{font-size:26px;letter-spacing:.035em;margin:0;font-weight:550}.subtitle{font-size:var(--text-body);margin:8px 0 0;color:var(--muted)}.model-tag{color:var(--muted);font-size:var(--text-sm)}
.lab{display:grid;grid-template-columns:minmax(0,7fr) minmax(275px,3fr);gap:var(--layout-gap);align-items:start}.scene-panel{min-width:0;background:var(--canvas);overflow:hidden}.scene-toolbar{display:flex;justify-content:space-between;gap:12px;padding:0 0 8px;flex-wrap:wrap}.view-buttons{display:flex;gap:5px}.scene-toolbar button{padding:6px 11px}
#scene{position:relative;height:500px;overflow:hidden;touch-action:none;background:var(--canvas)}#scene canvas{width:100%;height:100%;display:block;cursor:grab}#scene canvas:active{cursor:grabbing}.scene-note{position:absolute;bottom:12px;left:10px;font-size:var(--text-xs);color:var(--muted);pointer-events:none}.compass{position:absolute;left:10px;top:12px;display:flex;flex-direction:column;gap:5px;font-size:var(--text-xs);color:var(--muted);pointer-events:none}
.label{position:absolute;pointer-events:none;white-space:nowrap;font-size:var(--text-body);color:var(--ink);background:rgba(246,245,241,.91);padding:3px 5px;border-radius:2px;transform:translate(-50%,-50%)}.label.small{font-size:var(--text-sm)}.scene-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 0 17px;color:var(--muted);font-size:var(--text-xs)}.legend{display:flex;gap:16px;flex-wrap:wrap}.legend i{display:inline-block;width:16px;height:3px;background:var(--c);vertical-align:middle;margin-right:6px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-top:1px solid var(--line)}.steps button{position:relative;border:0;border-radius:0;display:flex;gap:10px;align-items:center;text-align:left;padding:16px 0;font-size:var(--text-sm);min-height:54px;background:transparent;color:var(--muted)}.steps button::before{content:"";position:absolute;top:-1px;left:0;width:18px;height:2px;background:var(--line-complete)}.steps b{font-size:var(--text-xs);font-weight:400;color:var(--muted)}.steps button.selected{color:var(--ink);background:transparent;font-weight:550}.steps button.selected::before{background:var(--control);width:100%}.steps button.selected b{color:var(--ink);font-weight:600}
.explanation{padding:0 0 24px;min-height:205px;margin-bottom:20px;border-bottom:1px solid var(--line)}.step-kicker{font-size:var(--text-xs);letter-spacing:.08em;color:var(--muted)}h2{font-size:var(--text-heading);margin:10px 0;font-weight:500;line-height:1.5}.explanation p{margin:12px 0 0;color:var(--body);font-size:var(--text-body);line-height:1.85;max-width:720px}.controls{padding:0}.controls>h2{margin:0;font-size:15px}.control-intro{font-size:var(--text-sm);color:var(--muted);margin:7px 0 13px;line-height:1.7}.presets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.presets button{font-size:var(--text-sm);padding:5px 8px;min-height:28px}.field{padding-top:14px;border-top:1px solid var(--line);margin-top:16px}.field>label:first-child{display:flex;gap:8px;justify-content:space-between;font-size:var(--text-body);align-items:center}output{color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{display:block;width:100%;height:18px;accent-color:var(--control);margin:11px 0 7px;cursor:pointer;background:transparent;-webkit-appearance:none;appearance:none}input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-complete)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--control);border-radius:50%;margin-top:-4px}input[type=range]::-moz-range-track{height:2px;background:var(--line-complete)}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--control);border:0;border-radius:50%}input:disabled{opacity:.45;cursor:default}.range-ends{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--muted)}.check{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--body);margin:13px 0;line-height:1.6;cursor:pointer}.check input{accent-color:var(--control);width:14px;height:14px;flex:none}
.readout{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:18px 0}.readout-head{display:flex;justify-content:space-between;gap:6px;font-size:var(--text-sm);color:var(--muted)}.readout-head b{font-weight:500;color:var(--ink)}dl{margin:12px 0}dl div{display:flex;justify-content:space-between;margin:7px 0;font-size:var(--text-sm)}dt{color:var(--muted)}dd{margin:0;font-variant-numeric:tabular-nums}.readout p{font-size:var(--text-sm);line-height:1.75;margin:0;color:var(--body)}.display-options{padding-top:0}.display-options button{margin-top:3px}.notes{margin-top:30px;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:var(--text-sm)}.notes summary{cursor:pointer}.notes-content{max-width:900px;line-height:1.85;padding:8px 0}.notes a{color:var(--link);text-underline-offset:3px}footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--muted);margin-top:26px}#load-message{position:absolute;inset:0;display:grid;place-content:center;color:var(--muted);padding:30px;text-align:center}#load-message[hidden]{display:none}
@media(min-width:1300px){#scene{height:560px}}@media(max-width:980px){main{padding:25px 22px}.lab{grid-template-columns:minmax(0,1fr) 270px;gap:22px}.steps button{gap:7px}.legend{gap:10px}}
@media(max-width:760px){main{padding:24px 16px}.page-head{margin-bottom:22px}.model-tag{display:none}.lab{grid-template-columns:1fr;gap:26px}#scene{height:400px}.controls{padding:0}.explanation{min-height:0;padding-bottom:22px}.steps{gap:10px}.steps button{font-size:var(--text-sm);gap:5px;padding:13px 0;align-items:flex-start;flex-direction:column}.legend{gap:14px}.scene-footer>span{display:none}.presets{margin-bottom:16px}.field{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}