.app{display:flex;flex-direction:column;min-height:100%;background:radial-gradient(1200px 600px at 70% -10%,rgba(77,225,193,.06),transparent 60%),var(--bg)}.app__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--border);background:#0b0c0fb3;backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand__mark{width:30px;height:30px;border-radius:9px;background:conic-gradient(from 140deg,var(--accent),#7a5cff,#ff2d75,var(--accent));box-shadow:0 0 0 1px var(--border-strong),0 6px 18px #4de1c12e}.brand h1{font-size:16px;letter-spacing:-.01em}.brand p{margin:0;color:var(--text-dim);font-size:12px}.app__header-actions{display:flex;gap:8px}.app__body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;padding:16px;align-items:start;flex:1}.app__stage{display:flex;flex-direction:column;gap:16px;min-width:0}.app__stage:fullscreen{background:var(--bg);padding:0}.app--transparent .app__stage:fullscreen{background:transparent}.app__sidebar{display:flex;flex-direction:column;gap:12px;min-width:0}.stage{display:flex;flex-direction:column;gap:16px}.stage__canvas-wrap{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:linear-gradient(0deg,rgba(255,255,255,.015) 1px,transparent 1px) 0 0 / 100% 40px,linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px) 0 0 / 40px 100%,var(--bg-elevated);aspect-ratio:16 / 9;box-shadow:var(--shadow)}.app__stage:fullscreen .stage__canvas-wrap{aspect-ratio:auto;height:100vh;border:none;border-radius:0}.stage__canvas-wrap--transparent{background:linear-gradient(45deg,#1a1c23 25%,transparent 25%) 0 0 / 20px 20px,linear-gradient(-45deg,#1a1c23 25%,transparent 25%) 0 10px / 20px 20px,linear-gradient(45deg,transparent 75%,#1a1c23 75%) 10px -10px / 20px 20px,linear-gradient(-45deg,transparent 75%,#1a1c23 75%) -10px 0 / 20px 20px,var(--bg-elevated)}.app__stage:fullscreen .stage__canvas-wrap--transparent{background:transparent}.app__stage:fullscreen .stage__controls{display:none}.app__stage.is-dragging .stage__canvas-wrap{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.stage__canvas{display:block;width:100%;height:100%}.stage__stats{position:absolute;left:12px;top:12px;display:flex;gap:6px;pointer-events:none;flex-wrap:wrap}.stage__stats span{padding:3px 8px;border-radius:999px;border:1px solid var(--border-strong);background:#0b0c0fb3;color:var(--text-muted);font-size:11px;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px)}.stage__fullscreen{position:absolute;right:12px;top:12px}.stage__intro{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;background:radial-gradient(120% 90% at 50% 40%,#0b0c0f33,#0b0c0fd9)}.stage__intro h2{margin:0;font-size:1.35rem;letter-spacing:-.01em}.stage__intro p{margin:0;max-width:34ch;color:var(--text-muted);font-size:.9rem}.stage__intro-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}.stage__controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.panel,.control-group{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-panel);padding:14px}.panel{display:flex;flex-direction:column;gap:12px}.panel__head,.control-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.panel h2,.control-group h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.panel__meta,.hint{color:var(--text-dim);font-size:11px}.hint--icon{display:flex;align-items:center;gap:6px}.control-group{display:flex;flex-direction:column;gap:10px}.button,.ghost-button,.icon-button,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-input);color:var(--text);padding:9px 13px;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease;min-height:40px}.button:hover,.ghost-button:hover,.icon-button:hover{border-color:var(--accent)}.button:disabled{opacity:.45;cursor:not-allowed}.button--wide{width:100%}.button.is-danger{border-color:var(--danger);color:var(--danger)}.button.is-active{border-color:var(--accent);color:var(--accent)}.ghost-button{background:#0b0c0f99;backdrop-filter:blur(6px);color:var(--text-muted);padding:7px 11px;min-height:34px;font-size:12px}.icon-button{padding:0;width:40px;min-height:40px;flex:none}.text-button{border:none;background:none;color:var(--accent);padding:0;min-height:0;font-size:12px}.text-button:hover{text-decoration:underline}.button-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.button-row .button{flex:1 1 auto}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid var(--border-strong);background:var(--bg-input);color:var(--text-muted);border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer;min-height:32px;transition:all .15s ease}.chip:hover{border-color:var(--accent);color:var(--text)}.chip.is-active{background:#4de1c124;border-color:var(--accent);color:var(--accent)}.chip--preset{border-radius:var(--radius-sm)}.slider{display:flex;flex-direction:column;gap:6px}.slider__head{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted)}.slider__value{color:var(--text-dim);font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;margin:0}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--border-strong)}input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--border-strong)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-panel);box-shadow:0 0 0 1px var(--accent)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg-panel)}.seek{--progress: 0%}.seek::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) var(--progress),var(--border-strong) var(--progress))}.seek::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent)}.toggle{display:flex;align-items:center;gap:12px;cursor:pointer;justify-content:space-between}.toggle__text{display:flex;flex-direction:column;gap:2px}.toggle__label{font-size:13px}.toggle__description{color:var(--text-dim);font-size:11px}.toggle input{position:absolute;opacity:0;width:1px;height:1px}.toggle__track{position:relative;width:40px;height:22px;border-radius:999px;background:var(--border-strong);flex:none;transition:background .15s ease}.toggle__thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .15s ease}.toggle input:checked+.toggle__track{background:var(--accent)}.toggle input:checked+.toggle__track .toggle__thumb{transform:translate(18px);background:#06231d}.toggle input:focus-visible+.toggle__track{outline:2px solid var(--focus);outline-offset:2px}.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.color-field{display:flex;flex-direction:column;gap:6px}.color-field__label{font-size:12px;color:var(--text-muted)}.color-field__control{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-input);padding:5px 8px}.color-field input[type=color]{width:26px;height:26px;padding:0;border:none;border-radius:6px;background:none;cursor:pointer}.color-field__value{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums}.transport{display:flex;align-items:center;gap:12px}.transport__play{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--accent);background:#4de1c11f;color:var(--accent);display:grid;place-items:center;cursor:pointer}.transport__progress{flex:1;min-width:0}.transport__times{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums}.volume{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:12px;color:var(--text-muted)}.volume__value{color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}.output-url{display:flex;flex-direction:column;gap:6px}.output-url label{font-size:12px;color:var(--text-muted)}.output-url__row{display:flex;gap:8px}.output-url input{flex:1;min-width:0;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-input);padding:9px 10px;font-size:12px;color:var(--text-muted)}.help{border-top:1px solid var(--border);padding-top:10px}.help summary{cursor:pointer;font-size:12px;color:var(--text-muted)}.help ol{margin:10px 0 0;padding-left:18px;color:var(--text-muted);font-size:12px;display:flex;flex-direction:column;gap:5px}.notice{margin:0;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-input);padding:9px 11px;font-size:12px;color:var(--text-muted)}.notice--error{border-color:#ff5c7280;color:#ffb3bd;display:flex;align-items:center;justify-content:space-between;gap:10px}.privacy p{margin:0;font-size:12px;color:var(--text-muted)}.toast-stack{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;max-width:360px;z-index:20}.toast-stack .notice{background:var(--bg-panel);box-shadow:var(--shadow)}@media (max-width: 1080px){.app__body,.stage__controls{grid-template-columns:1fr}}@media (max-width: 640px){.app__header{flex-direction:column;align-items:stretch;gap:10px}.app__header-actions{display:flex;gap:8px}.app__header-actions .button,.app__header-actions .ghost-button{flex:1}.app__body{padding:12px;gap:12px}.stage__canvas-wrap{aspect-ratio:4 / 3}.button,.chip{min-height:44px}.chip{padding:10px 14px}}