:root{--c-bg:#f1f5f9;--c-surface:#fff;--c-border:#dbe3ee;--c-text:#0f172a;--c-muted:#64748b;--c-primary:#2563eb;--c-primary-dark:#1d4ed8;--c-primary-soft:#dbeafe;--c-danger:#dc2626;--c-danger-soft:#fee2e2;--c-success:#16a34a;--c-video:#3b82f6;--c-caption:#f59e0b;--c-audio:#10b981;--c-preview-bg:#0b1220;--radius:10px;--tap:44px;--header-h:60px;--timeline-h:284px;--side-w:92px;--panel-w:340px;color:var(--c-text);background:var(--c-bg);-webkit-text-size-adjust:100%;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic UI,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{overscroll-behavior:none;overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.4}:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}.btn{min-height:var(--tap);border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);white-space:nowrap;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:15px;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--c-primary)}.btn-primary{background:var(--c-primary);border-color:var(--c-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--c-primary-dark)}.btn-danger{color:var(--c-danger)}.btn-danger:hover:not(:disabled){border-color:var(--c-danger);background:var(--c-danger-soft)}.btn-record{background:var(--c-danger);border-color:var(--c-danger);color:#fff}.btn-ghost{background:0 0;border-color:#0000}.btn-block{width:100%}.btn-lg{min-height:56px;font-size:17px}.btn.is-active{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary-dark)}.chip-row{flex-wrap:wrap;gap:6px;display:flex}.chip{min-height:var(--tap);border:1px solid var(--c-border);background:var(--c-surface);border-radius:999px;min-width:56px;padding:0 10px;font-weight:600}.chip.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}.app{grid-template-rows:var(--header-h) minmax(0, 1fr) var(--timeline-h);grid-template-columns:var(--side-w) minmax(0, 1fr) var(--panel-w);grid-template-areas:"header header header""tools preview panel""timeline timeline timeline";height:100%;display:grid}.app.is-dragover:after{content:"ここに動画をドロップして追加";z-index:100;border:4px dashed var(--c-primary);color:var(--c-primary-dark);pointer-events:none;background:#2563eb33;place-items:center;font-size:24px;font-weight:700;display:grid;position:fixed;inset:0}.header{background:var(--c-surface);border-bottom:1px solid var(--c-border);grid-area:header;align-items:center;gap:8px;min-width:0;padding:0 12px;display:flex}.header-name{background:0 0;border:1px solid #0000;border-radius:8px;flex:200px;min-width:80px;max-width:360px;min-height:40px;padding:0 10px;font-size:16px;font-weight:700}.header-name:hover,.header-name:focus{border-color:var(--c-border);background:var(--c-bg)}.header-group{align-items:center;gap:6px;display:flex}.header-spacer{flex:1}.save-status{color:var(--c-muted);white-space:nowrap;font-size:12px}.save-status.is-error{color:var(--c-danger)}.toolbar{background:var(--c-surface);border-right:1px solid var(--c-border);flex-direction:column;grid-area:tools;gap:2px;padding:8px 6px;display:flex;overflow-y:auto}.tool{min-height:var(--tap);border-radius:var(--radius);max-height:64px;color:var(--c-text);background:0 0;border:1px solid #0000;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:2px;padding:2px;font-size:12px;font-weight:600;display:flex}.tool:hover:not(:disabled){background:var(--c-bg)}.tool.is-active{background:var(--c-primary-soft);border-color:var(--c-primary);color:var(--c-primary-dark)}.tool-sep{background:var(--c-border);flex:none;height:1px;margin:4px 6px}@media (height<=900px) and (width>=1024px){.toolbar{gap:0;padding:4px 6px}.tool{font-size:11px}.tool svg{width:20px;height:20px}.tool-sep{margin:2px 6px}}.preview{background:var(--c-preview-bg);flex-direction:column;grid-area:preview;min-width:0;min-height:0;display:flex}.preview-stage{flex:1;justify-content:center;align-items:center;min-height:0;padding:12px;display:flex;position:relative}.preview-canvas{touch-action:none;background:#000;border-radius:4px;width:auto;max-width:100%;height:auto;max-height:100%}.preview-canvas.is-dragging{cursor:grabbing}.preview-controls{color:#e2e8f0;background:#111a2e;align-items:center;gap:10px;padding:8px 12px;display:flex}.preview-controls .btn{color:#fff;background:0 0;border-color:#334155}.play-btn{background:var(--c-primary);color:#fff;border:none;border-radius:50%;flex:none;place-items:center;width:52px;height:52px;display:grid}.time-display{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}.seek-bar{min-width:60px;height:var(--tap);accent-color:var(--c-primary);flex:1}.preview-hint{color:#fff;pointer-events:none;white-space:nowrap;background:#0f172acc;border-radius:999px;padding:6px 12px;font-size:13px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.preview:fullscreen{width:100%;height:100%}.preview:fullscreen{width:100%;height:100%}.empty-state{color:#cbd5e1;text-align:center;border:2px dashed #334155;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:16px;display:flex;position:absolute;inset:12px}.empty-state h2{color:#fff;margin:0;font-size:22px}.empty-state p{margin:0;font-size:14px}.empty-state .btn:not(.btn-primary){color:var(--c-text)}.empty-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.panel{background:var(--c-surface);border-left:1px solid var(--c-border);grid-area:panel;min-height:0;padding:14px 16px 24px;overflow-y:auto}.panel h3{align-items:center;gap:8px;margin:0 0 4px;font-size:17px;display:flex}.panel .lead{color:var(--c-muted);margin:0 0 14px;font-size:13px;line-height:1.6}.field{margin-bottom:16px}.field-label{color:#334155;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px;font-weight:700;display:flex}.field-value{font-variant-numeric:tabular-nums;color:var(--c-primary-dark)}.range{width:100%;height:var(--tap);accent-color:var(--c-primary)}.text-input,.textarea,.select,.num-input{width:100%;min-height:var(--tap);border:1px solid var(--c-border);background:#fff;border-radius:8px;padding:8px 10px;font-size:16px}.textarea{resize:vertical;min-height:84px;line-height:1.5}.num-input{text-align:right;font-variant-numeric:tabular-nums;width:96px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row>.grow{flex:1}.divider{background:var(--c-border);height:1px;margin:16px 0}.swatches{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.swatch{border:2px solid var(--c-border);border-radius:50%;width:36px;height:36px;padding:0}.swatch.is-active{outline:3px solid var(--c-primary);outline-offset:2px}.color-input{border:1px solid var(--c-border);background:0 0;border-radius:8px;width:44px;height:40px;padding:0}.checkbox{min-height:var(--tap);align-items:center;gap:10px;font-size:15px;display:flex}.checkbox input{width:22px;height:22px;accent-color:var(--c-primary)}.badge{background:var(--c-primary-soft);color:var(--c-primary-dark);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}.note{color:var(--c-muted);margin:6px 0 0;font-size:12px;line-height:1.6}.zoom-map{touch-action:none;-webkit-user-select:none;user-select:none;background:#000 50%/cover no-repeat;border-radius:8px;width:100%;position:relative;overflow:hidden}.zoom-map-rect{cursor:grab;border:3px solid #fff;border-radius:4px;position:absolute;box-shadow:0 0 0 9999px #00000080}.record-script{border-radius:var(--radius);color:#fff;text-align:center;white-space:pre-wrap;background:#0f172a;justify-content:center;align-items:center;min-height:96px;padding:16px;font-size:22px;font-weight:700;line-height:1.6;display:flex}.record-status{text-align:center;margin:12px 0;font-size:15px;font-weight:700}.record-dot{background:var(--c-danger);border-radius:50%;width:12px;height:12px;margin-right:8px;animation:1s infinite blink;display:inline-block}.countdown{color:var(--c-danger);text-align:center;font-size:64px;font-weight:800}@keyframes blink{50%{opacity:.2}}.timeline{background:var(--c-surface);border-top:1px solid var(--c-border);flex-direction:column;grid-area:timeline;min-width:0;display:flex}.timeline-bar{border-bottom:1px solid var(--c-border);align-items:center;gap:8px;padding:6px 10px;display:flex}.timeline-bar .btn{min-height:40px;padding:0 10px}.timeline-body{flex:1;min-height:0;display:flex}.track-labels{border-right:1px solid var(--c-border);background:#f8fafc;flex:none;width:84px}.track-label{color:#334155;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:700;display:flex}.timeline-scroll{-webkit-overflow-scrolling:touch;flex:1;position:relative;overflow:auto hidden}.timeline-content{height:100%;position:relative}.ruler{border-bottom:1px solid var(--c-border);touch-action:none;cursor:pointer;background:#f8fafc;height:30px;position:relative}.ruler-tick{color:var(--c-muted);white-space:nowrap;border-left:1px solid #cbd5e1;padding:12px 0 0 4px;font-size:11px;position:absolute;top:0;bottom:0}.ruler-tick.is-minor{padding:0;top:20px}.track{border-bottom:1px solid #eef2f7;position:relative}.track-video{height:72px}.track-caption,.track-audio{height:50px}.track-label.track-video{height:72px}.track-label.track-caption,.track-label.track-audio{height:50px}.track-label.ruler-space{border-bottom:1px solid var(--c-border);height:30px}.track-out{pointer-events:none;background:repeating-linear-gradient(45deg,#f1f5f9,#f1f5f9 6px,#e2e8f0 6px 12px);position:absolute;top:0;bottom:0}.item{color:#fff;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y;cursor:pointer;border:2px solid #0000;border-radius:8px;align-items:center;font-size:12px;font-weight:700;display:flex;position:absolute;top:6px;bottom:6px;overflow:hidden}.item.is-selected{touch-action:none;cursor:grab;z-index:2;border-color:#1e3a8a;box-shadow:0 0 0 3px #2563eb73}.item.is-dragging{opacity:.85;z-index:5;cursor:grabbing;box-shadow:0 6px 18px #0f172a59}.item-video{background-color:var(--c-video);background-repeat:repeat-x;background-size:auto 100%}.item-caption{background:var(--c-caption);color:#1f2937}.item-audio{background:var(--c-audio)}.item-label{color:#fff;white-space:nowrap;text-overflow:ellipsis;background:#0f172a8c;border-radius:6px;align-items:center;gap:4px;max-width:calc(100% - 8px);margin:0 4px;padding:2px 8px;display:inline-flex;overflow:hidden}.item-caption .item-label{color:#1f2937;background:#fff9}.handle{z-index:3;touch-action:none;cursor:ew-resize;background:#1e3a8a;place-items:center;width:22px;display:grid;position:absolute;top:0;bottom:0}.handle:after{content:"";background:#fff;border-radius:2px;width:4px;height:40%}.handle-start{left:0}.handle-end{right:0}.drop-indicator{background:var(--c-danger);z-index:6;pointer-events:none;border-radius:2px;width:4px;margin-left:-2px;position:absolute;top:2px;bottom:2px}.playhead{background:var(--c-danger);z-index:8;pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.playhead-grip{z-index:9;background:var(--c-danger);clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);pointer-events:auto;touch-action:none;cursor:ew-resize;width:24px;height:30px;position:absolute;top:0;left:-11px}.modal-backdrop{z-index:50;background:#0f172a8c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--c-surface);border-radius:16px;width:min(560px,100%);max-height:calc(100% - 32px);padding:20px;overflow-y:auto;box-shadow:0 20px 50px #0000004d}.modal h2{margin:0 0 12px;font-size:20px}.modal-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px;display:flex}.camera-view{aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:10px;width:100%;transform:scaleX(-1)}.progress{background:var(--c-bg);border-radius:999px;height:14px;overflow:hidden}.progress>div{background:var(--c-primary);height:100%;transition:width .2s}.toasts{left:calc(var(--side-w) + 16px);bottom:calc(var(--timeline-h) + 84px);z-index:60;flex-direction:column;gap:8px;max-width:min(420px,100% - 32px);display:flex;position:fixed}.toast{color:#fff;background:#0f172a;border-radius:12px;align-items:flex-start;gap:10px;padding:12px 14px;font-size:14px;display:flex;box-shadow:0 10px 24px #00000040}.toast.is-error{background:#7f1d1d}.toast.is-success{background:#14532d}.toast-body{flex:1;line-height:1.5}.toast-hint{opacity:.9;margin-top:2px;font-size:13px}.toast .btn{color:#fff;background:0 0;border-color:#fff6;min-height:36px}@media (width<=1100px){:root{--panel-w:300px}}@media (width<=1023px){:root{--timeline-h:284px}.app{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--header-h) minmax(200px, 1fr) auto minmax(0, .8fr) var(--timeline-h);grid-template-areas:"header""preview""tools""panel""timeline"}.toolbar{border-right:none;border-bottom:1px solid var(--c-border);flex-direction:row;padding:6px;overflow-x:auto}.tool{flex:none;min-width:72px}.tool-sep{width:1px;height:auto;margin:6px 4px}.panel{border-left:none}.header .btn-label{display:none}.toasts{left:16px;bottom:calc(var(--timeline-h) + 16px)}}@media (width<=1023px) and (height>=1000px){.app{grid-template-rows:var(--header-h) minmax(260px, 1.2fr) auto minmax(0, 1fr) var(--timeline-h)}}.panel-sheet-bar{display:none}@media (width<=767px){:root{--header-h:52px;--timeline-h:250px}.app{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--header-h) minmax(190px, 1fr) auto var(--timeline-h) auto;grid-template-areas:"header""preview""panel""timeline""tools";height:100dvh}.header{gap:4px;padding:0 6px}.header-name{flex:auto;min-width:0;padding:0 6px;font-size:15px}.header-group{gap:4px}.header .btn{padding:0 9px}.header-spacer,.save-status{display:none}.preview-stage{padding:6px}.preview-controls{gap:6px;padding:6px 8px}.play-btn{width:44px;height:44px}.time-display{font-size:12px}.preview-hint{font-size:12px;top:8px}.empty-state{gap:10px;inset:6px}.empty-state h2{font-size:17px}.empty-actions{flex-direction:column;width:100%;max-width:280px}.panel{border-left:none;border-bottom:1px solid var(--c-border);max-height:30dvh;padding:0 14px 14px}.panel.is-empty{display:none}.panel-sheet-bar{z-index:1;background:var(--c-surface);border-bottom:1px solid var(--c-border);justify-content:space-between;align-items:center;margin:0 -14px 8px;padding:2px 4px 2px 14px;display:flex;position:sticky;top:0}.panel-sheet-title{color:var(--c-muted);font-size:13px;font-weight:700}.timeline-bar{gap:6px;padding:4px 6px}.timeline-bar .note{display:none}.track-labels{width:48px}.track-label{text-align:center;flex-direction:column;justify-content:center;gap:1px;padding:0 2px;font-size:10px}.track-video,.track-label.track-video{height:64px}.toolbar{border-bottom:none;border-top:1px solid var(--c-border);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}.tool{min-width:62px}.toolbar{-webkit-mask-image:linear-gradient(90deg,#000 88%,#0000);mask-image:linear-gradient(90deg,#000 88%,#0000)}.toolbar.is-scrolled-end{-webkit-mask-image:none;mask-image:none}.panel .lead{margin-bottom:10px;font-size:12px}.record-script{min-height:60px;padding:10px;font-size:17px}.countdown{font-size:44px}.toasts{left:8px;right:8px;top:calc(var(--header-h) + 8px);max-width:none;bottom:auto}.modal{padding:16px}}a.btn{color:inherit;text-decoration:none}a.btn-primary{color:#fff}.toast-close{border-color:#0000!important;min-height:36px!important;padding:0 6px!important}.modal-message{margin:0 0 12px;line-height:1.7}