*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:#000;color:#fff;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#canvas{display:block;width:100%;height:100%}#controls{position:absolute;top:20px;left:20px;background:#000c;padding:20px;border-radius:12px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);max-width:320px;box-shadow:0 8px 32px #0006}#controls h1{font-size:22px;margin-bottom:10px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#phase-info{font-size:14px;color:#aaa}#current-phase{color:#fff;font-weight:500}#interactive-controls{position:absolute;bottom:20px;left:20px;background:#000c;padding:16px;border-radius:12px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);max-width:320px;box-shadow:0 8px 32px #0006}.control-group{display:flex;gap:8px;flex-wrap:wrap}.control-btn{flex:1;padding:10px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:13px;cursor:pointer;transition:all .2s ease;font-family:inherit}.control-btn:hover{background:#fff3;border-color:#fff6;transform:translateY(-1px)}.control-btn:active{transform:translateY(0)}#speed-control{-webkit-appearance:none;appearance:none;height:6px;background:#fff3;border-radius:3px;outline:none;margin:8px 0 4px}#speed-control::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;transition:all .2s ease}#speed-control::-webkit-slider-thumb:hover{transform:scale(1.2)}#speed-control::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;cursor:pointer;border:none;transition:all .2s ease}#speed-control::-moz-range-thumb:hover{transform:scale(1.2)}#speed-display{display:block;text-align:right}#start-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .5s ease-out}#start-screen.hidden{animation:fadeOut .5s ease-out forwards;pointer-events:none}.start-screen-content{text-align:center;max-width:600px;padding:40px}.start-title{font-size:64px;font-weight:700;margin-bottom:20px;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titleGlow 3s ease-in-out infinite}.start-subtitle{font-size:24px;color:#ccc;margin-bottom:20px;font-weight:300}.start-description{font-size:16px;color:#888;line-height:1.6;margin-bottom:40px;max-width:500px;margin-left:auto;margin-right:auto}.start-btn{padding:16px 48px;font-size:18px;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px #667eea66;font-family:inherit;position:relative;overflow:hidden}.start-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.start-btn:hover{transform:translateY(-2px);box-shadow:0 12px 32px #667eea99}.start-btn:hover:before{width:300px;height:300px}.start-btn:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes titleGlow{0%,to{filter:drop-shadow(0 0 20px rgba(102,126,234,.5))}50%{filter:drop-shadow(0 0 40px rgba(118,75,162,.8))}}.debug-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:#0f03;border:1px solid #0f0;outline:none;margin-top:2px;cursor:pointer}.debug-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;background:#0f0;border-radius:50%;cursor:pointer;box-shadow:0 0 4px #0f0}.debug-slider::-moz-range-thumb{width:10px;height:10px;background:#0f0;border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 4px #0f0}.debug-slider:hover::-webkit-slider-thumb{background:#0ff;box-shadow:0 0 8px #0ff}.debug-slider:hover::-moz-range-thumb{background:#0ff;box-shadow:0 0 8px #0ff}