@hypit/hypit 0.1.3 → 0.1.5

package/packages/studio/src/style.css

@@ -10,6 +10,9 @@
   --text: #e7e8eb;
   --text-2: #a4a7ae;
   --text-3: #6f737c;
+  --subtab-surface: #101114;
+  --subtab-active-surface: #24262a;
+  --subtab-active-text: #c9cbd0;
   /* Replace this ramp as one unit when Hypit's interaction identity changes. */
   --brand-200: #f8c1ce;
   --brand-400: #ed7898;
@@ -28,6 +31,8 @@
   --tone-orange-muted-rail: #e7834c;
   --tone-green: #38853e;
   --tone-green-rail: #75d079;
+  --tone-green-muted: #285c30;
+  --tone-green-muted-rail: #73a478;
   --tone-teal: #008889;
   --tone-teal-rail: #00d4d5;
   /* Semantic ruler: brightness separates content from its own band; hue marks state. */
@@ -35,6 +40,7 @@
   --semantic-word: #005551;
   /* Author intent uses a gold annotation hue; brand pink stays in the chrome. */
   --semantic-intent: #a28b2b;
+  --semantic-moment: var(--brand-500);
   /* Same perceived active level as a selected/covered semantic cell. */
   --semantic-current: #009f98;
   /* Ordered marker depth: one hue, decreasing lightness. */
@@ -44,15 +50,19 @@
   --intent-depth-3: #846d00;
   --tone-blue: #1777b8;
   --tone-blue-rail: #58c0ff;
+  --tone-blue-muted: #175079;
+  --tone-blue-muted-rail: #5795bf;
   --tone-violet: #6f63b8;
   --tone-violet-rail: #b3a6ff;
   --tone-magenta: #995398;
   --tone-magenta-rail: #ea93e8;
+  --tone-magenta-muted: #683b68;
+  --tone-magenta-muted-rail: #b57ab4;
   --tone-neutral: #6a737c;
   --tone-neutral-rail: #aeb9c4;
   --timeline-label-width: 188px;
-  --source-width: 350px;
-  --workspace-width: 300px;
+  --source-width: 416px;
+  --workspace-width: 320px;
   --timeline-height: 390px;
   --timeline-item-radius: 2px;
   --timeline-selection-stroke: 1px;
@@ -132,6 +142,14 @@ button:focus-visible, textarea:focus-visible {
   white-space: nowrap;
 }
 .topbar-right { justify-self: end; display: flex; align-items: center; min-width: 0; }
