:root{color-scheme:light;--bg: #f3efe6;--bg-panel: #fffdf8;--ink: #1c1914;--muted: #6b6458;--line: #d9d0c0;--accent: #0f6e56;--accent-ink: #f4fff9;--danger: #a33b2d;--warn: #8a6a12;--radius: 12px;--font: "Segoe UI", "Helvetica Neue", sans-serif;--mono: ui-monospace, "Cascadia Code", Consolas, monospace;--sidebar-width: 380px}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden}body{font-family:var(--font);background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}.app{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0;overflow:hidden}.topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg-panel) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;flex-shrink:0}.brand{display:flex;flex-direction:column;gap:2px}.brand strong{font-size:1.15rem;letter-spacing:-.02em}.brand span{color:var(--muted);font-size:.85rem}.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.btn{border:1px solid var(--line);background:var(--bg-panel);color:var(--ink);border-radius:999px;padding:8px 14px;cursor:pointer}.btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn-primary:hover:not(:disabled){filter:brightness(1.05)}.workspace{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0;height:100%;overflow:hidden}.layout{display:grid;grid-template-columns:minmax(0,var(--sidebar-width)) minmax(0,1fr);gap:0;min-height:0;min-width:0;height:100%;overflow:hidden}@media(max-width:960px){.layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,40%) minmax(0,1fr)}.sidebar{border-right:none;border-bottom:1px solid var(--line)}}.sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;max-width:100%;height:100%;border-right:1px solid var(--line);background:var(--bg-panel);overflow:hidden}.sidebar-top{flex-shrink:0;padding:16px 16px 12px;border-bottom:1px solid var(--line)}.sidebar-scroll{flex:1;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;padding:16px;scrollbar-width:none;-ms-overflow-style:none}.sidebar-scroll::-webkit-scrollbar{display:none;width:0;height:0}.preview-pane{height:100%;min-height:0;min-width:0;padding:20px;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-stage{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}.preview-frame{background-color:#cfc8ba;background-image:linear-gradient(45deg,#bbb3a4 25%,transparent 25%),linear-gradient(-45deg,#bbb3a4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bbb3a4 75%),linear-gradient(-45deg,transparent 75%,#bbb3a4 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px #1c19142e;max-width:100%;max-height:100%;flex-shrink:0;position:relative}.preview-meta{color:var(--muted);font-size:.85rem;font-family:var(--mono);text-align:center;flex-shrink:0}.type-tabs{display:flex;flex-wrap:wrap;gap:6px}.type-tab{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 10px;cursor:pointer;font-size:.82rem}.type-tab.active{background:var(--ink);color:var(--bg-panel);border-color:var(--ink)}.form-section{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:100%}.field{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:100%}.field label{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;color:var(--ink);width:100%;max-width:100%;min-width:0;box-sizing:border-box}.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-width:0;max-width:100%}.card{border:1px solid var(--line);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px;background:#fff;min-width:0;max-width:100%;overflow:hidden}.card-header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.9rem;font-weight:600;min-width:0}.list{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%}.hint{color:var(--muted);font-size:.85rem}.error{color:var(--danger);font-size:.85rem}.warn-banner{background:#fff6d8;border:1px solid #ead89a;color:var(--warn);padding:10px 12px;border-radius:8px;font-size:.9rem;margin-bottom:12px}.progress{min-width:120px;font-family:var(--mono);font-size:.85rem;color:var(--muted)}.image-field{display:flex;gap:10px;align-items:center;min-width:0;max-width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;box-sizing:border-box}.image-field-preview{width:56px;height:56px;flex-shrink:0;border-radius:8px;border:1px dashed var(--line);background:color-mix(in srgb,var(--bg) 70%,#fff);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:.68rem;text-align:center;line-height:1.2;padding:4px;box-sizing:border-box}.image-field.has-image .image-field-preview{border-style:solid;padding:0}.image-field-preview img{width:100%;height:100%;object-fit:cover;display:block}.image-field-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1}.image-field-pick{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0}.preview-frame-video{background-color:#111;background-image:none}.overlay-transform{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:4}.overlay-transform.active{pointer-events:auto}.overlay-transform-box{position:absolute;pointer-events:auto;cursor:move;box-sizing:content-box;border:none;outline:2px solid #5ee0b5;outline-offset:0;box-shadow:none;background:color-mix(in srgb,#5ee0b5 6%,transparent)}.overlay-transform-box.inactive{outline:none;background:transparent;cursor:pointer}.overlay-transform-label{position:absolute;left:50%;top:-24px;transform:translate(-50%);white-space:nowrap;font-size:.7rem;color:#f4fff9;background:#0f6e56eb;border-radius:999px;padding:2px 8px;pointer-events:none}.overlay-transform-handle{position:absolute;width:12px;height:12px;padding:0;border:2px solid #0f6e56;border-radius:2px;background:#f4fff9;box-shadow:0 1px 4px #00000059}.overlay-transform-handle.nw{left:0;top:0;transform:translate(-50%,-50%);cursor:nwse-resize}.overlay-transform-handle.ne{right:0;top:0;transform:translate(50%,-50%);cursor:nesw-resize}.overlay-transform-handle.sw{left:0;bottom:0;transform:translate(-50%,50%);cursor:nesw-resize}.overlay-transform-handle.se{right:0;bottom:0;transform:translate(50%,50%);cursor:nwse-resize}.overlay-guide{position:absolute;pointer-events:none;z-index:3;background:#ff4d6d;box-shadow:0 0 0 1px #ffffff59}.overlay-guide.vertical{width:1px;transform:translate(-50%)}.overlay-guide.horizontal{height:1px;transform:translateY(-50%)}.drop-video{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:min(860px,94%);min-height:min(520px,78%);height:min(560px,82%);padding:40px 32px;border:2px dashed var(--line);border-radius:calc(var(--radius) + 4px);background:color-mix(in srgb,var(--bg-panel) 80%,transparent);cursor:pointer;text-align:center}.drop-video.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg-panel))}.drop-video-compact{display:inline-flex;align-items:center;margin:0}.drop-video-compact.over{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 8%,#fff)}.drop-video strong{font-size:1.35rem}.drop-video span{color:var(--muted);font-size:1rem;max-width:28rem}.timeline{border-top:1px solid var(--line);background:var(--bg-panel);min-height:0;-webkit-user-select:none;user-select:none}.timeline-header{display:flex;justify-content:space-between;gap:12px;padding:8px 16px;font-size:.78rem;color:var(--muted);font-family:var(--mono);border-bottom:1px solid var(--line)}.timeline-scroll{overflow-x:auto;overflow-y:hidden;max-height:120px;scrollbar-width:none;-ms-overflow-style:none}.timeline-scroll::-webkit-scrollbar{display:none;width:0;height:0}.timeline-body{position:relative;min-width:100%}.timeline-lane{display:flex;min-height:28px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.timeline-lane.active{background:color-mix(in srgb,var(--accent) 8%,transparent)}.timeline-lane-label{flex-shrink:0;padding:4px 8px;font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-right:1px solid var(--line);background:var(--bg-panel);position:sticky;left:0;z-index:2}.timeline-lane-track{position:relative;height:28px;touch-action:none}.timeline-block,.timeline-clip{position:absolute;top:4px;height:20px;border-radius:6px;overflow:hidden}.timeline-block-video{background:#d7cbb6}.timeline-block-overlay{background:color-mix(in srgb,var(--accent) 35%,#fff);cursor:grab}.timeline-clip{display:flex;cursor:grab;overflow:visible;box-shadow:inset 0 0 0 1px #0000001f}.timeline-clip-packed{display:flex;flex-direction:row;align-items:stretch}.timeline-reveal{position:relative;display:flex;height:100%;flex-shrink:0;min-width:4px}.timeline-clip.selected{box-shadow:inset 0 0 0 2px var(--ink)}.timeline-seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;overflow:hidden;pointer-events:none}.timeline-seg.in{background:#1f8a6d;color:#f4fff9}.timeline-seg.hold{background:#c9b48a;color:#1c1914}.timeline-handle{position:absolute;top:0;width:10px;height:100%;padding:0;border:0;margin:0;transform:translate(-50%);background:#1c19148c;cursor:ew-resize;z-index:2}.timeline-handle.seam{border-radius:2px}.timeline-handle.end-seam{left:auto;right:0;transform:translate(50%);border-radius:2px;background:#1c1914b3}.timeline-handle:hover{background:var(--ink)}.timeline-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);pointer-events:none;z-index:3}.details summary{cursor:pointer;color:var(--muted);font-size:.85rem;margin-bottom:8px}
