:root{--bg: #0a0a0a;--fg: #ffffff;--muted: #666;--border: rgba(255,255,255,.08);--pink: #ff006e;--cyan: #00f5ff;--yellow: #ffea00;--purple: #8338ec;--font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.static-app{display:flex;flex-direction:column;min-height:100vh}.top-bar{height:60px;min-height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--border);gap:20px}.top-bar-left{display:flex;align-items:center;gap:12px;flex-shrink:0}.logo-mark{font-size:1.4rem;font-weight:700;letter-spacing:.06em;color:var(--fg)}.logo-mark .flicker{animation:flicker-logo 4s infinite}@keyframes flicker-logo{0%,94%,96%,to{opacity:1}95%{opacity:.5}}.logo-sub{font-size:.6rem;color:var(--muted);letter-spacing:.02em}.top-bar-center{flex:1;display:flex;justify-content:center}.main-input{width:100%;max-width:480px;font-family:var(--font);font-size:1rem;font-weight:500;color:var(--fg);background:transparent;border:none;border-bottom:2px solid rgba(255,255,255,.15);padding:8px 0;outline:none;text-align:center;transition:border-color .2s}.main-input::placeholder{color:#fff3}.main-input:focus{border-color:var(--pink)}.top-bar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.template-nav{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--muted)}.template-nav-btn{font-family:var(--font);font-size:.8rem;color:var(--cyan);background:none;border:1px solid rgba(0,245,255,.2);border-radius:3px;padding:2px 8px;cursor:pointer;transition:all .15s}.template-nav-btn:hover{background:#00f5ff1a;border-color:#00f5ff66}.random-btn{font-family:var(--font);font-size:.65rem;color:var(--yellow);background:none;border:1px solid rgba(255,234,0,.2);border-radius:3px;padding:3px 10px;cursor:pointer;transition:all .15s}.random-btn:hover{background:#ffea001a}.controls-strip{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}.ctrl-btn{font-family:var(--font);font-size:.65rem;font-weight:600;letter-spacing:.04em;padding:4px 12px;border-radius:3px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s}.ctrl-btn:hover{color:var(--fg);border-color:#fff3}.ctrl-btn.active{color:var(--cyan);border-color:#00f5ff4d;background:#00f5ff0f}.ctrl-btn.pink{color:var(--pink);border-color:#ff006e4d}.ctrl-btn.pink:hover{background:#ff006e1a}.speed-group{display:flex;gap:0}.speed-group .ctrl-btn{border-radius:0;border-right:none}.speed-group .ctrl-btn:first-child{border-radius:3px 0 0 3px}.speed-group .ctrl-btn:last-child{border-radius:0 3px 3px 0;border-right:1px solid var(--border)}.scrubber{width:160px;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;outline:none;cursor:pointer}.scrubber::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--pink);cursor:pointer}.frame-counter{font-size:.6rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:80px}.sound-btn{font-size:.65rem;padding:3px 10px;border-radius:3px;border:1px solid var(--border);background:transparent;cursor:pointer;transition:all .15s}.sound-btn.off{color:var(--muted)}.sound-btn.on{color:var(--yellow);border-color:#ffea004d}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 20px;min-height:0;position:relative}.canvas-wrapper{position:relative;max-width:900px;width:100%;aspect-ratio:16/9;border:2px solid rgba(255,255,255,.15);border-radius:4px;overflow:hidden;box-shadow:0 0 40px #ffffff08,0 0 80px #ff006e0d}.canvas-wrapper canvas{width:100%;height:100%;display:block}.canvas-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.intro-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0a0ad9;z-index:10;transition:opacity .5s}.intro-overlay.hidden{opacity:0;pointer-events:none}.intro-overlay h2{font-size:1.6rem;font-weight:700;margin-bottom:8px;letter-spacing:.04em}.intro-overlay p{font-size:.8rem;color:var(--muted)}.thumb-strip{display:flex;justify-content:center;gap:6px;padding:10px 20px 14px;flex-wrap:wrap}.thumb{width:60px;height:40px;border:1px solid var(--border);border-radius:3px;cursor:pointer;overflow:hidden;position:relative;transition:all .15s;flex-shrink:0}.thumb:hover{border-color:#ffffff4d}.thumb.active{border:2px solid var(--pink)}.thumb canvas{width:100%;height:100%;display:block}.thumb-label{position:absolute;bottom:0;left:0;right:0;font-size:.4rem;text-align:center;background:#000000b3;color:var(--muted);padding:1px 0;letter-spacing:.04em;text-transform:uppercase}.presets-strip{display:flex;justify-content:center;gap:8px;padding:0 20px 16px;flex-wrap:wrap}.preset-btn{font-family:var(--font);font-size:.6rem;color:#ffffff59;background:none;border:1px solid rgba(255,255,255,.06);border-radius:3px;padding:3px 10px;cursor:pointer;transition:all .15s}.preset-btn:hover{color:var(--cyan);border-color:#00f5ff33}.export-area{display:flex;justify-content:center;gap:10px;padding:0 20px 16px}.export-btn{font-family:var(--font);font-size:.65rem;font-weight:600;letter-spacing:.04em;color:var(--fg);background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:6px 16px;cursor:pointer;transition:all .15s}.export-btn:hover{background:#ffffff14;border-color:#ffffff40}.export-btn.recording{color:var(--pink);border-color:var(--pink);animation:pulse-rec 1s infinite}@keyframes pulse-rec{0%,to{opacity:1}50%{opacity:.6}}.template-flash{position:fixed;top:80px;left:50%;transform:translate(-50%);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);z-index:100;pointer-events:none;animation:flash-name .8s ease-out forwards}@keyframes flash-name{0%{opacity:1;transform:translate(-50%) scale(1.1)}to{opacity:0;transform:translate(-50%) scale(1) translateY(-10px)}}.static-footer{height:28px;min-height:28px;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border);font-size:.55rem;color:#fff3;letter-spacing:.02em;gap:4px}.static-footer a{color:var(--muted);text-decoration:none}.static-footer a:hover{color:var(--cyan)}@media(max-width:700px){.top-bar{flex-wrap:wrap;height:auto;padding:10px 12px;gap:8px}.top-bar-center{order:3;flex-basis:100%}.main-input{font-size:.85rem}.canvas-area{padding:12px}.thumb-strip{gap:4px}.thumb{width:48px;height:32px}}