:root{--bg:#0B0D10;--panel:#14181D;--panel2:#1A1E24;--line:#2A2F36;--acc:#FF6B1A;--ok:#3DFF8A;--hot:#FF3B3B;--txt:#D7DCE2;--dim:#7B848F}
*{border-radius:0!important}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'Chakra Petch',sans-serif;
background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px}
.mono{font-family:'JetBrains Mono',monospace}
.panel{background:var(--panel);border:1px solid var(--line);position:relative}
.brk::before,.brk::after{content:'';position:absolute;width:10px;height:10px;border-color:var(--acc);pointer-events:none}
.brk::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.brk::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.chamfer{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;font-size:11px;border:1px solid var(--line);padding:6px 10px;background:var(--panel2);color:var(--txt);transition:all .12s}
.btn:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.on{background:var(--acc);color:#000;border-color:var(--acc)}
.deploy{background:var(--acc);color:#000;font-weight:800}
.deploy:hover:not(:disabled){color:#000!important;filter:brightness(1.1)}
.deploy:disabled{opacity:.4}
.hatch,.hatch:disabled{opacity:1;background:repeating-linear-gradient(45deg,#2a1414 0 8px,#3a1a1a 8px 16px);color:var(--hot);border-color:var(--hot)}
input,textarea,select{background:#0E1115;border:1px solid var(--line);color:var(--txt);font-family:'JetBrains Mono',monospace;font-size:12px;padding:8px;outline:none;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--acc)}
input[type=range]{accent-color:var(--acc);padding:0;border:none}
.lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.drop{border:1px dashed var(--dim);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:30px 30px}
.drop.over{border-color:var(--acc);background-color:rgba(255,107,26,.06)}
.scan{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scan::after{content:'';position:absolute;left:0;right:0;height:30%;background:linear-gradient(transparent,rgba(61,255,138,.35),transparent);animation:scan 1.2s linear infinite}
@keyframes scan{from{top:-30%}to{top:100%}}
.snap{animation:snap .35s steps(4) both}
@keyframes snap{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.xhair{width:28px;height:28px;border:1px solid var(--acc);position:relative;animation:spin 1.4s linear infinite}
.xhair::before{content:'';position:absolute;left:50%;top:-6px;bottom:-6px;border-left:1px solid var(--acc)}
.xhair::after{content:'';position:absolute;top:50%;left:-6px;right:-6px;border-top:1px solid var(--acc)}
@keyframes spin{to{transform:rotate(360deg)}}
.slot .acts{opacity:0;transition:opacity .15s}
.slot:hover .acts{opacity:1}
@media (hover:none){.slot .acts{opacity:1}}
.fade{animation:fade .5s ease both}
@keyframes fade{from{opacity:0;filter:grayscale(1)}to{opacity:1}}
.cool{background:rgba(11,13,16,.93);border:1px solid var(--hot);animation:shimmer 3s ease-in-out infinite;backdrop-filter:blur(3px)}
@keyframes shimmer{0%,100%{box-shadow:inset 0 0 20px rgba(255,59,59,.15)}50%{box-shadow:inset 0 0 50px rgba(255,107,26,.35)}}