*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f172a;color:#e5e7eb}.app-root{display:flex;flex-direction:column;height:100vh}header{padding:.75rem 1rem;background:#020617;border-bottom:1px solid #1f2937;display:flex;justify-content:space-between;align-items:center}header h1{font-size:1.1rem;margin:0}.tagline{font-size:.8rem;color:#9ca3af}main{flex:1;display:grid;grid-template-columns:420px 1fr;gap:0;min-height:0}.sidebar{border-right:1px solid #1f2937;padding:1rem;overflow-y:auto;background:#020617}.content{padding:.5rem;background:radial-gradient(circle at top,#1f2937,#020617 60%);display:flex;flex-direction:column;gap:.5rem}.panel{background:#0f172ad9;border-radius:.75rem;padding:.75rem .9rem;border:1px solid rgba(31,41,55,.8);margin-bottom:.75rem}.panel h2{font-size:.9rem;margin:0 0 .5rem;color:#e5e7eb}.panel p{margin:0;font-size:.8rem;color:#9ca3af}label{display:block;font-size:.75rem;margin-bottom:.15rem;color:#9ca3af}input[type=number]{width:100%;padding:.25rem .4rem;border-radius:.35rem;border:1px solid #1f2937;font-size:.8rem;background:#020617;color:#e5e7eb;margin-bottom:.4rem}input[type=number]:focus{outline:none;border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf866}.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.slider-group{display:flex;flex-direction:column;gap:.75rem}.slider-row{display:flex;align-items:center;gap:.5rem}.slider-row label{min-width:95px;font-size:.75rem;color:#9ca3af;margin-bottom:0}.slider-row input[type=range]{flex:1;height:4px;background:#1f2937;outline:none;-webkit-appearance:none;border-radius:2px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#0ea5e9;border-radius:50%;cursor:pointer;border:1px solid #0284c7}.slider-row input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#0ea5e9;border-radius:50%;cursor:pointer;border:1px solid #0284c7}.slider-row input[type=text],.slider-row input[type=number]{width:60px;padding:.2rem .35rem;margin-bottom:0;margin-left:10px;border-radius:.35rem;border:1px solid #1f2937;font-size:.75rem;background:#020617;color:#e5e7eb;text-align:center}.buttons{display:flex;gap:.5rem;margin-top:.5rem}button{border-radius:999px;border:1px solid #0ea5e9;padding:.35rem .9rem;font-size:.8rem;background:linear-gradient(to right,#0ea5e9,#22c55e);color:#fff;cursor:pointer;font-weight:500}button.secondary{background:transparent;border-color:#4b5563;color:#e5e7eb}button:disabled{opacity:.6;cursor:default}.status{font-size:.75rem;color:#9ca3af;margin-top:.4rem}.viewer-panel{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5rem}.canvas-container{flex:1;min-height:0;border-radius:.75rem;overflow:hidden;border:1px solid rgba(31,41,55,.9);background:#020617}.timeline{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:#0f172ae6;border-radius:.75rem;border:1px solid rgba(31,41,55,.9)}.timeline span{font-size:.75rem;color:#9ca3af;min-width:40px}.timeline input[type=range]{flex:1}.collision-list{font-size:.75rem;color:#9ca3af;margin-top:.3rem;max-height:8rem;overflow-y:auto}.collision-list div{margin-bottom:.15rem}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.05rem .4rem;font-size:.7rem;background:#38bdf826;border:1px solid rgba(56,189,248,.5);color:#e0f2fe;margin-left:.25rem}@media (max-width: 900px){main{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid #1f2937;max-height:35vh;scroll-behavior:smooth}}@media (max-width: 768px){header h1{font-size:1rem}.tagline{font-size:.7rem}.sidebar{padding:.75rem}.panel{padding:.6rem .75rem;margin-bottom:.5rem}.panel h2{font-size:.85rem}.slider-row label{min-width:70px;font-size:.7rem}button{padding:.5rem 1rem;font-size:.85rem}.slider-row input[type=range]::-webkit-slider-thumb{width:18px;height:18px}.slider-row input[type=range]::-moz-range-thumb{width:18px;height:18px}.content{padding:.25rem}.canvas-container{min-height:300px}}@media (max-width: 768px) and (orientation: landscape){main{grid-template-columns:350px 1fr}.sidebar{max-height:100vh;border-right:1px solid #1f2937;border-bottom:none}.canvas-container{min-height:auto}}@media (max-width: 480px){header{padding:.5rem .75rem}.sidebar{padding:.5rem}.panel{padding:.5rem;margin-bottom:.4rem}.panel h2{font-size:.8rem;margin:0 0 .4rem}.slider-group{gap:.5rem}.row{grid-template-columns:1fr;gap:.25rem}.slider-row label{min-width:60px;font-size:.65rem}.slider-row input[type=text],.slider-row input[type=number]{width:50px;font-size:.7rem}}