:root{--bg: #f3efe7;--panel: rgba(255, 255, 255, .82);--panel-strong: #ffffff;--sidebar: linear-gradient(180deg, #1f3131 0%, #304d4b 100%);--sidebar-text: #f5f2ea;--accent: #d17a2d;--accent-soft: rgba(209, 122, 45, .14);--border: rgba(33, 47, 47, .12);--text: #223231;--muted: #5d6c69;--shadow: 0 20px 50px rgba(29, 38, 38, .12)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Segoe UI,Microsoft JhengHei,sans-serif;background:radial-gradient(circle at top right,rgba(209,122,45,.16),transparent 26%),linear-gradient(180deg,#f7f3eb,#efe7da);color:var(--text)}body{min-height:100vh;overflow:hidden}a{color:inherit;text-decoration:none}.app-shell{display:flex;min-height:100vh;height:100vh}.sidebar{width:300px;padding:36px 28px;background:var(--sidebar);color:var(--sidebar-text);display:flex;flex-direction:column;gap:36px;box-shadow:16px 0 40px #00000014}.sidebar__brand h1{margin:0 0 12px;font-size:2rem;letter-spacing:.02em}.sidebar__nav{display:flex;flex-direction:column;gap:20px}.sidebar__nav-group{display:flex;flex-direction:column;gap:12px}.sidebar__nav-divider{height:1px;background:#ffffff24}.sidebar__nav-label{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f5f2eaad}.sidebar__nav-links{display:flex;flex-direction:column;gap:12px}.nav-link{padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#ffffff0f;transition:transform .2s ease,background-color .2s ease,border-color .2s ease}.nav-link:hover,.nav-link:focus-visible{transform:translate(4px);background:#ffffff1f;border-color:#fff3}.nav-link--active{background:#ffffff2e;border-color:#ffffff4d}.content{flex:1;padding:40px;display:flex;flex-direction:column;gap:28px;min-height:0}.content--demo{justify-content:flex-start;gap:18px;overflow-x:hidden;overflow-y:auto}.hero-card,.panel,.empty-state{border-radius:28px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-card{padding:32px}.hero-card h2{margin:0 0 16px;font-size:clamp(2rem,4vw,3.2rem)}.hero-card p{margin:0;max-width:760px;line-height:1.8;color:var(--muted)}.demo-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:20px 24px}.demo-hero h2{margin:0;font-size:clamp(1.55rem,2.3vw,2rem)}.demo-hero__actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px}.control-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.control-button{border:0;border-radius:999px;padding:14px 22px;font:inherit;font-weight:700;color:#fff9f2;background:linear-gradient(135deg,#d17a2d,#bc5f27);box-shadow:0 14px 28px #bc5f273d;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.control-button--secondary{background:linear-gradient(135deg,#365a5b,#254245);box-shadow:0 14px 28px #2542453d}.control-button:hover,.control-button:focus-visible{transform:translateY(-2px);box-shadow:0 18px 34px #bc5f274d}.control-button--secondary:hover,.control-button--secondary:focus-visible{box-shadow:0 18px 34px #2542454d}.control-button:disabled{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}.demo-layout{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(280px,.8fr);gap:18px;flex:1;min-height:0;align-items:stretch}.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;min-height:0}.video-grid--single{grid-template-columns:minmax(0,1fr)}.single-demo-layout{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start}.triple-demo-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:18px}.paired-demo-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,340px);gap:18px}.video-card,.results-card{border-radius:28px;border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.video-card{padding:16px;display:flex;flex-direction:column;gap:12px}.video-card--single{width:100%;max-width:1280px;min-height:0;margin:0 auto}.video-card--plan{grid-row:1 / span 2;min-height:0}.video-card--stacked,.video-card--playback,.video-card--reference{min-height:0}.video-card--reference{align-items:center;justify-content:flex-start;overflow:hidden}.video-card__header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.video-card__header h3{margin:0;font-size:1.02rem;text-transform:uppercase;letter-spacing:.16em}.video-frame{position:relative;aspect-ratio:16 / 9;border-radius:22px;overflow:hidden;background:radial-gradient(circle at top left,rgba(209,122,45,.22),transparent 28%),linear-gradient(160deg,#112224,#20363a)}.video-frame--single{width:100%;aspect-ratio:16 / 9;min-height:0}.video-frame--multi{flex:1;min-height:0;aspect-ratio:auto}.video-frame--reference{width:100%;flex:1;min-height:0;aspect-ratio:auto;align-self:stretch;overflow:hidden;padding:14px}.reference-scroll{width:100%;height:100%;overflow:auto;display:flex;justify-content:center;align-items:flex-start;border-radius:16px}.sequence-image--single,.sequence-image--contain{object-fit:contain}.sequence-image--reference{width:100%;height:auto;max-width:100%;object-fit:initial;background:transparent}.sequence-image{width:100%;height:100%;display:block;object-fit:cover;background:#132126}.sequence-image--inactive{visibility:hidden}.results-card{padding:20px;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:14px}.result-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.result-tab{border:1px solid rgba(33,47,47,.12);border-radius:16px;padding:12px 14px;background:#ffffffb8;color:var(--text);font:inherit;font-size:.92rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}.result-tab:hover,.result-tab:focus-visible{transform:translateY(-1px);border-color:#d17a2d5c;background:#fffffff5}.result-tab.is-active{border-color:#d17a2d80;background:linear-gradient(135deg,#d17a2d2e,#bc5f271a)}.result-panel-host{min-height:0;flex:1;display:flex;overflow:hidden}.result-panel{border-radius:22px;border:1px solid rgba(33,47,47,.12);background:#ffffff9e;padding:14px;display:flex;flex-direction:column;gap:18px;min-height:0;flex:1;overflow:hidden}.result-panel__header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.result-panel__title{margin:0;font-size:.98rem;letter-spacing:.08em}.result-panel__message{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}.result-id-list{list-style:none;margin:0;padding:6px 2px 0 0;display:grid;gap:8px;flex:1;align-content:start;grid-auto-rows:max-content;overflow:auto;min-height:0}.result-id-item{margin:0}.result-id-button{width:100%;border:1px solid rgba(33,47,47,.14);border-radius:14px;padding:11px 14px;background:#ffffffdb;color:var(--text);font:inherit;font-size:.88rem;font-weight:700;letter-spacing:.04em;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}.result-id-button:hover,.result-id-button:focus-visible{transform:translateY(-1px);border-color:#d17a2d66;background:#fff}.result-id-button.is-active{border-color:#d17a2d80;background:linear-gradient(135deg,#d17a2d2e,#bc5f271a)}.result-id-preview{display:flex;flex-direction:column;gap:10px;margin-top:10px;padding:12px;border-radius:16px;border:1px solid rgba(33,47,47,.1);background:#ffffffb8}.result-id-preview__label{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.result-id-preview__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:10px}.preview-image-card{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(33,47,47,.1);background:#fff}.preview-image-card__image{width:100%;aspect-ratio:4 / 3;display:block;object-fit:contain;background:linear-gradient(180deg,#f3ede4,#e9dfcf)}.sidebar{overflow-y:auto}.sidebar__divider{height:1px;background:#ffffff24}.task-panel{display:flex;flex-direction:column;gap:18px}.task-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-panel__header h2{margin:0;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}.task-panel__refresh{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:8px 12px;font:inherit;font-size:.82rem;font-weight:700;color:var(--sidebar-text);background:#ffffff14;cursor:pointer}.task-panel__refresh:disabled{cursor:not-allowed;opacity:.55}.task-panel__description,.task-panel__selected,.task-panel__empty,.task-panel__error,.task-job-summary p,.task-job-summary small{margin:0}.task-panel__description,.task-panel__selected,.task-panel__empty,.task-job-summary p,.task-job-summary small{color:#f5f2eac7;line-height:1.5}.task-panel__error{color:#ffe2cb;line-height:1.5}.task-panel__upload,.task-panel__section{display:flex;flex-direction:column;gap:12px}.task-panel__field{display:flex;flex-direction:column;gap:8px;font-weight:700}.task-panel__field span,.task-panel__section-header h3{font-size:.88rem;letter-spacing:.08em;text-transform:uppercase}.task-panel__field input{width:100%;border-radius:16px;border:1px dashed rgba(255,255,255,.28);background:#ffffff14;color:var(--sidebar-text);padding:12px;font:inherit}.task-panel__submit{width:100%;justify-content:center}.task-panel__section-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-panel__section-header h3{margin:0}.task-panel__section-header span{font-size:.82rem;font-weight:700;color:#f5f2eab8}.task-job-list{display:flex;flex-direction:column;gap:10px}.task-job-card,.task-job-select{border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#ffffff14;padding:12px 14px}.task-job-card{display:flex;flex-direction:column;gap:10px}.task-job-select{color:inherit;font:inherit;text-align:left;cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease}.task-job-select:hover,.task-job-select:focus-visible{transform:translateY(-1px);background:#ffffff24;border-color:#ffffff3d}.task-job-select.is-active{border-color:#d17a2d8c;background:#d17a2d2e}.task-job-summary{display:flex;flex-direction:column;gap:4px}.task-job-summary span{font-size:.82rem;font-weight:700;color:#f5f2eae6}.task-job-progress{height:8px;border-radius:999px;background:#ffffff1a;overflow:hidden}.task-job-progress div{height:100%;border-radius:inherit;background:linear-gradient(135deg,#d17a2d,#bc5f27)}.video-card--result{gap:16px}.task-empty-state{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:240px;padding:12px 4px;color:var(--muted)}.task-empty-state strong{font-size:1rem;letter-spacing:.04em}.task-empty-state p{margin:0;line-height:1.7}.task-video{width:100%;height:100%;display:block;object-fit:contain;background:#132126}.task-video--single{object-fit:contain}.task-video-meta{display:flex;flex-wrap:wrap;gap:10px 14px;color:var(--muted);font-size:.92rem;line-height:1.6}.task-video-meta a{color:var(--accent);font-weight:700}.demo-task-selector{padding:20px 24px;display:flex;flex-direction:column;gap:16px}.demo-task-selector__header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.demo-task-selector__header h3,.task-center-panel__header h3{margin:0 0 8px;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}.demo-task-selector__header p,.task-center-panel__header p{margin:0;color:var(--muted);line-height:1.6}.demo-task-selector__clear{flex-shrink:0}.demo-task-selector__controls{display:flex;gap:16px}.demo-task-selector__field,.task-center-field{display:flex;flex-direction:column;gap:8px;flex:1}.demo-task-selector__field span,.task-center-field span{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.demo-task-selector__select,.task-center-select,.task-center-field input{width:100%;border-radius:16px;border:1px solid var(--border);background:#ffffffe6;color:var(--text);padding:12px 14px;font:inherit}.task-center-grid{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(0,1.25fr);gap:18px;flex:1;min-height:0}.task-center-stack{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:18px;min-height:0}.task-center-panel{padding:22px 24px;display:flex;flex-direction:column;gap:16px;min-height:0}.task-center-panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.task-center-refresh{border:1px solid var(--border);border-radius:999px;padding:10px 14px;background:#ffffffdb;color:var(--text);font:inherit;font-weight:700;cursor:pointer}.task-center-refresh:disabled{cursor:not-allowed;opacity:.55}.task-center-error,.task-center-selected,.task-center-empty{margin:0}.task-center-error{color:#9d4021;line-height:1.6}.task-center-selected,.task-center-empty{color:var(--muted);line-height:1.6}.task-center-form{display:flex;flex-direction:column;gap:14px}.task-center-submit{align-self:flex-start}.task-center-count{min-width:38px;height:38px;border-radius:999px;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700}.task-center-job-list{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}.task-center-job-card{border-radius:18px;border:1px solid var(--border);background:#ffffffb8;padding:14px 16px;display:flex;flex-direction:column;gap:8px}.task-center-job-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}.task-center-job-card p,.task-center-job-card small{margin:0;color:var(--muted);line-height:1.5}.task-type-badge{border-radius:999px;background:var(--accent-soft);color:var(--accent);padding:6px 10px;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.task-center-job-progress{height:8px;border-radius:999px;background:#212f2f14;overflow:hidden}.task-center-job-progress div{height:100%;border-radius:inherit;background:linear-gradient(135deg,#d17a2d,#bc5f27)}.task-center-hero{align-items:stretch}.task-center-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:min(320px,100%)}.task-center-stat{border-radius:22px;border:1px solid rgba(33,47,47,.1);background:#ffffffb8;padding:16px 18px;display:flex;flex-direction:column;gap:8px}.task-center-stat span{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.task-center-stat strong{font-size:1.1rem}.task-center-workspace{display:flex;flex-direction:column;gap:18px;flex:1;min-height:0}.task-center-panel--upload{gap:18px}.task-center-tabs{display:flex;flex-wrap:wrap;gap:10px}.task-center-tab{border:1px solid var(--border);border-radius:999px;padding:10px 16px;background:#ffffffdb;color:var(--text);font:inherit;font-weight:700;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}.task-center-tab:hover,.task-center-tab:focus-visible{transform:translateY(-1px);border-color:#d17a2d61;background:#fffffffa}.task-center-tab.is-active{border-color:#d17a2d80;background:linear-gradient(135deg,#d17a2d2e,#bc5f271a);color:var(--accent)}.task-center-upload-copy{margin:0;color:var(--muted);line-height:1.6}.task-center-form-row{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px}.task-center-form-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.task-center-selection-stack{display:flex;flex-direction:column;gap:10px}.task-center-file-list{margin:0;padding-left:18px;color:var(--muted);display:grid;gap:6px}.task-center-file-list li{line-height:1.5;word-break:break-all}.task-center-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;flex:1;min-height:0}@media(max-width:900px){.app-shell{flex-direction:column}.sidebar{width:100%;box-shadow:none}.content{padding:24px}.demo-hero{flex-direction:column;align-items:flex-start}.demo-hero__actions{align-items:flex-start}.demo-task-selector__header,.task-center-panel__header{flex-direction:column}.task-center-stats,.task-center-form-row,.task-center-columns{grid-template-columns:1fr}.task-center-form-footer{align-items:flex-start}.control-row{justify-content:flex-start}.demo-layout,.video-grid,.triple-demo-layout,.paired-demo-layout,.task-center-grid{grid-template-columns:1fr}.triple-demo-layout,.task-center-stack{grid-template-rows:auto}.video-card--plan{grid-row:auto}.result-tabs{grid-template-columns:1fr}}