/* Material kits, layout and motion share the saved appearance tokens. */
:root {
  --r-button: 10px; --r-panel: 8px; --r-menu: 8px; --r-header: 8px;
  --r-ctl: var(--r-button); --r-ctl-sm: var(--r-button); --r-ctl-lg: var(--r-button);
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px;
  --motion-press: 130ms; --motion-drop: 200ms;
}
:root, [data-theme="light"] {
  --kit-face: var(--surface); --kit-top: color-mix(in srgb,var(--surface) 88%,white); --kit-bottom: color-mix(in srgb,var(--surface) 88%,black); --kit-ink: var(--text);
  --kit-high: rgba(255,255,255,.8); --kit-low: rgba(0,0,0,.24); --kit-line: color-mix(in srgb,var(--surface) 72%,var(--text));
  --kit-accent: var(--accent-text); --kit-accent-fill: var(--accent); --kit-on-accent: var(--accent-ink);
  --kit-glass: color-mix(in srgb,var(--surface) 84%,transparent); --kit-glass-edge: rgba(255,255,255,.65);
  --kit-glow-halo: color-mix(in srgb,var(--accent) 28%,transparent);
  --sunk-bg: color-mix(in srgb,var(--surface) 90%,black);
  --sidebar-fill: var(--look-light-sidebar, var(--surface));
  --header-fill: var(--look-light-header, var(--surface-2));
  --hero-fill: var(--look-light-hero, var(--surface)); --hero-ink: var(--look-light-hero-ink, var(--text));
}
[data-theme="dark"] {
  --kit-face: var(--surface); --kit-top: color-mix(in srgb,var(--surface) 88%,white); --kit-bottom: color-mix(in srgb,var(--surface) 82%,black); --kit-ink: var(--text);
  --kit-high: rgba(255,255,255,.13); --kit-low: rgba(0,0,0,.52); --kit-line: color-mix(in srgb,var(--surface) 72%,var(--text));
  --kit-accent: var(--accent-text); --kit-accent-fill: var(--accent); --kit-on-accent: var(--accent-ink);
  --kit-glass: color-mix(in srgb,var(--surface) 84%,transparent); --kit-glass-edge: rgba(255,255,255,.24);
  --kit-glow-halo: color-mix(in srgb,var(--accent) 28%,transparent);
  --sunk-bg: color-mix(in srgb,var(--surface) 78%,black);
  --sidebar-fill: var(--look-dark-sidebar, var(--surface));
  --header-fill: var(--look-dark-header, var(--surface-2));
  --hero-fill: var(--look-dark-hero, var(--surface)); --hero-ink: var(--look-dark-hero-ink, var(--text));
}
[data-btn] {
  --material-face: linear-gradient(145deg,var(--kit-top),var(--kit-face));
  --material-shadow: -2px -2px 7px color-mix(in srgb,var(--kit-high) 55%,transparent),2px 4px 9px var(--kit-low),inset 0 1px 1px var(--kit-high);
  --material-hover: -2px -2px 8px color-mix(in srgb,var(--kit-high) 65%,transparent),2px 5px 11px var(--kit-low),inset 0 1px 1px var(--kit-high);
  --material-down: inset 2px 3px 5px color-mix(in srgb,var(--kit-low) 76%,transparent),inset -2px -2px 4px color-mix(in srgb,var(--kit-high) 66%,transparent);
  --material-selected: var(--material-down),inset 0 0 0 1px var(--kit-accent);
  --material-icon: none; --material-backdrop: none;
  --btn-bg:var(--material-face); --btn-bg-hover:var(--material-face);
  --btn-shadow:var(--material-shadow); --btn-shadow-quiet:var(--material-shadow); --btn-shadow-hover:var(--material-hover); --btn-press:var(--material-down);
}
[data-btn="inset"] {
  --material-face: linear-gradient(150deg,var(--kit-face),var(--kit-top));
  --material-shadow: inset 3px 3px 6px var(--kit-low),inset -3px -3px 6px var(--kit-high),0 1px 0 var(--kit-high);
  --material-hover: inset 2px 2px 4px var(--kit-low),inset -2px -2px 4px var(--kit-high),0 0 0 1px var(--kit-accent);
  --material-down: inset 4px 4px 7px var(--kit-low),inset -1px -1px 3px var(--kit-high);
}
[data-btn="clay"] {
  --material-face: linear-gradient(155deg,var(--kit-top),var(--kit-face));
  --material-shadow: inset 1px 2px 4px var(--kit-high),inset -1px -2px 5px color-mix(in srgb,var(--kit-low) 35%,transparent),2px 5px 10px var(--kit-low);
  --material-hover: inset 1px 2px 4px var(--kit-high),inset -1px -2px 5px color-mix(in srgb,var(--kit-low) 35%,transparent),2px 6px 12px var(--kit-low);
  --material-down: inset 2px 3px 6px var(--kit-low),inset -1px -1px 4px var(--kit-high);
}
[data-btn="metal"] {
  --material-face: linear-gradient(135deg,var(--kit-top),var(--kit-face) 35%,var(--kit-bottom) 64%,var(--kit-face));
  --material-shadow: inset 0 0 0 1px var(--kit-line),inset 0 2px 0 var(--kit-high),inset 0 -2px 1px var(--kit-low),0 3px 0 var(--kit-low),0 5px 9px color-mix(in srgb,var(--kit-low) 72%,transparent);
  --material-hover: inset 0 0 0 1px var(--kit-high),inset 0 2px 0 var(--kit-high),inset 0 -2px 1px var(--kit-low),0 3px 0 var(--kit-low),0 6px 12px color-mix(in srgb,var(--kit-low) 72%,transparent);
  --material-down: inset 0 0 0 1px var(--kit-accent),inset 0 2px 5px var(--kit-low),0 1px 0 var(--kit-high);
}
[data-btn="glass"] {
  --material-face: linear-gradient(160deg,color-mix(in srgb,var(--kit-high) 42%,transparent),transparent 50%,color-mix(in srgb,var(--kit-low) 22%,transparent)) var(--kit-glass);
  --material-shadow: inset 0 1px 1px var(--kit-glass-edge),inset 1px 0 0 var(--kit-glass-edge),inset 0 -2px 4px color-mix(in srgb,var(--kit-low) 45%,transparent),0 4px 9px color-mix(in srgb,var(--kit-low) 45%,transparent);
  --material-hover: var(--material-shadow),inset 0 0 0 1px var(--kit-glass-edge);
  --material-down: inset 0 2px 6px color-mix(in srgb,var(--kit-low) 58%,transparent),inset 0 0 0 1px var(--kit-glass-edge);
  --material-backdrop: blur(6px);
}
[data-btn="glow"] {
  --material-face: linear-gradient(150deg,var(--kit-top),var(--kit-face));
  --material-shadow: inset 0 1px 2px var(--kit-high),2px 4px 9px var(--kit-low);
  --material-hover: var(--material-shadow),0 0 14px var(--kit-glow-halo);
  --material-down: inset 2px 3px 6px var(--kit-low),0 0 10px var(--kit-glow-halo);
  --material-icon: drop-shadow(0 0 3px var(--kit-glow-halo));
}
[data-btn="outline"] {
  --material-face: var(--kit-top);
  --material-shadow: inset 0 0 0 1px var(--kit-line);
  --material-hover: inset 0 0 0 1px var(--kit-accent),0 2px 5px color-mix(in srgb,var(--kit-low) 25%,transparent);
  --material-down: inset 0 0 0 2px var(--kit-accent);
}

