/* AICoE Component Library Explorer
   Product-specific composition only. Canonical tokens and components are loaded
   from ../dist and ../components before this stylesheet. */

:root { --explorer-side: 248px; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
a { color: inherit; }

.skip-link {
  position: fixed; left: var(--space-3); top: -80px; z-index: 2000;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--ink-900); color: var(--surface); font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

.explorer-topbar {
  position: sticky; top: 0; z-index: 80;
  height: var(--topbar-h); padding: 0 var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(var(--overlay-blur)) saturate(var(--overlay-saturate));
}
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: calc(var(--explorer-side) - var(--space-5)); }
.brand-lockup img { width: 30px; height: 30px; object-fit: contain; }
.brand-lockup span { display: grid; line-height: 1.08; }
.brand-lockup b { color: var(--text); font-size: var(--text-base); letter-spacing: -.01em; }
.brand-lockup small { color: var(--textMuted); font-size: 10px; font-weight: 750; letter-spacing: .04em; }
.global-search-trigger { margin-left: auto; min-width: min(360px, 32vw); justify-content: flex-start; color: var(--textSecondary); }
.global-search-trigger kbd { margin-left: auto; }
.version-pill { font-size: var(--text-xs); font-weight: 800; color: var(--textMuted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 9px; }
.mobile-nav-trigger { display: none; }

.explorer-layout { display: grid; grid-template-columns: var(--explorer-side) minmax(0, 1fr); min-height: calc(100vh - var(--topbar-h)); }
.explorer-sidebar {
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  display: flex; flex-direction: column; padding: var(--space-5) var(--space-3);
  border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 62%, transparent);
}
.nav-group { margin-bottom: var(--space-4); }
.nav-group-title { padding: 0 var(--space-3) var(--space-2); color: var(--textMuted); font-size: 9.5px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.explorer-sidebar nav a {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); color: var(--textSecondary); font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.explorer-sidebar nav a:hover { background: var(--ink-100); color: var(--text); }
.explorer-sidebar nav a.active { background: var(--teal-100); color: var(--teal-900); }
.explorer-sidebar nav a .nav-count { margin-left: auto; color: var(--textMuted); font-size: var(--text-xs); }
.explorer-sidebar nav a.active .nav-count { color: currentColor; }
.sidebar-health { margin-top: auto; display: flex; gap: 9px; align-items: center; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.explorer-sidebar > nav, .sidebar-health { flex-shrink: 0; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.sidebar-health div { display: grid; gap: 2px; }
.sidebar-health b { font-size: 11px; color: var(--text); }
.sidebar-health small { color: var(--textMuted); font-size: 9.5px; }
.sidebar-scrim { display: none; }

.explorer-main { min-width: 0; padding: clamp(28px, 4vw, 60px); }
.view-shell { width: min(1420px, 100%); margin: 0 auto; }
.view-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-6); }
.view-heading h1 { margin: 2px 0 var(--space-2); font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; color: var(--text); }
.view-heading p { max-width: 68ch; margin: 0; color: var(--textSecondary); font-size: var(--text-body); line-height: 1.65; }
.eyebrow { color: var(--accentStrong); font-size: var(--text-xs); font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin: 42px 0 var(--space-4); }
.section-heading h2 { margin: 0; font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.section-heading p { margin: 4px 0 0; color: var(--textMuted); font-size: var(--text-sm); }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accentStrong); font-size: var(--text-sm); font-weight: 800; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.hero {
  position: relative; overflow: hidden; min-height: 330px; padding: clamp(30px, 5vw, 62px);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); align-items: center; gap: var(--space-8);
  border: 1px solid var(--border); border-radius: calc(var(--radius-lg) + 8px); background: var(--surface); box-shadow: var(--shadow-md);
}
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 280px at 8% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), radial-gradient(460px 260px at 100% 100%, color-mix(in srgb, var(--info) 10%, transparent), transparent 70%); }
.home-guide { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-5); padding: clamp(20px, 4vw, 32px); }
.home-guide h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); }
.home-guide p { max-width: 62ch; margin: 0; color: var(--textSecondary); line-height: 1.6; }
@media (max-width: 620px) { .home-guide { align-items: stretch; flex-direction: column; } .home-guide .m-btn { align-self: flex-start; } }
.hero-copy, .hero-vitals { position: relative; min-width: 0; }
.hero h1 { margin: var(--space-3) 0 var(--space-4); max-width: 720px; font-family: var(--font-display); font-size: clamp(42px, 6vw, 72px); line-height: .98; font-weight: 560; letter-spacing: -.055em; color: var(--text); }
.hero-copy > p { max-width: 62ch; margin: 0 0 var(--space-6); color: var(--textSecondary); font-size: clamp(15px, 2vw, 18px); line-height: 1.65; }
.hero-search { position: relative; max-width: 680px; }
.hero-search > aicoe-icon { position: absolute; left: 17px; top: 50%; z-index: 1; transform: translateY(-50%); color: var(--textMuted); }
.hero-search .m-field { height: 56px; padding-left: 48px; padding-right: 54px; box-shadow: var(--shadow-sm); font-size: 15px; }
.hero-search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; max-height: 330px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); background: var(--surface); box-shadow: var(--shadow-lg);
}
.search-results[hidden] { display: none; }
.search-result { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.search-result:hover, .search-result.is-active { background: var(--ink-100); }
.search-result .result-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--accentStrong); background: var(--surface); }
.search-result span { display: grid; gap: 2px; }
.search-result b { font-size: var(--text-sm); }
.search-result small { color: var(--textMuted); font-size: var(--text-xs); }
mark { border-radius: 3px; padding: 0 1px; background: var(--teal-100); color: inherit; }
.hero-vitals { display: grid; gap: var(--space-3); }
.vital { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.vital strong { display: block; font-family: var(--font-display); font-size: 31px; font-weight: 600; color: var(--text); }
.vital span { color: var(--textMuted); font-size: var(--text-xs); font-weight: 750; }

.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr)); gap: var(--space-3); }
.quick-tile { min-height: 140px; padding: var(--space-4); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.quick-tile:hover { transform: translateY(-3px); border-color: var(--teal-300); box-shadow: var(--shadow-md); }
.quick-icon { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: auto; border-radius: var(--radius-md); background: var(--ink-100); color: var(--accentStrong); }
.quick-tile b { margin-top: var(--space-4); color: var(--text); font-size: var(--text-base); }
.quick-tile small { display: flex; justify-content: space-between; gap: 4px; margin-top: 4px; color: var(--textMuted); font-size: 10.5px; line-height: 1.35; }

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.filter-button { min-height: 34px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--textSecondary); font-size: var(--text-sm); font-weight: 750; cursor: pointer; }
.filter-button:hover { border-color: var(--borderStrong); color: var(--text); }
.filter-button[aria-pressed="true"] { border-color: var(--teal-300); background: var(--teal-100); color: var(--teal-900); }

