/* Shared native components. Variant = primary | quiet. Size = sm | md. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-surface-0); color: var(--color-fg-primary); font: var(--text-body--font-weight) var(--text-body)/var(--text-body--line-height) var(--font-sans); -webkit-font-smoothing: antialiased; }
button,input,select,textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: calc(var(--spacing)); }
button,input,select { -webkit-tap-highlight-color: transparent; }
button:disabled,input:disabled,select:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); }
:where(button,input,select,a,summary,textarea,dialog,[tabindex]):focus-visible { outline: none; }
[hidden] { display: none !important; }
p,h1,h2 { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { width: var(--icon-md); height: var(--icon-md); flex: none; fill: currentColor; stroke: none; }
.icon[data-size="sm"] { width: var(--icon-sm); height: var(--icon-sm); }
.icon[data-size="lg"] { width: var(--icon-lg); height: var(--icon-lg); }
.button,.icon-button { --control-height: var(--control-md); --control-padding: var(--control-padding-md); display: inline-flex; align-items: center; justify-content: center; gap: calc(2 * var(--spacing)); height: var(--control-height); padding: 0 var(--control-padding); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-fg-secondary); font-size: var(--text-body); white-space: nowrap; text-decoration: none; }
.button[data-size="sm"],.icon-button[data-size="sm"] { --control-height: var(--control-sm); --control-padding: var(--control-padding-sm); }
.button:hover:not(:disabled),.icon-button:hover:not(:disabled) { background: var(--color-control-hover); color: var(--color-fg-primary); }
.button[data-variant="primary"],.icon-button[data-variant="primary"] { background: var(--color-surface-accent); color: var(--color-fg-accent); }
.button[data-variant="primary"]:hover:not(:disabled),.icon-button[data-variant="primary"]:hover:not(:disabled) { background: var(--color-fg-secondary); color: var(--color-fg-accent); }
.icon-button { width: var(--control-height); padding: 0; flex: none; }
.icon-button[aria-pressed="true"] { background: var(--color-surface-3); color: var(--color-fg-primary); }
.icon-selected { display: none; }
.icon-button[aria-pressed="true"] .icon-default { display: none; }
.icon-button[aria-pressed="true"] .icon-selected { display: inline; }
.field,.search-field { --control-height: var(--control-md); display: flex; align-items: center; gap: calc(2 * var(--spacing)); width: 100%; min-width: 0; height: var(--control-height); padding: 0 var(--control-padding-md); border: 0; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.field[data-size="sm"],.search-field[data-size="sm"] { --control-height: var(--control-sm); }
.field:focus-within,.search-field:focus-within { outline: none; }
.field input,.search-field input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--color-fg-primary); outline: none; font-size: var(--text-body); }
input::placeholder { color: var(--color-fg-tertiary); opacity: 1; }
.search-field { border-radius: var(--radius-pill); color: var(--color-fg-tertiary); }
kbd { font: inherit; font-size: var(--text-body); white-space: nowrap; color: var(--color-fg-tertiary); }
.select-field { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.select-field select { appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-fg-secondary); height: var(--control-md); padding: 0 calc(8 * var(--spacing)) 0 var(--control-padding-md); max-width: 100%; outline: none; cursor: pointer; }
.select-field > .icon { position: absolute; right: calc(3 * var(--spacing)); width: var(--icon-sm); height: var(--icon-sm); pointer-events: none; color: var(--color-fg-tertiary); }
.chip { display: inline-flex; align-items: center; gap: calc(2 * var(--spacing)); border: 0; border-radius: var(--radius-pill); background: var(--color-chip); height: var(--control-md); padding: 0 var(--control-padding-md); font-size: var(--text-body); color: var(--color-fg-secondary); }
button.chip:hover { background: var(--color-chip-hover); }
button.chip[aria-pressed="true"] { color: var(--color-fg-primary); background: var(--color-surface-3); }
.segmented { display: inline-flex; gap: var(--spacing); padding: var(--spacing); border-radius: var(--radius-pill); background: var(--color-surface-1); }
.segmented .button { color: var(--color-fg-tertiary); }
.segmented .button[aria-pressed="true"] { background: var(--color-surface-3); color: var(--color-fg-primary); }
.switch { width: calc(9 * var(--spacing)); height: calc(5 * var(--spacing)); border: 0; border-radius: var(--radius-pill); background: var(--color-surface-3); padding: calc(.5 * var(--spacing)); }
.switch::after { content: ""; display: block; width: calc(4 * var(--spacing)); height: calc(4 * var(--spacing)); border-radius: var(--radius-pill); background: var(--color-fg-tertiary); transition: transform var(--duration-fast) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--color-surface-accent); }
.switch[aria-checked="true"]::after { transform: translateX(calc(4 * var(--spacing))); background: var(--color-fg-accent); }
.check { display: inline-flex; align-items: center; gap: calc(2 * var(--spacing)); color: var(--color-fg-secondary); }
.check input { appearance: none; width: calc(4 * var(--spacing)); height: calc(4 * var(--spacing)); margin: 0; border: 0; border-radius: calc(var(--radius-sm) / 2); background: var(--color-surface-3); cursor: pointer; }
.check input:checked { background: var(--color-surface-accent); box-shadow: inset 0 0 0 var(--spacing) var(--color-surface-3); }
.inspiration-card { display: block; position: relative; min-width: 0; width: 100%; padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--color-surface-2); overflow: hidden; text-align: left; cursor: pointer; }
.inspiration-card img { display: block; width: 100%; height: auto; }
.status { display: inline-flex; align-items: center; gap: calc(2 * var(--spacing)); color: var(--color-fg-secondary); font-size: var(--text-body); }
.status .icon { width: var(--icon-sm); height: var(--icon-sm); }
.spinner { animation: spin var(--duration-spin) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
dialog { color: var(--color-fg-primary); background: var(--color-surface-1); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: calc(6 * var(--spacing)); width: min(460px,calc(100vw - 8 * var(--spacing))); max-height: calc(100dvh - 8 * var(--spacing)); overflow: auto; }
dialog::backdrop { background: var(--color-scrim); }
.modal-header,.modal-footer { display: flex; align-items: center; justify-content: space-between; gap: calc(4 * var(--spacing)); }
.modal-copy { color: var(--color-fg-secondary); margin: calc(2 * var(--spacing)) 0 calc(6 * var(--spacing)); }
.modal-footer { margin-top: calc(6 * var(--spacing)); }
.dropzone { display: grid; justify-items: center; gap: calc(2 * var(--spacing)); width: 100%; padding: calc(8 * var(--spacing)) calc(4 * var(--spacing)); border: 0; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.dropzone .icon { width: var(--icon-lg); height: var(--icon-lg); }
.dropzone small { color: var(--color-fg-tertiary); font-size: var(--text-body); font-weight: inherit; }
.divider-label { margin: calc(5 * var(--spacing)) 0; font-size: var(--text-body); color: var(--color-fg-tertiary); }
.preview-dialog { width: min(var(--container-content-xl),calc(100vw - 8 * var(--spacing))); }
.preview-dialog img { width: 100%; display: block; border-radius: var(--radius-sm); margin: calc(4 * var(--spacing)) 0; }
.brand { display: inline-flex; align-items: center; gap: calc(2 * var(--spacing)); text-decoration: none; color: var(--color-fg-primary); }
.brand .icon { width: var(--icon-lg); height: var(--icon-lg); }
.form-label { display: block; margin-bottom: calc(2 * var(--spacing)); font-size: var(--text-body); }
.form-help,.page-note { font-size: var(--text-body); color: var(--color-fg-tertiary); margin-top: calc(3 * var(--spacing)); }
.form-help .icon { width: var(--icon-sm); height: var(--icon-sm); vertical-align: calc(-.5 * var(--spacing)); }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3 * var(--spacing)); }
.stack { display: grid; gap: calc(4 * var(--spacing)); }
.notice { padding: calc(4 * var(--spacing)); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-fg-secondary); }
.toast-region { position: fixed; inset: auto calc(6 * var(--spacing)) calc(6 * var(--spacing)) auto; width: min(380px,calc(100vw - 8 * var(--spacing))); max-height: calc(100dvh - 12 * var(--spacing)); margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-fg-primary); overflow: visible; pointer-events: none; z-index: var(--layer-notification); }
.toast-region::backdrop { background: transparent; pointer-events: none; }
.toast-stack { display: flex; flex-direction: column; gap: calc(2 * var(--spacing)); padding: 0; margin: 0; list-style: none; }
.toast { display: flex; align-items: center; gap: calc(3 * var(--spacing)); padding: calc(3 * var(--spacing)); border-radius: var(--radius-sm); background: var(--color-surface-3); color: var(--color-fg-primary); box-shadow: var(--shadow-md); pointer-events: auto; opacity: 1; transform: translateY(0); transition: opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out); }
.toast[data-leaving="true"] { pointer-events: none; opacity: 0; transform: translateY(calc(2 * var(--spacing))); }
.toast-symbol { display: flex; align-self: flex-start; padding-top: var(--spacing); color: var(--color-fg-secondary); }
.toast-symbol.is-loading .icon { animation: spin var(--duration-spin) linear infinite; }
.toast-copy { flex: 1; min-width: 0; }
.toast-message { font-size: var(--text-body); overflow-wrap: anywhere; }
.toast-description { margin-top: var(--spacing); color: var(--color-fg-secondary); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast-pending { margin: calc(2 * var(--spacing)) 0 0; text-align: right; color: var(--color-fg-secondary); }
@media (max-width:720px) { .toast-region { right: calc(4 * var(--spacing)); bottom: calc(4 * var(--spacing) + env(safe-area-inset-bottom)); } }

.menu { padding: calc(2 * var(--spacing)); background: var(--color-surface-2); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.menu .button { width: 100%; justify-content: flex-start; }
@media (pointer: coarse) { .icon-button { position: relative; }.icon-button::before { content: ""; position: absolute; width: var(--size-touch); height: var(--size-touch); } }

.text-h1 { font-size: var(--text-h1); line-height: var(--text-h1--line-height); letter-spacing: var(--text-h1--letter-spacing); font-weight: var(--text-h1--font-weight); }
.text-h2 { font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); font-weight: var(--text-h2--font-weight); }
.text-body { font-size: var(--text-body); line-height: var(--text-body--line-height); letter-spacing: var(--text-body--letter-spacing); font-weight: var(--text-body--font-weight); }
.text-small { font-size: var(--text-small); line-height: var(--text-small--line-height); letter-spacing: var(--text-small--letter-spacing); font-weight: var(--text-small--font-weight); }
.text-fg-primary { color: var(--color-fg-primary); }
.text-fg-secondary { color: var(--color-fg-secondary); }
.text-fg-tertiary { color: var(--color-fg-tertiary); }
.text-fg-disabled { color: var(--color-fg-disabled); }
.text-fg-accent { color: var(--color-fg-accent); }
.bg-surface-0 { background-color: var(--color-surface-0); }
.bg-surface-1 { background-color: var(--color-surface-1); }
.bg-surface-2 { background-color: var(--color-surface-2); }
.bg-surface-3 { background-color: var(--color-surface-3); }
.bg-surface-4 { background-color: var(--color-surface-4); }
.bg-surface-5 { background-color: var(--color-surface-5); }
.bg-surface-accent { background-color: var(--color-surface-accent); }
.menu-trigger { position: relative; }
.menu-trigger > summary { list-style: none; cursor: pointer; }
.menu-trigger > summary::-webkit-details-marker { display: none; }
.menu-trigger > .menu { position: absolute; top: calc(100% + 2 * var(--spacing)); right: 0; min-width: 180px; z-index: var(--layer-menu); }

.font-code { font-family: var(--font-code); }
.search-field[data-size="sm"] > .icon { width: var(--icon-sm); height: var(--icon-sm); }

code,pre { font-family: var(--font-code); }
code { font-size: var(--text-body); }
.inline-code { padding: calc(1 * var(--spacing)) calc(2 * var(--spacing)); border-radius: var(--radius-sm); background: var(--color-surface-3); }
.code-sample { font-size: var(--text-body); margin: 0; overflow-x: auto; }
.skeleton { width: 260px; max-width: 100%; height: 160px; border-radius: var(--radius-sm); background: var(--color-surface-3); animation: pulse var(--duration-pulse) ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: var(--opacity-skeleton); } }


.inspiration-card > .visual { display: block; padding: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }

/* Card controls stay above the media without obscuring it with a caption. */
.media-play,.card-options { position: absolute; z-index: var(--layer-raised); top: calc(2 * var(--spacing)); background: var(--color-surface-0); color: var(--color-fg-primary); border-radius: var(--radius-pill); }
.media-play { left: calc(2 * var(--spacing)); width: var(--control-sm); height: var(--control-sm); display: grid; place-items: center; pointer-events: none; }
.media-play .icon { width: var(--icon-sm); height: var(--icon-sm); }
.card-options { right: calc(2 * var(--spacing)); --control-height: var(--control-sm); }
.card-options:hover:not(:disabled),.card-options[aria-expanded="true"] { background: var(--color-surface-2); }
.card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.card-video[data-playing="true"] { opacity: 1; }
.media-play .media-play-active { display: none; }
.reference[data-playing="true"] .media-play-idle { display: none; }
.reference[data-playing="true"] .media-play-active { display: block; }
.card-menu { position: fixed; inset: auto; margin: 0; border: 0; width: 192px; max-width: calc(100vw - 4 * var(--spacing)); color: var(--color-fg-primary); }

