:root{color-scheme:light;--bg:#f4f6fb;--card:#fff;--text:#132137;--muted:#506078;--line:#d9e1ee;--blue:#2454e6;--light:#edf2ff}*{box-sizing:border-box}html{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer;background:var(--card);color:var(--text);border:1px solid #aabbd9;border-radius:10px;padding:.52rem .7rem}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #77a2ff;outline-offset:2px}button:disabled{opacity:.48;cursor:not-allowed}button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}input,select{width:100%;border:1px solid #b5c1d5;border-radius:10px;padding:.45rem .55rem;min-width:0;background:white;color:#15243c}label{display:block;font-size:.87rem;font-weight:650;margin:.36rem 0}.header,main,footer{max-width:1370px;margin:auto;padding:16px clamp(12px,3vw,32px)}.header{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.header h1{font-size:clamp(1.75rem,3vw,2.6rem);margin:.2rem 0}.eyebrow{font-size:.82rem;color:var(--muted);margin:0}.header p{margin:.2rem 0;color:var(--muted)}nav{display:flex;flex-wrap:wrap;gap:8px}nav a{display:inline-block;color:var(--blue);border:1px solid var(--line);padding:.45rem .6rem;border-radius:8px;text-decoration:none;background:white}.notice{border:1px solid #e6c77d;border-radius:12px;background:#fff7e5;padding:12px;margin:0 0 16px;font-weight:600}.workspace{display:grid;grid-template-columns:minmax(360px,1.1fr) minmax(330px,.9fr);gap:16px;align-items:start}.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(12px,2vw,20px);min-width:0}.panel h2{font-size:1.35rem;margin:.1rem 0 14px}.panel h3{font-size:1.1rem;margin:20px 0 8px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-head h3{margin:20px 0 12px}.timeline{display:grid;gap:10px}.track{padding:12px;border:1px solid var(--line);background:#f9fbff;border-radius:12px}.track-header{display:flex;align-items:center;gap:9px;justify-content:space-between;margin-bottom:8px}.track-header strong{font-size:.9rem}.track-fields{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:8px}.track-actions{display:flex;gap:6px;flex-wrap:wrap}.track-actions button{padding:.26rem .52rem;font-size:.85rem}.track-easing{margin-top:8px}.duration{font-weight:650}.controls{display:flex;gap:8px;flex-wrap:wrap}.preset-grid{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:end}.preset-grid label{grid-column:1/-1;margin:0}.preset-grid #preset-name{grid-column:1/2}.preset-grid #preset-picker{grid-column:1/2}.preview-panel{position:sticky;top:10px}.stage{min-height:270px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(145deg,#eaf0ff,#fff 55%,#eef3ff);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px;text-align:center}.studio-layer,.studio-target{display:inline-block;transform-origin:50% 50%;white-space:normal;max-width:100%}.studio-target{font-weight:800;font-size:clamp(28px,4vw,56px);color:#2454e6;overflow-wrap:anywhere}#status{color:var(--muted);min-height:1.6em}.export-panel{margin-top:20px;border-top:1px solid var(--line);padding-top:8px}.export-panel p{color:var(--muted)}#export-output{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;background:#f6f9ff;padding:10px;border-radius:10px;border:1px solid var(--line)}#export-download{margin-left:6px}footer{color:var(--muted);font-size:.85rem}@media(max-width:800px){.workspace{display:block}.panel{margin-bottom:14px}.preview-panel{position:static}.stage{min-height:210px}.track-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.track-effect{grid-column:1/-1}.header{align-items:flex-start}.header p{max-width:32ch}}@media(max-width:380px){.track-actions button{font-size:.8rem;padding:.25rem .4rem}.preset-grid{grid-template-columns:1fr 1fr}.preset-grid input,.preset-grid select{grid-column:1/-1!important}.stage{padding:12px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.track-ruler{height:12px;position:relative;border-radius:999px;background:repeating-linear-gradient(90deg,#edf2fd 0,#edf2fd calc(10% - 1px),#c7d4ed calc(10% - 1px),#c7d4ed 10%);overflow:hidden;margin-top:12px}.track-bar{height:100%;min-width:4px;position:absolute;top:0;left:0;background:#375fe4;border-radius:999px}.studio-layer{transform-origin:center center}

.export-files{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.export-files[hidden]{display:none!important}.export-files button{min-width:0;overflow-wrap:anywhere;white-space:normal}