/* Only variables depend on an ancestor kit. Nested light/dark previews stay independent. */
.btn, .dd-trigger:not(.pill), .chev-btn {
  background: var(--material-face); color: var(--kit-ink); box-shadow: var(--material-shadow);
  border-radius: var(--r-button); backdrop-filter: var(--material-backdrop); transform: none;
  transition: transform var(--motion-press) var(--ease-out),box-shadow var(--motion-press) var(--ease-out),background-color var(--motion-press) ease-out,color var(--motion-press) ease-out;
}
.btn:hover, .dd-trigger:not(.pill):hover, .chev-btn:hover { background:var(--material-face); color:var(--kit-ink); box-shadow:var(--material-hover); transform:none; }
.btn svg, .chev-btn svg { filter:var(--material-icon); }
.btn.btn-primary { color:var(--kit-accent); }
.btn.btn-primary.btn-icon svg { stroke:currentColor; }
.btn.btn-primary:not(.btn-icon), .btn.btn-primary:not(.btn-icon):hover, .btn.btn-primary:not(.btn-icon):active { background:var(--kit-accent-fill); color:var(--kit-on-accent); }
.btn.btn-danger, .btn.btn-danger:hover { color:var(--danger); }
.btn.btn-ghost { box-shadow:var(--material-shadow); }
.btn:is(:active,.pressed,.active), .dd.open .dd-trigger:not(.pill), .chev-btn:active {
  background:var(--material-face); box-shadow:var(--material-selected); color:var(--kit-accent); transform:translateY(2px); transition-duration:var(--motion-press);
}
.btn:is(.pressed,.active) { transform:none; }
.btn:disabled, .btn[aria-disabled="true"], .dd-trigger:disabled { opacity:.45; transform:none; cursor:default; box-shadow:var(--material-shadow); }
.btn:focus-visible, .dd-trigger:focus-visible, .chev-btn:focus-visible { outline:2px solid var(--kit-accent); outline-offset:3px; }
.input, .textarea, .dd-menu { border-radius:var(--r-button); }
.seg .ind { background:var(--material-face); box-shadow:var(--material-shadow); }
.switch::after { background:var(--material-face); box-shadow:var(--material-shadow); }
.switch.on { background:var(--kit-accent); }
button, [role="button"], .btn, .btn span, .btn svg { cursor:pointer; }
button:disabled, button:disabled * { cursor:default; }

