@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../../../assets/vendor/fonts/ibm-plex-mono/ibm-plex-mono-400.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../../../assets/vendor/fonts/ibm-plex-mono/ibm-plex-mono-500.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../../../assets/vendor/fonts/ibm-plex-mono/ibm-plex-mono-600.ttf') format('truetype')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url('../../../assets/vendor/fonts/unbounded/unbounded-500.ttf') format('truetype')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url('../../../assets/vendor/fonts/unbounded/unbounded-800.ttf') format('truetype')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url('../../../assets/vendor/fonts/unbounded/unbounded-900.ttf') format('truetype')}

#gravityWellApp{
    --bg:#060d16; --panel:rgba(9,15,22,.93); --line:#22303c; --line2:#1b2833;
    --txt:#dfe9f0; --dim:#7e93a3; --dim2:#5c7386;
    --amber:#ffb454; --coral:#ff6b5e; --aqua:#5fd4c4; --lemon:#ffe66d;
    --mono:'IBM Plex Mono',ui-monospace,monospace; --disp:'Unbounded',sans-serif;
    position:relative;width:100%;height:100%;min-height:620px;overflow:hidden;container-type:size;
    font-family:var(--mono);color:var(--txt);user-select:none;overscroll-behavior:none;
    background:
      radial-gradient(1200px 800px at 72% 112%, rgba(255,150,60,.14), transparent 62%),
      radial-gradient(900px 620px at 12% -12%, rgba(95,212,196,.12), transparent 60%),
      radial-gradient(140% 110% at 50% 42%, #0d1d2c 0%, #071019 55%, #04080e 100%);
  }
