:root{--bg: #f2f0ea;--surface: #f6f4ef;--surface-2: #e9e6de;--border: #dedad0;--border-strong: #c4c0b4;--text: #141310;--text-dim: #6d6a61;--text-faint: #a19d91;--accent: #892f93;--accent-soft: rgba(137, 47, 147, .1);--ink: #141310;--radius: 10px;--font: "Helvetica Neue", Helvetica, Arial, sans-serif;--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;--mono: ui-monospace, "SF Mono", Menlo, monospace;--ease-snap: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0}.wordmark{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:.01em}.topbar-right{display:flex;align-items:center;gap:12px}.format-chip{font-family:var(--mono);font-size:11px;color:var(--text-dim);border:1px solid var(--border);border-radius:6px;padding:4px 9px}.export-btn.primary{padding:7px 16px;border:none;border-radius:8px;background:var(--ink);color:#f2f0ea;font:inherit;font-weight:500;letter-spacing:.02em;cursor:pointer;min-width:128px;transition:filter .15s var(--ease-snap),transform .15s var(--ease-snap)}.export-btn.primary:hover:not(:disabled){filter:brightness(1.6)}.export-btn.primary:active:not(:disabled){transform:scale(.97)}.export-btn.primary:disabled{opacity:.65;cursor:default}.export-error{font-size:11px;color:#f0716c;max-width:320px}.workspace{display:grid;grid-template-columns:232px 1fr 300px;flex:1;min-height:0}.stage-area{display:flex;flex-direction:column;min-width:0}.rail{padding:4px 16px 16px;overflow-y:auto;background:var(--surface)}.rail-left{border-right:1px solid var(--border)}.rail-right{border-left:1px solid var(--border)}.rail-section{padding:14px 0}.rail-section+.rail-section{border-top:1px solid var(--border)}.rail-section h2{font-family:var(--font-display);font-weight:400;font-size:16px;letter-spacing:.02em;color:var(--text);margin-bottom:12px}.hint{font-size:11.5px;line-height:1.55;color:var(--text-dim)}.canvas-wrap{flex:1;display:grid;place-items:center;min-height:0;overflow:hidden}.scene-frame{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 0 0 1px #1a19161a,0 18px 48px #1a191629}.scene{position:absolute;top:0;left:0;transform-origin:0 0;overflow:hidden}.scene-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.layer{position:absolute;cursor:move;user-select:none;-webkit-user-select:none;touch-action:none}.layer.selected{outline:calc(var(--ik, 3) * 1.25px) solid var(--accent);outline-offset:calc(var(--ik, 3) * 8px)}.layer-anim{will-change:transform,opacity}.add-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.add-row-3{grid-template-columns:1fr 1fr 1fr}.add-row-3 .add-btn{font-size:11.5px;padding:8px 4px}.add-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);color:var(--text);font:inherit;font-weight:500;cursor:pointer;transition:border-color .15s var(--ease-snap),background .15s var(--ease-snap)}.add-btn:hover{border-color:var(--accent);background:var(--accent-soft)}.add-btn.subtle{color:var(--text-dim)}.add-glyph{font-family:var(--mono);font-size:12px;color:var(--text-dim)}.layer-list{display:flex;flex-direction:column;gap:4px}.layer-item{display:flex;align-items:center;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--text-dim);font:inherit;text-align:left;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;transition:background .13s var(--ease-snap),color .13s var(--ease-snap)}div.layer-item{cursor:grab}.layer-item.dragging{border-color:var(--accent);background:var(--accent-soft);color:var(--text);cursor:grabbing;box-shadow:0 4px 14px #1413101f}button.layer-item{padding:8px 10px;gap:9px;width:100%}.layer-item:hover{background:var(--surface-2);color:var(--text)}.layer-item.active{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}.layer-item-main{display:flex;align-items:center;gap:9px;flex:1;padding:8px 0 8px 10px;border:none;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.layer-glyph{font-family:var(--mono);font-size:11px;color:var(--text-faint);width:14px;text-align:center;flex-shrink:0}.layer-remove{border:none;background:none;color:transparent;font-size:11px;padding:8px 10px;cursor:pointer;transition:color .13s var(--ease-snap)}.layer-item:hover .layer-remove{color:var(--text-faint)}.layer-remove:hover{color:#f0716c!important}.param{display:block;padding:6px 0}.param-head{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--text-dim)}.param-value{font-family:var(--mono);font-size:11px;color:var(--text)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;display:block}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--surface-2)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:#2b2a26;border:none;transition:transform .12s var(--ease-snap),background .12s var(--ease-snap)}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15);background:#000}input[type=range]:active::-webkit-slider-thumb{background:var(--accent)}input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--surface-2)}input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--text);border:none}.seg{display:flex;gap:4px;padding:3px;margin:6px 0;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}.seg-item{flex:1;padding:6px 4px;border:none;border-radius:6px;background:transparent;color:var(--text-dim);font:inherit;font-size:12px;cursor:pointer;transition:background .13s var(--ease-snap),color .13s var(--ease-snap)}.seg-item:hover{color:var(--text)}.seg-item.active{background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--border-strong)}.text-input{width:100%;margin-bottom:8px;padding:9px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit;line-height:1.45;resize:vertical}.text-input:focus{outline:none;border-color:var(--accent)}.swatches{display:flex;gap:7px;margin-top:8px;align-items:center}.swatch{width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);padding:0;cursor:pointer;transition:transform .12s var(--ease-snap),box-shadow .12s var(--ease-snap)}.swatch:hover{transform:scale(1.15)}.swatch.active{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}.swatch-custom{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:conic-gradient(#f66 0,#f66 25%,#6cf 0,#6cf 50%,#fc6 0,#fc6 75%,#9f6 0);overflow:hidden}.swatch-custom::-webkit-color-swatch-wrapper{padding:0;opacity:0}.swatch-custom::-webkit-color-swatch{border:none;opacity:0}.bg-image-row{display:flex;gap:8px;margin-top:12px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset-card{padding:11px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);color:var(--text-dim);font:inherit;font-weight:500;cursor:pointer;transition:border-color .15s var(--ease-snap),color .15s var(--ease-snap),background .15s var(--ease-snap)}.preset-card:hover{border-color:var(--border-strong);color:var(--text)}.preset-card.active{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}.danger-btn{width:100%;padding:9px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:#f0716c;font:inherit;font-weight:500;cursor:pointer;transition:border-color .15s var(--ease-snap),background .15s var(--ease-snap)}.danger-btn:hover{border-color:#f0716c;background:#f0716c14}.playback-bar{display:flex;align-items:center;gap:14px;height:52px;padding:0 16px;border-top:1px solid var(--border);flex-shrink:0}.icon-btn{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-dim);cursor:pointer;transition:color .15s var(--ease-snap),border-color .15s var(--ease-snap),background .15s var(--ease-snap),transform .15s var(--ease-snap)}.icon-btn:hover{color:var(--text);border-color:var(--border-strong)}.icon-btn:active{transform:scale(.94)}.icon-btn.active{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.play-btn{color:var(--text)}.scrub-track{position:relative;flex:1;height:22px;cursor:pointer;touch-action:none}.scrub-track:before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);border-radius:2px;background:var(--surface-2)}.scrub-fill{position:absolute;left:0;top:50%;width:100%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}.time-readout{font-family:var(--mono);font-size:11px;color:var(--text);white-space:nowrap;min-width:96px;text-align:right}.time-total{color:var(--text-faint)}.mini-label{display:block;font-size:9.5px;font-weight:500;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em;margin:10px 0 2px}.hex-input{width:74px;margin-left:auto;font-family:var(--mono);font-size:11px;padding:5px 7px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;color:var(--text)}.hex-input:focus{outline:none;border-color:var(--accent)}.layer-actions{display:flex;align-items:center;flex-shrink:0}.order-btn{border:none;background:none;color:transparent;cursor:pointer;padding:8px 3px;font-size:11px;line-height:1;transition:color .13s var(--ease-snap)}.layer-item:hover .order-btn,.layer-item.active .order-btn{color:var(--text-faint)}.order-btn:hover{color:var(--text)!important}.font-upload{width:100%;margin:2px 0 8px;font-size:11.5px;color:var(--text-dim)}.export-btn.primary{box-shadow:0 6px 16px #14131038}.format-chip{border-radius:999px;text-transform:uppercase;letter-spacing:.08em;font-size:10px}.mo-grid{display:grid;gap:6px;margin:6px 0 10px}.mo-grid.cols-3{grid-template-columns:repeat(3,1fr)}.mo-grid.cols-4{grid-template-columns:repeat(4,1fr)}.mo-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font:inherit;cursor:pointer;transition:border-color .15s var(--ease-snap),background .15s var(--ease-snap)}.mo-card:hover{border-color:var(--border-strong)}.mo-card.active{border-color:var(--ink);background:var(--surface-2)}.mo-label{font-size:9px;letter-spacing:.04em;color:var(--text-dim);text-transform:uppercase}.mo-card.active .mo-label{color:var(--text)}.pv{display:flex;align-items:center;justify-content:center;height:22px;overflow:hidden;font-family:var(--font-display);font-size:17px;line-height:1;color:var(--text)}.pv i{font-style:normal;display:inline-block}.pv-static{opacity:.3}.pv-rise{animation:pv-rise 2.4s var(--ease-snap) infinite}@keyframes pv-rise{0%,10%{opacity:0;transform:translateY(9px)}45%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}94%,to{opacity:0;transform:translateY(9px)}}.pv-reveal{animation:pv-reveal 2.6s var(--ease-snap) infinite}@keyframes pv-reveal{0%,10%{opacity:0;transform:scale(1.3)}50%{opacity:1;transform:scale(1)}82%{opacity:1;transform:scale(1)}96%,to{opacity:0;transform:scale(1.3)}}.pv-wiggle{animation:pv-wiggle 2.2s ease-in-out infinite}@keyframes pv-wiggle{0%,to{transform:rotate(0) translateY(0)}25%{transform:rotate(7deg) translateY(-1.5px)}55%{transform:rotate(-6deg) translateY(1px)}80%{transform:rotate(3deg) translateY(0)}}.pv-fade{animation:pv-fade 2.4s ease infinite}@keyframes pv-fade{0%,30%{opacity:1}60%,78%{opacity:0}to{opacity:1}}.pv-sink{animation:pv-sink 2.4s var(--ease-snap) infinite}@keyframes pv-sink{0%,25%{opacity:1;transform:translateY(0)}58%,80%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}.pv-lift{animation:pv-lift 2.4s var(--ease-snap) infinite}@keyframes pv-lift{0%,25%{opacity:1;transform:translateY(0)}58%,80%{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:translateY(0)}}.pv-type{overflow:hidden;white-space:nowrap;width:1.4em;animation:pv-type 2.2s steps(3,end) infinite}@keyframes pv-type{0%,12%{width:0}55%,88%{width:1.4em}to{width:0}}.pv-cas{animation:pv-rise 2.4s var(--ease-snap) infinite}.pv-cas.c2{animation-delay:.18s}.pv-cas.cw{animation-delay:.45s}.pv-pop{animation:pv-pop 2.4s var(--ease-snap) infinite}@keyframes pv-pop{0%,10%{opacity:0;transform:scale(.3)}38%{opacity:1;transform:scale(1.18)}52%{transform:scale(.94)}64%,84%{opacity:1;transform:scale(1)}96%,to{opacity:0;transform:scale(.3)}}.pv-slide{animation:pv-slide 2.4s var(--ease-snap) infinite}@keyframes pv-slide{0%,10%{opacity:0;transform:translate(-9px)}48%{opacity:1;transform:translate(0)}82%{opacity:1;transform:translate(0)}95%,to{opacity:0;transform:translate(-9px)}}.pv-tracking{animation:pv-tracking 2.6s var(--ease-snap) infinite}@keyframes pv-tracking{0%,10%{opacity:0;letter-spacing:6px;transform:translate(3px)}55%{opacity:1;letter-spacing:0px;transform:translate(0)}85%{opacity:1;letter-spacing:0px}97%,to{opacity:0;letter-spacing:6px}}.format-seg{margin:0;padding:2px}.format-seg .seg-item{padding:5px 10px;font-size:11px;font-family:var(--mono)}.layer.editing{cursor:text;outline-style:dashed}.layout-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.layout-card{display:flex;flex-direction:column;gap:6px;padding:7px 7px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:inherit;cursor:pointer;transition:border-color .15s var(--ease-snap),transform .15s var(--ease-snap)}.layout-card:hover{border-color:var(--ink);transform:translateY(-1px)}.layout-card:active{transform:translateY(0) scale(.98)}.layout-mini{position:relative;display:block;width:100%;aspect-ratio:9 / 16;background:#e7e4db;border-radius:5px;overflow:hidden}.layout-mini.dark{background:#191814}.lm-block{position:absolute;background:#141310b8;border-radius:1.5px}.layout-mini.dark .lm-block{background:#f0eee8d1}.lm-block.frame{background:transparent;border:1.5px solid rgba(20,19,16,.6);border-radius:4px}.layout-label{font-size:11px;color:var(--text-dim);text-align:center}.layout-card:hover .layout-label{color:var(--text)}.timeline{position:relative;border-top:1px solid var(--border);padding:8px 16px 10px;max-height:168px;overflow-y:auto;flex-shrink:0;background:var(--surface)}.tl-row{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:10px;height:26px}.tl-name{font-size:11px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-align:right;padding-right:2px}.tl-row.active .tl-name{color:var(--text);font-weight:500}.tl-time{font-family:var(--mono);font-size:10px;color:var(--text-faint);cursor:default}.tl-track{position:relative;height:14px;background:var(--surface-2);border-radius:4px}.tl-ruler{cursor:pointer;height:16px;touch-action:none}.tl-bar{position:absolute;top:1.5px;bottom:1.5px;min-width:8px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:4px;cursor:grab;touch-action:none;transition:background .13s var(--ease-snap)}.tl-row.active .tl-bar{background:#892f933d}.tl-bar:active{cursor:grabbing}.tl-bar-handle{position:absolute;right:-2px;top:-2px;bottom:-2px;width:9px;cursor:ew-resize}.tl-bar-handle:after{content:"";position:absolute;right:3px;top:3.5px;bottom:3.5px;width:2px;border-radius:1px;background:var(--accent);opacity:.7}.tl-playhead{position:absolute;top:6px;bottom:6px;width:1px;background:var(--accent);pointer-events:none;z-index:2}