:root{font-family:Tahoma,Arial,sans-serif;color:#e8f1fb;background:#07111e;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:98px;border-bottom:1px solid #26374c;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:#0b1828}small{font-size:12px;letter-spacing:1px;color:#74b8cd}h1{margin:7px 0 0;font-size:25px}h1 span{font-size:18px;color:#9cacc0;font-weight:400}nav{display:flex;gap:8px}button,select{font:inherit;font-size:14px;border:1px solid #36485e;background:#12253a;color:#edf6ff;border-radius:8px;padding:11px 14px;cursor:pointer}button:hover{background:#214361}button.active,button.primary{background:#1bc2d9;color:#052333;border-color:#1bc2d9;font-weight:bold}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #9cf5ff;outline-offset:3px}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;direction:ltr;height:calc(100dvh - 98px)}#viewport{position:relative;min-height:400px;overflow:hidden}canvas{display:block;touch-action:none;width:100%;height:100%}aside{direction:rtl;background:#0c1a2b;border-left:1px solid #26374c;overflow:auto;padding:20px}.stats{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid #26374c}.stats div{display:flex;flex-direction:column;gap:6px}.stats b{font-size:27px;font-weight:400;color:#79dce9}.stats span{font-size:12px;color:#a5b5c8}h2{font-size:19px;margin:20px 0 15px}label{display:block;font-size:14px;color:#a9bed1;margin:14px 0 8px}select{width:100%;direction:ltr;text-align:right;max-width:100%}.route-meta{font-size:14px;color:#77d6e8;margin:13px 0}.row{display:flex;gap:8px}.row button:first-child{flex:1}input[type=range]{width:100%;accent-color:#20c7df}output{float:left}.checks{display:flex;gap:20px}.checks input{accent-color:#23cde3}#detail{border-top:1px solid #26374c;margin-top:20px;padding-top:20px}p{font-size:15px;line-height:1.9;color:#b9c9db}a{color:#68d6ed}#detail h2{margin-top:8px;overflow-wrap:anywhere}.scene-label{position:absolute;right:24px;top:24px;z-index:1;direction:rtl;pointer-events:none;display:flex;flex-direction:column;gap:8px;text-shadow:0 2px 4px #000}.scene-label b{font-size:18px}.scene-label span{font-size:13px;color:#a9bdce}#legend{position:absolute;bottom:70px;right:22px;display:flex;gap:14px;direction:rtl;pointer-events:none}#legend span{font-size:13px;background:#0b192bdb;padding:6px 8px;border-radius:5px;border-right:3px solid var(--c)}.view-tools{position:absolute;left:18px;top:100px;display:flex;flex-direction:column;gap:7px}.view-tools button{background:#0c1b2ae8}.hint{position:absolute;bottom:20px;right:20px;left:20px;text-align:center;font-size:13px;color:#bed0e1;direction:rtl;pointer-events:none}#loading{position:absolute;top:50%;width:100%;text-align:center;z-index:3}dialog{max-width:760px;width:calc(100% - 28px);max-height:85dvh;background:#0e2135;color:#ecf5ff;border:1px solid #456078;border-radius:15px;padding:28px}dialog::backdrop{background:#010811b8}.close{float:left}h3{color:#62d3e4;font-size:17px}#detail button{margin:4px 0}@media(max-width:850px){header{height:auto;min-height:110px;padding:12px 16px;display:block}h1{font-size:22px}h1 span{font-size:15px}nav{margin-top:12px}nav button{flex:1;padding:10px 5px;font-size:13px}main{display:flex;flex-direction:column;height:auto}#viewport{height:55dvh;min-height:360px}aside{overflow:visible;padding:18px}.scene-label{top:14px;right:14px}.scene-label span{max-width:260px;line-height:1.5}#legend{right:12px;gap:6px;bottom:55px}.view-tools{left:10px;top:95px}.hint{font-size:12px;bottom:12px}.stats{justify-content:space-around}#routePanel{max-width:600px;margin:auto}}

#environmentPanel{border-bottom:1px solid #26374c;padding-bottom:12px}.small-note{font-size:13px;line-height:1.7;color:#a9bed1}.attribution{position:absolute;bottom:2px;left:10px;font-size:11px;background:#07111ed9;padding:2px 6px}.hint{bottom:30px}#legend{bottom:80px}@media(max-width:850px){.hint{bottom:27px}#legend{bottom:63px}.attribution{font-size:10px}}