.component-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.component-card { min-height: 310px; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.component-card:hover { transform: translateY(-3px); border-color: var(--teal-300); box-shadow: var(--shadow-md); }
.preview-stage { min-height: 164px; padding: var(--space-5); display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(145deg, var(--ink-050), color-mix(in srgb, var(--surface) 72%, var(--teal-50))); border-bottom: 1px solid var(--border); }
.preview-stage { container: component-preview / inline-size; width: 100%; }
.component-grid .preview-stage { height: 180px; min-height: 180px; flex: 0 0 180px; }
.preview-stage > * { max-width: 100%; min-width: 0; }
.preview-stage .card { width: 100%; margin: 0; padding: var(--space-4); }
.preview-stage .tile { width: 100%; padding: var(--space-4); }
.preview-stage .tile .t-name, .preview-stage .tile .t-sub { display: block; }
.preview-stage .notif { margin: 0; }
.preview-stage .state-card { padding: var(--space-3); }
.preview-stage .tbl-wrap { width: 100%; margin: 0; }
.preview-stage .tbl th, .preview-stage .tbl td { padding: 7px 8px; font-size: 9px; }
.preview-stage .topbar, .preview-stage .tabbar { position: static; inset: auto; width: 100%; min-height: 48px; display: flex; }
.preview-stage .topbar { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 var(--space-3); }
.preview-stage .brand-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; border: 1px solid currentColor; border-radius: 5px; font-size: 10px; font-weight: 900; letter-spacing: -.08em; }
.preview-stage .nav-brand { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.preview-stage .topbar-demo .brand-copy { display: grid; gap: 0; line-height: 1.05; }
.preview-stage .topbar-demo .brand-copy b { font-size: 12px; }
.preview-stage .topbar-demo .brand-copy small { color: var(--textMuted); font-size: 8px; font-weight: 700; letter-spacing: .04em; }
.preview-stage .nav-links { display: flex; }
.preview-stage .topbar-demo .nav-link { padding: 7px 9px; font-size: 10px; }
.preview-stage .topbar-demo .nav-alert { position: relative; }
.preview-stage .topbar-demo .nav-alert i { position: absolute; top: 6px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.preview-stage .nav-meta { display: flex; gap: 4px; }
.preview-stage .nav-user .u-name { display: none; }
.preview-stage .nav-meta .m-btn { min-width: 30px; padding-inline: 7px; }
.preview-stage .tabbar, .demo-stage .tabbar { position:static; inset:auto; display:flex; width:100%; min-height:62px; border: 1px solid var(--border); border-radius: var(--radius-lg); transform: none;
                        padding: 10px 8px; box-shadow: var(--shadow-md); }
.tabbar-demo { width: 100%; max-width: 420px; }
.tabbar-demo-hint { margin: var(--space-5) 0 0; text-align: center; color: var(--textMuted); font-size: var(--text-xs); }
.preview-stage .layout-split, .preview-stage .layout-detail { width: 100%; min-height: 110px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.preview-stage .layout-side, .preview-stage .detail-list { padding: var(--space-3); background: var(--ink-100); }
.preview-stage .layout-main, .preview-stage .detail-pane { padding: var(--space-3); }
.preview-stage .auth { width: 100%; min-height: 118px; margin: 0; grid-template-columns: 1fr 1fr; border-radius: var(--radius-md); box-shadow: none; }
.preview-stage .auth-brand { min-height: 0; padding: var(--space-3); }
.preview-stage .auth-brand .kicker { margin-top: 0; }
.preview-stage .auth-form { min-height: 0; padding: var(--space-3); }
.preview-stage .page-title { font-size: 22px; }
.preview-stage .lede { font-size: 12px; margin: 0; }
.preview-stage .tbl-pager { width: 100%; margin: 0; }
.preview-stage .stats { width: 100%; }
.preview-stage .stat { padding: var(--space-3); }
.preview-empty { color: var(--textMuted); font-size: var(--text-sm); text-align: center; }
.component-card-body { flex: 1; display: flex; flex-direction: column; padding: var(--space-4); }
.card-topline { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.component-id { color: var(--textMuted); font-family: var(--font-mono); font-size: 9.5px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px 8px; background: var(--surface); font-size: 9.5px; font-weight: 800; white-space: nowrap; }
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-stable { color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }
.status-available { color: var(--info); background: color-mix(in srgb, var(--info) 9%, var(--surface)); }
.status-improvement { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.status-defect, .status-missing { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.status-pattern { color: var(--textSecondary); }
.component-card h3 { margin: 0 0 5px; color: var(--text); font-size: 15px; }
.component-card p { margin: 0 0 var(--space-4); color: var(--textMuted); font-size: 11.5px; line-height: 1.5; }
.component-card .text-link { margin-top: auto; opacity: .72; transition: opacity var(--dur-fast) var(--ease-out); }
.component-card:hover .text-link { opacity: 1; }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; }
.detail-main { min-width: 0; }
.detail-aside { position: sticky; top: calc(var(--topbar-h) + var(--space-5)); }
.detail-hero { margin-bottom: var(--space-5); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.detail-hero h1 { margin: var(--space-3) 0; font-family: var(--font-display); font-size: clamp(36px, 5vw, 58px); font-weight: 600; letter-spacing: -.045em; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.meta-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--textSecondary); font-size: var(--text-xs); font-weight: 750; }
.detail-preview { min-height: 220px; margin-bottom: var(--space-5); padding: clamp(16px, 3vw, 40px); border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%), var(--surface); box-shadow: var(--shadow-sm); }
.detail-preview > * { max-width: min(720px, 100%); }
.detail-preview .preview-stage { min-height: 0; padding: 0; width: 100%; overflow: visible; border: 0; background: transparent; }
.detail-section { margin-bottom: var(--space-5); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.detail-section h2, .detail-aside h2 { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.property-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.property-card { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--ink-050); }
.property-card span { display: block; margin-bottom: 6px; color: var(--textMuted); font-size: 9.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.property-card p { margin: 0; color: var(--text); font-size: var(--text-sm); line-height: 1.55; }
.implementation-grid .property-card { display: flex; flex-direction: column; gap: 8px; }
.implementation-grid .property-card h2 { margin: 0; font-family: var(--font-display); font-size: 24px; }
.implementation-grid .implementation-coverage { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); color: var(--textSecondary); }
.implementation-grid code { color: var(--accentStrong); font-family: var(--font-mono); font-size: 10px; overflow-wrap: anywhere; }
.facts { margin: 0; }
.fact { display: grid; grid-template-columns: 116px 1fr; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--border); }
.fact:last-child { border: 0; }
.fact dt { color: var(--textMuted); font-size: var(--text-xs); font-weight: 800; }
.fact dd { margin: 0; color: var(--text); font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; }
.related-list { display: grid; gap: var(--space-2); }
.related-list a { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-radius: var(--radius-sm); color: var(--textSecondary); font-size: var(--text-sm); font-weight: 750; text-decoration: none; }
.related-list a:hover { background: var(--ink-100); color: var(--text); }

.foundation-grid, .theme-grid, .pattern-grid, .registry-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.foundation-card, .theme-card, .pattern-card, .registry-stat { margin: 0; }
.foundation-card h2, .theme-card h2, .pattern-card h2 { margin: 0 0 var(--space-2); font-size: 16px; color: var(--text); }
.foundation-card p, .theme-card p, .pattern-card p { margin: 0; color: var(--textMuted); font-size: var(--text-sm); line-height: 1.55; }
.foundation-card .foundation-count { display: block; margin: var(--space-5) 0 var(--space-3); font-family: var(--font-display); font-size: 34px; color: var(--text); }
.token-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.token-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); overflow-wrap: normal; }
.token-table td { min-width: 110px; }
.token-table th { white-space: nowrap; }
.token-table th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--textMuted); font-size: 9.5px; letter-spacing: .13em; text-align: left; text-transform: uppercase; }
.token-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--textSecondary); vertical-align: top; }
.token-table tr:last-child td { border-bottom: 0; }
.token-table code { color: var(--accentStrong); font-family: var(--font-mono); font-size: 11px; }
.swatch { width: 30px; height: 30px; display: inline-block; vertical-align: middle; border: 1px solid var(--border); border-radius: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, white 20%, transparent); }
.colour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.color-studio { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: var(--space-5); margin-top: var(--space-5); padding: clamp(18px, 3vw, 32px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 52%), var(--surface); }
.color-studio-copy { display: grid; align-content: start; gap: 10px; }
.color-studio-copy h2 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); }
.color-studio-copy p { margin: 0; color: var(--textSecondary); line-height: 1.55; }
.color-wheel { position: relative; width: min(240px, 72vw); aspect-ratio: 1; display: grid; place-items: center; margin: 12px auto; border-radius: 50%; background: conic-gradient(from 12deg, var(--wheel-colors)); box-shadow: inset 0 0 0 22px color-mix(in srgb, var(--surface) 86%, transparent), var(--shadow-md); }
.color-wheel::after { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 112px; aspect-ratio: 1; border-radius: 50%; background: var(--surface); }
.color-wheel span { position: relative; z-index: 1; color: var(--text); font-size: 12px; font-weight: 800; text-align: center; }
.color-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.color-studio-panel h3 { margin: 0 0 var(--space-3); font-size: 16px; }
.color-studio .colour-card { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.color-studio .colour-card:hover, .color-studio .colour-card.is-copied { border-color: var(--accentStrong); transform: translateY(-2px); }
.color-studio .colour-chip { display: block; width: 100%; height: 54px; }
.color-studio .colour-meta { display: grid; gap: 4px; padding: 9px; }
.color-studio .colour-meta code { overflow-wrap: anywhere; }
.swatch-group { margin-top: var(--space-6); }
.swatch-group .section-heading { margin-bottom: var(--space-3); }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.swatch-card { overflow: hidden; padding: 0; }
.swatch-pair { display: grid; grid-template-columns: 1fr 1fr; min-height: 112px; }
.swatch-sample { display: flex; align-items: flex-end; padding: 9px; color: rgba(255,255,255,.9); font-size: 10px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.swatch-sample + .swatch-sample { color: rgba(0,0,0,.72); text-shadow: 0 1px 2px rgba(255,255,255,.35); }
.swatch-card-body { display: grid; gap: 10px; padding: 14px; }
.swatch-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.swatch-card-title strong { overflow-wrap: anywhere; }
.swatch-card-title .meta-chip { flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.swatch-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swatch-values code { padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--accentStrong); font-size: 10px; }
.swatch-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch-actions .m-btn { flex: 1 1 110px; }
.type-specimen small { color: var(--textMuted); font-family: var(--font-mono); }

.icon-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: var(--space-3); margin-bottom: var(--space-5); }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
.icon-card { min-height: 118px; display: grid; place-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); cursor: pointer; }
.icon-card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-sm); }
.icon-card span { max-width: 100%; color: var(--textMuted); font-family: var(--font-mono); font-size: 10px; text-align: center; overflow-wrap: anywhere; }
.icon-detail-preview { min-height: 150px; display: grid; place-items: center; margin-bottom: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--ink-050); color: var(--text); }