@scope (#gravityWellApp){
  *{margin:0;padding:0;box-sizing:border-box}
  button,input{font:inherit}
  button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  :scope::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;
    background:radial-gradient(120% 95% at 50% 40%, transparent 58%, rgba(2,6,10,.55) 100%);}
  #stage{position:absolute;inset:0;z-index:1}
  #stage canvas{display:block;width:100%!important;height:100%!important;touch-action:none;cursor:crosshair}

  #veil{position:absolute;inset:0;z-index:30;background:#04080e;display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:14px;transition:opacity .9s ease}
  #veil.hide{opacity:0;pointer-events:none}
  #veil .vt{font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:4px;color:#f2f7fa}
  #veil .vt em{font-style:normal;color:var(--amber)}
  #veil .bar-x{width:120px;height:2px;background:#1b2833;overflow:hidden;border-radius:2px}
  #veil .bar-x i{display:block;height:100%;width:40%;background:var(--amber);animation:load 1s ease-in-out infinite alternate}
  @keyframes load{from{transform:translateX(-60%)}to{transform:translateX(220%)}}
  @keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ---------- header ---------- */
  .hud{position:absolute;top:16px;left:20px;z-index:10;pointer-events:none;animation:riseIn .7s .15s cubic-bezier(.2,.9,.3,1) both}
  .logo{display:flex;gap:12px;align-items:center}
  .orb{width:34px;height:34px;position:relative;flex:none}
  .orb::before{content:'';position:absolute;inset:3px;border-radius:50%;border:1.5px solid rgba(255,180,84,.55)}
  .orb::after{content:'';position:absolute;inset:11px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #ffd9a0, #ff8a3c);box-shadow:0 0 14px rgba(255,150,60,.7)}
  .orb .sat{position:absolute;inset:-3px;animation:spin 3.6s linear infinite}
  .orb .sat::before{content:'';position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;
    border-radius:50%;background:var(--coral);box-shadow:0 0 10px var(--coral)}
  h1{font-family:var(--disp);font-weight:900;font-size:clamp(16px,2.2vw,24px);letter-spacing:1px;color:#f2f7fa;line-height:1}
  h1 em{font-style:normal;color:var(--amber)}
  .tag{margin-top:5px;font-size:9px;letter-spacing:2.6px;color:var(--dim2);text-transform:uppercase}
  .hints{margin-top:10px;font-size:9px;color:var(--dim2);letter-spacing:.4px;line-height:2.1;max-width:300px}
  .hints kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;font-size:8.5px;
    color:var(--dim);background:#0d1620}

  /* ---------- toast ---------- */
  .toast{position:absolute;top:16px;left:50%;transform:translate(-50%,-12px);opacity:0;z-index:22;pointer-events:none;
    transition:all .28s cubic-bezier(.2,.9,.3,1);background:rgba(13,22,32,.96);border:1px solid var(--line);
    border-left:3px solid var(--amber);padding:9px 15px;font-size:11px;letter-spacing:.8px;border-radius:8px;
    color:#e8f1f7;box-shadow:0 10px 30px rgba(0,0,0,.45);white-space:nowrap}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- full-width bottom bar ---------- */
  .bar{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:10px 16px;background:linear-gradient(180deg, rgba(8,14,21,.5), rgba(8,14,21,.95) 45%);
    border-top:1px solid var(--line);animation:riseIn .7s .3s cubic-bezier(.2,.9,.3,1) both}
  .vr{width:1px;height:26px;background:var(--line2);flex:none}
  .bar .spacer{flex:1}
  .tools,.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .tl{font-size:8px;font-weight:600;letter-spacing:2.4px;color:var(--dim2);margin-right:2px}
  .tbtn,.abtn{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.8px;padding:8px 12px;
    border-radius:7px;background:#101b26;border:1px solid var(--line);color:#b7c8d4;cursor:pointer;
    transition:all .15s ease;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
  .tbtn:hover,.abtn:hover{transform:translateY(-1px);border-color:#3b5163;color:#fff}
  .tbtn:active,.abtn:active{transform:translateY(0) scale(.96)}
  .tbtn kbd{font-size:8.5px;color:var(--dim2);border:1px solid var(--line);border-radius:3px;padding:0 4px}
  .tbtn.active{background:linear-gradient(180deg,#2b1d0c,#1d1408);border-color:var(--amber);color:var(--amber);
    box-shadow:0 0 16px rgba(255,180,84,.25)}
  .tbtn.mine-t.active{background:linear-gradient(180deg,#2b0c0c,#1d0808);border-color:var(--coral);color:var(--coral);
    box-shadow:0 0 16px rgba(255,107,94,.3)}
  .abtn.on{border-color:var(--amber);color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,180,84,.3),0 0 14px rgba(255,180,84,.15)}
  .abtn.on.aqua{border-color:var(--aqua);color:var(--aqua);box-shadow:inset 0 0 0 1px rgba(95,212,196,.3),0 0 14px rgba(95,212,196,.15)}
  .abtn.danger:hover{border-color:var(--coral);color:var(--coral)}
  .icon{width:34px;height:34px;padding:0;justify-content:center;font-size:14px}
  .stats{display:flex;gap:8px}
  .chip{font-size:11px;padding:6px 10px;background:rgba(13,22,32,.9);border:1px solid var(--line);border-radius:6px;
    color:var(--dim);letter-spacing:.5px}
  .chip b{font-weight:600;color:#fff}
  .chip.hot b{color:var(--amber)}
  .chip.full b{color:var(--coral)}
  .chip.tick{animation:tick .3s ease}
  @keyframes tick{40%{transform:scale(1.1);border-color:var(--amber)}}

  /* ---------- collapsible side panel ---------- */
  .panel{position:absolute;top:16px;right:16px;z-index:12;width:252px;max-height:calc(100cqh - 84px);overflow:hidden;background:var(--panel);border:1px solid var(--line);
    border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
    transition:transform .4s cubic-bezier(.2,.9,.3,1), opacity .3s}
  :scope.panel-min .panel{transform:translateX(calc(100% + 28px));opacity:0;pointer-events:none}
  .panel-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line2)}
  .panel-head .grp-t{font-size:9px;font-weight:600;letter-spacing:3px;color:var(--dim2)}
  #panelMin{background:none;border:1px solid var(--line);border-radius:6px;color:var(--dim);width:24px;height:22px;
    cursor:pointer;font-size:12px;line-height:1;transition:all .15s}
  #panelMin:hover{color:#fff;border-color:#3b5163}
  .panel-body{max-height:calc(100cqh - 125px);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;scrollbar-color:#334654 transparent}
  .panel-actions{display:grid;grid-template-columns:1fr 1.2fr 34px;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
  .panel-actions button{height:34px;min-width:0;border-radius:7px;background:#101b26;border:1px solid var(--line);color:#b7c8d4;cursor:pointer;font-size:9px;font-weight:600;letter-spacing:.5px;white-space:nowrap;transition:all .15s}
  .panel-actions button:hover{transform:translateY(-1px);border-color:#3b5163;color:#fff}
  .panel-actions .icon-action{width:34px;padding:0;font-size:17px}
  #recordMp4.recording{border-color:var(--coral);color:var(--coral);box-shadow:0 0 14px rgba(255,107,94,.25)}
  #fullscreen.on{border-color:var(--aqua);color:var(--aqua);box-shadow:0 0 14px rgba(95,212,196,.2)}
  #captureStatus{margin-top:-7px;color:var(--dim);font-size:8px;line-height:1.45}
  #captureStatus:empty{display:none}
  .grp-t{font-size:8.5px;font-weight:600;letter-spacing:2.8px;color:var(--dim2);text-transform:uppercase}
  .sliders{display:grid;grid-template-columns:52px 1fr 40px;gap:8px 8px;align-items:center}
  .sliders label{font-size:8.5px;letter-spacing:1.4px;color:var(--dim);text-transform:uppercase}
  .sliders output{font-size:10px;color:var(--amber);text-align:right;font-weight:500}
  input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:20px;width:100%;cursor:pointer}
  input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
    background:linear-gradient(90deg,var(--amber) var(--fill,50%),#24343f var(--fill,50%))}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
    background:#ffd9a0;border:2px solid #0c141b;margin-top:-4.5px;box-shadow:0 0 0 1px var(--amber),0 0 8px rgba(255,180,84,.5);
    transition:transform .12s}
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
  input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#24343f}
  input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--amber)}
  input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#ffd9a0;border:2px solid #0c141b;
    box-shadow:0 0 0 1px var(--amber)}
  .pals{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .pal{height:30px;border-radius:7px;border:1px solid var(--line);cursor:pointer;transition:all .15s;position:relative;overflow:hidden}
  .pal:hover{transform:translateY(-2px);border-color:#3b5163}
  .pal.active{border-color:var(--amber);box-shadow:0 0 12px rgba(255,180,84,.35)}
  .pal span{position:absolute;left:5px;bottom:2px;font-size:7.5px;letter-spacing:1.5px;color:rgba(0,0,0,.75);font-weight:600}
  .palette-title{display:block;margin-bottom:8px}
  #gearTab{position:absolute;top:16px;right:16px;z-index:12;display:none;align-items:center;gap:8px;
    font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:2px;color:var(--amber);
    background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.4);transition:all .15s}
  #gearTab:hover{border-color:var(--amber);transform:translateY(-1px)}
  :scope.panel-min #gearTab{display:flex}

  :scope.zen .hud,:scope.zen .bar,:scope.zen .panel,:scope.zen #gearTab,:scope.zen .toast{opacity:0!important;pointer-events:none!important}
  .hud,.bar{transition:opacity .4s}
  .panel{transition:transform .4s cubic-bezier(.2,.9,.3,1),opacity .4s}
  :scope:fullscreen{width:100vw;height:100vh;min-height:0;border-radius:0}
}
@container (max-width:860px){
  #gravityWellApp .hud{top:10px;left:12px}
  #gravityWellApp .hints{display:none}
  #gravityWellApp .bar{padding:8px 10px;gap:8px}
  #gravityWellApp .tbtn,#gravityWellApp .abtn{padding:7px 9px;font-size:9.5px}
  #gravityWellApp .stats .chip{font-size:10px;padding:5px 8px}
  #gravityWellApp .panel{width:min(76vw,280px)}
  #gravityWellApp .vr{display:none}
}