@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--bg-dark:#07080c;--bg-surface:#0e1118;--bg-surface-elevated:#151a24;--bg-card:#181d2a;--border-subtle:#ffffff14;--border-active:#00f0ff80;--accent-cyan:#00f0ff;--accent-magenta:#ff007f;--accent-purple:#8b5cf6;--accent-emerald:#10b981;--accent-amber:#f59e0b;--text-main:#f1f5f9;--text-muted:#94a3b8;--text-dim:#64748b;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-surface)}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}.app-layout{background-color:var(--bg-dark);flex-direction:column;min-height:100vh;display:flex}.navbar{background-color:var(--bg-surface);border-bottom:1px solid var(--border-subtle);z-index:40;justify-content:space-between;align-items:center;height:60px;padding:0 1.5rem;display:flex;position:sticky;top:0}.navbar-brand{align-items:center;gap:.75rem;display:flex}.brand-icon{background:linear-gradient(135deg,#00f0ff33,#8b5cf633);border:1px solid #00f0ff66;border-radius:8px;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.brand-title{letter-spacing:.05em;color:#fff;font-size:.95rem;font-weight:800}.brand-title span{color:var(--accent-cyan)}.brand-subtitle{color:var(--text-dim);font-size:.72rem}.navbar-actions{align-items:center;gap:.75rem;display:flex}.badge-guarantee{color:#a7f3d0;background:#10b9811f;border:1px solid #10b9814d;border-radius:9999px;align-items:center;padding:.35rem .7rem;font-size:.75rem;font-weight:600;display:flex}.btn-cloudflare{color:#fdba74;cursor:pointer;background:#f973161a;border:1px solid #f9731659;border-radius:8px;align-items:center;gap:.4rem;padding:.4rem .85rem;font-size:.78rem;font-weight:600;transition:all .2s;display:flex}.btn-cloudflare:hover{background:#f9731633;border-color:#f9731699;transform:translateY(-1px)}.workspace-main{flex:1;height:calc(100vh - 60px);display:flex;overflow:hidden}@media (width<=1024px){.workspace-main{flex-direction:column;height:auto;overflow:visible}}.viewport-container{border-right:1px solid var(--border-subtle);background-color:#050608;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.viewport-top-bar{border-bottom:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#0e111899;justify-content:space-between;align-items:center;padding:.6rem 1.2rem;display:flex}.viewport-badge-group{align-items:center;gap:.6rem;display:flex}.badge-theme{color:var(--accent-cyan);background:#00f0ff1f;border:1px solid #00f0ff4d;border-radius:6px;padding:.25rem .6rem;font-size:.75rem;font-weight:700}.badge-res{color:var(--text-muted);font-size:.72rem;font-family:var(--font-mono)}.fps-counter{font-size:.75rem;font-family:var(--font-mono);color:var(--text-muted)}.canvas-wrapper{background-color:#000;border:1px solid #ffffff0d;border-radius:10px;flex:1;justify-content:center;align-items:center;width:100%;max-width:calc(100% - 2rem);margin:auto;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 40px #000000b3}.render-canvas{object-fit:contain;width:100%;height:100%;display:block}.loop-test-badge{color:#6ee7b7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20;background:#052e16e6;border:1px solid #10b981;border-radius:9999px;padding:.4rem 1rem;font-size:.75rem;font-weight:600;position:absolute;top:1rem;left:50%;transform:translate(-50%);box-shadow:0 4px 15px #10b9814d}.playback-bar{background-color:var(--bg-surface);border-top:1px solid var(--border-subtle);align-items:center;gap:1rem;padding:.75rem 1.2rem;display:flex}.playback-left{align-items:center;gap:.75rem;display:flex}.btn-play-pause{background:var(--bg-surface-elevated);cursor:pointer;border:1px solid #00f0ff4d;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.btn-play-pause:hover{border-color:var(--accent-cyan);background:#00f0ff26}.time-display{font-family:var(--font-mono);color:var(--text-muted);min-width:95px;font-size:.8rem}.scrubber-wrapper{flex:1;align-items:center;display:flex;position:relative}.scrubber-slider{-webkit-appearance:none;cursor:pointer;background:#1e2433;border-radius:3px;outline:none;width:100%;height:6px}.scrubber-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-cyan);width:14px;height:14px;box-shadow:0 0 10px var(--accent-cyan);cursor:pointer;border-radius:50%;transition:transform .1s}.scrubber-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.loop-marker{background:#111827;border:1px solid #00f0ff80;border-radius:4px;padding:1px;position:absolute;top:-8px;right:-5px}.btn-test-loop{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);color:var(--text-main);cursor:pointer;border-radius:6px;align-items:center;gap:.25rem;padding:.4rem .8rem;font-size:.75rem;font-weight:600;transition:all .2s;display:flex}.btn-test-loop:hover,.btn-test-loop.active{color:#6ee7b7;background:#10b98126;border-color:#10b981}.sidebar{background-color:var(--bg-surface);flex-direction:column;width:380px;display:flex;overflow:hidden}@media (width<=1024px){.sidebar{width:100%;height:auto}}.sidebar-tabs{border-bottom:1px solid var(--border-subtle);background:var(--bg-surface-elevated);display:flex}.tab-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:.4rem;padding:.75rem .5rem;font-size:.78rem;font-weight:600;transition:all .2s;display:flex}.tab-btn:hover{color:var(--text-main)}.tab-btn.active{color:var(--accent-cyan);border-bottom-color:var(--accent-cyan);background:#00f0ff0a}.sidebar-content{flex:1;padding:1.2rem;overflow-y:auto}.tab-pane{flex-direction:column;gap:1.2rem;display:flex}.section-header{justify-content:space-between;align-items:center;display:flex}.section-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.8rem;font-weight:700}.btn-text-action{color:var(--accent-cyan);cursor:pointer;background:0 0;border:none;font-size:.75rem}.btn-text-action:hover{text-decoration:underline}.divider{background:var(--border-subtle);height:1px;margin:.2rem 0}.theme-grid{grid-template-columns:1fr;gap:.5rem;display:grid}.theme-card{text-align:left;background:var(--bg-card);border:1px solid var(--border-subtle);cursor:pointer;border-radius:8px;padding:.7rem .9rem;transition:all .2s}.theme-card:hover{border-color:#00f0ff4d;transform:translateY(-1px)}.theme-card.selected{border-color:var(--accent-cyan);background:#00f0ff14;box-shadow:0 0 15px #00f0ff26}.theme-card-title{color:var(--text-main);font-size:.85rem;font-weight:700}.theme-card-tagline{color:var(--text-dim);margin-top:.2rem;font-size:.72rem}.param-list{flex-direction:column;gap:.9rem;display:flex}.slider-group{flex-direction:column;gap:.35rem;display:flex}.slider-label-row{justify-content:space-between;font-size:.75rem;display:flex}.slider-label{color:var(--text-muted)}.slider-val{color:var(--accent-cyan);font-family:var(--font-mono);font-weight:600}.custom-range{-webkit-appearance:none;background:#1e2433;border-radius:3px;outline:none;width:100%;height:5px}.custom-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-main);border:2px solid var(--accent-cyan);cursor:pointer;border-radius:50%;width:13px;height:13px}.palette-list{flex-direction:column;gap:.5rem;display:flex}.palette-card{background:var(--bg-card);border:1px solid var(--border-subtle);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;padding:.6rem .8rem;transition:all .2s;display:flex}.palette-card:hover{border-color:#fff3}.palette-card.selected{border-color:var(--accent-cyan);background:#00f0ff0f}.palette-info{text-align:left}.palette-name{color:#fff;font-size:.82rem;font-weight:700}.palette-cat{color:var(--text-dim);font-size:.7rem}.palette-swatches{gap:4px;display:flex}.swatch{border:1px solid #ffffff26;border-radius:4px;width:16px;height:16px}.custom-color-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.color-picker-item{flex-direction:column;gap:.3rem;display:flex}.color-label{color:var(--text-dim);font-size:.72rem}.color-input-wrapper{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:6px;align-items:center;gap:.5rem;padding:.3rem .5rem;display:flex}.color-swatch-input{-webkit-appearance:none;cursor:pointer;background:0 0;border:none;border-radius:4px;width:22px;height:22px}.color-swatch-input::-webkit-color-swatch{border:1px solid #fff3;border-radius:4px}.color-hex-text{font-family:var(--font-mono);color:var(--text-muted);font-size:.72rem}.radio-option-list{flex-direction:column;gap:.5rem;display:flex}.radio-card{background:var(--bg-card);border:1px solid var(--border-subtle);cursor:pointer;border-radius:8px;align-items:center;gap:.75rem;padding:.65rem .8rem;transition:all .2s;display:flex}.radio-card:hover{border-color:#fff3}.radio-card.selected{border-color:var(--accent-cyan);background:#00f0ff0f}.radio-card-title{color:#fff;font-size:.8rem;font-weight:700}.radio-card-sub{color:var(--text-dim);font-size:.7rem}.chips-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;display:grid}.chip-btn{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;border-radius:6px;padding:.5rem;font-size:.74rem;transition:all .2s}.chip-btn:hover{color:#fff;border-color:#fff3}.chip-btn.selected{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#00f0ff1a;font-weight:600}.sidebar-footer{background:var(--bg-surface-elevated);border-top:1px solid var(--border-subtle);padding:1rem 1.2rem}.btn-export-main{color:#050608;cursor:pointer;background:linear-gradient(135deg,#00f0ff 0%,#8b5cf6 100%);border:none;border-radius:10px;justify-content:center;align-items:center;width:100%;padding:.85rem 1rem;transition:all .25s;display:flex;box-shadow:0 4px 20px #00f0ff59}.btn-export-main:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 6px 28px #00f0ff80}.btn-export-text{text-align:left;flex-direction:column;display:flex}.btn-export-title{letter-spacing:.05em;font-size:.88rem;font-weight:800}.btn-export-sub{opacity:.85;font-size:.68rem;font-weight:600}.modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000bf;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;flex-direction:column;width:100%;max-width:620px;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #000c}.modal-header{border-bottom:1px solid var(--border-subtle);background:var(--bg-surface-elevated);justify-content:space-between;align-items:center;padding:1rem 1.4rem;display:flex}.modal-title{color:#fff;font-size:.95rem;font-weight:700}.modal-close-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none}.modal-close-btn:hover{color:#fff}.modal-body{flex-direction:column;gap:1.2rem;padding:1.4rem;display:flex;overflow-y:auto}.modal-footer{border-top:1px solid var(--border-subtle);background:var(--bg-surface-elevated);justify-content:flex-end;padding:.8rem 1.4rem;display:flex}.btn-secondary{border:1px solid var(--border-subtle);color:#fff;cursor:pointer;background:#1e2433;border-radius:8px;padding:.5rem 1.2rem;font-size:.8rem;font-weight:600}.btn-secondary:hover{background:#2b3348}.export-progress-view{text-align:center;flex-direction:column;align-items:center;gap:1.2rem;display:flex}.progress-radial-wrapper{margin:1rem 0}.progress-percent-big{font-size:3.5rem;font-weight:800;font-family:var(--font-mono);background:linear-gradient(135deg,#00f0ff,#ff007f);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.progress-sub{color:var(--text-muted);font-size:.78rem}.progress-bar-track{background:#1a202c;border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg,#00f0ff,#8b5cf6);height:100%;transition:width .15s ease-out}.export-meta-grid{grid-template-columns:repeat(2,1fr);gap:.8rem;width:100%;display:grid}.meta-box{background:var(--bg-card);border:1px solid var(--border-subtle);text-align:left;border-radius:8px;flex-direction:column;gap:.2rem;padding:.75rem;display:flex}.meta-label{color:var(--text-dim);font-size:.7rem}.meta-val{font-size:.85rem;font-family:var(--font-mono);color:var(--text-main);font-weight:600}.export-hint{color:var(--text-muted);text-align:left;background:#00f0ff0d;border:1px solid #00f0ff26;border-radius:8px;padding:.6rem .9rem;font-size:.75rem;line-height:1.4}.export-success-view{flex-direction:column;gap:1.2rem;display:flex}.success-banner{background:#10b9811a;border:1px solid #10b98159;border-radius:10px;justify-content:space-between;align-items:center;padding:.9rem 1rem;display:flex}.btn-download-again{color:#6ee7b7;cursor:pointer;white-space:nowrap;background:#10b98133;border:1px solid #10b981;border-radius:6px;padding:.4rem .8rem;font-size:.78rem;font-weight:600}.metadata-container{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;flex-direction:column;gap:.9rem;padding:1rem;display:flex}.metadata-header{align-items:center;font-size:.85rem;display:flex}.meta-field{flex-direction:column;gap:.35rem;display:flex}.meta-field-label{color:var(--text-muted);justify-content:space-between;align-items:center;font-size:.72rem;font-weight:600;display:flex}.btn-copy{color:var(--accent-cyan);cursor:pointer;background:0 0;border:none;align-items:center;gap:.3rem;font-size:.72rem;display:flex}.btn-copy.highlight{background:#00f0ff1f;border-radius:4px;padding:.2rem .5rem}.meta-field-box{border:1px solid var(--border-subtle);font-size:.78rem;font-family:var(--font-mono);color:#cbd5e1;word-break:break-word;background:#090c12;border-radius:6px;padding:.55rem .75rem;line-height:1.4}.meta-field-box.tags-preview{max-height:85px;overflow-y:auto}.cf-feature-badge{color:#fde68a;background:#f59e0b1a;border:1px solid #f59e0b4d;border-radius:8px;align-items:flex-start;padding:.8rem 1rem;font-size:.78rem;line-height:1.4;display:flex}.cf-section{flex-direction:column;gap:.6rem;display:flex}.cf-method-title{color:#fff;font-size:.88rem;font-weight:700}.cf-method-desc{color:var(--text-muted);font-size:.78rem}.code-step{flex-direction:column;gap:.25rem;display:flex}.code-step-label{color:var(--text-dim);font-size:.72rem}.code-block{border:1px solid var(--border-subtle);font-family:var(--font-mono);color:var(--accent-cyan);background:#05070a;border-radius:6px;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-size:.78rem;display:flex}.btn-code-copy{color:var(--text-dim);cursor:pointer;background:0 0;border:none}.btn-code-copy:hover{color:#fff}.cf-ordered-list{color:var(--text-muted);flex-direction:column;gap:.5rem;padding-left:1.2rem;font-size:.78rem;line-height:1.4;display:flex}.cf-config-box{border:1px solid var(--border-subtle);font-family:var(--font-mono);color:#a5b4fc;background:#090c12;border-radius:6px;margin-top:.4rem;padding:.5rem .75rem;font-size:.75rem}