.theme-preview { margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--preview-border); border-radius: var(--radius-md); background: var(--preview-bg); color: var(--preview-text); }
.theme-preview.light { --preview-bg: #F3F7F6; --preview-surface: #FBFDFD; --preview-text: #2D3E39; --preview-muted: #5B6D68; --preview-border: #DCE5E2; --preview-accent: #2DD4AC; }
.theme-preview.dark { --preview-bg: #16221E; --preview-surface: #1E2B26; --preview-text: #EDF5F2; --preview-muted: #C9D6D2; --preview-border: #33443E; --preview-accent: #2DD4AC; }
.theme-preview.system { --preview-bg: linear-gradient(110deg, #F3F7F6 0 49.5%, #16221E 50%); --preview-surface: color-mix(in srgb, #FBFDFD 50%, #1E2B26); --preview-text: var(--text); --preview-muted: var(--textSecondary); --preview-border: var(--border); --preview-accent: #2DD4AC; }
.theme-surface { padding: var(--space-3); border: 1px solid var(--preview-border); border-radius: var(--radius-sm); background: var(--preview-surface); }
.theme-surface b, .theme-surface small { display: block; }
.theme-surface small { margin-top: 4px; color: var(--preview-muted); }
.theme-control { margin-top: var(--space-3); display: inline-flex; padding: 8px 12px; border: 0; border-radius: 9px; background: var(--preview-accent); color: #12201A; font-weight: 800; }

.registry-stat strong { display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-size: 38px; font-weight: 600; }
.registry-stat span { color: var(--textMuted); font-size: var(--text-sm); }
.distribution { display: grid; gap: var(--space-3); }
.distribution-row { display: grid; grid-template-columns: 150px minmax(120px, 1fr) 34px; gap: var(--space-3); align-items: center; }
.distribution-row > span { font-size: var(--text-sm); font-weight: 750; }
.distribution-track { height: 9px; overflow: hidden; border-radius: var(--radius-pill); background: var(--ink-100); }
.distribution-fill { height: 100%; border-radius: inherit; background: var(--accentStrong); }
.registry-note { padding: var(--space-4); border-left: 3px solid var(--accent); background: var(--surface); color: var(--textSecondary); font-size: var(--text-sm); line-height: 1.6; }

.empty-state { padding: 70px var(--space-5); text-align: center; border: 1px dashed var(--borderStrong); border-radius: var(--radius-lg); color: var(--textMuted); }
.empty-state h2 { color: var(--text); font-family: var(--font-display); font-weight: 600; }

dialog h2 { margin: 2px 0 0; color: var(--text); font-family: var(--font-display); font-weight: 600; }
dialog p { color: var(--textSecondary); line-height: 1.65; }

/* The canonical palette rule uses display:flex. Restore the native closed-dialog
   contract so it cannot occupy document space below the Explorer. */
dialog.palette:not([open]) { display: none; }
dialog.palette[open] { overflow: hidden; }
dialog.palette .palette-list { min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }

/* Full-page previews stay isolated from the component gallery and its styles. */
.page-category-grid, .page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.page-card { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.page-card h2 { margin: var(--space-4) 0 var(--space-2); font-size: 18px; }
.page-card h2 a { text-decoration: none; }
.page-card h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-card p { margin: 0 0 var(--space-4); color: var(--textSecondary); font-size: var(--text-sm); line-height: 1.6; }
.page-source { margin-top: auto; color: var(--textMuted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.page-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.page-directory-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 240px); gap: var(--space-4); }
.page-results { color: var(--textMuted); font-size: var(--text-sm); line-height: 1.6; }
.page-preview-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.page-preview-toolbar label { flex: 1 1 220px; min-width: 0; }
.page-preview-toolbar select, .page-directory-toolbar input, .page-directory-toolbar select { width: 100%; }
.page-preview-stage { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--ink-100); }
.page-preview-frame { display: block; width: 100%; max-width: none; height: clamp(360px, 72vh, 850px); margin: 0 auto; border: 0; background: var(--bg); }
.page-samples { margin-top: var(--space-5); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .page-directory-toolbar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1240px) {
  .component-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  :root { --explorer-side: 220px; }
  .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foundation-grid, .theme-grid, .pattern-grid, .registry-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; }
  .hero-vitals { grid-template-columns: repeat(3, 1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .color-studio { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
}

@media (max-width: 760px) {
  .explorer-topbar { padding: 0 var(--space-3); }
  .brand-lockup { min-width: 0; margin-right: auto; }
  .global-search-trigger { min-width: 40px; width: 40px; height: 38px; padding: 0; justify-content: center; }
  .global-search-trigger span, .global-search-trigger kbd, .version-pill { display: none; }
  .mobile-nav-trigger { display: inline-flex; }
  .explorer-layout { display: block; }
  .explorer-sidebar { position: fixed; left: 0; top: var(--topbar-h); z-index: 70; width: min(290px, 86vw); height: calc(100vh - var(--topbar-h)); transform: translateX(-105%); box-shadow: var(--shadow-lg); transition: transform var(--dur-normal) var(--ease-out); }
  body.nav-open .explorer-sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: var(--topbar-h) 0 0; z-index: 65; width: 100%; border: 0; background: var(--scrim); }
  body.nav-open .sidebar-scrim { display: block; }
  .explorer-main { padding: 26px var(--space-4) 70px; }
  .hero { padding: 30px var(--space-5); min-height: 0; }
  .hero h1 { font-size: 43px; }
  .hero-vitals { grid-template-columns: repeat(3, 1fr); }
  .vital { padding: var(--space-3); }
  .vital strong { font-size: 24px; }
  .component-grid, .foundation-grid, .theme-grid, .pattern-grid, .registry-stat-grid { grid-template-columns: 1fr; }
  .component-grid .preview-stage { height: 164px; min-height: 164px; flex-basis: 164px; }
  .property-grid { grid-template-columns: 1fr; }
  .view-heading { display: block; }
  .icon-toolbar { grid-template-columns: 1fr; }
  .distribution-row { grid-template-columns: minmax(0, 1fr) minmax(40px, 1fr) 24px; }
}

@media (max-width: 460px) {
  .brand-lockup small { display: none; }
  .hero-vitals { grid-template-columns: 1fr; }
  .quick-tile { min-height: 126px; }
  .component-grid { grid-template-columns: 1fr; }
  .detail-hero, .detail-section { padding: var(--space-4); }
  .fact { grid-template-columns: 1fr; gap: 3px; }
}

/* Size against the available container, not only the device viewport. */
.view-shell { overflow-wrap: anywhere; }
.view-heading > *, .section-heading > *, .quick-tile, .theme-card,
.property-card, .detail-section, .detail-aside { min-width: 0; }
.section-heading, .card-topline { flex-wrap: wrap; }
.theme-card code, .type-specimen small { overflow-wrap: anywhere; }
.search-result > span:not(.result-icon) { min-width: 0; overflow-wrap: anywhere; }
.hero { overflow: visible; }
.hero::before { border-radius: inherit; }
.search-results { max-height: min(330px, 50dvh); }
.preview-stage .topbar { flex-wrap: wrap; }
.preview-stage .nav-brand { margin: 0; }
.preview-stage .nav-links { flex-wrap: wrap; }
.preview-stage .detail-pane { display: block; position: static; max-height: none; }
.preview-stage .layout-side { position: static; }
@container component-preview (max-width: 420px) {
  .layout-split, .layout-detail, .auth { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-3); }
  .auth-brand, .auth-form { min-height: 0; }
  .toolbar > label { width: 100%; }
}
@media (max-width: 460px) {
  .explorer-main { padding-inline: var(--space-3); }
  .hero { padding: var(--space-5) var(--space-4); }
  .hero h1 { font-size: clamp(30px, 10vw, 43px); }
  .hero-search .m-field { padding-right: var(--space-3); font-size: 16px; }
  .hero-search kbd { display: none; }
  .theme-preview { padding: var(--space-3); }
}
@media (pointer: coarse) {
  .filter-button, .icon-card, .explorer-topbar button, .explorer-sidebar nav a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .explorer-sidebar, .component-card, .quick-tile { transition: none; }
}
/* A calmer catalogue and an actual-size component workbench. */
.view-heading h1,.detail-hero h1,.hero h1 { font-family:var(--font-sans); font-size:clamp(28px,3vw,38px); line-height:1.2; font-weight:650; letter-spacing:-.035em; }
.detail-hero { padding:0 0 24px; }
.detail-hero .lede { font-size:15px; line-height:1.65; max-width:68ch; }
.view-shell { max-width:1320px; }
.component-card,.foundation-card,.pattern-card,.page-card,.theme-card { box-shadow:none; }
.component-card-body h3,.section-heading h2,.detail-section h2 { font-family:var(--font-sans); letter-spacing:-.02em; }
.detail-layout { grid-template-columns:minmax(0,1fr) 220px; }
.detail-section { box-shadow:none; background:transparent; }
.component-card .preview-stage { height:220px; max-height:220px; overflow:hidden; pointer-events:none; }
.component-card .preview-stage > * { max-width:100%; }
.component-card .preview-stage .tbl th,.component-card .preview-stage .tbl td { font-size:12px; padding:8px; }
.preview-stage .tbl th,.preview-stage .tbl td { font-size:14px; }
.workbench { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; min-width:0; }
.workbench-controls { display:flex; gap:12px; align-items:end; flex-wrap:wrap; background:var(--surface); padding:16px; border-bottom:1px solid var(--border); }
.workbench-controls label { display:grid; gap:6px; font-size:12px; font-weight:600; min-width:110px; }
.workbench-controls .m-field { font-size:13px; min-height:38px; }
.workbench-canvas { overflow:auto; padding:24px; background:var(--bg); min-height:220px; }
[data-workbench-stage] { box-sizing:border-box; max-width:100%; margin:0 auto; padding:24px; background:var(--surface); color:var(--text); border-radius:var(--radius-sm); min-height:160px; }
.demo-stage { display:flex; flex-direction:column; gap:20px; align-items:stretch; justify-content:center; }
.demo-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.demo-row small { display:block; font-size:12px; margin-top:8px; }
.demo-note { font:12px/1.6 var(--font-sans); color:var(--textSecondary); }
.demo-card { max-width:460px; width:100%; text-align:left; color:var(--text); text-decoration:none; font:inherit; }
.demo-split { display:grid; grid-template-columns:160px minmax(0,1fr); gap:24px; width:100%; }
.demo-split>nav,.demo-split>div { display:flex; flex-direction:column; gap:8px; }
.demo-split [aria-current=page],.demo-split [aria-pressed=true] { background:var(--bg); border-color:var(--accentStrong); }
.demo-auth { display:grid; grid-template-columns:1fr 1.2fr; gap:32px; }
.demo-auth form { display:grid; gap:16px; }
.demo-auth-brand { border-right:1px solid var(--border); padding:24px; }
.workbench-code { padding:16px 20px; background:var(--surface); border-top:1px solid var(--border); }
.workbench-code summary { cursor:pointer; font-size:13px; font-weight:600; }
.workbench-code p { font-size:13px; color:var(--textSecondary); line-height:1.6; }
.usage-code { padding:16px; max-height:420px; overflow:auto; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); font:12px/1.6 var(--font-mono); white-space:pre; }
.chart-catalogue { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.chart-catalogue>.card { box-shadow:none; padding:20px; }
.chart-catalogue .chart-frame { padding:0; border:0; }
.chart-catalogue .chart-summary,.chart-catalogue .chart-readout,.chart-catalogue .chart-legend,.chart-catalogue details { display:none; }
.chart-catalogue p { color:var(--textSecondary); font-size:13px; }
.dashboard-metrics { display:grid; grid-template-columns:2fr 1fr; gap:24px; margin-bottom:24px; }
.dashboard-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.chart-frame { box-shadow:none; }
.theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:1000px) { .detail-layout { grid-template-columns:1fr; } .detail-aside { display:none; } .dashboard-chart-grid { grid-template-columns:1fr; } }
@media(max-width:700px) { .workbench-controls { gap:12px; padding:12px; } .workbench-controls label { flex:1 1 120px; } .workbench-canvas { padding:12px; } [data-workbench-stage] { padding:16px; } .demo-split,.demo-auth,.chart-catalogue,.dashboard-metrics,.theme-grid { grid-template-columns:1fr; } .demo-auth-brand { display:none; } .demo-split>nav,.demo-split>div { flex-direction:row; flex-wrap:wrap; } }
.explorer-sidebar a { text-transform:none; letter-spacing:0; font-size:14px; font-weight:550; }
.nav-group-title { font-size:11px; letter-spacing:.08em; }
.eyebrow { text-transform:none; letter-spacing:.02em; font-weight:600; font-size:12px; }
.workbench-controls select { font-family:var(--font-sans); }
.demo-stage .topbar { position:static; inset:auto; display:flex; flex-wrap:wrap; gap:16px; padding:16px; min-height:64px; height:auto; }
.demo-stage .nav-links { display:flex; flex-wrap:wrap; }
.demo-stage .topbar .nav-link { font-size:13px; }
.demo-stage .topbar .nav-meta { display:flex; gap:8px; margin-left:auto; }
.demo-stage .brand-mark { display:none; }
@media(max-width:700px) { .demo-stage .tab { font-size:11px; } .demo-stage .tabbar { padding:8px 0; } }
.pattern-demo { border-top:1px solid var(--border); margin:16px 0; padding-top:16px; }
.pattern-demo summary { cursor:pointer; font-size:13px; font-weight:600; }
.pattern-demo .demo-stage { padding:16px 0; }
.pattern-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:900px) { .pattern-grid { grid-template-columns:1fr; } }
@media(max-width:700px) { .workbench-controls .m-field { font-size:16px; } }
.check-fixture { position:fixed; left:-10000px; top:0; width:600px; }
[data-check-results] { padding-left:24px; line-height:2; }
[data-result=pass] { color:var(--linkText); }
[data-result=fail] { color:var(--danger); }
.metric { align-content:start; }
.dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-metrics .m-progress { margin-top:20px; }
@media(max-width:700px) { .dashboard-metrics { grid-template-columns:1fr; } }
.detail-hero { border:0; border-radius:0; background:transparent; }
.detail-hero .meta-row .status-badge { margin-left:0; }
.meta-chip,.status-badge { font-size:11px; font-weight:600; }
.detail-section { padding:24px 0; border:0; border-top:1px solid var(--border); border-radius:0; }
.property-card { border:0; padding:12px 0; background:transparent; }
.property-card span { font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; }
.property-card p,.fact dd { font-size:13px; }
.fact dt { font-size:12px; font-weight:600; }
.detail-aside .detail-section { padding:20px 0; }
@media(max-width:700px) { .workbench-controls label:first-child { flex-basis:100%; } }

/* Typography and font specimens share the library's existing font tokens. */
.type-controls { display:flex; flex-wrap:wrap; align-items:end; gap:16px; padding:20px; margin:0 0 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.type-controls label { display:grid; gap:8px; min-width:0; }
.type-controls .m-label { margin:0; }
.type-preview-input { flex:1 1 280px; }
.type-controls input[type="range"] { width:150px; min-height:36px; accent-color:var(--accentStrong); }
.type-controls output { color:var(--textSecondary); font-weight:400; margin-left:8px; }
.type-style-row { display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; padding:30px 0; border-bottom:1px solid var(--border); }
.type-style-meta h2 { margin:0 0 6px; font:600 14px/1.5 var(--font-sans); }
.type-style-meta p,.type-style-meta span { color:var(--textSecondary); font-size:12px; line-height:1.6; }
.type-style-meta p { margin:0 0 12px; max-width:30ch; }
.type-style-meta span { display:block; }
.type-style-content { min-width:0; }
.type-live-sample { margin:0 0 20px; overflow-wrap:anywhere; white-space:pre-wrap; }
.type-library details { color:var(--textSecondary); font-size:12px; }
.type-library summary { cursor:pointer; width:fit-content; padding:6px 0; }
.type-library .usage-code { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; }
.type-guidance { padding-top:32px; }
.type-guidance h2 { font:600 21px/1.3 var(--font-sans); margin:0 0 16px; }
.type-guidance h3 { font:600 14px/1.5 var(--font-sans); margin:0; }
.type-guidance p { color:var(--textSecondary); line-height:1.65; font-size:14px; }
.type-guidance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.type-token-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.type-token-grid > div { padding:16px; border:1px solid var(--border); border-radius:var(--radius-sm); display:grid; gap:12px; }
.type-token-grid code { font-size:12px; color:var(--textSecondary); }
.type-token-grid strong { font-size:21px; font-weight:500; }
.font-family { padding:28px 0 32px; border-bottom:1px solid var(--border); }
.font-family > header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.font-family h2 { margin:6px 0 0; font:600 21px/1.3 var(--font-sans); }
.font-family > header code { color:var(--textSecondary); font-size:12px; }
.font-description { font-size:14px; line-height:1.65; color:var(--textSecondary); max-width:70ch; }
.font-specimen { padding:24px; margin:20px 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.font-lettermark { font-size:64px; line-height:1.1; margin:0 0 24px; color:var(--accentStrong); }
.font-specimen .type-live-sample { font-size:32px; line-height:1.45; }
.font-characters { font-size:14px; line-height:1.9; color:var(--textSecondary); overflow-wrap:anywhere; margin:0; }
.font-italic { font:italic 500 21px/1.5 var(--font-display); margin:16px 0 4px; }
.font-note { color:var(--textSecondary); font-size:12px; line-height:1.65; }
.font-family > .m-btn { margin-top:12px; }
.type-copy-status { color:var(--textSecondary); font-size:13px; min-height:20px; }
@media(max-width:700px) {
  .type-controls { padding:16px; gap:12px; }
  .type-controls .m-field { font-size:16px; }
  .type-controls input[type="range"] { width:130px; }
  .type-style-row { grid-template-columns:minmax(0,1fr); gap:18px; padding:24px 0; }
  .type-style-meta p { max-width:none; margin-bottom:4px; }
  .type-guidance-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .type-token-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .font-specimen { padding:20px 16px; }
}

/* Text animation catalogue */
.ta-view { --ta-preview-bg: color-mix(in srgb, var(--surface) 82%, var(--teal-100)); }
.ta-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-bottom:var(--space-6); overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--border); }
.ta-principles > div { min-width:0; padding:var(--space-5); background:var(--surface); }
.ta-principle-number { display:block; margin-bottom:var(--space-5); color:var(--accentStrong); font:600 12px/1 var(--font-mono); }
.ta-principles h2 { margin:0 0 8px; font:650 16px/1.35 var(--font-sans); letter-spacing:-.015em; }
.ta-principles p { margin:0; color:var(--textSecondary); font-size:14px; line-height:1.6; }
.ta-toolbar { position:static; display:grid; grid-template-columns:minmax(240px,1fr) minmax(180px,260px) auto; align-items:end; gap:var(--space-3); margin-bottom:var(--space-3); padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:color-mix(in srgb,var(--surface) 92%,transparent); box-shadow:var(--shadow-sm); }
.ta-toolbar label { display:grid; gap:7px; }
.ta-toolbar .m-field { width:100%; }
.ta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.ta-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.ta-card[hidden] { display:none; }
.ta-preview { position:relative; width:100%; min-height:190px; display:grid; place-items:center; overflow:hidden; padding:var(--space-5); border:0; border-bottom:1px solid var(--border); background:radial-gradient(circle at 75% 20%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 35%),linear-gradient(145deg,var(--ink-050),var(--ta-preview-bg)); color:var(--text); cursor:pointer; }
.ta-preview::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(color-mix(in srgb,var(--border) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 45%,transparent) 1px,transparent 1px); background-size:24px 24px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 75%); }
.ta-preview:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
.ta-preview-label { position:absolute; top:12px; right:12px; z-index:2; color:var(--textMuted); font-size:11px; font-weight:650; }
.ta-demo { position:relative; z-index:1; display:inline-flex; align-items:center; max-width:100%; color:var(--text); font:650 clamp(21px,2.2vw,30px)/1.15 var(--font-sans); letter-spacing:-.035em; text-align:center; animation-duration:800ms; animation-timing-function:cubic-bezier(.2,.8,.2,1); animation-fill-mode:both; }
.ta-card-body { padding:var(--space-4); }
.ta-card-heading { min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.ta-category { color:var(--accentStrong); font-size:11px; font-weight:700; }
.ta-info-button { flex:none; width:32px; height:32px; min-height:32px; color:var(--textSecondary); }
.ta-info-button:hover { color:var(--accentStrong); background:var(--ink-100); }
.ta-card h2 { margin:6px 0 10px; font:650 17px/1.35 var(--font-sans); letter-spacing:-.02em; }
.ta-card p { margin:0; color:var(--textSecondary); font-size:13px; line-height:1.6; }
.ta-card p strong { color:var(--text); font-weight:650; }
.ta-modal-guidance { display:grid; gap:0; }
.ta-modal-guidance section { padding:var(--space-4) 0; border-bottom:1px solid var(--border); }
.ta-modal-guidance section:first-child { padding-top:0; }
.ta-modal-guidance section:last-child { border-bottom:0; }
.ta-modal-guidance h3 { margin:0 0 8px; font:650 15px/1.4 var(--font-sans); }
.ta-modal-guidance p { margin:0; color:var(--textSecondary); font-size:14px; line-height:1.65; }
.ta-modal-guidance .usage-code { max-height:320px; margin:var(--space-4) 0 0; white-space:pre-wrap; }
.ta-reduced-motion { margin-top:var(--space-7); }
.ta-reduced-motion > p { max-width:72ch; color:var(--textSecondary); line-height:1.65; }
.ta-reduced-motion .usage-code { max-width:780px; white-space:pre-wrap; }
@media(max-width:1050px) { .ta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .ta-principles,.ta-grid { grid-template-columns:minmax(0,1fr); } .ta-toolbar { position:static; grid-template-columns:minmax(0,1fr); } .ta-toolbar .m-field { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { .ta-demo,.ta-demo span { animation:none!important; opacity:1!important; transform:none!important; filter:none!important; clip-path:none!important; } }
/* Size against the available container, not only the device viewport. */
.view-shell { overflow-wrap: anywhere; }
.view-heading > *, .section-heading > *, .quick-tile, .theme-card,
.property-card, .detail-section, .detail-aside { min-width: 0; }
.section-heading, .card-topline { flex-wrap: wrap; }
.theme-card code, .type-specimen small { overflow-wrap: anywhere; }
.search-result > span:not(.result-icon) { min-width: 0; overflow-wrap: anywhere; }
.hero { overflow: visible; }
.hero::before { border-radius: inherit; }
.search-results { max-height: min(330px, 50dvh); }
.preview-stage .topbar { flex-wrap: wrap; }
.preview-stage .nav-brand { margin: 0; }
.preview-stage .nav-links { flex-wrap: wrap; }
.preview-stage .detail-pane { display: block; position: static; max-height: none; }
.preview-stage .layout-side { position: static; }
@container component-preview (max-width: 420px) {
  .layout-split, .layout-detail, .auth { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-3); }
  .auth-brand, .auth-form { min-height: 0; }
  .toolbar > label { width: 100%; }
}
@media (max-width: 460px) {
  .explorer-main { padding-inline: var(--space-3); }
  .hero { padding: var(--space-5) var(--space-4); }
  .hero h1 { font-size: clamp(30px, 10vw, 43px); }
  .hero-search .m-field { padding-right: var(--space-3); font-size: 16px; }
  .hero-search kbd { display: none; }
  .theme-preview { padding: var(--space-3); }
}
@media (pointer: coarse) {
  .filter-button, .icon-card, .explorer-topbar button, .explorer-sidebar nav a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .explorer-sidebar, .component-card, .quick-tile { transition: none; }
}
/* A calmer catalogue and an actual-size component workbench. */
.view-heading h1,.detail-hero h1,.hero h1 { font-family:var(--font-sans); font-size:clamp(28px,3vw,38px); line-height:1.2; font-weight:650; letter-spacing:-.035em; }
.detail-hero { padding:0 0 24px; }
.detail-hero .lede { font-size:15px; line-height:1.65; max-width:68ch; }
.view-shell { max-width:1320px; }
.component-card,.foundation-card,.pattern-card,.page-card,.theme-card { box-shadow:none; }
.component-card-body h3,.section-heading h2,.detail-section h2 { font-family:var(--font-sans); letter-spacing:-.02em; }
.detail-layout { grid-template-columns:minmax(0,1fr) 220px; }
.detail-section { box-shadow:none; background:transparent; }
.component-card .preview-stage { height:220px; max-height:220px; overflow:hidden; pointer-events:none; }
.component-card .preview-stage > * { max-width:100%; }
.component-card .preview-stage .tbl th,.component-card .preview-stage .tbl td { font-size:12px; padding:8px; }
.preview-stage .tbl th,.preview-stage .tbl td { font-size:14px; }
.workbench { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; min-width:0; }
.workbench-controls { display:flex; gap:12px; align-items:end; flex-wrap:wrap; background:var(--surface); padding:16px; border-bottom:1px solid var(--border); }
.workbench-controls label { display:grid; gap:6px; font-size:12px; font-weight:600; min-width:110px; }
.workbench-controls .m-field { font-size:13px; min-height:38px; }
.workbench-canvas { overflow:auto; padding:24px; background:var(--bg); min-height:220px; }
[data-workbench-stage] { box-sizing:border-box; max-width:100%; margin:0 auto; padding:24px; background:var(--surface); color:var(--text); border-radius:var(--radius-sm); min-height:160px; }
.demo-stage { display:flex; flex-direction:column; gap:20px; align-items:stretch; justify-content:center; }
.demo-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.demo-row small { display:block; font-size:12px; margin-top:8px; }
.demo-note { font:12px/1.6 var(--font-sans); color:var(--textSecondary); }
.demo-card { max-width:460px; width:100%; text-align:left; color:var(--text); text-decoration:none; font:inherit; }
.demo-split { display:grid; grid-template-columns:160px minmax(0,1fr); gap:24px; width:100%; }
.demo-split>nav,.demo-split>div { display:flex; flex-direction:column; gap:8px; }
.demo-split [aria-current=page],.demo-split [aria-pressed=true] { background:var(--bg); border-color:var(--accentStrong); }
.demo-auth { display:grid; grid-template-columns:1fr 1.2fr; gap:32px; }
.demo-auth form { display:grid; gap:16px; }
.demo-auth-brand { border-right:1px solid var(--border); padding:24px; }
.workbench-code { padding:16px 20px; background:var(--surface); border-top:1px solid var(--border); }
.workbench-code summary { cursor:pointer; font-size:13px; font-weight:600; }
.workbench-code p { font-size:13px; color:var(--textSecondary); line-height:1.6; }
.usage-code { padding:16px; max-height:420px; overflow:auto; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); font:12px/1.6 var(--font-mono); white-space:pre; }
.chart-catalogue { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.chart-catalogue>.card { box-shadow:none; padding:20px; }
.chart-catalogue .chart-frame { padding:0; border:0; }
.chart-catalogue .chart-summary,.chart-catalogue .chart-readout,.chart-catalogue .chart-legend,.chart-catalogue details { display:none; }
.chart-catalogue p { color:var(--textSecondary); font-size:13px; }
.dashboard-metrics { display:grid; grid-template-columns:2fr 1fr; gap:24px; margin-bottom:24px; }
.dashboard-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.chart-frame { box-shadow:none; }
.theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:1000px) { .detail-layout { grid-template-columns:1fr; } .detail-aside { display:none; } .dashboard-chart-grid { grid-template-columns:1fr; } }
@media(max-width:700px) { .workbench-controls { gap:12px; padding:12px; } .workbench-controls label { flex:1 1 120px; } .workbench-canvas { padding:12px; } [data-workbench-stage] { padding:16px; } .demo-split,.demo-auth,.chart-catalogue,.dashboard-metrics,.theme-grid { grid-template-columns:1fr; } .demo-auth-brand { display:none; } .demo-split>nav,.demo-split>div { flex-direction:row; flex-wrap:wrap; } }
.explorer-sidebar a { text-transform:none; letter-spacing:0; font-size:14px; font-weight:550; }
.nav-group-title { font-size:11px; letter-spacing:.08em; }
.eyebrow { text-transform:none; letter-spacing:.02em; font-weight:600; font-size:12px; }
.workbench-controls select { font-family:var(--font-sans); }
.demo-stage .topbar { position:static; inset:auto; display:flex; flex-wrap:wrap; gap:16px; padding:16px; min-height:64px; height:auto; }
.demo-stage .nav-links { display:flex; flex-wrap:wrap; }
.demo-stage .topbar .nav-link { font-size:13px; }
.demo-stage .topbar .nav-meta { display:flex; gap:8px; margin-left:auto; }
.demo-stage .brand-mark { display:none; }
@media(max-width:700px) { .demo-stage .tab { font-size:11px; } .demo-stage .tabbar { padding:8px 0; } }
.pattern-demo { border-top:1px solid var(--border); margin:16px 0; padding-top:16px; }
.pattern-demo summary { cursor:pointer; font-size:13px; font-weight:600; }
.pattern-demo .demo-stage { padding:16px 0; }
.pattern-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:900px) { .pattern-grid { grid-template-columns:1fr; } }
@media(max-width:700px) { .workbench-controls .m-field { font-size:16px; } }
.check-fixture { position:fixed; left:-10000px; top:0; width:600px; }
[data-check-results] { padding-left:24px; line-height:2; }
[data-result=pass] { color:var(--linkText); }
[data-result=fail] { color:var(--danger); }
.metric { align-content:start; }
.dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dashboard-metrics .m-progress { margin-top:20px; }
@media(max-width:700px) { .dashboard-metrics { grid-template-columns:1fr; } }
.detail-hero { border:0; border-radius:0; background:transparent; }
.detail-hero .meta-row .status-badge { margin-left:0; }
.meta-chip,.status-badge { font-size:11px; font-weight:600; }
.detail-section { padding:24px 0; border:0; border-top:1px solid var(--border); border-radius:0; }
.property-card { border:0; padding:12px 0; background:transparent; }
.property-card span { font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; }
.property-card p,.fact dd { font-size:13px; }
.fact dt { font-size:12px; font-weight:600; }
.detail-aside .detail-section { padding:20px 0; }
@media(max-width:700px) { .workbench-controls label:first-child { flex-basis:100%; } }

/* Typography and font specimens share the library's existing font tokens. */
.type-controls { display:flex; flex-wrap:wrap; align-items:end; gap:16px; padding:20px; margin:0 0 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.type-controls label { display:grid; gap:8px; min-width:0; }
.type-controls .m-label { margin:0; }
.type-preview-input { flex:1 1 280px; }
.type-controls input[type="range"] { width:150px; min-height:36px; accent-color:var(--accentStrong); }
.type-controls output { color:var(--textSecondary); font-weight:400; margin-left:8px; }
.type-style-row { display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; padding:30px 0; border-bottom:1px solid var(--border); }
.type-style-meta h2 { margin:0 0 6px; font:600 14px/1.5 var(--font-sans); }
.type-style-meta p,.type-style-meta span { color:var(--textSecondary); font-size:12px; line-height:1.6; }
.type-style-meta p { margin:0 0 12px; max-width:30ch; }
.type-style-meta span { display:block; }
.type-style-content { min-width:0; }
.type-live-sample { margin:0 0 20px; overflow-wrap:anywhere; white-space:pre-wrap; }
.type-library details { color:var(--textSecondary); font-size:12px; }
.type-library summary { cursor:pointer; width:fit-content; padding:6px 0; }
.type-library .usage-code { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; }
.type-guidance { padding-top:32px; }
.type-guidance h2 { font:600 21px/1.3 var(--font-sans); margin:0 0 16px; }
.type-guidance h3 { font:600 14px/1.5 var(--font-sans); margin:0; }
.type-guidance p { color:var(--textSecondary); line-height:1.65; font-size:14px; }
.type-guidance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.type-token-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.type-token-grid > div { padding:16px; border:1px solid var(--border); border-radius:var(--radius-sm); display:grid; gap:12px; }
.type-token-grid code { font-size:12px; color:var(--textSecondary); }
.type-token-grid strong { font-size:21px; font-weight:500; }
.font-family { padding:28px 0 32px; border-bottom:1px solid var(--border); }
.font-family > header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.font-family h2 { margin:6px 0 0; font:600 21px/1.3 var(--font-sans); }
.font-family > header code { color:var(--textSecondary); font-size:12px; }
.font-description { font-size:14px; line-height:1.65; color:var(--textSecondary); max-width:70ch; }
.font-specimen { padding:24px; margin:20px 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.font-lettermark { font-size:64px; line-height:1.1; margin:0 0 24px; color:var(--accentStrong); }
.font-specimen .type-live-sample { font-size:32px; line-height:1.45; }
.font-characters { font-size:14px; line-height:1.9; color:var(--textSecondary); overflow-wrap:anywhere; margin:0; }
.font-italic { font:italic 500 21px/1.5 var(--font-display); margin:16px 0 4px; }
.font-note { color:var(--textSecondary); font-size:12px; line-height:1.65; }
.font-family > .m-btn { margin-top:12px; }
.type-copy-status { color:var(--textSecondary); font-size:13px; min-height:20px; }
@media(max-width:700px) {
  .type-controls { padding:16px; gap:12px; }
  .type-controls .m-field { font-size:16px; }
  .type-controls input[type="range"] { width:130px; }
  .type-style-row { grid-template-columns:minmax(0,1fr); gap:18px; padding:24px 0; }
  .type-style-meta p { max-width:none; margin-bottom:4px; }
  .type-guidance-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .type-token-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .font-specimen { padding:20px 16px; }
}

/* ── Master Text Animations CSS Rules ── */


.ta-word { display: inline-block; animation: ta-word-rev 500ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-w-idx) * 130ms); }
@keyframes ta-word-rev { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.ta-char { display: inline-block; }
.ta-lines .ta-line { animation: ta-line-rev 550ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-l-idx) * 160ms); }
@keyframes ta-line-rev { from { opacity: 0; transform: translateY(20px); clip-path: inset(100% 0 0 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0); } }