+.view-tabs { display: flex; align-items: center; gap: 2px; margin-left: 16px; padding: 2px; border-radius: 5px; background: var(--subtab-surface); }
+.view-tabs button {
+  display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
+  border: 0; border-radius: 4px; color: var(--text-3); background: transparent;
+}
+.view-tabs button[aria-selected="true"] { color: var(--subtab-active-text); background: var(--subtab-active-surface); }
+.view-tabs button:focus-visible { outline: 1px solid #8a8f99; outline-offset: -1px; }
+.view-tabs .icon { width: 14px; height: 14px; }
 .meta {
   color: var(--text-3);
   font: 500 11px/1 var(--font-ui);
@@ -159,6 +177,67 @@ button:focus-visible, textarea:focus-visible {
   grid-template-columns: var(--source-width) 8px minmax(320px, 1fr) 8px var(--workspace-width);
   overflow: hidden;
 }
+.comments-panel, .comments-handle { display: none; }
+.studio-shell[data-view="comments"] { grid-template-rows: minmax(0, 1fr); padding-bottom: 6px; }
+.studio-shell[data-view="comments"] > .handle,
+.studio-shell[data-view="comments"] > .timeline-panel { display: none; }
+.studio-shell[data-view="comments"] .upper-shell { grid-template-columns: minmax(240px, 1fr) 8px var(--comments-width, 360px); }
+.studio-shell[data-view="comments"] .source-panel,
+.studio-shell[data-view="comments"] .source-handle,
+.studio-shell[data-view="comments"] .workspace-panel,
+.studio-shell[data-view="comments"] .workspace-handle { display: none; }
+.studio-shell[data-view="comments"] .comments-handle { display: block; }
+.studio-shell[data-view="comments"] .comments-panel { display: flex; }
+.comments-panel { flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border: 1px solid #08090a; }
+.comments-heading { justify-content: space-between; flex: none; }
+.comments-heading [data-count] { color: var(--text-3); font-size: 11px; margin-left: 2px; }
+.comments-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 3px; background: transparent; color: var(--text-3); }
+.comments-icon:hover { background: var(--field); color: var(--text); }
+.comments-icon .icon { width: 15px; height: 15px; }
+.comments-icon.is-done { color: var(--ok); }
+.comments-panel button:disabled { opacity: .4; }
+.comments-filters { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex: none; }
+.comments-filters button { border: 0; background: transparent; padding: 4px 11px; border-radius: 3px; color: var(--text-3); }
+.comments-filters button[aria-pressed="true"] { color: var(--text); background: #282a30; }
+.comments-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 12px; user-select: text; }
+.comments-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; height: 100%; padding: 24px; text-align: center; color: var(--text-3); }
+.comments-empty > .icon { width: 28px; height: 28px; margin-bottom: 18px; opacity: .7; }
+.comments-empty strong { font-size: 13px; font-weight: 500; color: var(--text-2); }
+.comments-empty p { line-height: 1.7; max-width: 230px; margin: 8px 0; }
+.comment-card { padding: 12px 10px 14px; border-bottom: 1px solid var(--line); border-radius: 2px; }
+.comment-card.selected { background: #1e2025; }
+.comment-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.comment-location { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; cursor: pointer; }
+.comment-number { margin-right: 5px; color: var(--text-3); font: 500 11px var(--font-mono); }
+.comment-actions { display: flex; align-items: center; gap: 1px; }
+.comment-time { display: inline-flex; align-items: center; gap: 6px; min-height: 23px; padding: 2px 6px; background: var(--brand-soft); border: 0; border-radius: 3px; color: var(--brand-400); font: 500 11px/1.5 var(--font-mono); white-space: nowrap; }
+.comment-time .icon { width: 13px; height: 13px; }
+.comment-text { font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 0; }
+.comment-card.resolved .comment-text { color: var(--text-3); }
+.comment-composer { flex: none; border-top: 1px solid var(--line); padding: 14px 14px 12px; background: #18191d; }
+.comment-anchor { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; min-height: 24px; }
+.comment-composer textarea, .comment-edit textarea { width: 100%; resize: none; background: #202227; color: var(--text); border: 1px solid #33363c; border-radius: 3px; padding: 10px 11px; font: 400 13px/1.7 var(--font-ui); display: block; min-height: 82px; user-select: text; }
+.comment-composer textarea::placeholder { color: var(--text-3); }
+.comments-panel textarea:focus { outline: none; box-shadow: none; }
+.comment-edit textarea:focus { background: #292c32; }
+.comments-panel textarea::selection { background: #dce1eb33; color: var(--text); }
+.comment-input { border: 1px solid #33363c; border-radius: 4px; background: #202227; transition: background 120ms ease; }
+.comment-input:focus-within { background: #292c32; }
+.comment-input textarea { border: 0; background: transparent; }
+.comment-input-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 9px 9px; }
+.comment-tools { display: flex; align-items: center; gap: 4px; }
+.comment-tools .comments-icon { width: 28px; height: 28px; padding: 5px; }
+.comment-tools .icon { width: 18px; height: 18px; }
+.comment-submit { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #e4e6eb; color: #202227; }
+.comment-submit .icon { display: block; width: 18px; height: 18px; }
+.comment-submit:hover:not(:disabled) { background: #fff; }
+.comment-submit:disabled { opacity: 1; background: #35383f; color: #858b95; }
+.comment-submit:focus-visible { outline: 1px solid #aeb3bc; outline-offset: 3px; }
+.comments-error { color: var(--brand-200); font-size: 12px; line-height: 1.6; padding: 10px 14px; border-bottom: 1px solid var(--line); }
+.comment-edit { margin-top: 10px; }
+.comment-edit-actions { display: flex; justify-content: end; gap: 6px; margin-top: 8px; }
+.comment-edit-actions button { padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--field); color: var(--text-2); }
+.comment-edit-actions button[type="submit"] { color: var(--text); }
 .source-panel, .preview-panel, .workspace-panel, .timeline-panel {
   min-width: 0;
   min-height: 0;
@@ -261,33 +340,10 @@ button:focus-visible, textarea:focus-visible {
   box-shadow: 0 -3px 12px color-mix(in srgb, var(--interaction-accent) 28%, transparent);
 }
 .library-tab > span { position: relative; display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
+.library .icon { width: 14px; height: 14px; }
 .library-tab > strong { overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
 .library-view { flex: 1; min-width: 0; min-height: 0; display: none; flex-direction: column; }
 .library-view.active { display: flex; }
-.library-toolbar {
-  min-height: 46px;
-  flex: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, .045);
-  background: #16171a;
-}
-.library-toolbar > div { min-width: 0; }
-.library-toolbar strong, .library-toolbar small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.library-toolbar strong { color: #d9dbe0; font-size: 11px; font-weight: 600; }
-.library-toolbar small { margin-top: 1px; color: var(--text-3); font-size: 9px; font-weight: 500; }
-.library-context {
-  flex: none;
-  padding: 3px 6px;
-  border: 1px solid #303238;
-  border-radius: 4px;
-  background: #1d1f23;
-  color: #858a93;
-  font: 500 9px/1.2 var(--font-mono);
-}
 .library-refresh {
   width: 27px;
   height: 27px;
@@ -306,7 +362,7 @@ button:focus-visible, textarea:focus-visible {
 .library.is-refreshing .library-refresh .icon { animation: library-spin 700ms linear infinite; }
 @keyframes library-spin { to { transform: rotate(360deg); } }
 
-.source-workspace {
+.sidebar-panel {
   flex: 1;
   min-width: 0;
   min-height: 0;
@@ -314,20 +370,20 @@ button:focus-visible, textarea:focus-visible {
   grid-template-columns: 44px minmax(0, 1fr);
   grid-template-rows: 36px minmax(0, 1fr);
 }
-.source-sidebar-heading,
-.source-code-heading {
+.sidebar-panel-heading,
+.sidebar-panel-toolbar {
   min-width: 0;
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--line);
   background: #151619;
 }
-.source-sidebar-heading { justify-content: center; border-right: 1px solid var(--line); }
-.source-sidebar-mark { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-3); }
-.source-sidebar-mark .icon { width: 14px; height: 14px; }
-.source-code-heading { padding: 0 7px 0 10px; }
-.source-code-heading .code-toolbar { width: 100%; }
-.source-files {
+.sidebar-panel-heading { justify-content: center; border-right: 1px solid var(--line); }
+.sidebar-panel-mark { width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-3); }
+.sidebar-panel-mark .icon { width: 14px; height: 14px; }
+.sidebar-panel-toolbar { padding: 0 7px 0 10px; }
+.sidebar-panel-toolbar .code-toolbar { width: 100%; }
+.sidebar-panel-nav {
   min-width: 0;
   min-height: 0;
   overflow-y: auto;
@@ -337,14 +393,12 @@ button:focus-visible, textarea:focus-visible {
   background: #121316;
   scrollbar-width: none;
 }
-.source-files::-webkit-scrollbar { width: 0; }
-.source-file {
+.sidebar-panel-nav::-webkit-scrollbar { width: 0; }
+.sidebar-panel-item {
   width: 32px;
   height: 32px;
   display: grid;
-  grid-template-columns: 16px;
-  justify-content: center;
-  align-items: center;
+  place-items: center;
   margin: 0 auto 2px;
   padding: 0;
   border: 0;
@@ -354,105 +408,89 @@ button:focus-visible, textarea:focus-visible {
   text-align: left;
   transition: color 100ms ease;
 }
-.source-file:hover { color: #bfc2c9; }
-.source-file.active {
+.sidebar-panel-item:hover { color: #bfc2c9; }
+.sidebar-panel-item.active {
   background: #181a1f;
   color: #cfd2d8;
 }
-.source-file-icon { width: 16px; height: 16px; display: grid; place-items: center; color: #858a93; }
-.source-file.active .source-file-icon { color: #858a93; }
-.source-file-icon .icon { width: 14px; height: 14px; }
+.sidebar-panel-item .icon { width: 14px; height: 14px; }
+.sidebar-panel-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
+.sidebar-panel-toolbar { justify-content: space-between; gap: 8px; }
+.media-status { padding: 8px 10px; color: #e58b92; font-size: 10px; }
 .source-code { min-width: 0; min-height: 0; overflow: hidden; }
 .source-code > .code { height: 100%; }
 .source-code .code-scroll { background: #141518; }
 
-.library-context-row { flex: none; min-height: 36px; padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, .04); background: #141518; }
-.runtime-chip {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 4px 7px;
-  border: 1px solid #292c31;
-  border-radius: 5px;
-  background: #191a1e;
-}
-.runtime-chip::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--interaction-accent); box-shadow: 0 0 8px var(--brand-soft); }
-.runtime-chip > span { min-width: 0; overflow: hidden; color: #a9adb5; font: 9px/1.2 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
-.runtime-chip > strong { margin-left: auto; color: #666b74; font-size: 9px; font-weight: 500; }
-.task-list { flex: 1; min-height: 0; overflow: auto; padding: 8px 9px 28px; background: #121316; }
-.task-card {
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 18px minmax(0, 1fr);
-  gap: 8px;
-  margin-bottom: 6px;
-  padding: 10px 10px 9px 8px;
-  border: 1px solid #292b31;
-  border-radius: 7px;
-  background: linear-gradient(135deg, #1c1e22, #191a1e);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .018), 0 6px 18px rgba(0, 0, 0, .08);
-  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
-}
-.task-card:hover { border-color: #3a3d44; background: linear-gradient(135deg, #202227, #1b1d21); transform: translateY(-1px); }
-.task-state { display: grid; place-items: start center; padding-top: 4px; }
-.task-state span { width: 8px; height: 8px; border-radius: 50%; background: #686d76; box-shadow: 0 0 0 3px rgba(104, 109, 118, .1); }
-.task-running .task-state span, .task-queued .task-state span, .task-waiting .task-state span, .task-active .task-state span { background: #49b9d0; box-shadow: 0 0 0 3px rgba(73, 185, 208, .11), 0 0 10px rgba(73, 185, 208, .18); }
-.task-complete .task-state span { background: var(--ok); box-shadow: 0 0 0 3px rgba(100, 201, 154, .1); }
-.task-failed .task-state span, .task-cancelled .task-state span, .task-blocked .task-state span { background: #d8646d; box-shadow: 0 0 0 3px rgba(216, 100, 109, .1); }
+.task-list { flex: 1; min-height: 0; overflow: auto; padding: 12px 10px 28px; background: #121316; }
+.task-card { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: start; gap: 9px; margin-bottom: 8px; padding: 11px 9px; border: 1px solid #25272c; border-radius: 4px; background: #191b20; }
+.task-state { display: grid; place-items: center; width: 24px; height: 24px; color: #858c98; }
+.task-state .icon { width: 17px; height: 17px; }
 .task-copy { min-width: 0; }
-.task-title { min-width: 0; display: flex; align-items: center; gap: 7px; }
-.task-title strong { min-width: 0; flex: 1; overflow: hidden; color: #dfe1e5; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
-.task-status { flex: none; padding: 2px 5px; border-radius: 8px; background: #292c31; color: #9297a1; font: 600 8px/1.2 var(--font-ui); text-transform: uppercase; }
-.task-running .task-status, .task-queued .task-status, .task-waiting .task-status, .task-active .task-status { background: rgba(73, 185, 208, .12); color: #79d1e2; }
-.task-complete .task-status { background: rgba(100, 201, 154, .11); color: #86d7b1; }
-.task-failed .task-status, .task-cancelled .task-status, .task-blocked .task-status { background: rgba(216, 100, 109, .1); color: #e58b92; }
-.task-source { margin: 3px 0 6px; overflow: hidden; color: #6f747d; font: 9px/1.25 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
-.task-facts { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
-.task-facts span { min-width: 0; overflow: hidden; color: #686d76; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
-.task-facts span + span::before { content: "·"; margin-right: 5px; color: #3e4148; }
-.task-progress { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .045); color: #8d929b; font-size: 9px; }
+.task-title { min-width: 0; }
+.task-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: #dfe1e5; font: 500 11px/17px var(--font-ui); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
+.task-name:hover { color: #fff; }
+.task-name:focus-visible { outline: 1px solid #626875; outline-offset: 2px; border-radius: 2px; }
+.task-facts { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin-top: 5px; line-height: 14px; }
+.task-status { color: #949aa5; font-size: 10px; }
+.task-facts time { color: #727985; font-size: 9px; }
+.task-running .task-state, .task-running .task-status, .task-queued .task-state, .task-queued .task-status, .task-waiting .task-state, .task-waiting .task-status, .task-saving-result .task-state, .task-saving-result .task-status { color: #8daabb; }
+.task-complete .task-state, .task-complete .task-status { color: #87a896; }
+.task-failed .task-state, .task-failed .task-status, .task-attention .task-state, .task-attention .task-status { color: #c99490; }
+.task-progress { margin-top: 7px; overflow: hidden; color: #9ba1ac; font-size: 10px; line-height: 15px; white-space: nowrap; text-overflow: ellipsis; }
+.task-detail { margin-top: 7px; color: #bc9693; font-size: 10px; line-height: 15px; }
+.task-error-message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; user-select: text; }
+.task-card.selected { background: #24272d; }
+.task-card.selected .task-error-message { display: block; }
+.task-copy-error { display: none; margin-top: 6px; padding: 0; border: 0; background: transparent; color: #aeb4bf; font: inherit; cursor: pointer; }
+.task-card.selected .task-copy-error { display: inline-block; }
+.task-card:focus-visible { outline: 1px solid #626875; outline-offset: -1px; }
+.task-context { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; color: #b9bfca; }
+.task-context::before { content: "/"; flex: none; color: #5d6572; margin-right: 3px; }
+.sidebar-panel-toolbar > .library-refresh { margin-left: auto; }
+.sidebar-panel-toolbar:has(.task-context:not([hidden])) > .code-location { flex: none; max-width: 90px; }
+.task-context[hidden] { display: none; }
+.task-context-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 3px 0; border: 0; background: transparent; color: inherit; font: 500 10px/16px var(--font-ui); text-align: left; }
+.task-context-name .icon { flex: none; }
+.task-context-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.task-context-clear { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #929aa7; }
+.task-context-clear:hover, .task-context-name:hover { color: #f1f2f5; }
+.task-context-clear:hover { background: #30343c; }
+.task-context button:focus-visible { outline: 1px solid #626875; }
+.task-open { display: grid; place-items: center; width: 20px; height: 24px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #707885; }
+.task-open .icon { width: 14px; height: 14px; }
+.task-open:hover { color: #dfe1e5; background: #25282f; }
+.task-open:focus-visible { outline: 1px solid #626875; }
 
-.artifact-filters { min-height: 34px; flex: none; display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, .04); background: #141518; }
-.artifact-filters button { height: 22px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #777c85; font-size: 9px; }
-.artifact-filters button:hover { background: #202227; color: #b9bdc5; }
-.artifact-filters button.active { background: #2a2c31; color: #eef0f3; }
-.artifact-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); align-content: start; gap: 9px; padding: 10px 10px 30px; background: #121316; }
-.artifact-card { height: 190px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #292b31; border-radius: 7px; background: #1a1c20; color: inherit; text-decoration: none; box-shadow: 0 7px 18px rgba(0, 0, 0, .09); transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease; }
-.artifact-card.artifact-highlighted { border-color: rgba(237, 152, 185, .55); box-shadow: 0 0 0 1px rgba(237, 152, 185, .08), 0 9px 22px rgba(0, 0, 0, .14); }
-.artifact-card:hover { border-color: #454952; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .17); }
-.artifact-preview { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; place-items: center; border-bottom: 1px solid rgba(255, 255, 255, .055); background: radial-gradient(circle at 35% 24%, #30343c, #202228 58%, #1a1b1f); }
-.artifact-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, rgba(8, 9, 11, .32)); pointer-events: none; }
-.artifact-image .artifact-preview { background: #202228; }
-.artifact-image .artifact-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
-.artifact-glyph { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .075); border-radius: 9px; background: rgba(12, 13, 16, .28); color: #aab0ba; backdrop-filter: blur(7px); }
-.artifact-image .artifact-glyph { display: none; }
-.artifact-glyph .icon { width: 20px; height: 20px; }
-.artifact-video .artifact-glyph { color: #75badf; }
-.artifact-audio .artifact-glyph { color: #83cf9d; }
-.artifact-type { position: absolute; z-index: 2; right: 6px; bottom: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(10, 11, 13, .62); color: #d2d5da; font: 600 8px/1.2 var(--font-ui); backdrop-filter: blur(6px); }
-.artifact-highlight { position: absolute; z-index: 2; left: 6px; top: 6px; padding: 3px 6px; border-radius: 4px; background: rgba(77, 38, 55, .82); color: #f1abc5; font: 600 8px/1 var(--font-ui); letter-spacing: .02em; }
-.artifact-copy { min-width: 0; flex: none; min-height: 45px; padding: 8px 9px 9px; }
-.artifact-copy strong, .artifact-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.artifact-copy strong { color: #d8dae0; font-size: 10px; font-weight: 600; }
-.artifact-meta { margin-top: 3px; color: #666b74; font-size: 8px; }
+.artifact-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, 104px); align-content: start; justify-content: space-between; gap: 12px; padding: 14px 12px 30px; background: #121316; }
+.artifact-card { --artifact-selection: #24272d; min-width: 0; padding: 0; border: 0; border-radius: 3px; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
+.artifact-card:focus-visible { outline: none; }
+.artifact-card:focus-visible .artifact-preview { outline: 1px solid #656b79; outline-offset: 2px; border-radius: 3px; }
+.artifact-preview { position: relative; flex: none; min-height: 0; width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
+.artifact-preview img, .artifact-preview video { position: absolute; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 2px; object-fit: contain; }
+.artifact-video .artifact-preview video { opacity: 0; pointer-events: none; }
+.artifact-video .artifact-preview video.is-ready { opacity: 1; }
+.artifact-glyph { display: none; }
+.artifact-audio .artifact-glyph { display: grid; position: absolute; place-items: center; width: 100%; height: 42px; color: #87a896; background: #202824; border-radius: 2px; }
+.artifact-audio .artifact-waveform { display: block; visibility: hidden; width: 100%; height: 42px; padding: 8px 4px; background: #202824; }
+.artifact-audio .artifact-waveform.is-ready { visibility: visible; }
+.artifact-waveform.is-ready ~ .artifact-glyph { display: none; }
+.artifact-type { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.artifact-copy { min-width: 0; height: 44px; padding-top: 6px; text-align: center; }
+.artifact-name, .artifact-name-editor { box-sizing: border-box; width: 100%; margin: 0; padding: 0 4px; border: 1px solid transparent; border-radius: 3px; color: #d8dae0; background: transparent; font: 500 11px/18px var(--font-ui); text-align: center; word-break: break-all; overflow-wrap: anywhere; }
+.artifact-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 38px; overflow: hidden; white-space: normal; cursor: text; }
+.artifact-name-text { padding: 1px 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
+.artifact-name:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #626875; }
+.artifact-name[hidden] { display: none; }
+.artifact-copy.editing { height: auto; min-height: 44px; }
+.artifact-name-editor { display: block; min-height: 20px; resize: none; overflow: hidden; outline: none; color: #f1f2f5; box-shadow: inset 0 0 0 1px #626875; }
+.artifact-name-editor:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #626875; }
+.artifact-name-editor::selection { color: #fff; background: #4b5263; }
+.artifact-name-error { display: block; color: #bd9c92; font-size: 9px; line-height: 13px; overflow-wrap: anywhere; }
 .library-empty { grid-column: 1 / -1; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; }
 .library-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid #292c31; border-radius: 12px; background: linear-gradient(145deg, #202227, #18191d); color: #666b74; box-shadow: 0 9px 24px rgba(0, 0, 0, .12); }
 .library-empty-icon .icon { width: 21px; height: 21px; }
 .library-empty strong { color: #aeb2ba; font-size: 11px; font-weight: 600; }
 .library-empty p { max-width: 260px; margin: 6px 0 0; color: #666b74; font-size: 9px; line-height: 1.55; }
-.library-older {
-  grid-column: 1 / -1;
-  width: 100%;
-  min-height: 32px;
-  margin-top: 3px;
-  border: 1px solid #292c31;
-  border-radius: 6px;
-  background: #191a1e;
-  color: #858a93;
-  font-size: 9px;
-}
-.library-older:hover { border-color: #3a3d44; background: #202227; color: #d1d4da; }
 
 .code { --code-inline-end: 12px; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
 .code-toolbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@@ -643,7 +681,7 @@ button:focus-visible, textarea:focus-visible {
   margin: 10px 12px 4px;
   padding: 2px;
   border-radius: 5px;
-  background: #101114;
+  background: var(--subtab-surface);
   overflow: hidden;
 }
 .inspector-subtab {
@@ -667,7 +705,7 @@ button:focus-visible, textarea:focus-visible {
   line-height: 1;
   white-space: nowrap;
 }
-.inspector-subtab.active { background: #24262a; color: #c9cbd0; }
+.inspector-subtab.active { background: var(--subtab-active-surface); color: var(--subtab-active-text); }
 .inspector-empty { padding: 28px 14px; color: var(--text-3); font-size: 11px; text-align: center; }
 .property-group { min-width: 0; padding: 14px 14px 16px; border-bottom: 1px solid var(--line); }
 .property-group h3 { margin: 0 0 10px; color: #c4c6cc; font-size: 11px; font-weight: 500; }
@@ -730,6 +768,7 @@ button:focus-visible, textarea:focus-visible {
   caret-color: var(--interaction-accent);
   cursor: text !important;
 }
+.parameter-display { width: 100%; padding: 5px 7px; color: var(--text-2); font-size: 11px; line-height: 1.2; text-align: right; overflow-wrap: anywhere; user-select: text; font-variant-numeric: tabular-nums; }
 .parameter-value:focus { border-color: #6a6e77; outline: 0; background: #131417; }
 .control-boolean .parameter-right { justify-content: flex-end; }
 .control-boolean .parameter-value {
@@ -786,8 +825,8 @@ button:focus-visible, textarea:focus-visible {
 .parameter-color-value { width: min(100%, 102px); }
 .control-list,
 .control-record { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; }
-.control-list .parameter-right,
-.control-record .parameter-right { grid-column: 1 / -1; width: 100%; }
+.control-list > .parameter-right,
+.control-record > .parameter-right { grid-column: 1 / -1; width: 100%; }
 .parameter-structured { min-width: 0; width: 100%; }
 .parameter-structured-summary {
   min-height: 20px;
@@ -827,20 +866,6 @@ button:focus-visible, textarea:focus-visible {
 .parameter-list-actions button:not(:disabled):focus-visible { outline: 1px solid #62666f; }
 .parameter-list-actions .icon { width: 11px; height: 11px; }
 .parameter-record-fields { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
-.parameter-record-field {
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 58px minmax(0, 1fr);
-  align-items: center;
-  gap: 7px;
-}
-.parameter-record-field > span:first-child {
-  overflow: hidden;
-  color: #6f737c;
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .parameter-structured-footer {
   min-height: 30px;
   display: flex;
@@ -859,10 +884,10 @@ button:focus-visible, textarea:focus-visible {
   font: 10px/1 var(--font-ui);
 }
 .parameter-structured-footer button:disabled { color: #454850; background: #16171a; }
-.parameter-structured-footer button.primary:not(:disabled) { border-color: #555962; background: #292b30; color: #e0e2e6; }
 .parameter-structured-add { display: inline-flex; align-items: center; gap: 4px; }
 .parameter-structured-add .icon { width: 11px; height: 11px; }
-.parameter-structured-decisions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+.parameter-structured-notice { margin-top: 6px; color: var(--text-3); font: 10px/1.4 var(--font-ui); }
+.parameter-structured-notice[hidden] { display: none; }
 .parameter-select { position: relative; width: 100%; min-width: 0; }
 .parameter-select-trigger {
   width: 100%;
@@ -904,6 +929,7 @@ button:focus-visible, textarea:focus-visible {
   box-shadow: 0 10px 26px rgba(0, 0, 0, .42);
 }
 .parameter-select.open-up .parameter-select-menu { top: auto; bottom: calc(100% + 4px); }
+.parameter-select.rich-options .parameter-select-menu { width: 240px; max-height: 240px; }
 .parameter-select-menu[hidden] { display: none; }
 .parameter-select-option {
   width: 100%;
@@ -921,6 +947,19 @@ button:focus-visible, textarea:focus-visible {
 .parameter-select-option.active { background: #202226; color: #d5d7dc; }
 .parameter-select-option:focus-visible { outline: 0; background: #292b30; color: var(--text); }
 .parameter-right > small { flex: none; color: var(--text-3); font-size: 10px; }
+.parameter-value[type="number"] { appearance: textfield; }
+.parameter-value[type="number"]::-webkit-inner-spin-button { opacity: .55; }
+.parameter-value:invalid { border-color: #a45c60; }
+.parameter-value[readonly] { color: var(--text-3); }
+.parameter-multiline { min-height: 64px; resize: vertical; text-align: left; line-height: 1.5; }
+.parameter-select-option { padding: 6px 8px; white-space: normal; text-align: left; }
+.parameter-select-option > small { display: block; margin-top: 3px; color: var(--text-3); font: 10px/1.4 var(--font-ui); }
+.parameter-option-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border-radius: 2px; vertical-align: middle; box-shadow: inset 0 0 0 1px #ffffff22; }
+.parameter-option-font { display: block; margin-top: 4px; font-size: 18px; }
+.control-color .parameter-right { flex-wrap: wrap; }
+.parameter-swatches { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 3px; }
+.parameter-swatches button { width: 18px; height: 18px; border: 1px solid #ffffff22; border-radius: 3px; }
+.parameter-swatches button:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
 .status.saving { color: var(--text-2); }
 .status.saved { color: var(--ok); }
 
@@ -945,6 +984,7 @@ button:focus-visible, textarea:focus-visible {
   font-variant-numeric: tabular-nums;
   letter-spacing: .01em;
 }
+.timeline { --timeline-ruler-height: 22px; }
 .timeline-body {
   flex: 1;
   min-height: 0;
@@ -969,7 +1009,7 @@ button:focus-visible, textarea:focus-visible {
   position: sticky;
   top: 0;
   z-index: 10;
-  height: 22px;
+  height: var(--timeline-ruler-height);
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -1014,8 +1054,6 @@ button:focus-visible, textarea:focus-visible {
   text-align: left;
 }
 .track-copy strong { color: #cfd2d8; font-size: 11px; font-weight: 500; line-height: 18px; }
-.track-label-has-state { grid-template-columns: 18px minmax(0, 1fr) 18px; }
-.track-state { display: grid; place-items: center; }
 .track-attachment-mark {
   position: relative;
   width: 18px;
@@ -1044,10 +1082,13 @@ button:focus-visible, textarea:focus-visible {
   transform: translateY(-50%);
 }
 .track-tone-blue { --track: var(--tone-blue); --rail: var(--tone-blue-rail); }
+.track-tone-blue-muted { --track: var(--tone-blue-muted); --rail: var(--tone-blue-muted-rail); }
 .track-tone-green { --track: var(--tone-green); --rail: var(--tone-green-rail); }
+.track-tone-green-muted { --track: var(--tone-green-muted); --rail: var(--tone-green-muted-rail); }
 .track-tone-teal { --track: var(--tone-teal); --rail: var(--tone-teal-rail); }
 .track-tone-violet { --track: var(--tone-violet); --rail: var(--tone-violet-rail); }
 .track-tone-magenta { --track: var(--tone-magenta); --rail: var(--tone-magenta-rail); }
+.track-tone-magenta-muted { --track: var(--tone-magenta-muted); --rail: var(--tone-magenta-muted-rail); }
 .track-tone-orange { --track: var(--tone-orange); --rail: var(--tone-orange-rail); }
 .track-tone-orange-muted { --track: var(--tone-orange-muted); --rail: var(--tone-orange-muted-rail); }
 .track-tone-neutral { --track: var(--tone-neutral); --rail: var(--tone-neutral-rail); }
@@ -1056,7 +1097,7 @@ button:focus-visible, textarea:focus-visible {
   position: sticky;
   top: 0;
   z-index: 9;
-  height: 22px;
+  height: var(--timeline-ruler-height);
   overflow: hidden;
   border-bottom: 1px solid var(--line);
   background: #111216;
@@ -1102,8 +1143,8 @@ button:focus-visible, textarea:focus-visible {
 }
 .tick-last { padding-right: 4px; padding-left: 0; border-right: 1px solid #45484e; border-left: 0; transform: translateX(-100%); }
 .lanes { min-height: 0; cursor: default; }
-.lane { position: relative; min-height: 0; overflow: hidden; border-bottom: 1px solid #191b1f; background: var(--lane); }
-.semantic-lane { min-height: 0; background: var(--lane); }
+.lane { position: relative; isolation: isolate; min-height: 0; overflow: hidden; border-bottom: 1px solid #191b1f; background: var(--lane); }
+.semantic-lane { position: sticky; top: var(--timeline-ruler-height); z-index: 8; min-height: 0; border-bottom: 1px solid var(--line); background: var(--lane); }
 .semantic-band {
   position: absolute;
   right: 0;
@@ -1111,8 +1152,10 @@ button:focus-visible, textarea:focus-visible {
   height: var(--semantic-band-height);
   overflow: hidden;
   background: var(--lane);
+  box-shadow: inset 0 -1px var(--line);
+  isolation: isolate;
 }
-.semantic-band-intent { border-bottom: 0; }
+.semantic-band:last-child { box-shadow: none; }
 .lane-attached {
   border-left: 0;
   background: var(--lane);
@@ -1132,12 +1175,12 @@ button:focus-visible, textarea:focus-visible {
   border: 0;
   border-radius: 0;
   background: var(--semantic-cell);
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px #ffffff12;
   color: var(--text);
   text-align: left;
   cursor: default;
 }
-.semantic-cell:focus-visible { outline: 0; }
+.semantic-cell:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px #ffffff60; }
 .semantic-segment {
   --semantic-cell: var(--semantic-segment);
 }
@@ -1148,11 +1191,9 @@ button:focus-visible, textarea:focus-visible {
   --semantic-cell: var(--semantic-intent);
   color: #fff;
 }
-.semantic-cell.selected,
-.semantic-cell.live { z-index: 4; filter: brightness(1.22); }
-.semantic-segment.selected { box-shadow: none; }
-.semantic-segment.live.selected { filter: brightness(1.22); }
-.semantic-moment.selected { z-index: 4; filter: brightness(1.22); }
+.semantic-cell.live { filter: brightness(1.12); }
+.semantic-cell.selected { z-index: 4; filter: brightness(1.16); box-shadow: inset 0 0 0 1px #ffffff60; }
+.semantic-moment.selected { z-index: 5; filter: brightness(1.16); box-shadow: inset 0 0 0 1px #ffffff60; }
 .semantic-segment-label {
   flex: 1 1 auto;
   min-width: 0;
@@ -1198,31 +1239,19 @@ button:focus-visible, textarea:focus-visible {
 .semantic-word .semantic-cell-content { padding: 0 5px; }
 .semantic-moment {
   position: absolute;
-  top: 4px;
-  width: 14px;
-  height: 14px;
-  transform: translateX(-7px) rotate(45deg);
+  top: calc((var(--semantic-band-height) - 9px) / 2);
+  z-index: 1;
+  width: 9px;
+  height: 9px;
+  transform: translateX(-50%) scaleX(.6) rotate(45deg);
   border-radius: 0;
   padding: 0;
-  border: 0;
-  background: var(--semantic-intent);
+  border: 1px solid var(--lane);
+  background: var(--semantic-moment);
 }
 .semantic-moment:focus-visible { outline: 0; }
-.track-label-semantic::before {
-  border-radius: 0;
-  background: #181a1f;
-}
-.track-fold {
-  min-width: 17px;
-  height: 17px;
-  padding: 0 3px;
-  border: 0;
-  border-radius: 3px;
-  background: #24262a;
-  color: #92969e;
-  font-size: 11px;
-  line-height: 17px;
-}
+.track-label-semantic { position: sticky; top: 0; z-index: 8; border-bottom: 1px solid var(--line); background: #111216; }
+.track-label-semantic::before { display: none; }
 .track-label-attached {
   /* The branch marker occupies the same 18px prefix as a root icon;
      attached and root labels therefore share one exact text column. */
@@ -1231,6 +1260,7 @@ button:focus-visible, textarea:focus-visible {
 }
 .track-label-attached::before { inset: var(--timeline-item-inset-y) 6px; background: #181a1f; }
 .clip {
+  z-index: 0;
   --track: var(--visual);
   --item-head: color-mix(in srgb, var(--track) 58%, var(--lane));
   --item-body: color-mix(in srgb, var(--track) 20%, var(--lane));
@@ -1244,7 +1274,6 @@ button:focus-visible, textarea:focus-visible {
   display: block;
   padding: 0;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--track) 48%, var(--lane));
   border-radius: var(--timeline-item-radius);
   background: var(--item-body);
   box-shadow: none;
@@ -1252,8 +1281,7 @@ button:focus-visible, textarea:focus-visible {
   text-align: left;
   cursor: default;
 }
-/* The edge affordance is intentionally visual-only for now. Actual trim and
-   writeback remain disabled until their SVML mapping is implemented. */
+/* Only Companion-declared editable intervals enable edge gestures. */
 #app .clip::before,
 #app .clip::after {
   content: "";
@@ -1274,17 +1302,26 @@ button:focus-visible, textarea:focus-visible {
   cursor: ew-resize !important;
 }
 .clip.selected {
-  z-index: 4;
+  z-index: 1;
   overflow: visible;
   box-shadow: none;
   color: #fff;
 }
 .clip.editing { box-shadow: 0 0 0 1px #fff; }
 .clip:focus-visible { outline: 0; }
+/* Draw above thumbnails and text without changing interval geometry. */
+.clip-boundary {
+  position: absolute;
+  z-index: 5;
+  inset: 0;
+  border: 1px solid #ffffff20;
+  border-radius: inherit;
+  pointer-events: none;
+}
 .clip-selection {
   position: absolute;
   z-index: 6;
-  inset: calc(-1 * var(--timeline-selection-stroke));
+  inset: 0;
   display: none;
   border: var(--timeline-selection-stroke) solid var(--timeline-selection-color);
   border-radius: var(--timeline-selection-radius);
@@ -1293,20 +1330,21 @@ button:focus-visible, textarea:focus-visible {
 .clip-selection::before, .clip-selection::after {
   content: "";
   position: absolute;
-  top: -1px;
-  bottom: -1px;
+  top: 0;
+  bottom: 0;
   width: var(--timeline-selection-edge);
   background: var(--timeline-selection-color);
 }
 .clip-selection::before {
-  left: calc(-1 * var(--timeline-selection-stroke));
+  left: 0;
   border-radius: var(--timeline-selection-radius) 0 0 var(--timeline-selection-radius);
 }
 .clip-selection::after {
-  right: calc(-1 * var(--timeline-selection-stroke));
+  right: 0;
   border-radius: 0 var(--timeline-selection-radius) var(--timeline-selection-radius) 0;
 }
 .clip.selected > .clip-selection { display: block; }
+.clip.selected > .clip-boundary { border-color: var(--timeline-selection-color); }
 .clip-head {
   position: absolute;
   z-index: 3;
@@ -1325,6 +1363,7 @@ button:focus-visible, textarea:focus-visible {
 }
 .clip-body {
   position: absolute;
+  z-index: 1;
   top: var(--timeline-item-header-height);
   right: 0;
   bottom: 0;
@@ -1383,10 +1422,13 @@ button:focus-visible, textarea:focus-visible {
   font-variant-numeric: tabular-nums;
 }
 .clip-tone-blue { --track: var(--tone-blue); }
+.clip-tone-blue-muted { --track: var(--tone-blue-muted); }
 .clip-tone-green { --track: var(--tone-green); }
+.clip-tone-green-muted { --track: var(--tone-green-muted); }
 .clip-tone-teal { --track: var(--tone-teal); }
 .clip-tone-violet { --track: var(--tone-violet); }
 .clip-tone-magenta { --track: var(--tone-magenta); }
+.clip-tone-magenta-muted { --track: var(--tone-magenta-muted); }
 .clip-tone-orange { --track: var(--tone-orange); }
 .clip-tone-orange-muted { --track: var(--tone-orange-muted); }
 .clip-tone-neutral { --track: var(--tone-neutral); }
@@ -1520,6 +1562,116 @@ button:focus-visible, textarea:focus-visible {
 @media (max-width: 920px) {
   .meta, .topbar-right { display: none; }
   .topbar { grid-template-columns: 1fr minmax(120px, 1fr); }
-  .upper-shell { grid-template-columns: minmax(280px, var(--source-width)) 8px minmax(300px, 1fr); }
+  .upper-shell { grid-template-columns: minmax(320px, var(--source-width)) 8px minmax(300px, 1fr); }
   .workspace-handle, .workspace-panel { display: none; }
 }
+
+
+/* The same transport serves the composition and selected Result media. */
+.stage-transport { display: flex; align-items: center; gap: 2px; }
+.stage-bar button[hidden], .stage-transport[hidden], .stage-artifact[hidden], .stage-scaler[hidden] { display: none; }
+.stage-bar .stage-mute { position: absolute; right: 12px; margin: 0; }
+.stage-time { position: absolute; left: 12px; color: #969ba5; font: 10px var(--font-mono); }
+.stage-title { min-width: 0; }
+.stage-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.stage-return { flex: none; margin-left: auto; border: 0; background: transparent; color: #aeb3bd; font: 10px var(--font-ui); cursor: pointer; }
+.stage-return[hidden] { display: none; }
+.stage-artifact { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; }
+.stage-artifact > img, .stage-artifact > video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
+.stage-artifact audio { display: none; }
+.stage-audio-wave { width: 85%; padding: 24px 12px; border-radius: 2px; color: #b5c2bb; background: #202824; text-align: center; }
+.stage-audio-wave img { display: block; width: 100%; height: 100px; }
+.stage-media-error { position: absolute; bottom: 12px; padding: 8px; background: #24262b; color: #cacdd4; font-size: 11px; }
+.stage-progress { position: relative; flex: none; height: 0; z-index: 2; }
+.stage-progress[hidden], .scrub-preview[hidden] { display: none; }
+.stage-scrubber { position: absolute; inset: -5px 0 auto; width: 100%; height: 10px; padding: 0; margin: 0; appearance: none; background: transparent; cursor: pointer; }
+.stage-scrubber::-webkit-slider-runnable-track { height: 2px; background: #676c75; }
+.stage-scrubber::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; border-radius: 50%; margin-top: -3px; background: #e1e4e9; }
+.stage-scrubber::-moz-range-track { height: 2px; background: #676c75; }
+.stage-scrubber::-moz-range-thumb { width: 8px; height: 8px; border: 0; background: #e1e4e9; }
+.stage-review .stage-scaler, .stage-review .stage-viewport { cursor: pointer; }
+.stage-review .stage-progress { height: 24px; margin: 0 20px; }
+.stage-review .stage-scrubber { top: 0; height: 24px; }
+.stage-review .stage-scrubber::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #565b64; }
+.stage-review .stage-scrubber::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
+.stage-review .stage-scrubber::-moz-range-track { height: 4px; border-radius: 2px; background: #565b64; }
+.stage-review .stage-scrubber::-moz-range-thumb { width: 12px; height: 12px; }
+.scrub-preview { position: absolute; bottom: calc(100% + 8px); padding: 3px; border: 1px solid #4b4f56; border-radius: 4px; background: #1b1d21; box-shadow: 0 4px 16px #0006; pointer-events: none; }
+.scrub-preview-picture { position: relative; display: grid; place-items: center; overflow: hidden; background: #111215; }
+.scrub-preview-picture iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: top left; pointer-events: none; }
+.scrub-preview-picture span { padding: 8px; color: var(--text-3); font: 10px var(--font-ui); text-align: center; }
+.scrub-preview-picture span[hidden] { display: none; }
+.scrub-preview-time { padding: 5px 3px 2px; color: #d5d8df; font: 10px var(--font-mono); text-align: center; }
+
+.preview-unavailable .artifact-type { position: static; width: auto; height: auto; clip-path: none; color: #9298a2; font-size: 10px; }
+
+.artifact-card.selected .artifact-preview { background: var(--artifact-selection); border-radius: 3px; }
+.artifact-card.selected .artifact-name-text { color: #f1f2f5; background: var(--artifact-selection); }
+.library-continuation { grid-column: 1 / -1; height: 28px; display: grid; place-items: center; color: #777e89; font-size: 10px; }
+
+.timeline-overlap-menu, .selection-menu {
+  position: fixed;
+  z-index: 100;
+  min-width: 160px;
+  max-width: 280px;
+  max-height: 240px;
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--line-strong);
+  border-radius: 5px;
+  background: var(--panel-raised);
+  box-shadow: 0 6px 20px #0006;
+}
+.timeline-overlap-menu button, .selection-menu button {
+  display: block;
+  width: 100%;
+  padding: 6px 9px;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: left;
+  overflow-wrap: anywhere;
+}
+.timeline-overlap-menu button:hover,
+.timeline-overlap-menu button:focus-visible,
+.selection-menu button:hover,
+.selection-menu button:focus-visible { background: var(--field); outline: none; }
+
+/* Compact authored rules keep interval geometry without a thumbnail body. */
+.clip-chrome-compact > .clip-head {
+  height: 100%;
+  border-bottom: 0;
+  border-radius: var(--timeline-item-radius);
+  background: var(--item-head);
+}
+.clip-chrome-compact > .clip-body,
+.clip-chrome-compact .clip-meta { display: none; }
+.clip-chrome-compact .clip-name { font-size: 11px; font-weight: 500; }
+
+/* Track-internal bands share one label and meet without child-track gutters. */
+.timeline-track-banded { padding: var(--timeline-item-inset-y) 0; }
+.timeline-track-banded > .track-band { border-bottom: 0; }
+.timeline-track-banded > .track-band > .clip {
+  height: 100%;
+  margin-top: 0;
+  border-radius: 0;
+}
+.timeline-track-banded > .track-band:first-child > .clip {
+  border-top-left-radius: var(--timeline-item-radius);
+  border-top-right-radius: var(--timeline-item-radius);
+}
+.timeline-track-banded > .track-band:last-child > .clip {
+  border-bottom-left-radius: var(--timeline-item-radius);
+  border-bottom-right-radius: var(--timeline-item-radius);
+}
+.track-band .clip-head, .track-band .clip-body { border-radius: inherit; }
+.track-band-label .clip-head {
+  height: 100%;
+  border-bottom: 0;
+  background: var(--item-head);
+}
+.track-band-label .clip-body, .track-band-label .clip-meta { display: none; }