:root{--bg-color:#0a0a0c;--text-color:#e0e0e0;--accent-color:#0ff;--accent-text:#66d9d9;--accent-secondary:#f0f;--panel-bg:#0f0f14bf;--panel-border:#ffffff1a}body,html{background-color:var(--bg-color);width:100%;height:100%;color:var(--text-color);margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}#app{flex-direction:column;width:100vw;height:100vh;display:flex}header{z-index:10;background:linear-gradient(#000c,#0000);justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}h1{letter-spacing:.5px;color:var(--accent-text);margin:0;font-size:1.2rem;font-weight:300}.controls{align-items:center;gap:1rem;display:flex}.hidden-input{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hidden-input:focus-visible+.btn{outline:2px solid var(--accent-color);outline-offset:2px}.btn{border:1px solid var(--panel-border);color:#fff;cursor:pointer;box-sizing:border-box;background:#00000080;border-radius:4px;justify-content:center;align-items:center;gap:.5rem;height:44px;padding:0 16px;font-family:inherit;font-size:.9rem;transition:background .2s,border-color .2s;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--accent-color);background:#ffffff1a}.btn:disabled{opacity:.5;cursor:not-allowed}.close-btn{color:#999;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:1.8rem;transition:color .2s;display:none;position:absolute;top:8px;right:8px}.close-btn:hover{color:#fff}#canvas-container{flex-grow:1;width:100%;position:relative}#canvas-container.drag-active:after{content:"";border:4px dashed var(--accent-color);box-sizing:border-box;z-index:100;pointer-events:none;background-color:#00ffff26;position:absolute;inset:0}#welcome-msg{text-align:center;opacity:.7;max-width:600px;font-size:1.2rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}a{color:var(--accent-color);border-bottom:1px dashed var(--accent-color);text-decoration:none;transition:opacity .2s,border-bottom-style .2s}a:hover{opacity:1;border-bottom-style:solid}#info-panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;width:240px;padding:1.5rem;transition:opacity .5s;position:absolute;bottom:2rem;right:2rem}#hover-panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;z-index:5;border-radius:8px;width:240px;padding:1.5rem;transition:opacity .2s;position:absolute;top:6rem;left:2rem}.metric{justify-content:space-between;margin-bottom:.8rem;font-size:.9rem;display:flex}.metric label{color:#999;font-weight:300}.metric span{color:var(--accent-text);font-family:monospace;font-weight:700}hr{border:0;border-top:1px solid var(--panel-border);margin:1rem 0}.hidden{opacity:0;display:none}#status-modal{background:var(--panel-bg);color:var(--text-color);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;border-radius:8px;outline:none;padding:2rem;box-shadow:0 0 30px #000000b3}#status-modal::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#000000d9}h2{border-bottom:1px solid var(--panel-border);color:var(--text-color);margin-top:0;margin-bottom:1rem;padding-bottom:.5rem;font-size:1.1rem;font-weight:400}h3{color:#aaa;margin-bottom:.5rem;font-size:.9rem;font-weight:400}.bar-chart{align-items:flex-end;gap:2px;height:40px;display:flex}.bar{background:linear-gradient(to top, var(--accent-secondary), var(--accent-color));border-radius:2px 2px 0 0;flex-grow:1;min-height:1px;transition:height .3s}.app-footer{opacity:.6;z-index:10;pointer-events:none;gap:1.5rem;font-size:.75rem;display:flex;position:absolute;bottom:1rem;left:2rem}.app-footer a{color:var(--text-color);pointer-events:auto;border-bottom:none;align-items:center;gap:.3rem;text-decoration:none;transition:opacity .2s,color .2s;display:inline-flex}.app-footer a:hover{opacity:1;color:var(--accent-text)}@media (width<=768px){header{flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem}.controls{flex-wrap:wrap;justify-content:space-between;gap:.5rem;width:100%}.btn{flex:1;min-width:80px;padding:0 8px}#info-panel{box-sizing:border-box;z-index:20;border-bottom:none;border-left:none;border-right:none;border-radius:16px 16px 0 0;width:100%;max-height:80vh;padding:1.5rem 1rem;bottom:0;left:0;right:0;overflow-y:auto}.close-btn{display:flex}#hover-panel{width:auto;top:7rem;left:1rem;right:1rem}.app-footer{z-index:10;flex-wrap:wrap;justify-content:center;gap:1rem;padding:.5rem 1rem;position:absolute;bottom:1rem;left:0;right:0}}