/* Status captions reveal on hover, keyboard focus and touch layouts. */
.seg button { gap:5px; }
.seg-caption { display:inline-flex; align-items:center; }
.seg.compact { flex-shrink:0; }
.seg.compact .ind { display:none; }
.seg.compact button { height:30px; min-width:34px; padding:0 9px; gap:0; }
.seg.compact button svg { flex-shrink:0; }
.seg.compact .seg-caption { display:none; }
.seg.compact button { flex:0 0 36px; width:36px; justify-content:center; transform:none !important; }
.seg-tooltip { position:fixed; z-index:95; padding:7px 10px; border-radius:var(--r-sm); color:var(--text); background:var(--surface); box-shadow:var(--shadow-2); white-space:nowrap; pointer-events:none; }
.seg.compact button.active { background:var(--material-face); color:var(--kit-accent); box-shadow:var(--material-selected); }
.sdot:not(.on) { position:relative; }
.sdot:not(.on) .sdot-label { position:absolute; left:0; top:calc(100% + 6px); z-index:95; max-width:none; margin:0; padding:7px 10px; border-radius:var(--r-sm); background:var(--surface); color:var(--text); box-shadow:var(--shadow-2); visibility:hidden; opacity:0; pointer-events:none; transition:opacity var(--motion-drop) ease-out; }
.sdot:not(.on):is(:hover,:focus-visible) .sdot-label { visibility:visible; opacity:1; }
.user-preferences { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:6px; padding:4px 2px; }
.user-preferences .seg { flex-shrink:0; overflow:visible; }
.user-preferences .seg.sm button { width:28px; justify-content:center; padding:0; }