/* Motion is owned by components; consumers never choose an easing or duration. */
.button,.icon-button,button.chip,.switch,.dropzone {
 transition: transform var(--duration-press) var(--ease-out),background-color var(--duration-fast) ease,color var(--duration-fast) ease;
}
:is(.button,.icon-button,button.chip,.switch,.dropzone):active:not(:disabled) { transform: scale(var(--scale-press)); }
.field,.search-field { transition: background-color var(--duration-fast) ease; }
.field:focus-within { background-color: var(--color-surface-3); }
@media (hover: hover) and (pointer: fine) {
 .field:hover { background-color: var(--color-surface-3); }
}
.card-video,.media-play { transition: opacity var(--duration-fast) var(--ease-out); }

/* Native top-layer transitions retain display/overlay through their exits. */
dialog {
 opacity: 0; transform: scale(var(--scale-press));
 transition: opacity var(--duration-enter) var(--ease-out),transform var(--duration-enter) var(--ease-out),display var(--duration-enter) allow-discrete,overlay var(--duration-enter) allow-discrete;
}
dialog[open] { opacity: 1; transform: none; }
dialog::backdrop {
 opacity: 0;
 transition: opacity var(--duration-enter) var(--ease-out),display var(--duration-enter) allow-discrete,overlay var(--duration-enter) allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }
