*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#0f0f23,#1a1a3e,#2d1b69);color:#fff;overflow:hidden}body{position:relative;min-height:100vh;padding:16px}.hud{position:fixed;top:16px;left:16px;z-index:1000;display:flex;flex-direction:column;gap:8px}.hud-item{background:#080814b3;padding:9px 14px;border-radius:12px;font-size:13px;font-weight:600;letter-spacing:.2px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);min-width:230px}.controls{position:fixed;top:58px;right:16px;display:flex;flex-direction:column;gap:10px;z-index:1000;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 74px);overflow-y:auto;padding:12px;border-radius:16px;background:#090a1cb8;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 40px #00000073;transition:opacity .2s ease,transform .2s ease}button{background:linear-gradient(135deg,#4f46e5,#7c3aed);border:none;color:#fff;padding:11px 14px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 20px #4f46e559;width:100%}button:hover{transform:translateY(-1px);box-shadow:0 10px 24px #4f46e573}button:active{transform:translateY(0)}#stopBtn{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 6px 20px #ef444459}#stopBtn:hover{box-shadow:0 10px 24px #ef444473}.ui-toggle-btn{position:fixed;top:16px;right:16px;width:auto;padding:9px 12px;border-radius:10px;font-size:12px;z-index:1101}.control-group{background:#ffffff0d;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12)}label{width:100%;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;color:#e0e0ff}input[type=range]{flex:1;min-width:130px;accent-color:#7c3aed}.control-group span[id$=Value]{min-width:44px;text-align:right;font-variant-numeric:tabular-nums;color:#cfd2ff}.canvas-container{position:relative;width:calc(100vw - 32px);height:calc(100vh - 44px);margin:16px auto;border-radius:14px;overflow:hidden;box-shadow:0 20px 55px #00000080,inset 0 0 16px #ffffff0d}.ui-hidden .controls{opacity:0;pointer-events:none;transform:translateY(-8px)}canvas{display:block;width:100%;height:100%}@media(max-width:768px){body{padding:10px}.hud{top:10px;left:10px}.hud-item{min-width:190px;padding:8px 12px;font-size:12px}.controls{right:10px;top:48px;width:min(320px,calc(100vw - 20px));max-height:calc(100vh - 58px);padding:10px;gap:8px}.ui-toggle-btn{top:10px;right:10px}.control-group{padding:9px 10px}canvas{border-radius:10px}.canvas-container{width:calc(100vw - 20px);height:calc(100vh - 32px);margin:10px auto;border-radius:10px}}