:root{color-scheme:dark;--bg:#091619;--bg2:#0c1c20;--panel:#102126;--panel2:#12272b;--line:#2b3b3d;--line2:#1e3437;--cream:#efe9d9;--muted:#819695;--mint:#a8d0bb;--gold:#d8b37b;--teal:#4baba6;--red:#ec987b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--cream);min-width:330px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;max-width:1920px;margin:auto}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 30px 0 30px;border-bottom:1px solid var(--line2);background:#0a171b;position:relative;z-index:2}.brand{display:flex;align-items:center;gap:14px}.brand-logo{width:30px;height:32px;border:1px solid #b0d3c0;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:5px 4px;transform:skewX(-8deg)}.brand-logo span{width:5px;background:#b0d3c0}.brand-logo span:nth-child(1){height:8px}.brand-logo span:nth-child(2){height:16px}.brand-logo span:nth-child(3){height:10px}.brand-name{font-weight:830;letter-spacing:.16em;font-size:19px}.brand-name small{font-weight:500;letter-spacing:.24em;font-size:9px;color:#829491;margin-left:4px}.header-right{display:flex;align-items:center;gap:24px}.top-pill{font-size:10px;letter-spacing:.14em;font-weight:780;color:#b7d8bd;display:flex;align-items:center;gap:9px}.status-dot,.render-live i{width:6px;height:6px;border-radius:50%;background:#9ad8ac;box-shadow:0 0 10px #8ae4b3;display:inline-block}.top-id{font-size:10px;font-weight:700;letter-spacing:.14em;color:#7b9290}.top-star{color:#bd9670;margin:0 4px}.lang-button{border:1px solid #415355;background:transparent;color:#e7e5db;padding:9px 12px;font-size:10px;font-weight:750;letter-spacing:.1em}.lang-button span{color:#87a5a4}.workspace{display:grid;grid-template-columns:327px minmax(0,1fr)}.sidebar{background:#0e1b1e;border-right:1px solid var(--line2);padding:31px 22px 18px;display:flex;flex-direction:column}.intro-block{padding:1px 4px 28px}.eyebrow{display:flex;align-items:center;gap:12px;color:#9eaca1;font-size:9px;font-weight:800;letter-spacing:.16em}.eyebrow::first-letter{color:var(--gold)}.eyebrow .rule{width:25px;height:1px;background:#926e57}.intro-block h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.047em;line-height:.98;font-size:42px;margin:24px 0 16px}.intro-block h1 em{color:var(--mint);font-weight:400}.period{color:#c7a777}.intro-block p{font-size:12px;line-height:1.75;color:#aab9b4;max-width:265px;margin:19px 0}.meta-tags{display:flex;flex-wrap:wrap;gap:6px}.meta-tags span{border:1px solid #344649;color:#869996;font-size:8px;letter-spacing:.09em;font-weight:800;padding:6px}.section-heading{border-top:1px solid var(--line);padding:19px 4px 13px;display:flex;gap:14px;align-items:center;letter-spacing:.115em;font-size:10px;font-weight:840;color:#dadbd0}.section-n{color:#c49b70;font-weight:600;font-size:10px}.control-block{padding:0 1px 22px}.scenario-toggle{display:grid;grid-template-columns:1fr 1fr;gap:7px}.scenario{border:1px solid #314246;background:#132428;padding:12px 8px 11px 12px;color:#c5d1c9;text-align:left;display:flex;align-items:center;gap:10px;min-height:68px;transition:.2s}.scenario.active{border-color:#a8cfb4;background:#223b36;color:#f1ebd9}.scenario-symbol{font-size:23px;color:#acd9c0;font-family:Georgia}.scenario strong{font-size:10px;letter-spacing:.055em;display:block}.scenario small{display:block;font-size:9px;color:#859a91;margin-top:6px;white-space:nowrap}.control-label{font-size:10px;letter-spacing:.09em;color:#b2c3b7;font-weight:780;display:flex;justify-content:space-between}.label-sub{color:#5d7778;letter-spacing:.01em;font-size:9px}.spaced{margin-top:19px}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.control-btn{min-height:77px;position:relative;padding:11px 10px 10px;background:#13262a;border:1px solid #345051;color:#dbe0d2;text-align:left;display:flex;align-items:flex-start;gap:9px;transition:background .2s,border-color .2s}.control-btn:hover{background:#1b3335}.control-btn[aria-pressed=true]{border-color:#b9d0a7;background:#26463d}.control-btn:disabled{opacity:.5;cursor:not-allowed}.control-icon{font-size:21px;line-height:1.1;color:#accfbb}.control-btn strong{display:block;font-size:9px;letter-spacing:.02em;white-space:nowrap;margin:3px 0 7px}.control-btn small{font-size:9px;letter-spacing:.035em;color:#839c99}.button-led{position:absolute;width:5px;height:5px;border-radius:50%;right:7px;top:8px;background:#425a58}.control-btn[aria-pressed=true] .button-led{background:#b1e5b8;box-shadow:0 0 6px #b1e5b8}.depart-button{margin-top:11px;width:100%;height:43px;display:flex;justify-content:space-between;align-items:center;padding:0 14px;background:#c9ac7e;border:1px solid #dfc89d;color:#202c27;font-size:10px;font-weight:900;letter-spacing:.14em}.depart-button:disabled{background:#35423e;border-color:#51625c;color:#88998d;cursor:not-allowed}.depart-button span:last-child{font-size:19px}.speed-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 14px}.speed-head label{color:#bec9c0;font-size:10px;font-weight:740;letter-spacing:.09em}.speed-head strong{color:#c4d9bd;font-size:15px;font-weight:700}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right,#b8cdaf 50%,#344e50 50%);border-radius:0;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#d5e4c5;border:2px solid #152c2c;border-radius:50%;box-shadow:0 0 0 1px #aac1ab}.slider-legend{display:flex;justify-content:space-between;color:#657f7d;font-size:9px;margin:10px 0 15px}.transport-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.transport-controls button{background:#172c2e;border:1px solid #405357;color:#e3e6d9;padding:12px;display:flex;justify-content:center;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.1em}.transport-controls button span:first-child{font-size:16px;color:#bbd1be}.side-note{border:1px solid #31494a;background:#15272a;padding:15px 12px;display:flex;gap:12px;margin-top:2px}.note-icon{height:19px;min-width:19px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid #a1b7a5;color:#a1b7a5;font-family:Georgia;font-size:13px}.side-note p{font-size:11px;line-height:1.6;color:#a7bbb1;margin:0}.side-footer{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.12em;color:#688380;margin-top:auto;padding:34px 3px 4px}.content{background:linear-gradient(180deg,#0b191c,#0a1719);min-width:0;padding:20px 21px 0}.viewport-section{border:1px solid #243f40;background:#0f2226}.viewport-bar{height:43px;padding:0 17px;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:760;letter-spacing:.095em;color:#c7d4c8}.viewport-bar>div{display:flex;align-items:center;gap:10px}.view-icon{font-size:20px;color:#bed2ba}.bar-divider{color:#566e6b}.view-location{color:#7d9d97}.render-live{color:#879f97;font-size:9px;display:flex;align-items:center;gap:9px}.render-live i{width:5px;height:5px}.scene-frame{position:relative;height:clamp(380px,45vw,600px);overflow:hidden;background:linear-gradient(#a6c2ba,#91aaa6 65%,#667f7d)}#scene{display:block;width:100%;height:100%;cursor:grab;touch-action:none;position:relative;z-index:0}#scene:active{cursor:grabbing}.scene-gradient{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,28,29,.39),transparent 20%,transparent 64%,rgba(4,21,23,.76)),linear-gradient(90deg,rgba(6,22,22,.08),transparent 30%)}.scene-top-left{position:absolute;top:18px;left:20px;pointer-events:none;text-shadow:0 1px 8px #183030}.scene-cornerlabel{font-size:10px;font-weight:900;color:#f1eddb;letter-spacing:.14em}.scene-subtitle{font-size:9px;font-weight:770;letter-spacing:.12em;color:#d2e2d5;margin-top:9px}.scene-side-panel{position:absolute;right:20px;top:35%;pointer-events:none;background:#10272bd1;border:1px solid #77918a52;padding:12px 13px}.coordinate-label{writing-mode:vertical-rl;position:absolute;top:11px;right:7px;letter-spacing:.1em;color:#b9ccbc;font-size:8px}.water-scale{display:flex;gap:12px;margin-right:17px}.water-scale-bar{height:126px;width:10px;border:1px solid #b5d1c38a;background:#183337;position:relative;display:flex;align-items:flex-end}.water-scale-bar span{display:block;width:100%;height:0%;background:linear-gradient(#c3eee1,#4fada9);transition:height .1s}.water-scale-values{height:127px;display:flex;flex-direction:column;justify-content:space-between;color:#d7e9dc;font-size:10px}.water-scale-values strong{color:#fff;font-size:13px}.scene-bottom{position:absolute;bottom:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}.camera-tabs{display:flex;flex-wrap:wrap;gap:4px}.camera-tabs button{background:rgba(14,39,42,.76);border:1px solid #d1dbcc65;color:#c4d2c8;padding:10px 11px;font-size:9px;font-weight:790;letter-spacing:.07em;backdrop-filter:blur(10px)}.camera-tabs button.active{background:#cad5c2;color:#1a3031;border-color:#e2e9db}.compass{border:1px solid #d5d9c4a3;border-radius:50%;height:36px;width:36px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#112d30b3;color:#e9e9cf;font-weight:900;font-size:10px}.compass span{font-size:17px;line-height:12px}.notice-line{height:47px;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:11px;color:#b8cabe;background:#112529;letter-spacing:.015em}.notice-mark{color:#98c7ad}.notice-mode{margin-left:auto;font-size:9px;letter-spacing:.15em;color:#bba67e;white-space:nowrap}.section-caption,.panel-head{display:flex;justify-content:space-between;align-items:center;color:#c6d2c7;font-size:10px;font-weight:800;letter-spacing:.11em}.section-caption{margin:22px 3px 13px}.section-caption>span:last-child{color:#708e87;font-size:9px}.round-bullet{color:#86aa9b;font-size:6px}.cap-n{color:#b18d65;margin-right:12px;font-weight:700}.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metric{background:linear-gradient(150deg,#132b2d,#102123);padding:15px 17px 14px;min-height:129px;border:1px solid #29474a}.metric-top{display:flex;justify-content:space-between;align-items:center;color:#aabdb2;font-size:9px;letter-spacing:.09em;font-weight:800}.metric-icon{color:#a6cdb8;font-size:19px;line-height:1}.metric-value{display:flex;align-items:baseline;gap:7px;margin:15px 0 10px;white-space:nowrap}.metric-value strong{font-size:clamp(21px,2.9vw,31px);letter-spacing:-.05em;font-weight:620;font-variant-numeric:tabular-nums;color:#f5eddb}.metric-value small{color:#bdd1c1;font-size:11px}.metric-foot{font-size:9px;color:#76938b;letter-spacing:.05em}.lower-grid{display:grid;grid-template-columns:1.28fr 1fr;gap:10px;margin-top:11px}.data-panel,.learn-panel{background:#102326;border:1px solid #29474a;min-height:242px}.panel-head{height:44px;padding:0 16px;border-bottom:1px solid #274345}.chart-legend{color:#aac1b4}.chart-legend i{display:inline-block;width:19px;border-top:2px solid #b7d6b3;margin-right:7px;vertical-align:middle}.chart-legend small{font-weight:500}.chart-wrap{height:155px;padding:14px 12px 0 10px}#chart{display:block;width:100%;height:100%}.chart-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 20px 13px;color:#78968e;font-size:9px;letter-spacing:.09em}.learn-panel{background:linear-gradient(128deg,#18332f,#0f2326)}.learn-icon{color:#bdd5ba;font-size:20px}.equation{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:15px 18px 8px}.equation span{font-family:Georgia,serif;font-size:clamp(15px,2vw,23px);color:#e8dbb9;white-space:nowrap}.equation small{font-size:8px;font-weight:730;letter-spacing:.08em;color:#8bab9b;text-align:right;margin-top:8px;max-width:93px}.learn-panel p{margin:12px 18px;color:#a7c1b1;line-height:1.63;font-size:11px}.learn-panel a{display:flex;align-items:center;gap:10px;margin:16px 18px;font-size:10px;letter-spacing:.11em;font-weight:800;color:#e4c293}.content-footer{border-top:1px solid #284042;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;color:#607d78;letter-spacing:.09em;font-size:8px;font-weight:750;margin:20px 0 0;padding:16px 2px 19px}.scene-loading,.scene-error{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;background:#102326ed;color:#e4e7d8;letter-spacing:.12em;font-size:12px}.scene-loading .loading-symbol{font-size:38px;color:#bfd4bb;animation:turn 4s linear infinite}.scene-loading small{color:#9cb5a7;font-size:10px}.scene-loading[hidden],.scene-error[hidden]{display:none}@keyframes turn{to{transform:rotate(360deg)}}
@media(max-width:1150px){.workspace{grid-template-columns:290px minmax(0,1fr)}.sidebar{padding-left:14px;padding-right:14px}.intro-block h1{font-size:36px}.content{padding:15px 13px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lower-grid{grid-template-columns:1fr}.metric-value strong{font-size:29px}.scene-frame{height:480px}.control-btn{padding-left:7px;gap:6px}.control-btn strong{font-size:8px}}
@media(max-width:750px){.topbar{height:62px;padding:0 14px}.brand-name{font-size:17px}.brand-name small,.top-id{display:none}.header-right{gap:13px}.top-pill{font-size:9px}.workspace{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid #355054}.intro-block{padding-bottom:18px}.intro-block h1{font-size:36px;margin:14px 0}.intro-block h1 br:nth-child(2){display:none}.intro-block p{max-width:none}.side-footer{display:none}.content{padding:12px}.scene-frame{height:390px}.scene-side-panel{right:11px;top:25%;transform:scale(.8);transform-origin:top right}.camera-tabs button{font-size:8px;padding:9px 7px}.camera-tabs button:nth-child(2){display:none}.metrics-grid{gap:8px}.metric{padding:12px;min-height:115px}.lower-grid{grid-template-columns:1fr}.notice-line{font-size:10px}.scene-subtitle{font-size:8px}}
@media(max-width:400px){.top-pill{display:none}.scene-frame{height:340px}.camera-tabs button{font-size:7px;padding:8px 6px}.camera-tabs button:nth-child(3){display:none}.scene-bottom{bottom:12px;left:12px;right:12px}.metric-value strong{font-size:24px}.equation span{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}