.ta-anim-stagger-letters .ta-char { animation: ta-char-stag 450ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-idx) * 32ms); }
@keyframes ta-char-stag { from { opacity: 0; transform: translateY(16px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } }

.ta-anim-reverse-stagger .ta-char { animation: ta-rev-stag 450ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-rev-idx) * 35ms); }
@keyframes ta-rev-stag { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

.ta-anim-wave-stagger-each-letter-in-sine-wave .ta-char { animation: ta-wave-stag 1.2s cubic-bezier(.4,0,.2,1) infinite alternate; animation-delay: calc(var(--ta-idx) * 60ms); }
@keyframes ta-wave-stag { 0% { transform: translateY(10px); } 100% { transform: translateY(-10px); color: var(--accentStrong); } }

.ta-anim-text-split-apart-reform .ta-char { animation: ta-split-reform 750ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-idx) * 25ms); }
@keyframes ta-split-reform { 0% { opacity: 0; transform: translate(calc((var(--ta-idx) - 7) * 12px), calc((var(--ta-idx) % 2 == 0 ? -1 : 1) * 25px)) rotate(calc((var(--ta-idx) - 7) * 10deg)); } 100% { opacity: 1; transform: none; } }

.ta-anim-text-forming-from-particles .ta-char { animation: ta-p-form 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-idx) * 30ms); }
@keyframes ta-p-form { from { opacity: 0; filter: blur(8px); transform: translate(calc((var(--ta-idx) - 6) * 5px), -25px) scale(2); } to { opacity: 1; filter: blur(0); transform: none; } }

