*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#020307}.app{background:#020307;width:100%;height:100vh;font-family:Courier New,Courier,monospace;position:relative;overflow:hidden}.canvas-mount{cursor:crosshair;touch-action:none;width:100%;height:100%;position:relative}.canvas-surface{width:100%;height:100%}.grid-tooltip{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;-webkit-user-select:none;user-select:none;letter-spacing:.12em;color:#8cc8fff2;white-space:nowrap;background:#050e1eb8;border:1px solid #3c78c859;border-radius:3px;margin:0;padding:8px 14px;font-size:11px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.title-block{pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;top:28px;left:32px}.title-main{letter-spacing:.3em;color:#8cc8ff;margin-bottom:6px;font-size:20px}.title-sub{letter-spacing:.18em;color:#639fddb5;font-size:11px;font-weight:600}.controls-panel{flex-direction:column;gap:10px;min-width:210px;font-weight:600;display:flex;position:absolute;top:24px;right:28px}.controls-heading{letter-spacing:.25em;color:#508cc8e6;margin-bottom:2px;font-size:12px}.mass-card{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#050e1ebf;border:1px solid #7596c34f;border-radius:3px;padding:8px 10px}.mass-card-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.mass-label{letter-spacing:.2em;color:#dbdfe4cc;font-size:10px}.mass-value{letter-spacing:.12em;color:#a0d2ff;margin-left:8px;font-size:11px}.mass-remove{color:#d6cdcdf0;letter-spacing:.15em;cursor:pointer;background:0 0;border:1px solid #ffffff40;border-radius:2px;margin-left:auto;padding:2px 6px;font-family:inherit;font-size:9px;transition:all .15s}.mass-remove:hover{color:#ff6464e6;border-color:#ff5050b3}.mass-slider-wrap{position:relative}.mass-slider{appearance:none;cursor:pointer;background:linear-gradient(to right, #64b4ffb3 var(--fill,0%), #28508c4d 0%);border-radius:1px;outline:none;width:100%;height:2px}.mass-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#8cc8ffd9;border:none;border-radius:50%;width:10px;height:10px;box-shadow:0 0 6px #64b4ff99}.mass-slider::-moz-range-thumb{cursor:pointer;background:#8cc8ffd9;border:none;border-radius:50%;width:10px;height:10px}.mass-slider-labels{justify-content:space-between;margin-top:4px;display:flex}.mass-slider-bound{color:#71b3f5e6;letter-spacing:.1em;font-size:11px}.hint{text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;letter-spacing:.2em;color:#5082becc;white-space:nowrap;background:#0006;padding:4px 8px;font-size:12px;font-weight:600;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.drawer-handle{display:none}.drawer-body{flex-direction:column;gap:10px;display:flex}@media (width<=767px){.title-main,.title-sub,.grid-tooltip,.controls-heading,.mass-label,.mass-value,.mass-remove,.mass-slider-bound,.hint,.drawer-handle,.drawer-title,.drawer-close{font-size:max(12px,1em)}.title-sub,.mass-remove,.grid-tooltip{font-size:12px}.hint{z-index:10;bottom:52px}.app.is-mobile:has(.controls-drawer.is-open) .hint{opacity:0;visibility:hidden}.controls-drawer{z-index:20;min-width:0;padding-bottom:env(safe-area-inset-bottom,0);background:#050e1eeb;border-top:1px solid #3c78c840;position:fixed;inset:auto 0 0}.drawer-bar{background:#050e1ef2;border-bottom:1px solid #3c78c833;align-items:center;display:flex}.drawer-handle{color:#8cc8fff2;letter-spacing:.25em;cursor:pointer;text-align:center;background:0 0;border:none;flex:1;width:100%;padding:12px 16px;font-family:inherit;font-size:12px;font-weight:600;display:block}.drawer-title{letter-spacing:.25em;color:#8cc8fff2;flex:1;padding:12px 16px;font-size:12px;font-weight:600}.drawer-close{color:#8cc8ffd9;cursor:pointer;background:0 0;border:none;padding:8px 16px;font-family:inherit;font-size:22px;line-height:1}.drawer-close:hover{color:#8cc8ff}.controls-drawer:not(.is-open) .drawer-body{gap:0;max-height:0;overflow:hidden}.controls-drawer.is-open .drawer-body{max-height:50vh;padding:10px 14px 14px;overflow-y:auto}.controls-drawer .mass-card{margin:0}}
