.qbit-canvas{aspect-ratio:1;contain:strict;touch-action:manipulation;background:#0b0b0c;inline-size:100%;max-inline-size:100%;display:block;overflow:clip}:root{color:#f2f2f2;font-synthesis:none;text-rendering:optimizelegibility;background:#0b0b0c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{background:#0b0b0c;min-width:320px;overflow:hidden}button,canvas{font:inherit}.qbit-app{background:#0b0b0c;grid-template-rows:2.5rem minmax(0,1fr);gap:.75rem;width:100%;height:100svh;padding:1rem clamp(1rem,3vw,2.5rem) 1.25rem;display:grid;overflow:hidden}.qbit-hud{color:#ffffffb8;justify-content:space-between;align-items:center;gap:1.5rem;min-width:0;min-height:2.5rem;font-size:.75rem;display:flex}.qbit-status{white-space:nowrap;align-items:center;gap:clamp(.75rem,2vw,1.5rem);min-width:0;display:flex}.qbit-status__network{color:#fff;text-transform:uppercase;min-width:8ch;font-weight:650}.qbit-status__connection{align-items:center;gap:.5rem;min-width:8.5rem;display:inline-flex}.qbit-status__connection:before{content:"";background:#1ab453;border-radius:50%;flex:none;width:.45rem;height:.45rem}.qbit-status__connection[data-connection=connecting]:before,.qbit-status__connection[data-connection=degraded]:before{background:#f7931a}.qbit-status__height{color:#ffffffdb}.qbit-legend{white-space:nowrap;align-items:center;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.qbit-legend li{align-items:center;gap:.35rem;display:inline-flex}.qbit-stage{place-items:center;min-width:0;min-height:0;display:grid}.qbit-canvas-shell{aspect-ratio:1;width:min(100%,48rem,100svh - 6.5rem);max-height:100%;position:relative}.qbit-canvas{outline:none;width:100%;height:100%}.qbit-canvas:focus-visible{outline-offset:4px;outline:1px solid #ffffff8c}.qbit-inspector{color:#f7f7f7;background:#0b0b0cf0;border:1px solid #ffffff24;border-radius:.35rem;min-width:12rem;padding:.65rem .75rem;font-size:.72rem;box-shadow:0 .75rem 2.5rem #00000059}.qbit-inspector dl{gap:.25rem;margin:0;display:grid}.qbit-inspector dl>div{grid-template-columns:4rem 1fr;gap:.75rem;display:grid}.qbit-inspector dt{color:#ffffff85}.qbit-inspector dd{color:#ffffffe0;font-variant-numeric:tabular-nums;margin:0}.qbit-live-region{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:fixed;overflow:hidden}.qbit-live-drop{z-index:20;top:-28px;left:var(--qbit-drop-start-left);pointer-events:none;will-change:top, left, width, height, box-shadow;background:#1ab453;width:28px;height:28px;animation:.9s cubic-bezier(.5,0,.92,.48) forwards qbit-live-block-drop;position:fixed;box-shadow:0 0 0 3px #ffffffc7,0 0 22px 7px #1ab453b8}.qbit-live-drop:before{content:"";background:linear-gradient(#0000,#ffffff80);width:36%;height:64px;animation:.9s linear forwards qbit-live-block-trail;position:absolute;bottom:100%;right:32%}.qbit-live-drop[data-kind=auxpow]{background:#f7931a;box-shadow:0 0 0 3px #ffffffc7,0 0 22px 7px #f7931ab8}@keyframes qbit-live-block-drop{0%{top:-28px;left:var(--qbit-drop-start-left);width:28px;height:28px}72%{width:28px;height:28px}to{top:var(--qbit-drop-target-top);left:var(--qbit-drop-target-left);width:var(--qbit-drop-target-width);height:var(--qbit-drop-target-height);box-shadow:0 0 #0000}}@keyframes qbit-live-block-trail{0%,to{opacity:0}12%{opacity:1}72%{opacity:.6}}@media (width<=42rem){.qbit-app{grid-template-rows:4.5rem minmax(0,1fr);gap:.5rem;padding:.75rem 1rem 1rem}.qbit-hud{grid-template-rows:repeat(2,2rem);gap:.25rem;display:grid}.qbit-status{justify-content:space-between;gap:.5rem;width:100%}.qbit-status__connection{min-width:7.25rem}.qbit-legend{justify-content:flex-start;gap:1.25rem}.qbit-canvas-shell{width:min(100%,100svh - 7.5rem)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