.ta-anim-particle-dissolve .ta-char { animation: ta-p-dis 1s ease-in-out infinite alternate; animation-delay: calc(var(--ta-idx) * 40ms); }
@keyframes ta-p-dis { 0% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: translate(calc((var(--ta-idx) - 6) * 8px), -30px) scale(0); filter: blur(6px); } }

.ta-anim-sand-scatter-reveal .ta-char { animation: ta-sand-scat 700ms ease-out both; animation-delay: calc(var(--ta-idx) * 28ms); }
@keyframes ta-sand-scat { from { opacity: 0; transform: translate(40px, -20px) rotate(25deg); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

.ta-anim-magnetic-letters-snap-together .ta-char { animation: ta-snap-together 650ms cubic-bezier(.17,.89,.32,1.25) both; animation-delay: calc(var(--ta-idx) * 30ms); }
@keyframes ta-snap-together { from { opacity: 0; transform: translate(calc((var(--ta-idx) - 6) * 18px), -40px) scale(1.4); } to { opacity: 1; transform: none; } }

.ta-anim-scatter-assemble .ta-char { animation: ta-scatter-asm 700ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-idx) * 25ms); }
@keyframes ta-scatter-asm { from { opacity: 0; transform: translate(calc((var(--ta-idx) % 2 == 0 ? -40 : 40) * 1px), calc((var(--ta-idx) - 6) * 12px)) rotate(45deg); } to { opacity: 1; transform: none; } }

.ta-anim-orbiting-letters-form-text .ta-char { animation: ta-orbit-form 800ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-idx) * 35ms); }
@keyframes ta-orbit-form { from { opacity: 0; transform: rotate(180deg) translateY(-50px) scale(0.2); } to { opacity: 1; transform: none; } }

.ta-anim-3d-flip-sequence .ta-flip-char { display: inline-block; animation: ta-seq-flip 600ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-idx) * 40ms); }
@keyframes ta-seq-flip { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0); opacity: 1; } }

.ta-anim-letter-by-letter-reveal .ta-char { animation: ta-char-mask 400ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--ta-idx) * 35ms); }
@keyframes ta-char-mask { from { clip-path: inset(100% 0 0 0); transform: translateY(10px); } to { clip-path: inset(0); transform: translateY(0); } }

.ta-typing-wrap { display: inline-block; white-space: nowrap; overflow: hidden; }
.ta-caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accentStrong); margin-left: 2px; vertical-align: middle; animation: ta-caret-blink 600ms step-end infinite; }
@keyframes ta-caret-blink { 50% { opacity: 0; } }

