:root{--ink:#070816;--ink-soft:#11142e;--panel:#1a2052;--panel-2:#232a6a;--panel-3:#2e3785;--paper:#f6f2e6;--muted:#aab1dc;--dim:#7a82b8;--yellow:#ffd23f;--orange:#ff8a3d;--cyan:#3ee6ff;--pink:#ff5d8f;--green:#53e08a;--purple:#a58bff;--red:#ff4d5e;--border:2.5px solid var(--ink);--shadow:4px 4px 0 var(--ink);--shadow-sm:2px 2px 0 var(--ink);--radius:14px;--radius-sm:9px;--font-display:"Bungee", "Arial Black", system-ui, sans-serif;--font-ui:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-ui);color:var(--paper);-webkit-font-smoothing:antialiased;background:#04051a;overflow:hidden}#hud-overlay{-webkit-user-select:none;user-select:none}#hud-overlay input[type=text]{-webkit-user-select:text;user-select:text}#canvas-container{z-index:1;touch-action:none;position:absolute;inset:0}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}.hidden{display:none!important}.panel{background:var(--panel);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.panel-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.panel-header h3{font-family:var(--font-display);letter-spacing:1px;color:var(--yellow);text-shadow:2px 2px 0 var(--ink);font-size:15px}.panel-desc{color:var(--muted);font-size:13px;line-height:1.4}.icon-close,.icon-close-small{border:var(--border);background:var(--panel-2);width:30px;height:30px;color:var(--paper);cursor:pointer;box-shadow:var(--shadow-sm);border-radius:50%;place-items:center;font-size:18px;line-height:1;display:grid}.icon-close-small{width:24px;height:24px;font-size:15px}.icon-close:hover,.icon-close-small:hover{background:var(--pink)}.btn{background:var(--panel-2);border:var(--border);color:var(--paper);font-family:var(--font-ui);letter-spacing:.3px;border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-sm);white-space:nowrap;padding:6px 13px;font-size:13px;font-weight:800;transition:transform 80ms,box-shadow 80ms,background .12s}.btn:hover:not(:disabled){background:var(--panel-3);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.btn:active:not(:disabled){box-shadow:0 0 0 var(--ink);transform:translate(2px,2px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.active{background:var(--cyan);color:var(--ink)}.btn.highlight-btn{background:#3a2a7a}.btn.highlight-btn.active{background:var(--purple);color:var(--ink)}.btn.danger-hover-btn:hover:not(:disabled){background:var(--red);color:var(--ink)}.small-btn{padding:5px 10px;font-size:12px}.full-width{width:100%}.select,.input{background:var(--ink-soft);border:var(--border);color:var(--paper);font-family:var(--font-ui);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;font-weight:700;box-shadow:inset 2px 2px #00000059}.select{cursor:pointer}.select:focus,.input:focus{border-color:var(--yellow)}input[type=range]{appearance:none;background:var(--ink-soft);border:2px solid var(--ink);cursor:pointer;border-radius:999px;width:100%;height:12px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--yellow);border:2.5px solid var(--ink);width:18px;height:18px;box-shadow:1px 1px 0 var(--ink);border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--yellow);border:2.5px solid var(--ink);border-radius:50%;width:14px;height:14px}input[type=checkbox]{accent-color:var(--yellow);width:16px;height:16px}.hud-topbar{z-index:100;justify-content:space-between;align-items:center;gap:14px;min-height:62px;padding:8px 16px;display:flex;position:absolute;top:14px;left:14px;right:14px}.brand{align-items:center;gap:12px;display:flex}.brand-badge{background:radial-gradient(circle at 35% 35%, #fff3b0 0 22%, var(--yellow) 23% 55%, var(--orange) 56%);border:var(--border);width:30px;height:30px;box-shadow:var(--shadow-sm);border-radius:50%;flex-shrink:0;position:relative}.brand-badge:after{content:"";border:2.5px solid var(--ink);border-left-color:var(--pink);border-right-color:var(--pink);border-radius:50%;position:absolute;inset:-8px -12px;transform:rotate(-20deg)scaleY(.35)}.brand-text{flex-direction:column;line-height:1.05;display:flex}.brand-text .title{font-family:var(--font-display);letter-spacing:1.5px;color:var(--yellow);text-shadow:2px 2px 0 var(--ink);font-size:19px}.brand-text .subtitle{letter-spacing:1.6px;color:var(--cyan);font-size:10px;font-weight:900}.topbar-row-controls,.topbar-row-presets,.topbar-quick-actions{align-items:center;gap:8px;display:flex}@media (width>=1600px){.topbar-row-header{display:contents}.brand{flex-shrink:0;order:1}.topbar-row-controls{order:2;gap:12px}.topbar-row-presets{order:3}.topbar-quick-actions{flex-shrink:0;order:4}}@media (width>=1101px) and (width<=1599px){.hud-topbar{grid-template-columns:auto 1fr;grid-template-areas:"header header""controls presets";gap:8px 16px;display:grid}.topbar-row-header{grid-area:header;justify-content:space-between;align-items:center;display:flex}.topbar-row-controls{grid-area:controls}.topbar-row-presets{grid-area:presets;justify-content:flex-end}}.control-group{align-items:center;gap:8px;display:flex}.control-group label{font-family:var(--font-display);letter-spacing:1px;color:var(--muted);font-size:11px}.btn-group{gap:6px;display:flex}#scale-mode-btn{align-items:center;gap:8px;display:flex}.scale-dot{background:var(--green);border:2px solid var(--ink);border-radius:50%;width:11px;height:11px}#scale-mode-btn.true-scale-active .scale-dot{background:var(--orange)}.icon-text-btn{align-items:center;gap:5px;display:inline-flex}.ui-menu-group{position:relative}.ui-visibility-menu{z-index:150;flex-direction:column;gap:10px;width:236px;padding:12px;display:flex;position:absolute;top:calc(100% + 10px);right:0}.ui-visibility-menu .menu-header{font-family:var(--font-display);color:var(--yellow);justify-content:space-between;align-items:center;font-size:12px;display:flex}.ui-visibility-menu .menu-options{flex-direction:column;gap:8px;display:flex}.menu-item{cursor:pointer;align-items:center;gap:9px;font-size:13px;font-weight:700;display:flex}.artifacts-dock{top:var(--topbar-bottom,92px);z-index:10;flex-direction:column;gap:10px;max-width:210px;padding:10px 12px;display:flex;position:absolute;left:14px}.dock-header-btn{color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.dock-header-content{font-family:var(--font-display);letter-spacing:.8px;color:var(--cyan);align-items:center;gap:7px;font-size:11px;display:flex}.dock-chevron{color:var(--cyan);font-size:13px}.dock-toggles{flex-direction:column;gap:6px;display:flex}.dock-toggles.collapsed{display:none!important}.toggle-pill{background:var(--ink-soft);border:2px solid var(--ink);color:var(--dim);cursor:pointer;border-radius:999px;align-items:center;gap:9px;padding:5px 11px;font-size:12.5px;font-weight:800;transition:background .12s,color .12s;display:flex}.toggle-pill input{opacity:0;pointer-events:none;position:absolute}.toggle-pill:has(input:focus-visible){outline:3px solid var(--yellow);outline-offset:2px}.pill-dot{border:2px solid var(--ink);opacity:.35;border-radius:50%;width:11px;height:11px}.toggle-pill:hover{color:var(--paper)}.toggle-pill.active{background:var(--panel-3);color:var(--paper);box-shadow:var(--shadow-sm)}.toggle-pill.active .pill-dot{opacity:1}.spawner-dock{z-index:10;position:absolute;bottom:118px;left:14px}.cosmic-spawn-btn{font-family:var(--font-display);letter-spacing:1px;color:var(--ink);background:var(--yellow);cursor:pointer;align-items:center;gap:10px;padding:10px 18px;font-size:13px;transition:transform 80ms,box-shadow 80ms;display:flex}.cosmic-spawn-btn:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.cosmic-spawn-btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.cosmic-spawn-btn .plus-icon{font-size:22px;line-height:1}.spawner-panel{width:330px;max-height:calc(100vh - var(--topbar-bottom,92px) - 190px);flex-direction:column;gap:12px;padding:16px;display:flex;position:absolute;bottom:58px;left:0;overflow-y:auto}.spawn-presets-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.preset-card{background:var(--panel-2);border:var(--border);border-radius:var(--radius-sm);color:var(--paper);font-family:var(--font-ui);text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;display:flex}.preset-card:hover{background:var(--panel-3)}.preset-card.active{background:var(--cyan);color:var(--ink)}.preset-card.highlight-card{grid-column:span 2}.preset-card.highlight-card.active{background:var(--pink)}.preset-icon{font-size:18px}.preset-name{font-size:13.5px;font-weight:900}.preset-meta{opacity:.8;font-size:11px;font-weight:700}.spawner-form{flex-direction:column;gap:10px;display:flex}.form-row{flex-direction:column;gap:5px;display:flex}.form-row label{color:var(--muted);font-size:12px;font-weight:800}.place3d-btn{justify-content:center;align-items:center;gap:8px;display:flex}.place3d-btn.active{background:var(--yellow);color:var(--ink);animation:1.2s steps(2,end) infinite pulse-place}@keyframes pulse-place{50%{box-shadow:0 0 0 4px var(--pink), var(--shadow-sm)}}.action-btn{border-radius:var(--radius-sm);border:var(--border);width:100%;font-family:var(--font-display);letter-spacing:1px;cursor:pointer;box-shadow:var(--shadow-sm);padding:10px;font-size:13px;transition:transform 80ms,box-shadow 80ms}.action-btn:hover:not(:disabled){box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.action-btn:active:not(:disabled){box-shadow:none;transform:translate(2px,2px)}.action-btn:disabled{opacity:.45;cursor:not-allowed}.primary-action{background:var(--yellow);color:var(--ink)}.track-btn{background:var(--cyan);color:var(--ink)}.danger-btn{background:var(--red);color:var(--ink)}.swap-action-btn{background:var(--purple);color:var(--ink);width:auto;padding:8px 12px}.inspector-panel{top:var(--topbar-bottom,92px);width:348px;max-height:calc(100vh - var(--topbar-bottom,92px) - 150px);z-index:10;flex-direction:column;gap:14px;padding:16px;display:flex;position:absolute;right:14px;overflow-y:auto}.inspector-title-wrap{flex-direction:column;gap:5px;display:flex}.type-badge{font-family:var(--font-display);letter-spacing:1px;border:2px solid var(--ink);background:var(--cyan);color:var(--ink);border-radius:999px;width:fit-content;padding:2px 8px;font-size:10px}.inspector-title-wrap h2{font-family:var(--font-display);letter-spacing:.5px;color:var(--paper);text-shadow:2px 2px 0 var(--ink);font-size:22px}.insp-desc{color:var(--muted);font-size:13px;line-height:1.45}.telemetry-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.telemetry-cell{background:var(--ink-soft);border:2px solid var(--ink);border-radius:var(--radius-sm);flex-direction:column;gap:1px;min-width:0;padding:7px 9px;display:flex}.t-label{letter-spacing:.9px;color:var(--dim);text-overflow:ellipsis;white-space:nowrap;font-size:9.5px;font-weight:900;overflow:hidden}.t-val{color:var(--paper);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:900;overflow:hidden}.t-val.highlight-val{color:var(--yellow)}.t-sub{color:var(--dim);min-height:1em;font-size:10.5px;font-weight:700}.tuner-section{border-top:2.5px dashed var(--ink);flex-direction:column;gap:10px;padding-top:12px;display:flex}.section-title{font-family:var(--font-display);letter-spacing:1px;color:var(--pink);font-size:12px}.section-subtitle{color:var(--muted);font-size:12px}.tuner-control{flex-direction:column;gap:6px;display:flex}.control-header{justify-content:space-between;align-items:center;font-size:12.5px;font-weight:800;display:flex}.val-badge{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:900}.quick-preset-row{flex-wrap:wrap;gap:4px;display:flex}.mass-preset-btn{background:var(--panel-2);border:2px solid var(--ink);min-width:36px;color:var(--paper);font-family:var(--font-ui);cursor:pointer;border-radius:7px;flex:1;padding:3px 4px;font-size:11px;font-weight:800}.mass-preset-btn:hover{background:var(--yellow);color:var(--ink)}.btn-group-row{gap:6px;display:flex}.btn-group-row .btn{flex:1}.transmute-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.transmute-btn{background:var(--panel-2);border:2px solid var(--ink);border-radius:var(--radius-sm);color:var(--paper);font-family:var(--font-ui);cursor:pointer;box-shadow:var(--shadow-sm);align-items:center;gap:7px;padding:7px 9px;font-size:12.5px;font-weight:800;display:flex}.transmute-btn:hover{background:var(--orange);color:var(--ink)}.swap-control-row{gap:6px;display:flex}.swap-control-row .select{flex:1;min-width:0}.swap-section.disabled .swap-control-row{opacity:.45}.inspector-actions{gap:8px;display:flex}.hud-bottombar{z-index:10;flex-direction:column;gap:6px;padding:8px 16px 10px;display:flex;position:absolute;bottom:14px;left:14px;right:14px}.bottombar-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.bottombar-collapse-btn{background:var(--panel-2);border:2px solid var(--ink);color:var(--cyan);font-family:var(--font-display);letter-spacing:.8px;cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:2px 10px;font-size:10px;display:inline-flex}.sim-clock{font-variant-numeric:tabular-nums;align-items:center;gap:10px;font-weight:900;display:flex}.sim-date{font-family:var(--font-display);color:var(--yellow);text-shadow:2px 2px 0 var(--ink);font-size:14px}.sim-warp{background:var(--ink-soft);border:2px solid var(--ink);color:var(--cyan);border-radius:999px;padding:1px 8px;font-size:12px}.bottombar-content{justify-content:space-between;align-items:center;gap:18px;display:flex}.hud-bottombar.minimized{border-radius:999px;padding:6px 12px;left:50%;right:auto;transform:translate(-50%)}.hud-bottombar.minimized .bottombar-content{display:none!important}.time-controls{align-items:center;gap:12px;display:flex}.time-icon-btn{background:var(--panel-2);border:var(--border);width:42px;height:42px;color:var(--paper);cursor:pointer;box-shadow:var(--shadow-sm);border-radius:50%;place-items:center;transition:transform 80ms,box-shadow 80ms;display:grid}#btn-pause{background:var(--yellow);color:var(--ink);width:48px;height:48px}.time-icon-btn:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.time-icon-btn:active{box-shadow:none;transform:translate(2px,2px)}.time-icon-btn.danger-hover-icon:hover{background:var(--red);color:var(--ink)}.speed-slider-wrap,.g-control{flex-direction:column;gap:5px;width:170px;display:flex}.speed-header,.g-header{letter-spacing:.6px;justify-content:space-between;font-size:11px;font-weight:900;display:flex}.speed-header .label,.g-header label{color:var(--dim)}.speed-header .val{color:var(--cyan)}.speed-factor{color:var(--dim);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:800}.g-header span{color:var(--green)}.speed-quick-buttons{flex-wrap:wrap;gap:4px;display:flex}.speed-chip{background:var(--panel-2);border:2px solid var(--ink);color:var(--paper);font-family:var(--font-ui);cursor:pointer;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:900}.speed-chip:hover{background:var(--panel-3)}.speed-chip.active{background:var(--cyan);color:var(--ink)}.physics-modifiers{align-items:center;gap:18px;display:flex}.collision-selector{align-items:center;gap:8px;display:flex}.collision-selector label{letter-spacing:.6px;color:var(--dim);font-size:11px;font-weight:900}.floating-hud-btn{background:var(--yellow);height:38px;color:var(--ink);font-family:var(--font-display);cursor:pointer;z-index:1000;align-items:center;gap:6px;padding:0 14px;font-size:12px;display:flex;position:fixed;top:12px;right:12px}#hud-overlay.hud-all-hidden .hud-topbar,#hud-overlay.hud-all-hidden .artifacts-dock,#hud-overlay.hud-all-hidden .spawner-dock,#hud-overlay.hud-all-hidden .hud-bottombar,#hud-overlay.hud-all-hidden .inspector-panel,#hud-overlay.hud-all-hidden .labels-container{opacity:0!important;pointer-events:none!important;visibility:hidden!important}.hidden-by-pref{display:none!important}.labels-container{pointer-events:none;z-index:5;position:absolute;inset:0;overflow:hidden}.celestial-label{background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow-sm);color:var(--ink);white-space:nowrap;will-change:transform;border-radius:999px;align-items:center;gap:5px;padding:1px 8px 1px 5px;font-size:11.5px;font-weight:900;display:flex;position:absolute;top:0;left:0}.celestial-label .c-dot{border:2px solid var(--ink);border-radius:50%;width:9px;height:9px}.celestial-label.selected{background:var(--yellow);z-index:1}.toast-region{z-index:1200;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:140px;left:50%;transform:translate(-50%)}.toast{pointer-events:auto;align-items:center;gap:12px;padding:8px 10px 8px 14px;font-size:13.5px;font-weight:800;animation:.18s ease-out toast-in;display:flex}.toast.leaving{opacity:0;transition:opacity .25s,transform .25s;transform:translateY(6px)}.toast-action{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);font-family:var(--font-ui);cursor:pointer;border-radius:999px;padding:3px 11px;font-weight:900}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)scale(.96)}}#app-loading{z-index:2000;background:#04051a;place-items:center;transition:opacity .5s;display:grid;position:fixed;inset:0}#app-loading.done{opacity:0;pointer-events:none}.fatal-panel{background:var(--panel);border:var(--border);border-radius:var(--radius);width:min(460px,100vw - 32px);box-shadow:6px 6px 0 var(--ink);z-index:3000;padding:22px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.fatal-panel h1{font-family:var(--font-display);color:var(--yellow);text-shadow:2px 2px 0 var(--ink);margin-bottom:10px;font-size:20px}.fatal-panel p{color:var(--muted);line-height:1.5}.inspector-panel::-webkit-scrollbar{width:8px}.spawner-panel::-webkit-scrollbar{width:8px}.inspector-panel::-webkit-scrollbar-thumb{background:var(--panel-3);border:2px solid var(--ink);border-radius:999px}.spawner-panel::-webkit-scrollbar-thumb{background:var(--panel-3);border:2px solid var(--ink);border-radius:999px}@media (width<=1100px){.hud-topbar{flex-direction:column;align-items:stretch;gap:8px;padding:8px 12px;top:8px;left:8px;right:8px}.topbar-row-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.topbar-row-controls{justify-content:space-between}.topbar-row-controls .target-group,.topbar-row-controls .select{flex:1;min-width:0}.btn-group{scrollbar-width:none;width:100%;padding:2px 4px 5px 2px;overflow-x:auto}.btn-group::-webkit-scrollbar{display:none}.btn-group .btn{flex-shrink:0}.artifacts-dock{z-index:25;max-width:190px;left:8px}.dock-toggles{max-height:190px;overflow-y:auto}.spawner-dock{top:var(--topbar-bottom,160px);z-index:25;bottom:auto;left:auto;right:8px}.cosmic-spawn-btn{border-radius:50%;justify-content:center;width:46px;height:46px;padding:0}.cosmic-spawn-btn .spawn-text{display:none}.spawner-panel{z-index:200;width:auto;max-height:78vh;position:fixed;bottom:8px;left:8px;right:8px}.inspector-panel{z-index:210;width:auto;max-height:50vh;position:fixed;inset:auto 8px 8px}.hud-bottombar{z-index:20;padding:8px 12px;bottom:8px;left:8px;right:8px}.bottombar-content{flex-direction:column;align-items:stretch;gap:8px}.time-controls,.physics-modifiers{justify-content:space-between;gap:8px}.toast-region{top:calc(var(--topbar-bottom,160px) + 60px);width:calc(100vw - 32px);bottom:auto}}@media (width<=680px){.brand-text .title{font-size:15px}.brand-text .subtitle,.topbar-quick-actions .btn-label{display:none}.topbar-quick-actions .btn{padding:5px 9px;font-size:15px}.collision-selector label{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.collision-selector .select{max-width:150px}.btn-group .btn{padding:4px 9px;font-size:11.5px}.artifacts-dock{max-width:170px;padding:7px 9px}.time-controls{flex-wrap:wrap}.time-icon-btn{width:38px;height:38px}#btn-pause{width:42px;height:42px}.speed-slider-wrap,.g-control{flex:110px;width:auto}.speed-chip{padding:2px 6px;font-size:11px}.physics-modifiers{flex-wrap:wrap}.sim-date{font-size:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}
