#files { view-timeline-name: --files-demo; view-timeline-axis: block; }
#files .cx-feature-card {
  view-timeline-name: --files-demo; view-timeline-axis: block; view-timeline-inset: 80px 100px;
  width: min(800px, 100%); height: 440px; padding: 8px; overflow: hidden;
  border: 0; border-radius: 26px;
  background: linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.025) 45%,rgba(255,255,255,.065)) rgba(34,34,34,.93);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.14), 0 18px 44px -16px rgba(0,0,0,.6);
  backdrop-filter: blur(24px) saturate(1.15); -webkit-backdrop-filter: blur(24px) saturate(1.15);
  color: #f7f4ee; font-family: system-ui,-apple-system,'SF Pro Text',sans-serif;
  pointer-events: none; box-sizing: border-box;
}
#files .cx-feature-card * { box-sizing: border-box; }
#files .file-scene-body {
  --file-preview-width: min(calc(100% - 169px), max(min(280px, calc(100% - 169px)), 50%));
  position: relative; height: calc(100% - 36px); overflow: hidden; border-radius: 18px;
  border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  background: linear-gradient(180deg,rgba(255,255,255,.065),transparent 28%,transparent 72%,rgba(255,255,255,.035)) rgba(24,24,24,.7);
}
#files .file-scene-navigation { display: flex; width: calc(100% - var(--file-preview-width) - 1px); height: 100%; }
#files .file-scene-folders, #files .file-scene-scroll { flex: 0 0 50%; max-width: 232px; height: 100%; min-width: 0; }
#files .file-scene-folders { position: relative; padding: 8px 6px; overflow: hidden; }
#files .file-scene-folders::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 1px; background: rgba(255,255,255,.12); }
#files .file-scene-folders ul { opacity: .55; }
#files .file-scene-scroll { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
#files .file-scene-scroll::-webkit-scrollbar { display: none; }
#files .file-scene-folders ul, #files [data-file-results] { margin: 0; padding: 0; list-style: none; }
#files [data-file-results] { padding: 8px 6px; transform: translateY(0); }
#files .file-scene-folders li, #files [data-file-results] li {
  position: relative; display: flex; align-items: center; gap: 6px; height: 30px;
  padding: 0 8px; border-radius: 6px; isolation: isolate;
  font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap;
}
#files .file-scene-folders li + li, #files [data-file-results] li + li { margin-top: 2px; }
#files .file-scene-ancestor { background: rgba(255,255,255,.065); }
#files .file-scene-folder-name, #files .file-scene-name { min-width: 0; overflow: hidden; }
#files .file-scene-folder-name { flex: 1; text-overflow: ellipsis; }
#files .file-scene-name { display: flex; }
#files .file-scene-stem { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#files .file-scene-extension { flex: none; }
#files .file-scene-icon, #files .file-scene-folder-icon { width: 16px; height: 16px; flex: none; object-fit: contain; }
#files .file-scene-folder-icon { background: url(/ouros-scene/assets/folder.png) center / contain no-repeat; }
#files .file-scene-chevron { width: 5px; height: 9px; flex: none; opacity: .6; }
#files .file-scene-launch::before, #files .file-scene-brief::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 6px;
  background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 48%,rgba(0,0,0,.04)) rgba(74,137,191,.18);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.24), inset 0 1px 0 rgba(255,255,255,.13), 0 0 22px rgba(55,132,211,.13);
}
#files .file-scene-launch::before { opacity: 1; }
#files .file-scene-brief::before { opacity: 0; }
#files .file-scene-preview-lane { position: absolute; inset: 0 0 0 auto; width: var(--file-preview-width); border-left: 1px solid rgba(255,255,255,.12); overflow: hidden; }
#files .file-scene-preview-empty { position: absolute; inset: 0; opacity: 1; }
#files .file-scene-preview-prompt { height: calc(100% - 44px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
#files .file-scene-preview-prompt svg { width: 36px; height: 44px; color: rgba(255,255,255,.25); }
#files .file-scene-preview-prompt span { font-size: 16px; font-weight: 700; }
#files .file-scene-preview {
  position: absolute; inset: 0; width: 100%;
  clip-path: inset(0 100% 0 0); opacity: 0;
}
#files .file-scene-preview-header { height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12px; color: rgba(255,255,255,.55); }
#files .file-scene-preview-header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#files .file-scene-preview-page { height: calc(100% - 44px); padding: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#files .file-scene-paper { display: block; width: 100%; height: 100%; max-width: 226px; object-fit: contain; filter: drop-shadow(0 2px 7px rgba(0,0,0,.2)); }
#files .file-scene-footer { height: 36px; display: flex; align-items: flex-end; gap: 8px; padding-bottom: 0; font-size: 12px; color: rgba(255,255,255,.45); }
#files .file-scene-filter { flex: 0 0 calc((100% - 8px) / 2); height: 28px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; border-radius: 14px; background: rgba(0,0,0,.23); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
#files .file-scene-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#files .file-scene-selected-path { visibility: hidden; }
@media (max-width: 600px) {
  #files .file-scene-folders { display: none; }
  #files .file-scene-scroll { flex-basis: 100%; max-width: none; }
  #files .file-scene-path { display: flex; justify-content: flex-end; }
  #files .file-scene-path > span:first-child { flex: none; }
  #files .file-scene-selected-path { display: none; }
}