.ta-code { font-family: var(--font-mono); font-size: 16px; white-space: nowrap; overflow: hidden; display: inline-block; }
.ta-code .kwd { color: #ec4899; font-weight: 700; }
.ta-code .str { color: #10b981; }

.ta-matrix-bg { position: relative; color: #10b981; font-family: var(--font-mono); }
.ta-matrix-drop { position: absolute; top: -20px; font-size: 11px; opacity: 0.5; animation: ta-mat-drop 1s linear infinite; }
@keyframes ta-mat-drop { to { transform: translateY(50px); opacity: 0; } }

.ta-sweep-text { position: relative; display: inline-block; overflow: hidden; }
.ta-laser-beam { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); transform: translateX(-100%); animation: ta-beam-sweep 1.2s infinite; }
@keyframes ta-beam-sweep { to { transform: translateX(100%); } }

.ta-fire-text { background: linear-gradient(0deg, #ef4444 0%, #f97316 50%, #fde047 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: ta-fire-anim 1s ease-out both; }
@keyframes ta-fire-anim { from { opacity: 0; filter: blur(8px) brightness(2); transform: translateY(20px); } to { opacity: 1; filter: blur(0) brightness(1); transform: translateY(0); } }

.ta-extrude-text { text-shadow: 1px 1px 0 var(--accent), 2px 2px 0 var(--accentStrong), 3px 3px 0 var(--accentStrong), 4px 4px 0 var(--accentStrong); animation: ta-extrude-anim 800ms both; }
@keyframes ta-extrude-anim { from { opacity: 0; transform: translateY(20px) rotateX(30deg); text-shadow: none; } to { opacity: 1; transform: translateY(0) rotateX(0); } }

.ta-para-bg { position: absolute; font-size: 60px; font-weight: 900; opacity: 0.08; transform: translateY(-20px); animation: ta-p-bg 1.2s ease-out both; }
.ta-para-fg { position: relative; z-index: 2; animation: ta-p-fg 800ms ease-out both; }
@keyframes ta-p-bg { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(-20px); opacity: 0.08; } }
@keyframes ta-p-fg { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.ta-audio-text { display: inline-block; }
.ta-bars { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.ta-bars span { display: inline-block; width: 3px; height: 16px; background: var(--accentStrong); animation: ta-bar-bounce 600ms ease-in-out infinite alternate; }
.ta-bars span:nth-child(2) { animation-delay: 150ms; }
.ta-bars span:nth-child(3) { animation-delay: 300ms; }
.ta-bars span:nth-child(4) { animation-delay: 450ms; }
@keyframes ta-bar-bounce { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }

.ta-split-wrap { position: relative; display: inline-block; line-height: 1.15; }
.ta-split-top { display: block; clip-path: inset(0 0 50% 0); animation: ta-split-t 800ms both; }
.ta-split-bottom { display: block; clip-path: inset(50% 0 0 0); margin-top: -1.15em; animation: ta-split-b 800ms both; }
@keyframes ta-split-t { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ta-split-b { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.ta-anim-fade-in {
  animation: ta-fade-in 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}

.ta-anim-fade-up {
  animation: ta-fade-up 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fade-up {
  from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-fade-down {
  animation: ta-fade-down 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fade-down {
  from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-fade-left {
  animation: ta-fade-left 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fade-left {
  from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); }
}

.ta-anim-fade-right {
  animation: ta-fade-right 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fade-right {
  from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: translateX(0); }
}

.ta-anim-fade-in-with-delay {
  animation: ta-fade-in-with-delay 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fade-in-with-delay {
  0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; }
}

.ta-anim-soft-fade-opacity-blur {
  animation: ta-soft-fade-opacity-blur 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-soft-fade-opacity-blur {
  from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); }
}

.ta-anim-fade-with-lift-motion {
  animation: ta-fade-with-lift-motion 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fade-with-lift-motion {
  from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); }
}

.ta-anim-slide-up {
  animation: ta-slide-up 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-slide-up {
  from { transform: translateY(100%); } to { transform: translateY(0); }
}

.ta-anim-slide-down {
  animation: ta-slide-down 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-slide-down {
  from { transform: translateY(-100%); } to { transform: translateY(0); }
}

.ta-anim-slide-left {
  animation: ta-slide-left 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-slide-left {
  from { transform: translateX(100%); } to { transform: translateX(0); }
}

.ta-anim-slide-right {
  animation: ta-slide-right 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-slide-right {
  from { transform: translateX(-100%); } to { transform: translateX(0); }
}

.ta-anim-slide-with-spring-motion {
  animation: ta-slide-with-spring-motion 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-slide-with-spring-motion {
  0% { transform: translateY(45px); } 65% { transform: translateY(-10px); } 85% { transform: translateY(4px); } 100% { transform: translateY(0); }
}

.ta-anim-slide-with-ease-out {
  animation: ta-slide-with-ease-out 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-slide-with-ease-out {
  from { transform: translateX(70px); } to { transform: translateX(0); }
}

.ta-anim-overshoot-bounce-slide {
  animation: ta-overshoot-bounce-slide 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-overshoot-bounce-slide {
  0% { transform: translateY(60px); } 60% { transform: translateY(-16px); } 80% { transform: translateY(6px); } 100% { transform: translateY(0); }
}

.ta-anim-soft-slide-blur {
  animation: ta-soft-slide-blur 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-soft-slide-blur {
  from { transform: translateY(35px); filter: blur(10px); opacity: 0; } to { transform: translateY(0); filter: blur(0); opacity: 1; }
}

.ta-anim-slide-fade {
  animation: ta-slide-fade 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-slide-fade {
  from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; }
}

.ta-anim-scale-in {
  animation: ta-scale-in 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-scale-in {
  from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; }
}

.ta-anim-scale-up-from-0-9 {
  animation: ta-scale-up-from-0-9 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-scale-up-from-0-9 {
  from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; }
}

.ta-anim-pop-in {
  animation: ta-pop-in 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-pop-in {
  0% { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 88% { transform: scale(0.94); } 100% { transform: scale(1); }
}

.ta-anim-pop-out {
  animation: ta-pop-out 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-pop-out {
  0% { transform: scale(1.35); opacity: 0; } 75% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1); }
}

.ta-anim-zoom-in {
  animation: ta-zoom-in 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-zoom-in {
  from { transform: scale(0.08); opacity: 0; filter: blur(12px); } to { transform: scale(1); opacity: 1; filter: blur(0); }
}

.ta-anim-zoom-out {
  animation: ta-zoom-out 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-zoom-out {
  from { transform: scale(2.4); opacity: 0; filter: blur(10px); } to { transform: scale(1); opacity: 1; filter: blur(0); }
}

.ta-anim-scale-fade {
  animation: ta-scale-fade 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-scale-fade {
  from { transform: scale(0.82); opacity: 0; } to { transform: scale(1); opacity: 1; }
}

.ta-anim-stretch-in {
  animation: ta-stretch-in 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-stretch-in {
  0% { transform: scaleX(2.6) scaleY(0.3); opacity: 0; } 70% { transform: scaleX(0.9) scaleY(1.1); opacity: 1; } 100% { transform: scale(1); }
}

.ta-anim-mask-slide-up {
  animation: ta-mask-slide-up 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-mask-slide-up {
  from { clip-path: inset(100% 0 0 0); transform: translateY(24px); } to { clip-path: inset(0); transform: translateY(0); }
}

.ta-anim-mask-slide-down {
  animation: ta-mask-slide-down 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-mask-slide-down {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-24px); } to { clip-path: inset(0); transform: translateY(0); }
}

.ta-anim-horizontal-mask-reveal {
  animation: ta-horizontal-mask-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-horizontal-mask-reveal {
  from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); }
}

.ta-anim-vertical-mask-reveal {
  animation: ta-vertical-mask-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-vertical-mask-reveal {
  from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); }
}

.ta-anim-clip-path-reveal {
  animation: ta-clip-path-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-clip-path-reveal {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

.ta-anim-split-text-reveal {
  animation: ta-split-text-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-split-text-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-line-by-line-reveal {
  animation: ta-line-by-line-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-line-by-line-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-word-by-word-reveal {
  animation: ta-word-by-word-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-word-by-word-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-letter-by-letter-reveal {
  animation: ta-letter-by-letter-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-letter-by-letter-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-typewriter-text {
  animation: ta-typewriter-text 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-typewriter-text {
  from { width: 0; } to { width: 100%; }
}

.ta-anim-typewriter-with-blinking-cursor {
  animation: ta-typewriter-with-blinking-cursor 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-typewriter-with-blinking-cursor {
  from { width: 0; } to { width: 100%; }
}

.ta-anim-auto-typing-loop {
  animation: ta-auto-typing-loop 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-auto-typing-loop {
  0% { width: 0; } 50%, 75% { width: 100%; } 100% { width: 0; }
}

.ta-anim-erase-re-type-loop {
  animation: ta-erase-re-type-loop 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-erase-re-type-loop {
  0% { width: 0; } 40% { width: 100%; } 65% { width: 30%; } 100% { width: 100%; }
}

.ta-anim-scramble-text-reveal {
  animation: ta-scramble-text-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-scramble-text-reveal {
  0% { opacity: 0; letter-spacing: 0.3em; filter: blur(6px); } 50% { opacity: 0.7; letter-spacing: -0.05em; filter: blur(2px); } 100% { opacity: 1; letter-spacing: normal; filter: blur(0); }
}

.ta-anim-code-typing-effect {
  animation: ta-code-typing-effect 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-code-typing-effect {
  from { width: 0; } to { width: 100%; }
}

.ta-anim-blur-sharp-reveal {
  animation: ta-blur-sharp-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-blur-sharp-reveal {
  from { filter: blur(24px); opacity: 0; } to { filter: blur(0); opacity: 1; }
}

.ta-anim-motion-blur-reveal {
  animation: ta-motion-blur-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-motion-blur-reveal {
  from { filter: blur(18px) contrast(200%); transform: translateX(-50px) scaleX(1.4); opacity: 0; } to { filter: blur(0) contrast(100%); transform: translateX(0) scaleX(1); opacity: 1; }
}

.ta-anim-fade-blur-slide {
  animation: ta-fade-blur-slide 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fade-blur-slide {
  from { transform: translateY(24px); filter: blur(12px); opacity: 0; } to { transform: translateY(0); filter: blur(0); opacity: 1; }
}

.ta-anim-gaussian-blur-reveal {
  animation: ta-gaussian-blur-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-gaussian-blur-reveal {
  from { filter: blur(32px); transform: scale(1.12); opacity: 0; } to { filter: blur(0); transform: scale(1); opacity: 1; }
}

.ta-anim-soft-glow-reveal {
  animation: ta-soft-glow-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-soft-glow-reveal {
  0% { filter: blur(14px) brightness(2.2); opacity: 0; } 60% { filter: blur(4px) brightness(1.4); opacity: 0.8; } 100% { filter: blur(0) brightness(1); opacity: 1; }
}

.ta-anim-glow-fade-in {
  animation: ta-glow-fade-in 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-glow-fade-in {
  from { opacity: 0; text-shadow: 0 0 0 transparent; } to { opacity: 1; text-shadow: 0 0 16px var(--accentStrong); }
}

.ta-anim-neon-flicker {
  animation: ta-neon-flicker 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-neon-flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; text-shadow: 0 0 8px #00f3ff, 0 0 20px #00f3ff, 0 0 40px #00f3ff; color: #fff; } 20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.2; text-shadow: none; color: var(--textMuted); }
}

.ta-anim-pulse-glow {
  animation: ta-pulse-glow 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-pulse-glow {
  0%, 100% { text-shadow: 0 0 6px var(--accent); color: var(--text); } 50% { text-shadow: 0 0 24px var(--accentStrong), 0 0 36px var(--accent); color: #fff; }
}

.ta-anim-electric-blue-glow {
  animation: ta-electric-blue-glow 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-electric-blue-glow {
  from { opacity: 0; text-shadow: 0 0 0 transparent; transform: scale(0.95); } to { opacity: 1; text-shadow: 0 0 10px #3b82f6, 0 0 24px #1d4ed8, 0 0 40px #60a5fa; color: #eff6ff; transform: scale(1); }
}

.ta-anim-laser-neon-wipe {
  animation: ta-laser-neon-wipe 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-laser-neon-wipe {
  0% { clip-path: inset(0 100% 0 0); text-shadow: -10px 0 20px #f43f5e; } 100% { clip-path: inset(0 0 0 0); text-shadow: 0 0 16px #f43f5e, 0 0 32px #fb7185; }
}

.ta-anim-rotate-in {
  animation: ta-rotate-in 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-rotate-in {
  from { transform: rotate(-180deg) scale(0); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; }
}

.ta-anim-rotate-up {
  animation: ta-rotate-up 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-rotate-up {
  from { transform: rotate(18deg) translateY(35px); transform-origin: 0% 100%; opacity: 0; } to { transform: rotate(0deg) translateY(0); transform-origin: 0% 100%; opacity: 1; }
}

.ta-anim-rotate-down {
  animation: ta-rotate-down 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-rotate-down {
  from { transform: rotate(-18deg) translateY(-35px); transform-origin: 0% 0%; opacity: 0; } to { transform: rotate(0deg) translateY(0); transform-origin: 0% 0%; opacity: 1; }
}

.ta-anim-rotate-left-right {
  animation: ta-rotate-left-right 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-rotate-left-right {
  from { transform: perspective(400px) rotateY(-90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0deg); opacity: 1; }
}

.ta-anim-3d-flip {
  animation: ta-3d-flip 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-3d-flip {
  from { transform: perspective(400px) rotateX(-90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}

.ta-anim-3d-rotate-reveal {
  animation: ta-3d-rotate-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-3d-rotate-reveal {
  from { transform: perspective(600px) rotate3d(1, 1, 0, 75deg); opacity: 0; } to { transform: perspective(600px) rotate3d(0, 0, 0, 0deg); opacity: 1; }
}

.ta-anim-tilt-fade {
  animation: ta-tilt-fade 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-tilt-fade {
  from { transform: perspective(500px) rotateY(35deg) rotateX(-20deg) translateY(20px); opacity: 0; } to { transform: perspective(500px) rotateY(0deg) rotateX(0deg) translateY(0); opacity: 1; }
}

.ta-anim-stagger-words {
  animation: ta-stagger-words 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-stagger-words {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-stagger-letters {
  animation: ta-stagger-letters 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-stagger-letters {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-stagger-lines {
  animation: ta-stagger-lines 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-stagger-lines {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-reverse-stagger {
  animation: ta-reverse-stagger 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-reverse-stagger {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-wave-stagger-each-letter-in-sine-wave {
  animation: ta-wave-stagger-each-letter-in-sine-wave 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-wave-stagger-each-letter-in-sine-wave {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-parallax-fade {
  animation: ta-parallax-fade 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-parallax-fade {
  from { transform: translateY(35px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; }
}

.ta-anim-parallax-up-reveal {
  animation: ta-parallax-up-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-parallax-up-reveal {
  from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; }
}

.ta-anim-parallax-layered-text {
  animation: ta-parallax-layered-text 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-parallax-layered-text {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-depth-parallax-slide {
  animation: ta-depth-parallax-slide 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-depth-parallax-slide {
  from { transform: perspective(600px) translateZ(-180px) translateY(45px); opacity: 0; } to { transform: perspective(600px) translateZ(0) translateY(0); opacity: 1; }
}

.ta-anim-text-split-apart-reform {
  animation: ta-text-split-apart-reform 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-text-split-apart-reform {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-stretch-reveal {
  animation: ta-stretch-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-stretch-reveal {
  0% { transform: scaleX(2.8) scaleY(0.3); letter-spacing: 0.4em; opacity: 0; } 70% { transform: scaleX(0.92) scaleY(1.1); letter-spacing: normal; opacity: 1; } 100% { transform: scale(1); letter-spacing: normal; }
}

.ta-anim-morph-shape-text {
  animation: ta-morph-shape-text 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-morph-shape-text {
  0% { border-radius: 50px; background: var(--accent); color: transparent; transform: scale(0.3); opacity: 0; } 50% { border-radius: 20px; background: var(--accent); color: transparent; transform: scale(1.05); } 100% { border-radius: 0; background: transparent; color: var(--text); transform: scale(1); opacity: 1; }
}

.ta-anim-skew-normal-reveal {
  animation: ta-skew-normal-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-skew-normal-reveal {
  0% { transform: skewX(-32deg) translateX(-45px); opacity: 0; filter: blur(6px); } 75% { transform: skewX(6deg) translateX(4px); } 100% { transform: skewX(0) translateX(0); opacity: 1; filter: blur(0); }
}

.ta-anim-distort-settle-reveal {
  animation: ta-distort-settle-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-distort-settle-reveal {
  0% { transform: skewY(16deg) scale(1.25); filter: blur(8px); opacity: 0; } 70% { transform: skewY(-4deg) scale(0.97); } 100% { transform: skewY(0) scale(1); filter: blur(0); opacity: 1; }
}

.ta-anim-cinematic-letter-spacing-normal {
  animation: ta-cinematic-letter-spacing-normal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-cinematic-letter-spacing-normal {
  from { letter-spacing: 0.75em; opacity: 0; filter: blur(8px); } to { letter-spacing: -0.035em; opacity: 1; filter: blur(0); }
}

.ta-anim-hollywood-fade-zoom {
  animation: ta-hollywood-fade-zoom 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-hollywood-fade-zoom {
  from { transform: scale(1.45); filter: blur(12px) brightness(1.5); opacity: 0; } to { transform: scale(1); filter: blur(0) brightness(1); opacity: 1; }
}

.ta-anim-dramatic-slow-fade {
  animation: ta-dramatic-slow-fade 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-dramatic-slow-fade {
  0% { opacity: 0; transform: translateY(12px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.ta-anim-smooth-dissolve {
  animation: ta-smooth-dissolve 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-smooth-dissolve {
  from { opacity: 0; filter: blur(16px); transform: scale(0.96); } to { opacity: 1; filter: blur(0); transform: scale(1); }
}

.ta-anim-gradient-wipe-reveal {
  animation: ta-gradient-wipe-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-gradient-wipe-reveal {
  0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); }
}

.ta-anim-light-sweep-reveal {
  animation: ta-light-sweep-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-light-sweep-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-liquid-text-reveal {
  animation: ta-liquid-text-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-liquid-text-reveal {
  0% { filter: blur(16px) contrast(300%); transform: scaleX(0.5) scaleY(1.4); opacity: 0; } 60% { filter: blur(4px) contrast(150%); transform: scaleX(1.1) scaleY(0.9); } 100% { filter: blur(0) contrast(100%); transform: scale(1); opacity: 1; }
}

.ta-anim-gooey-bounce {
  animation: ta-gooey-bounce 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-gooey-bounce {
  0% { transform: translateY(-50px) scaleX(0.7) scaleY(1.3); opacity: 0; } 60% { transform: translateY(10px) scaleX(1.25) scaleY(0.8); } 80% { transform: translateY(-4px) scaleX(0.95) scaleY(1.05); } 100% { transform: translateY(0) scale(1); opacity: 1; }
}

.ta-anim-water-ripple-formation {
  animation: ta-water-ripple-formation 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-water-ripple-formation {
  0% { transform: scale(0.1); filter: blur(12px); opacity: 0; box-shadow: 0 0 0 0 var(--accent); } 50% { opacity: 0.8; box-shadow: 0 0 0 20px transparent; } 100% { transform: scale(1); filter: blur(0); opacity: 1; box-shadow: 0 0 0 0 transparent; }
}

.ta-anim-drip-reveal {
  animation: ta-drip-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-drip-reveal {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-30px) scaleY(1.5); transform-origin: top; } to { clip-path: inset(0); transform: translateY(0) scaleY(1); transform-origin: top; }
}

.ta-anim-gel-stretch-reveal {
  animation: ta-gel-stretch-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-gel-stretch-reveal {
  0% { transform: scaleX(1.8) scaleY(0.4); opacity: 0; } 50% { transform: scaleX(0.7) scaleY(1.4); opacity: 0.9; } 75% { transform: scaleX(1.15) scaleY(0.9); } 100% { transform: scale(1); opacity: 1; }
}

.ta-anim-text-forming-from-particles {
  animation: ta-text-forming-from-particles 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-text-forming-from-particles {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-particle-dissolve {
  animation: ta-particle-dissolve 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-particle-dissolve {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-pixel-dust-reveal {
  animation: ta-pixel-dust-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-pixel-dust-reveal {
  from { opacity: 0; filter: blur(12px); letter-spacing: 0.4em; transform: scale(1.1); } to { opacity: 1; filter: blur(0); letter-spacing: normal; transform: scale(1); }
}

.ta-anim-sand-scatter-reveal {
  animation: ta-sand-scatter-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-sand-scatter-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-micro-particle-collapse {
  animation: ta-micro-particle-collapse 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-micro-particle-collapse {
  from { opacity: 0; transform: scale(2.2); filter: blur(14px); letter-spacing: 0.6em; } to { opacity: 1; transform: scale(1); filter: blur(0); letter-spacing: normal; }
}

.ta-anim-glitch-flicker {
  animation: ta-glitch-flicker 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-glitch-flicker {
  0% { transform: translate(0); text-shadow: none; } 20% { transform: translate(-3px, 2px); text-shadow: 2px -2px #f43f5e, -2px 2px #00f3ff; } 40% { transform: translate(3px, -1px); text-shadow: -2px 1px #f43f5e, 2px -1px #00f3ff; } 60% { transform: translate(-1px, -2px); text-shadow: 1px 2px #f43f5e, -1px -2px #00f3ff; } 80% { transform: translate(2px, 1px); text-shadow: -1px -1px #f43f5e, 1px 1px #00f3ff; } 100% { transform: translate(0); text-shadow: none; }
}

.ta-anim-rgb-shift-glitch {
  animation: ta-rgb-shift-glitch 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-rgb-shift-glitch {
  0% { text-shadow: 4px 0 #ef4444, -4px 0 #06b6d4; transform: skewX(-10deg); } 30% { text-shadow: -5px 0 #ef4444, 5px 0 #06b6d4; transform: skewX(10deg); } 60% { text-shadow: 3px 0 #ef4444, -3px 0 #06b6d4; transform: skewX(-4deg); } 100% { text-shadow: none; transform: none; }
}

.ta-anim-pixel-break-reveal {
  animation: ta-pixel-break-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-pixel-break-reveal {
  0% { opacity: 0; filter: contrast(300%) blur(4px); letter-spacing: 0.3em; transform: scale(1.1); } 50% { opacity: 0.7; filter: contrast(150%) blur(2px); } 100% { opacity: 1; filter: none; letter-spacing: normal; transform: scale(1); }
}

.ta-anim-hologram-flicker-reveal {
  animation: ta-hologram-flicker-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-hologram-flicker-reveal {
  0% { opacity: 0; color: #00f3ff; text-shadow: 0 0 12px #00f3ff; transform: translateY(10px); } 30% { opacity: 0.4; } 50% { opacity: 1; } 70% { opacity: 0.6; } 100% { opacity: 1; color: var(--text); text-shadow: 0 0 8px #00f3ff; transform: translateY(0); }
}

.ta-anim-vhs-noise-reveal {
  animation: ta-vhs-noise-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-vhs-noise-reveal {
  0% { transform: translateX(-20px) skewX(25deg); opacity: 0; filter: blur(4px); } 40% { transform: translateX(15px) skewX(-15deg); opacity: 0.6; } 70% { transform: translateX(-5px) skewX(5deg); } 100% { transform: none; opacity: 1; filter: none; }
}

.ta-anim-crt-scanline-reveal {
  animation: ta-crt-scanline-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-crt-scanline-reveal {
  0% { opacity: 0; transform: scaleY(0.05); filter: brightness(3); } 50% { opacity: 0.8; transform: scaleY(1.2); filter: brightness(1.8); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

.ta-anim-laser-sweep-reveal {
  animation: ta-laser-sweep-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-laser-sweep-reveal {
  0% { clip-path: inset(0 100% 0 0); filter: drop-shadow(-10px 0 8px #ef4444); } 100% { clip-path: inset(0 0 0 0); filter: drop-shadow(0 0 0 transparent); }
}

.ta-anim-light-beam-reveal {
  animation: ta-light-beam-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-light-beam-reveal {
  from { opacity: 0; filter: brightness(3) blur(8px); transform: translateY(15px); } to { opacity: 1; filter: brightness(1) blur(0); transform: translateY(0); }
}

.ta-anim-neon-shine-wipe {
  animation: ta-neon-shine-wipe 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-neon-shine-wipe {
  0% { opacity: 0; filter: brightness(2) blur(6px); transform: scale(0.96); } 100% { opacity: 1; filter: brightness(1) blur(0); transform: scale(1); }
}

.ta-anim-hologram-distortion-reveal {
  animation: ta-hologram-distortion-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-hologram-distortion-reveal {
  0% { transform: perspective(400px) rotateX(40deg) translateY(20px); opacity: 0; color: #38bdf8; text-shadow: 0 0 15px #0284c7; } 100% { transform: perspective(400px) rotateX(0) translateY(0); opacity: 1; color: var(--text); text-shadow: none; }
}

.ta-anim-electric-spark-reveal {
  animation: ta-electric-spark-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-electric-spark-reveal {
  0% { opacity: 0; text-shadow: 0 0 20px #eab308, 0 0 40px #eab308; } 50% { opacity: 0.8; text-shadow: 0 0 10px #fde047; } 100% { opacity: 1; text-shadow: none; }
}

.ta-anim-3d-pop-out {
  animation: ta-3d-pop-out 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-3d-pop-out {
  0% { transform: perspective(500px) translateZ(-300px) scale(0.2); opacity: 0; } 70% { transform: perspective(500px) translateZ(40px) scale(1.1); opacity: 1; } 100% { transform: perspective(500px) translateZ(0) scale(1); }
}

.ta-anim-3d-extrude {
  animation: ta-3d-extrude 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-3d-extrude {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-text-flying-from-distance {
  animation: ta-text-flying-from-distance 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-text-flying-from-distance {
  from { transform: perspective(600px) translateZ(-600px) scale(0.1); opacity: 0; } to { transform: perspective(600px) translateZ(0) scale(1); opacity: 1; }
}

.ta-anim-perspective-fold-reveal {
  animation: ta-perspective-fold-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-perspective-fold-reveal {
  from { transform: perspective(400px) rotateX(-90deg); transform-origin: top center; opacity: 0; } to { transform: perspective(400px) rotateX(0); transform-origin: top center; opacity: 1; }
}

.ta-anim-tunnel-reveal {
  animation: ta-tunnel-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-tunnel-reveal {
  0% { transform: perspective(300px) translateZ(-400px) rotate(15deg); opacity: 0; filter: blur(10px); } 100% { transform: perspective(300px) translateZ(0) rotate(0); opacity: 1; filter: blur(0); }
}

.ta-anim-3d-flip-sequence {
  animation: ta-3d-flip-sequence 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-3d-flip-sequence {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-noise-warp-reveal {
  animation: ta-noise-warp-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-noise-warp-reveal {
  0% { transform: skewX(-25deg) scaleX(1.3); filter: blur(8px); opacity: 0; } 50% { transform: skewX(12deg) scaleX(0.9); } 100% { transform: skewX(0) scaleX(1); filter: blur(0); opacity: 1; }
}

.ta-anim-wave-distortion {
  animation: ta-wave-distortion 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-wave-distortion {
  0%, 100% { transform: translateY(0) skewX(0); } 25% { transform: translateY(-6px) skewX(6deg); } 75% { transform: translateY(6px) skewX(-6deg); }
}

.ta-anim-vhs-distort {
  animation: ta-vhs-distort 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-vhs-distort {
  0% { transform: translateX(-15px); clip-path: inset(10% 0 30% 0); } 30% { transform: translateX(15px); clip-path: inset(40% 0 10% 0); } 60% { transform: translateX(-5px); clip-path: inset(70% 0 5% 0); } 100% { transform: none; clip-path: inset(0); }
}

.ta-anim-liquid-crystal-reveal {
  animation: ta-liquid-crystal-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-liquid-crystal-reveal {
  0% { opacity: 0; filter: contrast(400%); letter-spacing: 0.3em; } 50% { opacity: 0.6; filter: contrast(200%); } 100% { opacity: 1; filter: contrast(100%); letter-spacing: normal; }
}

.ta-anim-glitch-noise-build-up {
  animation: ta-glitch-noise-build-up 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-glitch-noise-build-up {
  0% { opacity: 0; transform: scale(0.9); } 30% { opacity: 0.5; transform: skewX(20deg); text-shadow: 4px 0 #ef4444; } 70% { opacity: 0.8; transform: skewX(-15deg); text-shadow: -4px 0 #06b6d4; } 100% { opacity: 1; transform: none; text-shadow: none; }
}

.ta-anim-magnetic-letters-snap-together {
  animation: ta-magnetic-letters-snap-together 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-magnetic-letters-snap-together {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-gravity-drop-bounce {
  animation: ta-gravity-drop-bounce 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-gravity-drop-bounce {
  0% { transform: translateY(-120px); opacity: 0; } 60% { transform: translateY(0); opacity: 1; } 75% { transform: translateY(-24px); } 90% { transform: translateY(0); } 95% { transform: translateY(-6px); } 100% { transform: translateY(0); }
}

.ta-anim-scatter-assemble {
  animation: ta-scatter-assemble 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-scatter-assemble {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-orbiting-letters-form-text {
  animation: ta-orbiting-letters-form-text 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-orbiting-letters-form-text {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-floating-physics-text {
  animation: ta-floating-physics-text 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-floating-physics-text {
  0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1.5deg); }
}

.ta-anim-slide-skew-fade {
  animation: ta-slide-skew-fade 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-slide-skew-fade {
  from { transform: translateY(35px) skewX(-20deg); opacity: 0; } to { transform: translateY(0) skewX(0); opacity: 1; }
}

.ta-anim-rotate-blur-settle {
  animation: ta-rotate-blur-settle 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-rotate-blur-settle {
  from { transform: rotate(-15deg) scale(0.8); filter: blur(12px); opacity: 0; } to { transform: rotate(0) scale(1); filter: blur(0); opacity: 1; }
}

.ta-anim-stretch-snap {
  animation: ta-stretch-snap 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-stretch-snap {
  0% { transform: scaleX(2.2) scaleY(0.5); opacity: 0; } 65% { transform: scaleX(0.85) scaleY(1.15); opacity: 1; } 100% { transform: scale(1); }
}

.ta-anim-overshoot-opacity {
  animation: ta-overshoot-opacity 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-overshoot-opacity {
  0% { transform: scale(0.7); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); }
}

.ta-anim-motion-curve-reveal {
  animation: ta-motion-curve-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-motion-curve-reveal {
  0% { transform: translate(-40px, 30px) rotate(-10deg); opacity: 0; } 70% { transform: translate(5px, -5px) rotate(2deg); } 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
}

.ta-anim-circle-mask-reveal {
  animation: ta-circle-mask-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-circle-mask-reveal {
  from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); }
}

.ta-anim-triangular-slice-reveal {
  animation: ta-triangular-slice-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-triangular-slice-reveal {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); } to { clip-path: polygon(-20% -20%, 120% -20%, 50% 130%); }
}

.ta-anim-polygon-mask-reveal {
  animation: ta-polygon-mask-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-polygon-mask-reveal {
  from { clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); } to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

.ta-anim-blob-mask-reveal {
  animation: ta-blob-mask-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-blob-mask-reveal {
  from { clip-path: circle(0% at 20% 20%); } to { clip-path: circle(100% at 50% 50%); }
}

.ta-anim-random-shape-text {
  animation: ta-random-shape-text 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-random-shape-text {
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transform: scale(1.1); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1); }
}

.ta-anim-code-rain-matrix {
  animation: ta-code-rain-matrix 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-code-rain-matrix {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-character-encryption-decryption-reveal {
  animation: ta-character-encryption-decryption-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-character-encryption-decryption-reveal {
  0% { opacity: 0; letter-spacing: 0.3em; filter: blur(4px); } 50% { opacity: 0.6; letter-spacing: -0.02em; } 100% { opacity: 1; letter-spacing: normal; filter: blur(0); }
}

.ta-anim-ai-scan-grid-reveal {
  animation: ta-ai-scan-grid-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-ai-scan-grid-reveal {
  0% { clip-path: inset(0 0 100% 0); filter: drop-shadow(0 0 8px #3b82f6); } 100% { clip-path: inset(0); filter: drop-shadow(0 0 0 transparent); }
}

.ta-anim-neural-node-animation-form-text {
  animation: ta-neural-node-animation-form-text 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-neural-node-animation-form-text {
  from { opacity: 0; filter: blur(10px) brightness(2); transform: scale(1.15); } to { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
}

.ta-anim-data-stream-flicker-reveal {
  animation: ta-data-stream-flicker-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-data-stream-flicker-reveal {
  0%, 20%, 40% { opacity: 0.2; transform: translateX(-4px); } 10%, 30%, 50% { opacity: 0.8; transform: translateX(4px); } 100% { opacity: 1; transform: none; }
}

.ta-anim-scroll-speed-controlled-reveal {
  animation: ta-scroll-speed-controlled-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-scroll-speed-controlled-reveal {
  from { transform: translateY(40px) rotateX(25deg); opacity: 0; } to { transform: translateY(0) rotateX(0); opacity: 1; }
}

.ta-anim-mouse-direction-reveal {
  animation: ta-mouse-direction-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-mouse-direction-reveal {
  from { transform: translateX(35px) translateY(-15px); opacity: 0; } to { transform: translateX(0) translateY(0); opacity: 1; }
}

.ta-anim-cursor-proximity-glow {
  animation: ta-cursor-proximity-glow 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-cursor-proximity-glow {
  0%, 100% { text-shadow: none; color: var(--text); } 50% { text-shadow: 0 0 20px var(--accentStrong); color: #fff; }
}

.ta-anim-reveal-on-hover-path {
  animation: ta-reveal-on-hover-path 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-reveal-on-hover-path {
  from { clip-path: inset(0 100% 0 0); transform: translateY(5px); } to { clip-path: inset(0); transform: translateY(0); }
}

.ta-anim-audio-reactive-text-reveal {
  animation: ta-audio-reactive-text-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-audio-reactive-text-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-fire-text-reveal {
  animation: ta-fire-text-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-fire-text-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-smoke-dissolve {
  animation: ta-smoke-dissolve 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-smoke-dissolve {
  from { opacity: 0; filter: blur(20px); transform: translateY(30px) scale(1.2); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

.ta-anim-liquid-metal-reveal {
  animation: ta-liquid-metal-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-liquid-metal-reveal {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-metallic-shine-sweep {
  animation: ta-metallic-shine-sweep 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-metallic-shine-sweep {
  from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); }
}

.ta-anim-ice-shatter-reveal {
  animation: ta-ice-shatter-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-ice-shatter-reveal {
  from { opacity: 0; filter: blur(10px) brightness(1.8); transform: scale(1.2) rotate(3deg); color: #bae6fd; } to { opacity: 1; filter: blur(0) brightness(1); transform: scale(1) rotate(0); color: var(--text); }
}

.ta-anim-atomic-pulse-reveal {
  animation: ta-atomic-pulse-reveal 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-atomic-pulse-reveal {
  0% { transform: scale(0.4); opacity: 0; box-shadow: 0 0 0 0 var(--accentStrong); } 60% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 30px var(--accentStrong); } 100% { transform: scale(1); box-shadow: none; }
}

.ta-anim-micro-bounce {
  animation: ta-micro-bounce 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-micro-bounce {
  0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 70% { transform: translateY(2px); } 100% { transform: translateY(0); }
}

.ta-anim-micro-hover-push {
  animation: ta-micro-hover-push 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-micro-hover-push {
  0% { transform: scale(1); } 50% { transform: scale(0.94); } 100% { transform: scale(1); }
}

.ta-anim-soft-hover-glow {
  animation: ta-soft-hover-glow 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-soft-hover-glow {
  from { text-shadow: none; } to { text-shadow: 0 0 14px var(--accent); }
}

.ta-anim-gentle-hover-raise {
  animation: ta-gentle-hover-raise 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-gentle-hover-raise {
  from { transform: translateY(0); } to { transform: translateY(-4px); }
}

.ta-anim-breathing-text-animation {
  animation: ta-breathing-text-animation 800ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ta-breathing-text-animation {
  0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); color: var(--accentStrong); }
}