:root{ --panel:#111827; --panel2:#0c1422; --ink:#e7f0ff; --muted:#9fb3cc; }
  *{box-sizing:border-box}
  html,body{height:100%; overflow:hidden}
  body{margin:0; background:#000; color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
  body.lightBg{ background:#f1f4f8; }
  body.lightBg #gl{ background:#f1f4f8; }
  body.lightBg .axisLabel{
    color:#0b2a7a;
    text-shadow:none;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(0,0,0,.14);
    backdrop-filter:blur(2px);
  }
  .app{display:grid; grid-template-columns:360px 1fr; grid-template-rows:100vh}
  aside{background:linear-gradient(180deg,var(--panel),var(--panel2)); padding:16px; border-right:1px solid #1e2735; overflow:auto}
  main{position:relative; overflow:hidden}
  h1{font-size:18px; margin:0 0 8px}
  fieldset{border:1px solid #1f2a3a; border-radius:12px; padding:12px 12px 6px; margin:0 0 12px}
  legend{padding:0 6px; color:#c7ddff; font-size:12px}
  label{display:block; font-size:12px; color:#c6d7ef; margin:6px 0 4px}
  select,input[type="range"],input[type="color"],button{width:100%; padding:10px 12px; border-radius:10px; border:1px solid #263245; background:#0e1420; color:var(--ink); outline:none}
  .row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
  .small{font-size:11px; color:#9fb3cc}
  .btn{cursor:pointer; margin-top:8px; background:#122036; border-color:#21324b}
  .btn:hover{background:#142746}
  #gl,#angleOverlay{display:block; width:100%; height:100%}
  #gl{background:#000}
  #angleOverlay{position:absolute; inset:0; pointer-events:none; z-index:19}
  .hud{position:absolute; left:12px; bottom:12px; background:rgba(12,16,24,.45); border:1px solid rgba(36,48,68,.55); backdrop-filter:blur(6px); padding:8px 10px; border-radius:10px; font-size:12px; z-index:20}
  .badge{display:inline-block; background:#0f2342; color:#d9ecff; padding:6px 10px; border-radius:999px; border:1px solid #19406f; font-size:12px}
  .badges{display:flex; gap:6px; flex-wrap:wrap}
  .axisLabel{
    position:absolute;
    transform:translate(-50%,-50%);
    font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    letter-spacing:.02em;
    text-shadow:0 0 10px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.95);
    pointer-events:none;
    user-select:none;
    padding:2px 5px;
    border-radius:999px;
    background:rgba(4,8,14,.18);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(2px);
    z-index:21;
  }
  @media (max-width: 980px){
    .app{grid-template-columns:1fr; grid-template-rows:auto 1fr}
    aside{border-right:0; border-bottom:1px solid #1e2735}
    main{min-height:60vh}
  }