/* Independent workspace surfaces. */
:root, [data-depth="raised"] { --panel-shadow:inset 0 1px 2px rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.16),0 3px 0 rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.24); --panel-sheen:linear-gradient(160deg,rgba(255,255,255,.07),transparent 42%,rgba(0,0,0,.04)); }
[data-depth="soft"] { --panel-shadow:var(--shadow-1),var(--hl); --panel-sheen:none; }
[data-depth="flat"] { --panel-shadow:none; --panel-sheen:none; }
.panel, .stat, .table-wrap { border-radius:var(--r-panel); box-shadow:var(--panel-shadow); background-image:var(--panel-sheen); }
a.panel:hover { box-shadow:var(--panel-shadow); transform:none; }
.modal, .sheet { border-radius:var(--r-panel); }
.sidebar { background:var(--sidebar-fill); border-radius:0 var(--r-menu) var(--r-menu) 0; }
.nav a, .nav-user, .sidebar .brand-pick { border-radius:var(--r-menu); }
.period-strip, .tabs-bar { border-radius:var(--r-header); }
.period-strip, .dd-menu.cal-menu { background:color-mix(in srgb,var(--surface) calc(100% - var(--panel-alpha, 0%)),transparent); backdrop-filter:var(--panel-glass,none); box-shadow:var(--shadow-1),var(--hl); }
.topbar.stuck .period-strip { box-shadow:var(--shadow-2),var(--hl); }
.ps-month.on, .ps-cal.on { background:var(--kit-accent-fill); color:var(--kit-on-accent); box-shadow:var(--material-shadow); }
.ps-month.on:active, .ps-cal.on:active { box-shadow:var(--material-down); }
.panel-head { background:var(--header-fill); border-radius:var(--r-header) var(--r-header) 0 0; }
.panel:has(> .panel-head), .table-wrap:has(> .table) { border-top-left-radius:max(var(--r-panel),var(--r-header)); border-top-right-radius:max(var(--r-panel),var(--r-header)); }
.table thead th { background:var(--header-fill); }
.table thead th:first-child { border-radius:var(--r-header) 0 0 0; }
.table thead th:last-child { border-radius:0 var(--r-header) 0 0; }
.panel.hero { background:var(--panel-sheen) var(--hero-fill); color:var(--hero-ink); box-shadow:var(--panel-shadow); }
.panel.hero .hero-label { color:var(--hero-ink); opacity:1; }
.panel.hero .sdot { background:var(--hero-fill); color:var(--hero-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-ink) 25%,transparent); }
.panel.hero.clickable:hover { box-shadow:var(--panel-shadow); transform:none; }
.panel.hero.clickable:active:not(:has(.sdot:active)) { transform:translateY(2px); box-shadow:var(--inset); }
:root[data-header="solid"] .topbar, :root[data-header="solid"] .topbar.stuck { background:var(--header-fill); backdrop-filter:none; border-radius:0 0 var(--r-header) var(--r-header); }
:root[data-header="solid"] .tabs-bar { background:var(--header-fill); padding:0 10px; }
:root[data-header="glass"] .topbar, :root[data-header="glass"] .tabs-bar { background:color-mix(in srgb,var(--header-fill) 80%,transparent); backdrop-filter:blur(10px); border-radius:var(--r-header); }
:root[data-menu="glass"] .sidebar { background:color-mix(in srgb,var(--sidebar-fill) 82%,transparent); backdrop-filter:blur(12px); }
:root[data-nav="raised"] .nav a.active { background:var(--material-face); color:var(--kit-accent); box-shadow:var(--material-selected); }
:root[data-nav="line"] .nav a.active { background:color-mix(in srgb,var(--sidebar-fill) 90%,var(--accent)); color:var(--accent-text); box-shadow:inset 3px 0 0 var(--accent-text); }
@media (min-width:1001px) { :root[data-menu="floating"] .sidebar { margin:12px; top:12px; height:calc(100vh - 24px); border-radius:var(--r-menu); box-shadow:var(--shadow-2); } }

/* Finite interaction effects. System reduced motion overrides every choice. */
.dd-menu { transition-duration:var(--motion-drop); transform-origin:top center; }
.dd-menu.up { transform-origin:bottom center; }
:root[data-drop="fade"] .dd-menu { clip-path:none; transform:none; transition:opacity var(--motion-drop) ease-out; }
:root[data-drop="scale"] .dd-menu { clip-path:none; transform:scale(.94); transition:transform var(--motion-drop) var(--ease-out),opacity var(--motion-drop) ease-out; }
:root[data-drop="scale"] .dd-menu.show { transform:scale(1); }
:root[data-drop="none"] .dd-menu { clip-path:none; transform:none; transition:none; }
.expand { transition-duration:var(--motion-drop); }
.drop-up-enter-active, .drop-up-leave-active { transition-duration:var(--motion-drop); }
:root[data-drop="fade"] :is(.drop-up-enter-from,.drop-up-leave-to) { clip-path:none; transform:none; }
:root[data-drop="scale"] :is(.drop-up-enter-from,.drop-up-leave-to) { clip-path:none; transform:scale(.94); }
:root[data-drop="none"] :is(.expand,.drop-up-enter-active,.drop-up-leave-active) { transition:none; }
:root[data-press="none"] :is(.btn,.dd-trigger,.chev-btn,.seg button,.nav a):is(:hover,:active,.pressed), :root[data-press="none"] .dd.open .dd-trigger { transform:none; }
:root[data-press="shrink"] :is(.btn,.dd-trigger,.chev-btn,.seg button,.nav a):active { transform:scale(.95); }
:root[data-press="glow"] :is(.btn,.dd-trigger,.chev-btn,.seg button):active { transform:none; box-shadow:var(--material-down),0 0 0 3px color-mix(in srgb,var(--kit-accent) 30%,transparent),0 0 14px color-mix(in srgb,var(--kit-accent) 24%,transparent); }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition-duration:0ms !important; animation-duration:1ms !important; }
  .btn:is(:hover,:active,.pressed), .dd-trigger:is(:hover,:active), .dd.open .dd-trigger, .chev-btn:active, .seg button:active, .nav a:active { transform:none !important; }
}