.menu[popover] {
 border: 0; color: var(--color-fg-primary);
 opacity: 0; transform: scale(var(--scale-press)); transform-origin: right top;
 transition: opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),display var(--duration-fast) allow-discrete,overlay var(--duration-fast) allow-discrete;
}
.menu[popover]:popover-open { opacity: 1; transform: none; }
/* Account menus retain native details semantics and dismissal behaviour. */
.menu-trigger::details-content {
 opacity: 0; transform: scale(var(--scale-press)); transform-origin: right top;
 transition: opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),content-visibility var(--duration-fast) allow-discrete;
}
.menu-trigger[open]::details-content { opacity: 1; transform: none; }
.tooltip {
 position: fixed; inset: auto; margin: 0; border: 0; padding: calc(1.5 * var(--spacing)) calc(2.5 * var(--spacing));
 max-width: min(260px,calc(100vw - 4 * var(--spacing))); border-radius: var(--radius-sm); background: var(--color-surface-3); color: var(--color-fg-primary); box-shadow: var(--shadow-md);
 font-size: var(--text-small); line-height: var(--text-small--line-height); overflow-wrap: anywhere;
 opacity: 0; transform: scale(var(--scale-press));
 transition: opacity var(--duration-tooltip) var(--ease-out),transform var(--duration-tooltip) var(--ease-out),display var(--duration-tooltip) allow-discrete,overlay var(--duration-tooltip) allow-discrete;
}
.tooltip:popover-open { opacity: 1; transform: none; }
.tooltip[data-instant] { transition-duration: 0ms; }
@starting-style {
 dialog[open] { opacity: 0; transform: scale(var(--scale-press)); }
 dialog[open]::backdrop { opacity: 0; }
 .menu[popover]:popover-open { opacity: 0; transform: scale(var(--scale-press)); }
 .menu-trigger[open]::details-content { opacity: 0; transform: scale(var(--scale-press)); }
 .tooltip:popover-open { opacity: 0; transform: scale(var(--scale-press)); }
 .toast { opacity: 0; transform: translateY(calc(2 * var(--spacing))); }
}
/* A single group entrance; searching and navigating the image grid stay still. */
.surface-enter,.app-header,.page-content,.auth-panel,.library-canvas {
 /* Release the animated opacity after entry so descendants can blur the page
    backdrop instead of being trapped inside the parent's compositing layer. */
 animation: surface-enter var(--duration-enter) var(--ease-out) backwards;
}
.library-canvas { animation-delay: var(--delay-surface-enter); }
@keyframes surface-enter { from { opacity: 0; transform: translateY(calc(2 * var(--spacing))); } to { opacity: 1; transform: none; } }
/* Frequent keyboard actions never wait for decorative motion. */
:root[data-input="keyboard"] :is(dialog,.menu[popover],.tooltip),
:root[data-input="keyboard"] dialog::backdrop,
:root[data-input="keyboard"] .menu-trigger::details-content { transition-duration: 0ms; }
@media (prefers-reduced-motion: reduce) {
 *,*::before,*::after { scroll-behavior: auto !important; }
 :is(.surface-enter,.app-header,.page-content,.auth-panel,.library-canvas) { animation-name: surface-fade; animation-duration: var(--duration-press); animation-delay: 0ms; }
 @keyframes surface-fade { from { opacity: 0; } to { opacity: 1; } }
 dialog,dialog[open],.menu[popover],.menu[popover]:popover-open,.tooltip,.tooltip:popover-open,.menu-trigger::details-content,.menu-trigger[open]::details-content,.toast,.toast[data-leaving="true"] { transform: none !important; transition-duration: var(--duration-press); }
 :is(.button,.icon-button,button.chip,.switch,.dropzone):active:not(:disabled),.switch::after { transform: none; }
 .switch[aria-checked="true"]::after { transform: translateX(calc(4 * var(--spacing))); transition: none; }
 .spinner,.toast-symbol.is-loading .icon,.skeleton { animation: none; }
}
/* Exiting surfaces never intercept the next action. */
dialog:not([open]),dialog:not([open])::backdrop,.menu[popover]:not(:popover-open),.tooltip:not(:popover-open),.menu-trigger:not([open])::details-content { pointer-events: none; }
:root[data-input="keyboard"] :is(.button,.icon-button,button.chip,.switch,.dropzone):active:not(:disabled) { transform: none; }

