*{box-sizing:border-box;margin:0;padding:0}body{background:#e7eaf2;margin:0}.app-layout{background:#e7eaf2;height:100svh;display:flex;overflow:hidden}.shader-viewport{flex:1;justify-content:center;align-items:center;height:100%;display:flex;overflow:hidden}.shader-container{transform-origin:50%;flex-shrink:0}.control-panel{-webkit-backdrop-filter:blur(12px);-webkit-user-select:none;user-select:none;background:#ffffffb8;border-left:1px solid #0000000f;flex-direction:column;gap:16px;width:280px;min-width:280px;height:100svh;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex;overflow-y:auto}.control-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-track{background:0 0}.control-panel::-webkit-scrollbar-thumb{background:#0000001f;border-radius:3px}.control-section-header,.control-section-header-static{justify-content:space-between;align-items:center;width:100%;padding:8px 0;display:flex}.control-section-header{cursor:pointer;background:0 0;border:none;outline:none;transition:opacity .2s}@media (hover:hover) and (pointer:fine){.control-section-header:hover{opacity:.7}}.control-section-header:active{opacity:.5}.control-section-title{letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;font-size:10px;font-weight:700}.control-section-icon{color:#9ca3af;font-size:16px;font-weight:400;line-height:1}.control-section-content{flex-direction:column;gap:16px;display:flex}.control-group{flex-direction:column;gap:6px;display:flex}.control-label{letter-spacing:.04em;text-transform:uppercase;color:#6b7280;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;display:flex}.control-row{align-items:center;gap:8px;display:flex}.control-value{color:#374151;font-variant-numeric:tabular-nums;text-align:right;min-width:40px;font-size:12px;font-weight:500}.control-slider{appearance:none;background:#d1d5db;border-radius:2px;outline:none;flex:1;height:4px}.control-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#374151;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0003}.control-slider::-moz-range-thumb{cursor:pointer;background:#374151;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 3px #0003}.control-color-row{align-items:center;gap:8px;display:flex}.control-color-swatch{appearance:none;cursor:pointer;background:0 0;border:1px solid #0000001a;border-radius:6px;width:28px;height:28px;padding:2px}.control-color-swatch::-webkit-color-swatch-wrapper{padding:0}.control-color-swatch::-webkit-color-swatch{border:none;border-radius:4px}.control-color-swatch::-moz-color-swatch{border:none;border-radius:4px}.control-color-hex{color:#374151;font-variant-numeric:tabular-nums;text-transform:uppercase;font-size:12px;font-weight:500}.control-select{appearance:none;color:#374151;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") right 10px center no-repeat;border:1px solid #0000001a;border-radius:8px;outline:none;width:100%;padding:6px 28px 6px 10px;font-size:13px;font-weight:500;transition:border-color .2s}.control-select:focus{border-color:#00000040}.control-number-input{font-variant-numeric:tabular-nums;color:#374151;text-align:right;background:#fff;border:1px solid #0000001a;border-radius:6px;outline:none;width:64px;padding:4px 8px;font-size:13px;font-weight:500;transition:border-color .2s}.control-number-input:focus{border-color:#00000040}.control-btn{color:#374151;cursor:pointer;background:#fff;border:1px solid #0000001a;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:500;transition:background-color .2s,border-color .2s}@media (hover:hover) and (pointer:fine){.control-btn:hover{background:#f3f4f6;border-color:#00000026}}.control-btn:active{background:#e5e7eb}.control-btn-full{width:100%}.playback-bar{background:#111827;border:1px solid #ffffff14;border-radius:999px;align-items:center;gap:2px;padding:4px;display:inline-flex;box-shadow:0 1px 2px #0000001f}.playback-btn{color:#e5e7eb;cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex}.playback-btn-primary{color:#111827;background:#f9fafb}@media (hover:hover) and (pointer:fine){.playback-btn{transition:background-color .2s,color .2s,opacity .2s}.playback-btn:hover:not(:disabled){color:#fff;background:#ffffff14}.playback-btn-primary:hover:not(:disabled){color:#000;background:#fff}}.playback-btn:active:not(:disabled){opacity:.92}.playback-btn:disabled{opacity:.35;cursor:not-allowed}.playback-icon{width:22px;height:22px;display:block}@media (prefers-reduced-motion:reduce){.playback-btn{transition:none}}.control-btn-export{color:#fff;background:#374151;border-color:#374151}@media (hover:hover) and (pointer:fine){.control-btn-export:hover{background:#1f2937;border-color:#1f2937}}.control-btn-export:active{background:#111827}.control-btn-export.control-btn-export--done{justify-content:center;align-items:center;gap:8px;display:inline-flex}.control-btn-export-check{color:#34d399;flex-shrink:0;display:inline-flex}@media (prefers-reduced-motion:no-preference){.control-btn-export-check{animation:.25s cubic-bezier(.215,.61,.355,1) forwards export-check-in}}@keyframes export-check-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.export-progress-label{color:#374151;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;font-size:12px;font-weight:600}.export-progress-track{background:#e5e7eb;border-radius:3px;height:6px;overflow:hidden}.export-progress-bar{background:#374151;border-radius:3px;height:100%;transition:width .1s linear}.control-divider{background:#00000014;height:1px;margin:4px 0}.control-btn:disabled,.control-slider:disabled{opacity:.4;cursor:not-allowed}