.ocean-lab .lab-layout{display:flex;flex-direction:column;gap:18px}.ocean-lab .simulation-panel{width:100%;border-radius:18px;overflow:hidden}.ocean-lab .simulation-panel>.panel-heading,.ocean-lab .stage-view-controls,.ocean-lab #play-button{display:none!important}.ocean-lab .simulation-stage{display:block;min-height:0;padding:0;overflow:hidden}.ocean-lab #control-panel{width:100%;padding:22px 28px;background:#f6faff}.ocean-lab .control-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}.ocean-lab .control-fields>*{margin:0}.ocean-lab .control-note{margin-bottom:0}.ocean-lab .control-top{margin-bottom:16px}.ocean-lab .metric-row{background:#f6faff}.ocean-lab .metric-value{font-size:25px}
.ocean-player{background:#0d2539;color:#e2eef6;width:100%;font-variant-numeric:tabular-nums}.ocean-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:25px 28px 20px}.ocean-eyebrow{display:block;font-size:9px;letter-spacing:2px;color:#80adca;margin-bottom:10px}.ocean-head h2{font-size:22px;font-weight:600;letter-spacing:-.5px;margin:0}#ocean-mode{font-size:11px;white-space:nowrap;background:#234359;color:#b9d8e9;padding:8px 13px;border-radius:20px;border:1px solid #41637c}.ocean-presets{display:flex;gap:7px;flex-wrap:wrap;padding:0 28px 20px;border-bottom:1px solid #2b455b}.ocean-player button{color:#c7deed;background:#1c3a51;border:1px solid #45657d;border-radius:7px;font-size:11px;padding:9px 13px;min-height:36px;font-weight:500}.ocean-player button:hover{background:#2b4b63}.ocean-player button:focus-visible{outline:2px solid #9cdeef;outline-offset:3px}.ocean-presets button[aria-pressed=true]{background:#d3eaf4;color:#20445c;border-color:#d3eaf4}.ocean-main{display:grid;grid-template-columns:minmax(0,1fr) 280px}.ocean-scene-column{min-width:0;align-self:center}.ocean-canvas-wrap{position:relative;height:440px;background:radial-gradient(ellipse at center,#234a61 0,transparent 72%);padding-top:20px}#ocean-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#ocean-canvas:active{cursor:grabbing}.ocean-camera-hint{position:absolute;top:17px;left:24px;font-size:10px;color:#8aafc7;pointer-events:none}.ocean-transport{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:2px 24px 18px}.ocean-transport>span{flex-basis:100%;font-size:10px;color:#7fa4bd;margin-top:3px}.ocean-transport button:first-child{background:#cce9f5;color:#20465f}.ocean-order{margin:0 24px 24px;padding:15px 17px;background:#16364d;border:1px solid #36576e;border-radius:9px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px}.ocean-order>span{font-size:11px;color:#98bacf}.ocean-order>strong{font-size:13px;font-weight:600;letter-spacing:.5px;color:#d3e6f2}.ocean-densities{padding:21px 20px 16px;border-left:1px solid #2c495f;background:#112d43}.ocean-density-heading{margin-bottom:17px}.ocean-density-heading h3{font-size:14px;font-weight:600;margin:0 0 7px}.ocean-density-heading>span{font-size:10px;color:#8fb1c8}.ocean-density-card{border-bottom:1px solid #315066;padding:0 0 15px;margin-bottom:17px}.ocean-water-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--water)}.ocean-water-title>span:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--water);margin-right:7px}.ocean-water-title>b{font-size:10px;font-weight:600;letter-spacing:1px}.ocean-density-card>p{font-size:10px;color:#91b3c9;margin:6px 0 12px}.ocean-density-card>label{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;color:#a8c7db;margin-bottom:6px}.ocean-density-card output{font-size:20px;font-weight:600;color:var(--water);letter-spacing:-.5px}.ocean-density-card input{width:100%;margin:0;accent-color:var(--water);cursor:pointer}.ocean-range-label{display:flex;justify-content:space-between;font-size:9px;color:#82a6bd;margin-top:5px}.ocean-depth-readout{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:12px 0 7px;font-size:10px;color:#a3c1d3}.ocean-depth-readout>strong{font-size:12px;color:#d6e8f5;font-weight:500}.ocean-depth-track{height:6px;position:relative;background:#071c2d;border-radius:3px}.ocean-depth-track i{display:block;height:100%;border-radius:3px;background:var(--water)}.ocean-depth-track>b{position:absolute;top:-3px;bottom:-3px;width:1px;background:#e1f0f8;opacity:.7}.ocean-density-card small{display:block;font-size:9px;color:#8aadc4;margin-top:8px;line-height:1.6}.ocean-density-card:last-of-type{border-bottom:0;margin-bottom:0}.ocean-density-note{color:#7fa4bc;font-size:9px;line-height:1.8;margin:0}.ocean-model-caption{margin:0;padding:17px 28px;border-top:1px solid #2c495f;font-size:11px;line-height:1.8;color:#95b5ca}.ocean-model-caption b{color:#d0e5f0;font-weight:500}.ocean-scene-error{position:absolute;inset:25% 7% auto;padding:20px;background:#203e54;border-radius:10px;line-height:1.8;font-size:13px}
@media(max-width:1000px){.ocean-main{grid-template-columns:minmax(0,1fr) 245px}.ocean-densities{padding:20px 16px}.ocean-canvas-wrap{height:420px}.ocean-head h2{font-size:20px}.ocean-order{display:block}.ocean-order strong{display:block;margin-top:10px}}
@media(max-width:900px){.ocean-main{display:block}.ocean-canvas-wrap{height:370px}.ocean-densities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border-left:0;border-top:1px solid #2c495f;padding:20px 18px}.ocean-density-heading{grid-column:1/-1;margin:0}.ocean-density-card{border-bottom:0;padding:0;margin:0;min-width:0}.ocean-density-note{grid-column:1/-1}.ocean-water-title{display:block;font-size:11px}.ocean-water-title b{display:block;margin:6px 0 0 14px;font-size:9px}.ocean-density-card output{font-size:17px}.ocean-depth-readout{display:block;font-size:9px}.ocean-depth-readout strong{display:block;margin-top:6px}.ocean-density-card small{font-size:8px}.ocean-head{padding:23px 20px 17px}.ocean-head h2{font-size:18px}.ocean-presets{padding:0 20px 18px}.ocean-player button{font-size:10px;padding:9px 11px}.ocean-head #ocean-mode{font-size:9px;padding:7px 10px}.ocean-order{display:flex;margin-bottom:20px}.ocean-order strong{margin:0}.ocean-lab .metric-value{font-size:21px}.ocean-lab #control-panel{padding:22px 20px}.ocean-model-caption{padding:17px 20px;font-size:10px}}
@media(max-width:470px){.ocean-head{display:block;padding:20px 16px 15px}.ocean-eyebrow{font-size:8px;letter-spacing:1.6px}.ocean-head h2{font-size:17px;line-height:1.5}.ocean-head #ocean-mode{display:inline-block;margin-top:12px}.ocean-presets{padding:0 16px 16px;gap:6px;display:grid;grid-template-columns:1fr 1fr}.ocean-canvas-wrap{height:295px}.ocean-camera-hint{left:16px;font-size:8px}.ocean-transport{padding:0 16px 16px}.ocean-order{margin:0 16px 18px;padding:12px;display:block}.ocean-order>span{font-size:10px}.ocean-order>strong{font-size:12px;margin-top:8px}.ocean-densities{display:block;padding:20px 16px}.ocean-density-heading{margin-bottom:20px}.ocean-density-card{padding-bottom:17px;margin-bottom:18px;border-bottom:1px solid #315066}.ocean-water-title{display:flex;font-size:13px}.ocean-water-title b{margin:0;font-size:10px}.ocean-density-card>p{margin-bottom:8px}.ocean-density-card output{font-size:20px}.ocean-depth-readout{display:flex;font-size:10px}.ocean-depth-readout strong{margin:0}.ocean-density-card small{font-size:9px}.ocean-model-caption{padding:16px;font-size:10px}.ocean-lab .control-fields{display:block}.ocean-lab .control-fields>*+*{margin-top:24px}.ocean-lab .metric-value{font-size:18px}.ocean-lab .metric-label{font-size:9px}.ocean-lab .metric-description{font-size:8px}.ocean-lab .metric-row{gap:8px;padding:20px 12px}}
/* Keep the three controls within the same desktop view as the basin. */
.ocean-densities{line-height:1.45}.ocean-density-heading{margin-bottom:15px}.ocean-density-heading h3{line-height:1.4}.ocean-density-card{padding-bottom:13px;margin-bottom:14px}.ocean-water-title{line-height:1.4}.ocean-density-card>p{line-height:1.4;margin:5px 0 8px}.ocean-density-card>label{line-height:1.3;margin-bottom:5px}.ocean-density-card output{padding:0;line-height:1.3}.ocean-range-label{line-height:1.3;margin-top:3px}.ocean-depth-readout{line-height:1.4;margin-top:9px}.ocean-density-card small{margin-top:6px;line-height:1.5}.ocean-density-note{line-height:1.6}.ocean-scene-column{align-self:start}.ocean-canvas-wrap{height:420px}
@media(max-width:900px){.ocean-canvas-wrap{height:370px}.ocean-density-card{padding:0;margin:0}}@media(max-width:470px){.ocean-canvas-wrap{height:295px}.ocean-density-card{padding-bottom:17px;margin-bottom:18px}}

.ocean-view-buttons{display:flex;gap:5px;margin-left:auto}.ocean-view-buttons button{min-height:32px;padding:7px 9px;font-size:10px}.ocean-view-buttons button[aria-pressed=true]{background:#365c76;color:#e4f3fb;border-color:#7ea9c1}.ocean-lab .control-fields{grid-template-columns:1fr}
@media(max-width:600px){.ocean-scene-column{display:contents}.ocean-canvas-wrap{position:sticky;top:0;z-index:2;background:radial-gradient(ellipse at center,#234a61 0,transparent 72%),#0d2539}.ocean-view-buttons{margin-left:0;flex-basis:100%;margin-top:2px}}
@media(max-width:600px){.ocean-lab .simulation-panel,.ocean-lab .simulation-stage{overflow:clip}}