:root{color-scheme:dark;--app: #0c1113;--panel: #12181b;--panel-alt: #171f22;--raised: #20292c;--hover: #273236;--border: #303b3f;--border-strong: #49575b;--text: #f0f3ef;--muted: #93a09e;--faint: #697674;--accent: #ff665b;--accent-ink: #220604;--focus: #78d9b7;--yellow: #e6c854}*{box-sizing:border-box;letter-spacing:0}html,body,#app{min-width:0;height:100%;margin:0;overflow:hidden}body{background:var(--app);color:var(--text);font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px}body.tuner-open,body.preset-open{overflow:hidden}button,input,select,textarea{color:inherit;font:inherit}button,select,input,textarea{outline:none}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{box-shadow:0 0 0 2px var(--focus)}button{border:0}[hidden]{display:none!important}.demo-app{display:flex;height:100dvh;flex-direction:column;overflow:hidden;background:var(--app)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;flex:0 0 64px;padding:0 18px;border-bottom:1px solid var(--border);background:#101619}.brand-block{display:flex;min-width:0;align-items:center;gap:11px}.brand-icon{display:grid;flex:0 0 auto;place-items:center;width:36px;height:36px;border:1px solid #5a2724;border-radius:6px;background:var(--accent);color:var(--accent-ink)}.brand-block h1,.brand-block p,.panel-title-row h2,.stage-copy h2,.control-section h3,.control-section h4{margin:0}.brand-block h1{overflow:hidden;font-size:15px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.brand-block p{margin-top:2px;color:var(--muted);font-size:11px}.header-actions{display:flex;flex:0 0 auto;align-items:center;gap:7px}.count-label{color:var(--muted);font-size:11px;font-weight:650}.preset-count-row{padding:0 7px 11px}.header-action-button{display:inline-flex;height:30px;padding:0 10px;align-items:center;gap:6px;border:1px solid var(--border-strong);border-radius:5px;background:var(--panel-alt);color:var(--muted);font:inherit;font-size:10px;font-weight:680;text-decoration:none;cursor:pointer}.header-action-button:hover{border-color:#697a80;color:var(--text)}.header-action-button[aria-disabled=true]{opacity:.35;cursor:not-allowed}.workspace{display:grid;flex:1 1 auto;grid-template-columns:224px minmax(480px,1fr) 340px;min-height:0;overflow:hidden}.preset-panel,.inspector{min-width:0;background:var(--panel)}.preset-panel{height:100%;padding:17px 10px;border-right:1px solid var(--border);overflow-y:auto}.panel-title-row,.stage-toolbar,.source-heading,.range-label,.toggle-heading,.color-field,.color-field>div,.section-heading-with-icon{display:flex;align-items:center}.panel-title-row,.stage-toolbar,.source-heading,.range-label,.toggle-heading,.color-field{justify-content:space-between}.section-kicker{display:block;margin-bottom:3px;color:var(--faint);font-size:9px;font-weight:800;text-transform:uppercase}.panel-title-row{padding:0 7px 12px}.panel-icon-button,.dialog-icon-button,.preset-action-button{display:grid;padding:0;place-items:center;border:1px solid var(--border);background:var(--panel-alt);color:var(--muted);cursor:pointer}.panel-icon-button{width:25px;height:25px;border-radius:4px;text-decoration:none}.panel-icon-button:hover,.dialog-icon-button:hover,.preset-action-button:hover{border-color:var(--border-strong);color:var(--text)}.panel-icon-button:disabled,.panel-icon-button[aria-disabled=true]{opacity:.35;cursor:not-allowed}.panel-title-row h2,.stage-copy h2{font-size:15px;font-weight:720}.preset-list{display:flex;flex-direction:column;gap:5px}.preset-io-message{margin:0 2px 9px;padding:7px 8px;border:1px solid #356a59;border-radius:5px;background:#142a24;color:#9ee5ca;font-size:9px;line-height:1.35;overflow-wrap:anywhere}.preset-io-message[data-tone=error]{border-color:#7c3835;background:#321b1b;color:#ffaaa3}.preset-item{display:grid;grid-template-columns:minmax(0,1fr) 27px;width:100%;min-height:68px;border:1px solid transparent;border-radius:6px;background:transparent;overflow:hidden}.preset-item:hover{background:var(--panel-alt)}.preset-item.active{border-color:var(--focus);background:var(--raised)}.preset-item.legacy{border-color:var(--border);border-style:dashed;background:color-mix(in srgb,var(--panel-alt) 45%,transparent)}.preset-item.legacy:hover{background:color-mix(in srgb,var(--panel-alt) 45%,transparent)}.preset-item.legacy .preset-select{cursor:default}.preset-item.legacy .preset-preview{filter:saturate(.35);opacity:.62}.preset-item.legacy .preset-details strong,.preset-item.legacy .preset-details small,.preset-item.legacy .preset-details em{color:var(--faint)}.preset-select{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;min-width:0;padding:7px;background:transparent;text-align:left;cursor:pointer}.preset-item-actions{display:flex;padding-right:5px;align-items:center;flex-direction:column;justify-content:center;gap:4px}.preset-action-button{width:22px;height:22px;border-color:transparent;border-radius:4px;background:transparent}.preset-action-button.danger:hover{border-color:#7c3835;background:#321b1b;color:#ff8b83}.preset-action-button.restore:hover{border-color:#386a58;background:#142a24;color:#9ee5ca}.preset-preview{display:flex;place-items:center;align-items:center;justify-content:center;width:52px;height:52px;overflow:hidden;border:1px solid var(--border-strong);border-radius:5px;background:var(--preset-bg);font-size:20px}.preset-preview>span{display:inline-grid;min-width:16px;min-height:27px;padding:0 1px;place-items:center;line-height:1}.preset-details{display:block;min-width:0;align-self:center}.preset-details strong,.preset-details small,.preset-details em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preset-details strong{font-size:12px;font-weight:700}.preset-details small{margin-top:3px;color:var(--muted);font-size:10px}.preset-details em{margin-top:5px;color:var(--focus);font-size:9px;font-style:normal;font-weight:700}.preset-legacy-label{display:inline-block;margin-top:5px;padding:2px 4px;border:1px solid var(--border-strong);border-radius:3px;color:var(--faint);font-size:8px;font-weight:800}.preset-list-divider{margin:9px 7px 2px;padding-top:10px;border-top:1px solid var(--border);color:var(--faint);font-size:9px;font-weight:800;text-transform:uppercase}.preset-empty{display:grid;min-height:96px;place-items:center;border:1px dashed var(--border);border-radius:6px;color:var(--faint);font-size:11px}.preset-modal{position:fixed;z-index:120;top:0;right:0;bottom:0;left:0;display:grid;padding:20px;place-items:center;background:#030708c7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.preset-dialog{width:min(440px,calc(100vw - 40px));border:1px solid var(--border-strong);border-radius:7px;background:#111719;box-shadow:0 24px 80px #0000007a;overflow:hidden}.preset-dialog.compact{width:min(400px,calc(100vw - 40px))}.preset-dialog-header{display:flex;min-height:62px;padding:12px 14px 11px 16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:#0e1416}.preset-dialog-header h2{margin:0;font-size:15px}.dialog-icon-button{width:28px;height:28px;border-radius:4px}.preset-dialog-body{display:grid;padding:16px;gap:7px}.preset-dialog-body label{margin-top:8px;color:var(--muted);font-size:10px;font-weight:650}.preset-dialog-body label:first-child{margin-top:0}.preset-dialog-body input,.preset-dialog-body textarea{width:100%;border:1px solid var(--border);border-radius:5px;background:#0c1214;color:var(--text)}.preset-dialog-body input{height:36px;padding:0 10px}.preset-dialog-body input[readonly]{color:var(--faint);cursor:not-allowed}.preset-dialog-body small{color:var(--faint);font-size:9px}.preset-form-error{margin:5px 0 0;color:#ff8b83;font-size:10px;line-height:1.4}.preset-dialog-actions{display:flex;padding:12px 16px 16px;align-items:center;justify-content:flex-end;gap:8px}.preset-dialog-actions button{min-width:72px;height:34px;padding:0 14px;border:1px solid var(--border-strong);border-radius:5px;cursor:pointer}.secondary-button{background:var(--panel-alt);color:var(--muted)}.primary-button{border-color:var(--accent)!important;background:var(--accent);color:var(--accent-ink);font-weight:700}.danger-button{border-color:#89413d!important;background:#4b2422;color:#ffc0bb}.delete-copy p{margin:2px 0 4px;font-size:12px;line-height:1.5}.delete-copy code{color:var(--faint);font-family:ui-monospace,monospace;font-size:10px}.stage-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;height:100%;min-width:0;min-height:0;padding:17px 20px 18px;overflow:hidden;background:#0e1416}.stage-toolbar{min-height:38px;margin-bottom:11px}.stage-actions{display:flex;flex:0 0 auto;align-items:center;gap:12px}.stage-copy{min-width:0}.stage-copy h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.runtime-metrics{display:flex;flex:0 0 auto;align-items:center;gap:8px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.runtime-metrics span+span:before{margin-right:8px;color:var(--border-strong);content:"/"}.canvas-stage{display:grid;min-height:0;place-items:center;container-type:size}.canvas-frame{--canvas-aspect: 1.7777778;position:relative;width:min(100cqw,calc(100cqh * var(--canvas-aspect)));overflow:hidden;border:1px solid var(--border-strong);border-radius:6px;aspect-ratio:var(--canvas-aspect);background:#10171a}.canvas-frame[data-orientation=portrait]{--canvas-aspect: .5625}#text-effect-canvas{display:block;width:100%;height:100%}.canvas-engine-state{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0c1113d6;color:var(--muted);font-size:12px}.transport{display:grid;grid-template-columns:36px 36px 36px 70px minmax(100px,1fr) 70px;gap:8px;align-items:center;min-height:54px}.icon-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:6px;background:var(--raised);cursor:pointer}.icon-button:hover{border-color:var(--border-strong);background:var(--hover)}.icon-button.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.icon-button.active{border-color:var(--focus);background:#18372f;color:var(--focus)}.timecode{color:var(--muted);font-family:ui-monospace,monospace;font-size:10px;font-variant-numeric:tabular-nums;text-align:center}input[type=range]{width:100%;height:18px;margin:0;padding:0;background:transparent;cursor:pointer;accent-color:var(--accent)}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:0;background:#3b474b}input[type=range]::-webkit-slider-thumb{width:13px;height:13px;margin-top:-5px;border:2px solid #101619;border-radius:50%;background:var(--accent);-webkit-appearance:none}.source-editor{padding-top:13px;border-top:1px solid var(--border)}.source-heading{margin-bottom:7px}.source-heading label{font-size:11px;font-weight:680}.source-heading span{color:var(--faint);font-size:9px}textarea,select{width:100%;border:1px solid var(--border);border-radius:5px;background:#0c1214}textarea{min-height:72px;max-height:132px;padding:9px 10px;color:#d9dfdc;font-size:11px;line-height:1.45;resize:none}textarea:hover,select:hover{border-color:var(--border-strong)}.source-timing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.timing-control{min-width:0}.timing-label{display:block;margin-bottom:6px;color:var(--muted);font-size:10px;font-weight:650}.inspector{display:flex;height:100%;min-height:0;flex-direction:column;overflow:hidden;border-left:1px solid var(--border)}.inspector-tabs{display:grid;grid-template-columns:1fr 1fr;flex:0 0 auto;height:50px;border-bottom:1px solid var(--border)}.inspector-tab{display:flex;align-items:center;justify-content:center;gap:7px;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer}.inspector-tab:hover{background:var(--panel-alt);color:var(--text)}.inspector-tab.active{border-bottom-color:var(--accent);color:var(--text)}.inspector-scroll{flex:1 1 auto;min-height:0;overflow-y:auto}.inspector-page{display:none}.inspector-page.active{display:block}.control-section{padding:17px 16px 19px;border-top:1px solid var(--border)}.control-section.first{border-top:0}.control-section h3{font-size:12px;font-weight:730}.control-section h4{font-size:11px;font-weight:680}.field-label,.range-label,.color-field{color:var(--muted);font-size:10px}.field-label{display:block;margin:15px 0 7px}select{height:34px;padding:0 9px;color:var(--text);font-size:11px}#font-family,#font-family option{font-size:13px}.range-label{margin-top:15px;margin-bottom:3px}.range-label.compact{margin-top:2px}.range-label output,.color-field output{color:var(--text);font-family:ui-monospace,monospace;font-size:9px;font-variant-numeric:tabular-nums}.color-field{min-height:32px;margin-top:10px}.color-field>div{gap:7px}input[type=color]{width:28px;height:24px;padding:2px;border:1px solid var(--border-strong);border-radius:4px;background:var(--panel-alt);cursor:pointer}.alpha-color-control{position:relative;display:inline-flex}.alpha-color-trigger{display:grid;width:30px;height:26px;padding:3px;place-items:stretch;border:1px solid var(--border-strong);border-radius:4px;background:#d7dcdd;cursor:pointer}.alpha-color-trigger>span{border-radius:2px;background:var(--alpha-color, #000000)}.alpha-color-popover{position:absolute;z-index:30;top:31px;right:0;width:184px;padding:10px;border:1px solid var(--border-strong);border-radius:6px;background:#11191c;box-shadow:0 12px 30px #0006}.alpha-color-popover[hidden]{display:none}.alpha-color-popover label{display:grid;grid-template-columns:52px minmax(0,1fr) auto;min-height:28px;align-items:center;gap:7px;color:var(--muted);font-size:10px}.alpha-color-popover input[type=color]{width:100%;height:26px;grid-column:2 / 4}.alpha-color-popover input[type=range]{min-width:0}.alpha-color-popover output{min-width:31px;color:var(--text);font-family:ui-monospace,monospace;font-size:9px;text-align:right}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:2px}.toggle-heading{min-height:25px}.toggle-heading.compact{min-height:22px}.switch{position:relative;display:inline-flex;width:34px;height:20px;cursor:pointer}.switch input{position:absolute;width:1px;height:1px;opacity:0}.switch span{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--border-strong);border-radius:10px;background:#222b2e}.switch span:after{position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#8f9a98;content:"";transition:transform .14s ease,background-color .14s ease}.switch input:checked+span{border-color:var(--focus);background:#18372f}.switch input:checked+span:after{background:var(--focus);transform:translate(14px)}.switch input:focus-visible+span{box-shadow:0 0 0 2px var(--focus)}.dependent-controls{transition:opacity .12s ease}.dependent-controls.disabled{opacity:.34}.range-pair{display:grid;grid-template-columns:1fr 1fr;gap:13px}.section-heading-with-icon{gap:7px;margin-bottom:3px}.section-heading-with-icon span{display:grid;place-items:center;color:var(--focus)}.segmented{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;height:32px;padding:2px;border:1px solid var(--border);border-radius:5px;background:#0d1315}.segmented button{min-width:0;padding:0 7px;border-radius:3px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;white-space:nowrap}.segmented button:hover{color:var(--text)}.segmented button.active{background:var(--raised);color:var(--text)}.orientation-control{width:70px;height:30px}.orientation-control button{display:grid;place-items:center;padding:0}.animation-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.animation-grid button{min-width:0;min-height:61px;padding:9px 10px;border:1px solid var(--border);border-radius:6px;background:#0e1416;text-align:left;cursor:pointer}.animation-grid button:hover{border-color:var(--border-strong);background:var(--panel-alt)}.animation-grid button.active{border-color:var(--accent);background:#2c1d1d}.animation-grid strong,.animation-grid span{display:block;overflow-wrap:anywhere}.animation-grid strong{font-size:11px}.animation-grid span{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.3}.animation-options{margin-top:15px;padding-top:14px;border-top:1px solid var(--border)}.animation-options>.field-label{margin-top:0}.tuner-launch{display:flex;width:100%;height:34px;margin-top:14px;align-items:center;justify-content:center;gap:7px;border:1px solid var(--border-strong);border-radius:5px;background:var(--raised);color:var(--text);font-size:10px;cursor:pointer}.tuner-launch:hover{border-color:var(--focus)}.animation-tuner{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;display:grid;padding:24px;place-items:center;background:#030708c7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.animation-tuner[hidden]{display:none}.tuner-modal-shell{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(1080px,calc(100vw - 48px));height:min(700px,calc(100dvh - 48px));border:1px solid var(--border-strong);border-radius:7px;background:#111719;box-shadow:0 24px 80px #0000007a;overflow:hidden}.tuner-modal-header{display:flex;min-height:62px;padding:12px 14px 11px 16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:#0e1416}.tuner-modal-header h2{font-size:15px}.tuner-modal-header .section-kicker{margin-bottom:2px}.tuner-modal-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:0}.tuner-preview-pane{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;padding:18px}.tuner-preview-heading{display:flex;margin-bottom:10px;align-items:baseline;justify-content:space-between}.tuner-preview-heading span{color:var(--faint);font-size:9px;font-weight:800}.tuner-preview-heading strong{color:var(--muted);font-size:10px;font-weight:650;text-transform:uppercase}.tuner-canvas-frame{display:grid;min-height:0;place-items:center;overflow:hidden}#tuner-preview-canvas{display:block;width:100%;max-height:100%;aspect-ratio:16 / 9;object-fit:contain}.tuner-transport{display:grid;grid-template-columns:36px 36px 68px minmax(100px,1fr) 68px;gap:8px;margin-top:12px;align-items:center}.tuner-transport time{color:var(--muted);font-family:ui-monospace,monospace;font-size:9px;font-variant-numeric:tabular-nums;text-align:center}.tuner-controls-pane{min-height:0;padding:17px 16px 22px;border-left:1px solid var(--border);overflow-y:auto}.tuner-heading{display:flex;align-items:center;justify-content:space-between}.tuner-heading output{color:var(--faint);font-family:ui-monospace,monospace;font-size:9px}.tuner-heading h3 span,.tuner-group-title span,.tuner-controls .range-label label span{color:var(--faint);font-weight:550}.tuner-heading h3 span{margin-left:4px;font-size:9px}.tuner-heading-actions{display:flex;align-items:center;gap:7px}.tuner-icon-button{display:grid;width:26px;height:26px;padding:0;place-items:center;border:1px solid var(--border-strong);border-radius:4px;background:var(--panel-alt);color:var(--muted);cursor:pointer}.tuner-icon-button:hover{color:var(--text)}.tuner-track{display:grid;gap:2px;width:100%;height:28px;margin-top:10px;padding:3px;border:1px solid var(--border);border-radius:4px;background:#0b1012;overflow:hidden}.tuner-segment{display:grid;min-width:0;place-items:center;color:#0b1112;font-size:8px;font-weight:800;overflow:hidden}.tuner-segment.enter{background:#7bd8ba}.tuner-segment.settle{background:#f0c65a}.tuner-segment.hold{background:#647176;color:#eef4f1}.tuner-segment.exit{background:#ff7067}.tuner-controls{margin-top:5px}.tuner-group-title{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--border);color:var(--text);font-size:10px;font-weight:720}.tuner-group-title:first-child{margin-top:12px;padding-top:0;border-top:0}.tuner-group-title span{margin-left:4px;font-size:8px}.tuner-controls .range-label label span{margin-left:3px;font-size:8px}.tuner-group-title+.ease-pair{margin-top:10px}.ease-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.ease-pair label,.ease-field{display:grid;gap:5px;color:var(--muted);font-size:9px}.ease-field{margin-top:9px}.ease-input{width:100%;min-width:0;height:30px;padding:0 8px;border:1px solid var(--border-strong);border-radius:4px;background:#0c1214;color:var(--text);font-family:ui-monospace,monospace;font-size:9px}.substyle-group{padding:12px 0;border-top:1px solid var(--border)}.substyle-group:first-child{padding-top:0;border-top:0}@media (max-width: 1120px){.workspace{grid-template-columns:190px minmax(430px,1fr) 310px}.preset-select{grid-template-columns:44px minmax(0,1fr)}.preset-preview{width:44px;height:48px}.stage-panel{padding-inline:14px}}@media (max-width: 900px){html,body,#app{height:auto;min-height:100%;overflow:visible}.demo-app{height:auto;min-height:100dvh;overflow:visible}.app-header{height:auto;min-height:64px;padding-block:10px}.workspace{display:flex;min-height:0;flex-direction:column;overflow:visible}.stage-panel{display:block;height:auto;order:1;overflow:visible}.canvas-stage{display:block;container-type:normal}.canvas-frame{width:100%}.preset-panel{height:auto;order:2;overflow:visible;border-top:1px solid var(--border);border-right:0}.preset-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.inspector{height:auto;order:3;overflow:visible;border-top:1px solid var(--border);border-left:0}.inspector-scroll{overflow:visible}.animation-tuner{padding:12px}.tuner-modal-shell{width:calc(100vw - 24px);height:calc(100dvh - 24px);overflow-y:auto}.tuner-modal-body{display:block}.tuner-preview-pane{min-height:390px}.tuner-controls-pane{border-top:1px solid var(--border);border-left:0;overflow:visible}}@media (max-width: 560px){.header-action-button{width:30px;padding:0;justify-content:center}.header-action-button>span:last-child{display:none}.stage-panel{padding:12px}.runtime-metrics{align-items:flex-end;flex-direction:column;gap:2px}.runtime-metrics span+span:before{display:none}.transport{grid-template-columns:36px 36px 36px minmax(0,1fr) 64px;gap:6px}.transport .timecode:first-of-type{display:none}.source-timing,.preset-list,.animation-grid{grid-template-columns:1fr}.tuner-preview-pane{min-height:300px;padding:12px}.tuner-transport{grid-template-columns:36px 36px minmax(80px,1fr) 58px}.tuner-transport time:first-of-type{display:none}}