/* Solid surfaces shared by floating controls and stacked panels. */
.floating-surface { position: relative; background: var(--color-surface-2); border-radius: var(--radius-pill); }
.surface-panel { border-radius: var(--radius-card); padding: calc(5 * var(--spacing)); background: var(--color-surface-1); }
.floating-button,.floating-toolbar { padding: var(--spacing); }
.floating-toolbar { display: flex; align-items: center; gap: var(--spacing); }
.card-options { background: var(--color-surface-2); }
.card-options:hover:not(:disabled),.card-options[aria-expanded="true"] { background: var(--color-surface-3); }
.preview-sidebar .preview-actions { background: transparent; }

/* Desktop card actions stay quiet until the card is engaged. */
.card-options { transition: opacity var(--duration-fast) var(--ease-out),transform var(--duration-press) var(--ease-out),background-color var(--duration-fast) ease,color var(--duration-fast) ease; }
@media (hover: hover) and (pointer: fine) {
 .reference .card-options { opacity: 0; pointer-events: none; }
 .reference:hover .card-options,.reference:focus-within .card-options,.reference .card-options[aria-expanded="true"] { opacity: 1; pointer-events: auto; }
}

/* Capture previews are shared by the live modal and UI kit specimen. */
.capture-link-row { margin-top: calc(6 * var(--spacing)); }
.capture-link-row .field { width: 100%; }
.capture-or { display: block; text-align: center; }
.dropzone[data-dragging="true"] { background: var(--color-surface-3); }
.capture-previews { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: calc(3 * var(--spacing)); margin-top: calc(4 * var(--spacing)); }
.capture-preview { position: relative; min-width: 0; aspect-ratio: 4 / 3; background: var(--color-surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.capture-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.capture-remove { position: absolute; top: var(--spacing); right: var(--spacing); background: var(--color-surface-2); }
.capture-add { padding: 0; align-content: center; }
.capture-add:hover:not(:disabled) { background: var(--color-surface-3); }
.capture-loading { min-height: calc(48 * var(--spacing)); display: grid; place-content: center; justify-items: center; gap: calc(4 * var(--spacing)); color: var(--color-fg-secondary); }
.capture-loading .spinner { display: flex; }
.capture-loading .icon { width: calc(12 * var(--spacing)); height: calc(12 * var(--spacing)); }
#capture-dialog .form-help:empty { display: none; }
#capture-dialog .modal-footer .button { width: 100%; }
@media (hover: hover) and (pointer: fine) {
 .capture-remove { opacity: 0; pointer-events: none; }
 .capture-preview:hover .capture-remove,.capture-preview:focus-within .capture-remove { opacity: 1; pointer-events: auto; }
}

/* Shared video player. The frame follows the media ratio; its solid controls float above it. */
.video-player { position: relative; container-type: inline-size; flex: none; max-width: 100%; max-height: 100%; border-radius: var(--radius-sm); background: var(--color-surface-0); }
.video-player > video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; cursor: pointer; }
.video-player:focus-visible,video:focus-visible { outline: none; }
.video-controls { position: absolute; z-index: var(--layer-raised); bottom: calc(3 * var(--spacing)); left: 50%; transform: translateX(-50%); width: calc(100% - 6 * var(--spacing)); max-width: 640px; display: flex; align-items: center; gap: calc(2 * var(--spacing)); padding: var(--spacing) calc(2 * var(--spacing)); color: var(--color-fg-primary); opacity: 1; transition: opacity var(--duration-fast) var(--ease-out); }
.video-controls .icon-button { flex: none; }
.video-time { flex: none; font-size: var(--text-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.video-timeline { --video-progress: 0%; appearance: none; flex: 1; min-width: calc(6 * var(--spacing)); height: calc(6 * var(--spacing)); margin: 0; padding: 0; background: transparent; cursor: pointer; }
.video-timeline::-webkit-slider-runnable-track { height: var(--size-slider-track); border-radius: var(--radius-pill); background: linear-gradient(to right,var(--color-fg-primary) var(--video-progress,0%),var(--color-fg-tertiary) var(--video-progress,0%)); }
.video-timeline::-moz-range-track { height: var(--size-slider-track); border-radius: var(--radius-pill); background: var(--color-fg-tertiary); }
.video-timeline::-moz-range-progress { height: var(--size-slider-track); border-radius: var(--radius-pill); background: var(--color-fg-primary); }
.video-timeline::-webkit-slider-thumb { appearance: none; height: var(--size-slider-thumb); width: var(--size-slider-thumb); border-radius: 50%; background: var(--color-fg-primary); margin-top: calc((var(--size-slider-track) - var(--size-slider-thumb)) / 2); border: 0; }
.video-timeline::-moz-range-thumb { height: var(--size-slider-thumb); width: var(--size-slider-thumb); border-radius: 50%; background: var(--color-fg-primary); border: 0; }
.video-timeline:disabled { opacity: var(--opacity-muted); cursor: default; }
.video-player[data-controls="hidden"]:not(:focus-within) .video-controls { opacity: 0; pointer-events: none; }
.video-player:fullscreen { width: 100% !important; height: 100% !important; max-width: none; max-height: none; border-radius: 0; }
.video-player:fullscreen .video-controls { bottom: calc(6 * var(--spacing)); }
@media (max-width:480px) { .video-controls { gap: var(--spacing); width: calc(100% - 4 * var(--spacing)); bottom: calc(2 * var(--spacing)); flex-wrap: wrap; } .video-timeline { order: 1; flex-basis: 100%; height: calc(4 * var(--spacing)); } .video-time { margin-right: auto; } }
@media (prefers-reduced-motion: reduce) { .video-controls { transition: none; } }
/* Portrait videos also get compact controls when the surrounding viewport is wide. */

@container (max-width:400px) { .video-controls { gap: var(--spacing); flex-wrap: wrap; } .video-timeline { order: 1; flex-basis: 100%; height: calc(4 * var(--spacing)); } .video-time { margin-right: auto; } }
@container (max-width:240px) { .video-controls { width: calc(100% - 2 * var(--spacing)); gap: 0; padding: var(--spacing); justify-content: space-between; } .video-controls .icon-button { --control-height: var(--control-sm); } .video-time { display: none; } }

/* Compact source preview, shared by the reference rail and UI kit. */
.source-card { position: relative; min-width: 0; padding: calc(4 * var(--spacing)); border-radius: var(--radius-sm); background: var(--color-surface-2); transition: background-color var(--duration-fast) var(--ease-out); }
.source-card-header { display: flex; align-items: center; gap: calc(2 * var(--spacing)); }
.source-card-header > .icon { flex: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--color-fg-secondary); }
.source-card-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--text-h2--font-weight); }
.source-card time { flex: none; margin-left: auto; font-size: var(--text-small); color: var(--color-fg-tertiary); }
.source-card-content { margin: calc(3 * var(--spacing)) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-fg-secondary); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.source-card-link { position: absolute; z-index: var(--layer-raised); inset: 0; border-radius: inherit; }
a.source-card-author { position: relative; z-index: var(--layer-floating); text-decoration: none; }
.source-card:has(.source-card-link:focus-visible) { background: var(--color-surface-3); }
@media (hover: hover) and (pointer: fine) { .source-card:has(.source-card-link):hover { background: var(--color-surface-3); } }