/* The editor uses the same controls as the product, with side-by-side theme samples. */
.appearance-editor { gap:18px; }
.appearance-toolbar { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.appearance-toolbar .grow { min-width:200px; }
.appearance-toolbar p { margin-top:4px; }
.appearance-notice { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px; background:var(--warn-soft); border-radius:var(--r-panel); }
.kit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr)); gap:18px; align-items:start; }
.kit-card { overflow:hidden; box-shadow:var(--shadow-1); }
.kit-card.selected { outline:2px solid var(--accent-text); outline-offset:2px; }
.kit-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 14px; }
.kit-card-title p { margin-top:5px; }
.kit-card-title > svg { flex-shrink:0; color:var(--accent-text); }
.kit-duo { display:grid; grid-template-columns:1fr 1fr; gap:1px; }
.kit-sample { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; min-height:132px; padding:16px 10px 23px; background:var(--kit-face); color:var(--kit-ink); }
.kit-theme-name { align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.75; padding-left:6px; }
.kit-sample-actions { display:flex; justify-content:center; gap:14px; }
.kit-sample .btn.btn-icon { width:38px; height:38px; }
.kit-sample .btn.btn-icon svg { width:18px; height:18px; }
.kit-card-footer { display:flex; align-items:center; gap:10px; padding:16px 18px; }
.kit-reference { display:block; max-width:100%; max-height:65vh; object-fit:contain; margin:auto; }
.appearance-radius-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:24px; align-items:start; }
.appearance-radius-grid .field > label { min-height:36px; display:flex; align-items:flex-end; }
.appearance-radius-grid .seg { display:flex; width:100%; }
.appearance-radius-grid .seg button { flex:1 1 0; min-width:0; padding:0 8px; }
.appearance-color-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.appearance-editor .look-grid { grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr)); }
.bg-option { position:relative; }
.bg-option .bg-tile { width:100%; }
.bg-option-delete { position:absolute; right:5px; top:5px; display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:var(--r-sm); background:var(--surface); color:var(--danger); opacity:0; cursor:pointer; }
.bg-option:hover .bg-option-delete, .bg-option:focus-within .bg-option-delete { opacity:1; }
.appearance-editor .tabs-bar { overflow-x:auto; }
.look-preview .lp-panel { border-radius:var(--r-panel); box-shadow:var(--panel-shadow); background-image:var(--panel-sheen); }
.preview-field { position:relative; min-width:0; }
.preview-field .field > label { padding-right:28px; }
.preview-help, .preview-close { display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--text-2); width:24px; height:24px; border-radius:var(--r-sm); }
.preview-help { position:absolute; right:0; top:-4px; }
.preview-help:hover, .preview-close:hover { background:var(--surface-3); color:var(--text); }
.appearance-popover { position:fixed; z-index:95; padding:12px; background:var(--surface); color:var(--text); border-radius:var(--r-lg); box-shadow:0 10px 34px rgba(0,0,0,.32),var(--hl); max-height:min(276px,calc(100vh - 20px)); overflow:auto; }
.preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:10px; }
.preview-heading strong { font-size:13px; }
.preview-heading .small { font-size:11px; margin-top:3px; }
.preview-close { flex-shrink:0; }
.appearance-scene { position:relative; height:166px; overflow:hidden; isolation:isolate; border-radius:var(--r-sm); color:var(--text); background:var(--bg); }
.appearance-scene::before { content:""; position:absolute; inset:calc(var(--bg-blur,0px) * -1); z-index:-1; background:linear-gradient(var(--bg-veil),var(--bg-veil)),var(--bg-img,none) center/cover no-repeat,var(--bg); background-blend-mode:var(--bg-blend),normal,normal; filter:blur(var(--bg-blur,0px)); }
.preview-workspace { display:flex; height:100%; padding:10px; gap:10px; font-size:10px; }
.preview-sidebar { flex:0 0 var(--preview-sidebar); padding:10px 7px; background:var(--sidebar-fill); border-radius:var(--r-menu); display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.preview-nav-item { display:flex; align-items:center; gap:4px; padding:5px; background:var(--accent-soft); color:var(--accent-text); border-radius:var(--r-menu); white-space:nowrap; }
.preview-content { display:flex; flex:1; min-width:0; flex-direction:column; gap:10px; }
.preview-header { padding:8px; border-radius:var(--r-header); background:var(--header-fill); white-space:nowrap; overflow:hidden; }
.preview-card { display:flex; flex-direction:column; gap:7px; padding:12px; background:color-mix(in srgb,var(--surface) calc(100% - var(--panel-alpha)),transparent); background-image:var(--panel-sheen); backdrop-filter:var(--panel-glass); border-radius:var(--r-panel); box-shadow:var(--panel-shadow); }
.preview-card > strong { font-size:22px; line-height:1; }
.preview-card.hero { background-color:var(--hero-fill); color:var(--hero-ink); }
.preview-demo-button, .preview-dropdown-trigger { display:flex; align-items:center; justify-content:center; gap:6px; padding:6px 10px; border-radius:var(--r-button); color:var(--kit-ink); background:var(--material-face); box-shadow:var(--material-shadow); font-size:11px; transition:transform var(--motion-press) ease-out,box-shadow var(--motion-press) ease-out; }
.preview-demo-button svg { width:13px; height:13px; }
.appearance-scene[data-target="button"] .preview-sidebar { display:none; }
.appearance-scene[data-target="button"] .preview-demo-button { padding:10px 20px; }
.appearance-scene[data-menu="floating"] .preview-sidebar { margin:3px; box-shadow:var(--panel-shadow); }
.appearance-scene[data-menu="glass"] .preview-sidebar { background:color-mix(in srgb,var(--sidebar-fill) 82%,transparent); backdrop-filter:blur(12px); }
.appearance-scene[data-nav="raised"] .preview-nav-item { background:var(--material-face); color:var(--kit-accent); box-shadow:var(--material-selected); }
.appearance-scene[data-nav="line"] .preview-nav-item { background:transparent; box-shadow:inset 3px 0 0 var(--accent-text); }
.appearance-scene[data-header="clear"] .preview-header { background:transparent; }
.appearance-scene[data-header="glass"] .preview-header { background:color-mix(in srgb,var(--header-fill) 80%,transparent); backdrop-filter:blur(10px); }
.preview-motion { display:grid; grid-template-columns:100px 1fr; gap:12px; align-items:start; padding:20px 12px; }
.preview-motion > .preview-demo-button { margin-top:30px; grid-row:1/3; }
.preview-dropdown-trigger { justify-content:space-between; font-size:10px; }
.preview-dropdown { grid-column:2; padding:5px; background:var(--surface); border-radius:var(--r-button); box-shadow:var(--shadow-2); opacity:0; transform-origin:top center; transition:opacity var(--motion-drop) ease-out,transform var(--motion-drop) ease-out,clip-path var(--motion-drop) ease-out; }
.preview-dropdown > div { padding:6px; font-size:10px; }
.preview-dropdown.show { opacity:1; }
[data-preview-drop="scale"] .preview-dropdown { transform:scale(.94); }
[data-preview-drop="slide"] .preview-dropdown { clip-path:inset(0 0 100% 0); transform:translateY(-4px); }
[data-preview-drop] .preview-dropdown.show { transform:none; clip-path:inset(-20px); }
[data-preview-drop="none"] .preview-dropdown { transition:none; }
.preview-demo-button.pressed { box-shadow:var(--material-selected); }
[data-preview-press="push"] .preview-demo-button.pressed { transform:translateY(2px); }
[data-preview-press="shrink"] .preview-demo-button.pressed { transform:scale(.95); }
[data-preview-press="glow"] .preview-demo-button.pressed { box-shadow:var(--material-down),0 0 0 3px color-mix(in srgb,var(--kit-accent) 30%,transparent),0 0 14px color-mix(in srgb,var(--kit-accent) 24%,transparent); }
.preview-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; font-size:10px; color:var(--text-2); }
.preview-replay { border:0; background:transparent; color:var(--accent-text); padding:4px; }
@media (prefers-reduced-motion:reduce) { .preview-demo-button.pressed, .preview-dropdown { transform:none !important; } }
@media (max-width:560px) {
  .kit-duo { grid-template-columns:1fr; }
  .kit-sample { min-height:118px; }
  .kit-card-footer { flex-wrap:wrap; }
  .appearance-toolbar > .btn { width:100%; }
  .bg-option-delete { opacity:1; }
}