body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh;background:#000}.app-shell{margin:0;padding:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#000;color:#f8fafc;overflow:hidden}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.top-bar h1{margin:0;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.5rem,2.6vw,2.4rem)}.top-bar p{margin:.35rem 0 0;color:#f1f5f9b8}.top-bar .retry{border:1px solid rgba(248,250,252,.5);border-radius:999px;padding:.55rem 1.4rem;background:transparent;color:inherit;cursor:pointer;transition:all .16s ease}.top-bar .retry:hover{border-color:#facc15;color:#facc15}.canvas-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.canvas-wrapper canvas{display:block}.status-banner{position:absolute;inset:1.5rem auto auto 1.5rem;padding:.6rem 1.2rem;background:#0f172ab3;border:1px solid rgba(250,204,21,.4);border-radius:999px;font-size:.9rem;color:#facc15}@media(max-width:768px){.app-shell{padding:1.5rem}.canvas-wrapper{padding:1rem}}.dev-panel{position:fixed;top:0;right:0;width:400px;height:100vh;background:#0f172afa;border-left:1px solid rgba(250,204,21,.2);color:#f8fafc;display:flex;flex-direction:column;z-index:9999;animation:slideIn .3s ease;box-shadow:-4px 0 24px #0000004d}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.dev-panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid rgba(148,163,184,.2);background:#1e293b80}.dev-panel-header h2{margin:0;font-size:1.25rem;text-transform:uppercase;letter-spacing:.05em;color:#facc15}.close-btn{background:none;border:none;color:#94a3b8;font-size:2rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.close-btn:hover{background:#f8fafc1a;color:#facc15}.dev-panel-tabs{display:flex;gap:.5rem;padding:.5rem 1rem;background:#1e293b4d;border-bottom:1px solid rgba(148,163,184,.2)}.dev-panel-tabs button{flex:1;padding:.5rem;background:#3341554d;border:1px solid transparent;border-radius:6px;color:#94a3b8;cursor:pointer;transition:all .2s;font-size:.875rem;font-weight:500}.dev-panel-tabs button:hover{background:#47556966}.dev-panel-tabs button.active{background:#facc1526;border-color:#facc154d;color:#facc15}.dev-panel-content{flex:1;overflow-y:auto;padding:1.5rem}.tab-content h3{margin:0 0 1.5rem;font-size:1.125rem;color:#e2e8f0;border-bottom:1px solid rgba(148,163,184,.2);padding-bottom:.5rem}.control-group{margin-bottom:1.5rem}.control-group label{display:block;margin-bottom:.5rem;font-size:.875rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.control-group select,.control-group input[type=number]{width:100%;padding:.5rem;background:#1e293b80;border:1px solid rgba(148,163,184,.3);border-radius:6px;color:#f8fafc;font-size:.95rem}.control-group select:focus,.control-group input[type=number]:focus{outline:none;border-color:#facc1580;background:#1e293bb3}.control-group input[type=checkbox]{margin-right:.5rem}.button-group{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap}.button-group.vertical{flex-direction:column}.button-group button,.tab-content>button{flex:1;padding:.75rem 1rem;background:linear-gradient(135deg,#f9731633,#facc1533);border:1px solid rgba(250,204,21,.3);border-radius:6px;color:#facc15;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .2s;white-space:nowrap}.button-group button:hover:not(:disabled),.tab-content>button:hover:not(:disabled){background:linear-gradient(135deg,#f973164d,#facc154d);transform:translateY(-1px);box-shadow:0 4px 12px #facc1533}.button-group button:disabled{opacity:.5;cursor:not-allowed}.metrics{background:#1e293b4d;border-radius:8px;padding:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.metrics>div{font-size:.875rem;color:#94a3b8}.metrics strong{color:#facc15;font-weight:700;margin-left:.25rem}.debug-info{background:#1e293b4d;border-radius:8px;padding:1rem;margin-bottom:1rem;font-family:monospace;font-size:.875rem}.debug-info>div{margin-bottom:.5rem;color:#94a3b8}.debug-info code{color:#facc15;background:#0000004d;padding:.125rem .375rem;border-radius:4px;font-size:.875rem}details{margin-bottom:1rem;border:1px solid rgba(148,163,184,.2);border-radius:6px;background:#1e293b4d}details summary{padding:.75rem 1rem;cursor:pointer;font-weight:500;color:#e2e8f0;-webkit-user-select:none;user-select:none}details summary:hover{background:#4755694d}details pre{margin:0;padding:1rem;overflow-x:auto;font-size:.75rem;color:#94a3b8;border-top:1px solid rgba(148,163,184,.2);max-height:300px;overflow-y:auto}.dev-panel-footer{padding:1rem 1.5rem;border-top:1px solid rgba(148,163,184,.2);background:#1e293b80}.hotkeys-info{font-size:.75rem;color:#64748b;line-height:1.5}.hotkeys-info>div{margin-bottom:.25rem}.dev-panel-content::-webkit-scrollbar,details pre::-webkit-scrollbar{width:8px}.dev-panel-content::-webkit-scrollbar-track,details pre::-webkit-scrollbar-track{background:#1e293b4d}.dev-panel-content::-webkit-scrollbar-thumb,details pre::-webkit-scrollbar-thumb{background:#94a3b84d;border-radius:4px}.dev-panel-content::-webkit-scrollbar-thumb:hover,details pre::-webkit-scrollbar-thumb:hover{background:#94a3b880}@media(max-width:768px){.dev-panel{width:100%}}:root{color-scheme:only light;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#040b1e;color:#f1f5f9}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}