/* Source-linked image navigator: always-visible horizontal scrolling. */
.image-collection { min-width: 0; }
.collection-strip { display: flex; gap: calc(3 * var(--spacing)); overflow-x: auto; overscroll-behavior-x: contain; padding: var(--spacing) 0; }
.collection-item { position: relative; flex: 0 0 var(--size-preview-thumbnail-width); display: block; border: 0; padding: 0; background: transparent; border-radius: var(--radius-sm); }
.collection-item img,.mega-recent-item img { display: block; width: 100%; height: var(--size-preview-thumbnail-height); object-fit: cover; border-radius: inherit; background: var(--color-surface-2); }
.collection-current { position: absolute; top: var(--spacing); right: var(--spacing); display: grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg); border-radius: var(--radius-pill); background: var(--color-surface-accent); color: var(--color-fg-accent); }
.collection-current .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* Shared mega search: solid search surfaces and native top-layer dismissal. */
.mega-search { min-width: 0; width: 100%; margin-inline: auto; max-width: var(--size-search-collapsed); transition: max-width var(--duration-search-expand) var(--ease-out); }
.mega-search[data-open="true"] { max-width: var(--size-search-max); }
.mega-search-panel { --color-chip: var(--color-surface-3); --color-chip-hover: var(--color-surface-4); --color-control-hover: var(--color-surface-4); position: fixed; inset: auto; margin: 0; width: min(var(--size-search-max),calc(100vw - 8 * var(--spacing))); max-height: calc(100dvh - 8 * var(--spacing)); overflow-y: auto; padding: calc(4 * var(--spacing)); border: 0; border-radius: var(--radius-card); background: var(--color-surface-2); color: var(--color-fg-primary); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(calc(-2 * var(--spacing))) scale(var(--scale-search-reveal)); transform-origin: center top; transition: opacity var(--duration-enter) var(--ease-out),transform var(--duration-enter) var(--ease-out),display var(--duration-enter) allow-discrete,overlay var(--duration-enter) allow-discrete; }
.mega-search-panel:popover-open { opacity: 1; transform: none; }
@starting-style { .mega-search-panel:popover-open { opacity: 0; transform: translateY(calc(-2 * var(--spacing))) scale(var(--scale-search-reveal)); } }
.mega-search-panel[data-placement="above"] { transform-origin: center bottom; }
.mega-search-panel:popover-open .mega-search-section { animation: search-section-enter var(--duration-enter) var(--ease-out) both; }
.mega-search-panel:popover-open .mega-search-section:nth-child(2) { animation-delay: var(--delay-search-section); }
.mega-search-panel:popover-open .mega-search-section:nth-child(3) { animation-delay: calc(2 * var(--delay-search-section)); }
@keyframes search-section-enter { from { opacity: 0; transform: translateY(var(--spacing)); } to { opacity: 1; transform: none; } }
.mega-search-panel:not(:popover-open) { pointer-events: none; }
.mega-search-section + .mega-search-section { margin-top: calc(5 * var(--spacing)); }
.mega-search-section > h2,.mega-section-heading { margin-bottom: calc(3 * var(--spacing)); }
.mega-scroll { display: flex; gap: calc(2 * var(--spacing)); overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--spacing); min-width: 0; }
.mega-scroll > * { flex: none; }
.mega-search-panel button.chip[aria-pressed="true"] { background: var(--color-surface-4); }
.mega-search .category-filters { flex-wrap: nowrap; margin: 0; }
.mega-filter-row .select-field { max-width: none; }
.mega-search-actions,.mega-section-heading { display: flex; align-items: center; justify-content: space-between; gap: calc(3 * var(--spacing)); }
.mega-search-actions { margin-top: calc(2 * var(--spacing)); justify-content: flex-end; }
.mega-recent { gap: calc(3 * var(--spacing)); min-height: calc(var(--size-preview-thumbnail-height) + var(--spacing)); align-items: start; }
.mega-recent > p { margin: 0; }
.mega-recent-item { width: var(--size-preview-thumbnail-width); display: grid; align-content: start; gap: calc(2 * var(--spacing)); padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; color: var(--color-fg-secondary); }
@media (prefers-reduced-motion: reduce) { .mega-search { transition: none; } .mega-search-panel { transform: none !important; transition-duration: var(--duration-press); } .mega-search-panel:popover-open .mega-search-section { animation: none; } }

