:root{color-scheme:dark;font-family:Segoe UI,Arial,sans-serif;color:#e8edef;background:#111;font-size:12px;--line:#3d4449;--accent:#27d5ff}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,select,input{font:inherit}button,a{cursor:pointer}button{border:1px solid var(--line);border-radius:6px;background:#2c3338;color:#eef3f5;padding:6px 9px;white-space:nowrap}button:hover{border-color:var(--accent)}button.active{border-color:#eeae55;background:#6a4523;color:#fff}button:disabled{opacity:.4;cursor:default}a{color:#b4c6ce;text-decoration:none}a:hover{color:#fff}#sessionbar{height:32px;display:flex;align-items:center;gap:14px;padding:0 9px;background:#20262a;border-bottom:1px solid #42484c;font-size:10px}#sessionbar button{font-size:10px;padding:3px 8px}.training-mark{color:#27d5ff;letter-spacing:1px;font-weight:bold}.spacer{flex:1}#connection.good{color:#6eda9d}#workspace{display:grid;grid-template-columns:1fr 1fr;height:calc(100% - 32px)}#mapPane{min-width:0;border-right:3px solid #3b4145;position:relative}iframe{width:100%;height:100%;border:0;display:block}#sonarPane{min-width:0;min-height:0;display:flex;flex-direction:column;background:#171a1d;outline:none}#sonarPane.armed{box-shadow:inset 0 0 0 2px #e6a345}.sonar-brand{display:flex;align-items:center;gap:12px;padding:9px 12px;background:#252a2e;border-bottom:1px solid #393f43}.sonar-brand b{font-size:14px;letter-spacing:1px}.sonar-brand b span{color:#dca765;margin-left:3px}.sonar-brand small{font-size:10px;color:#9ca6ad}#pingStatus{margin-left:auto;color:#9faab0;font-size:10px}.sonar-toolbar{display:flex;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #383d40;flex-wrap:wrap}.label{color:#adb5ba;font-size:10px}#ranges{display:flex;gap:4px}.sonar-toolbar label{display:flex;align-items:center;gap:5px;font-size:10px;color:#bdc5ca}.sonar-toolbar input[type=range]{width:70px;accent-color:#e6a345}.sonar-toolbar input[type=checkbox]{accent-color:#e6a345}.doppler{margin-left:auto}#sonarStage{position:relative;flex:1;min-height:180px;overflow:hidden;background:#060504}canvas{width:100%;height:100%;display:block;cursor:crosshair}#scanHint{position:absolute;top:25%;left:10%;right:10%;text-align:center;color:#9d8461;font-size:12px;line-height:1.7;pointer-events:none}#sonarMeta{position:absolute;left:12px;right:12px;bottom:8px;display:flex;justify-content:space-between;font:11px Consolas,monospace;color:#b98d54;pointer-events:none}#cursorbar{display:flex;align-items:center;gap:8px;padding:8px;background:#222629;border-top:1px solid #3f4549;font-size:10px}#cursorValue{min-width:0;flex:1;height:30px;border:1px solid #596063;border-radius:5px;background:#111619;padding:6px 8px;color:#fff;font:12px Consolas,monospace}#copy{border-color:#ba8747;background:#45311c}.controlbar{display:flex;align-items:center;gap:10px;padding:7px 8px}.controlbar button{border-color:#517d83;color:#a4edf0;font-size:11px}.controlbar button.active{color:#fbd29a;border-color:#e6a345}.controlbar span{font-size:9px;color:#9ba9b1;line-height:1.5}.telemetry{display:flex;justify-content:space-between;gap:6px;padding:3px 10px 8px;font:10px Consolas,monospace;color:#9daeb7}.missionbar{display:flex;gap:5px;padding:7px 8px;background:#22282c}.missionbar select{flex:1;min-width:80px;background:#13191c;border:1px solid #414e55;border-radius:5px;color:#b8c9d2;font-size:10px}#start{border-color:#3c915e;color:#93e0ae}#notice{padding:7px 10px;font-size:10px;line-height:1.4;color:#c3cbd0}#description{display:none}#session{display:block;padding:0 10px 5px;color:#7d8c94;font-size:8px}#error{position:fixed;bottom:20px;left:25%;right:25%;z-index:100;background:#42282b;border:1px solid #b9676c;border-radius:8px;padding:14px;box-shadow:0 5px 30px #0009}#error p{overflow-wrap:anywhere}.sonar-only #workspace{grid-template-columns:1fr}.sonar-only #mapPane{display:none}@media(max-width:850px){.sonar-brand small{display:none}.controlbar{flex-wrap:wrap}.telemetry{flex-wrap:wrap}.missionbar{flex-wrap:wrap}.missionbar select{flex-basis:100%}#sessionbar{gap:8px}.sonar-toolbar{gap:5px}}@media(max-width:600px){#workspace{grid-template-columns:1fr;grid-template-rows:45% 55%}#mapPane{border-right:0;border-bottom:3px solid #3b4145}#sonarStage{min-height:120px}.telemetry,#session,.sonar-brand{display:none}.sonar-only #workspace{grid-template-rows:1fr}#error{left:10px;right:10px}}

.drivebar{display:flex;gap:18px;padding:4px 10px;flex-wrap:wrap}.drivebar label{display:flex;align-items:center;gap:8px;font-size:11px}.drivebar input{width:100px}#briefing{margin:4px 10px;color:#e8d7b0;font-size:12px;max-height:145px;overflow:auto;flex-shrink:0}#briefing summary{cursor:pointer;font-weight:bold}#description{line-height:1.45;margin:6px 0}

#briefing #description{display:block}#sonarPane{overflow-y:auto}


#orientation{pointer-events:auto;font-size:10px;padding:3px 6px}#orientation[aria-pressed=true]{border-color:#dca765;color:#f8cd88}.difficultybar{display:flex;align-items:center;gap:12px;padding:4px 10px}.difficultybar select{background:#20262a;color:#eee;padding:3px;border-radius:4px}.difficultybar small,.shore-credit{color:#a0adb4;font-size:9px}.shore-credit{padding:2px 10px}#sonarMeta{align-items:center}

#qualityOpen{font-size:10px;margin-left:auto}#qualityDialog{width:min(520px,94vw);max-height:85vh;padding:18px;border:1px solid #61717b;border-radius:10px;background:#20262a;color:#e9edef}#qualityDialog::backdrop{background:#0009}#qualityDialog header,#qualityDialog footer{display:flex;align-items:center;justify-content:space-between;gap:14px}#qualityDialog h2{margin:0;font-size:18px}.quality-sections{overflow:auto;max-height:60vh;margin:16px 0}.quality-sections fieldset{border:1px solid #47555f;border-radius:6px;padding:14px}.quality-sections legend{font-weight:bold;color:#f3ca9b}.quality-sections p{font-size:12px;line-height:1.5;color:#b9c5cb}.quality-range{display:flex;gap:14px;margin:12px 0}.quality-range input{flex:1;min-width:0}.quality-range output{width:45px}#qualityStatus,#qualityEffect{font-size:11px;color:#a9d8c1}

#mapPane{display:flex;flex-direction:column}#mapPane iframe{flex:1;height:0;min-height:180px}#cameraPane{height:clamp(160px,28vh,250px);flex-shrink:0;background:#0a1a18;border-bottom:3px solid #3b4145;overflow:hidden}#cameraPane header{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:10px;color:#c8d7d4}#cameraImage{display:block;width:100%;height:calc(100% - 26px);object-fit:contain}.quality-sections fieldset+fieldset{margin-top:14px}#qualityDialog{max-height:90vh}#qualityDialog .quality-sections{max-height:65vh}