.category-count { color: var(--color-fg-tertiary); font-size: var(--text-small); }

.mega-search-panel[data-motion="instant"] { transition-duration: 0ms; }
.mega-search-panel[data-motion="instant"]:popover-open .mega-search-section { animation: none; }

/* Shared select: custom top-layer dropdown, backed by a form value. */
.select-trigger { justify-content: space-between; background: var(--color-chip); }
.select-trigger[aria-expanded="true"] { background: var(--color-chip-hover); }
.select-trigger > .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-fg-tertiary); }
.select-menu { display: grid; position: fixed; inset: auto; margin: 0; width: max-content; padding: var(--spacing); max-width: calc(100vw - 4 * var(--spacing)); overflow-y: auto; border-radius: var(--radius-sm); background: var(--color-surface-1); box-shadow: var(--shadow-md); }
.select-menu:not(:popover-open) { display: none; }
.select-menu .select-option { width: 100%; justify-content: space-between; border-radius: var(--radius-sm); }
.select-option > .icon { width: var(--icon-sm); height: var(--icon-sm); visibility: hidden; }
.select-option[aria-selected="true"] > .icon { visibility: visible; }
.select-option:focus { background: var(--color-control-hover); color: var(--color-fg-primary); }

/* Saved references remain recognizable when card hover actions are hidden. */
.card-bookmark { position: absolute; z-index: var(--layer-raised); top: calc(2 * var(--spacing)); right: calc(10 * var(--spacing)); --control-height: var(--control-sm); background: var(--color-surface-2); }
.card-bookmark[aria-pressed="true"] { background: var(--color-surface-3); }
@media (hover: hover) and (pointer: fine) {
 .reference .card-bookmark { opacity: 0; pointer-events: none; }
 .reference:hover .card-bookmark,.reference:focus-within .card-bookmark,.reference .card-bookmark[aria-pressed="true"] { opacity: 1; pointer-events: auto; }
}
.card-bookmark { transition: opacity var(--duration-fast) var(--ease-out),background-color var(--duration-fast) ease; }

/* Replace browser-specific search cancellation with the shared icon button. */
.search-field[data-search-enhanced] input::-webkit-search-cancel-button { appearance: none; display: none; }
.search-field .search-clear { flex: none; }
.search-clear .icon { width: var(--icon-sm); height: var(--icon-sm); }
.search-field input:placeholder-shown + .search-clear,
.search-field input:disabled + .search-clear,
.search-field input[readonly] + .search-clear { display: none; }

/* App scrollers keep native wheel, touch and keyboard behavior without tracks. */
:is(html,body,.library-canvas,.details,dialog,.mega-search-panel,.mega-scroll,.collection-strip,.select-menu) { scrollbar-width: none; }
:is(html,body,.library-canvas,.details,dialog,.mega-search-panel,.mega-scroll,.collection-strip,.select-menu)::-webkit-scrollbar { display: none; }