@property --shape-morph{syntax: "<length>"; inherits: true; initial-value: 16px;}@property --hero-clip{syntax: "<length>"; inherits: true; initial-value: 0px;}:root{color-scheme:light;--font-body: "Roboto", system-ui, sans-serif;--bg: #FFFBFE;--surface: #FFFBFE;--surface-2: #F7F2FA;--surface-3: #F3EDF7;--surface-4: #ECE6F0;--surface-5: #E6E0E9;--ink: #1C1B1F;--muted: #49454F;--line: #CAC4D0;--outline: #79747E;--primary: #6750A4;--on-primary: #FFFFFF;--primary-container: #EADDFF;--on-primary-container:#21005D;--secondary: #625B71;--on-secondary: #FFFFFF;--secondary-container: #E8DEF8;--on-secondary-container: #1D192B;--tertiary: #7D5260;--on-tertiary: #FFFFFF;--tertiary-container: #FFD8E4;--on-tertiary-container: #31111D;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 28px;--radius-full: 9999px;--shape-morph: 16px;--hero-clip: 0px;--shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);--shadow-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);--shadow-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);--shadow: var(--shadow-1);--tint-1: color-mix(in srgb, var(--primary) 5%, transparent);--tint-2: color-mix(in srgb, var(--primary) 8%, transparent);--tint-3: color-mix(in srgb, var(--primary) 11%, transparent);--easing-standard: cubic-bezier(.2, 0, .2, 1);--easing-emphasis: cubic-bezier(.2, .8, .2, 1);--duration-short: .2s;--duration-medium: .3s;--duration-long: .5s;--fab-size: 56px;--panel-width: 1120px}:root[data-theme=playful]{--bg: #FFF6F7;--surface: #FFF9FF;--surface-2: #FDF0FF;--surface-3: #F5E4FF;--surface-4: #EDD5FF;--surface-5: #E3C5FF;--ink: #261B2F;--muted: #6C547A;--line: rgba(124, 74, 160, .22);--outline:#7C4AA0;--primary: #9B51E0;--on-primary: #FFFFFF;--primary-container: #F0DBFF;--on-primary-container:#2D0060;--secondary: #FF7F6A;--on-secondary: #FFFFFF;--secondary-container: #FFD8CF;--on-secondary-container: #3A0A00;--tertiary: #00A6A6;--on-tertiary: #FFFFFF;--tertiary-container: #B2EFEF;--on-tertiary-container: #003737;--radius-xs: 12px;--radius-sm: 20px;--radius-md: 28px;--radius-lg: 36px;--radius-xl: 48px;--shape-morph: 28px;--hero-clip: 12px;--shadow-1: 0 2px 4px rgba(155, 81, 224, .2), 0 1px 3px rgba(155, 81, 224, .12);--shadow-2: 0 2px 4px rgba(155, 81, 224, .22), 0 3px 8px 2px rgba(155, 81, 224, .16);--shadow-3: 0 6px 14px 4px rgba(155, 81, 224, .18), 0 2px 4px rgba(155, 81, 224, .22);--easing-emphasis: cubic-bezier(.2, 1.2, .2, 1);--duration-short: .22s;--duration-medium: .34s;--duration-long: .52s}:root[data-theme=corporate]{--bg: #F5F7FB;--surface: #FFFFFF;--surface-2: #F4F6FA;--surface-3: #EEF1F6;--surface-4: #E5E9F0;--surface-5: #DDE2EA;--ink: #1D2530;--muted: #5B6573;--line: rgba(31, 43, 62, .16);--outline:#8092A8;--primary: #325C99;--on-primary: #FFFFFF;--primary-container: #D4E3FF;--on-primary-container:#0A1E3D;--secondary: #5C6F85;--on-secondary: #FFFFFF;--secondary-container: #D0DCF0;--on-secondary-container: #141E2D;--tertiary: #6D7F52;--on-tertiary: #FFFFFF;--tertiary-container: #CEDFAD;--on-tertiary-container: #1E2B0A;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 18px;--shape-morph: 12px;--hero-clip: 0px;--shadow-1: 0 1px 2px rgba(31, 43, 62, .18), 0 1px 3px rgba(31, 43, 62, .1);--shadow-2: 0 1px 2px rgba(31, 43, 62, .2), 0 2px 6px 2px rgba(31, 43, 62, .12);--shadow-3: 0 4px 8px 3px rgba(31, 43, 62, .12), 0 1px 3px rgba(31, 43, 62, .2);--easing-standard: cubic-bezier(.2, 0, .2, 1);--easing-emphasis: cubic-bezier(.2, 0, .2, 1);--duration-short: .12s;--duration-medium: .18s;--duration-long: .26s}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.5;background:var(--bg);color:var(--ink);padding-bottom:96px;-webkit-font-smoothing:antialiased}.skip-link{position:absolute;left:16px;top:-52px;z-index:20;padding:10px 20px;background:var(--primary);color:var(--on-primary);border-radius:var(--radius-full);font-weight:500;font-size:.875rem;text-decoration:none}.skip-link:focus{top:16px}.shell{max-width:var(--panel-width);margin:0 auto;padding:0 24px 96px}.top-app-bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;gap:16px;align-items:center;height:64px;padding:0 24px;background:color-mix(in srgb,var(--surface-2) 88%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.top-app-bar h1{font-size:1.375rem;font-weight:400;letter-spacing:0;line-height:1.75rem;margin:0}.eyebrow,.section-kicker{margin:0 0 4px;text-transform:uppercase;letter-spacing:.08em;font-size:.6875rem;font-weight:500;color:var(--muted)}.top-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}.theme-switcher{display:flex;gap:2px;background:var(--surface-3);padding:4px;border-radius:var(--radius-full);border:1px solid var(--line)}.theme-toggle{border:0;background:transparent;color:var(--muted);border-radius:var(--radius-full);padding:6px 16px;font:500 .8125rem / 1.25rem var(--font-body);letter-spacing:.04em;cursor:pointer;transition:background var(--duration-short) var(--easing-standard),color var(--duration-short) var(--easing-standard)}.theme-toggle.active{background:var(--primary);color:var(--on-primary)}.theme-toggle:hover:not(.active){background:color-mix(in srgb,var(--primary) 8%,transparent);color:var(--ink)}.info-master{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:var(--radius-full);padding:6px 16px;font:500 .8125rem / 1.25rem var(--font-body);letter-spacing:.04em;cursor:pointer;transition:background var(--duration-short) var(--easing-standard),color var(--duration-short) var(--easing-standard),border-color var(--duration-short) var(--easing-standard)}.info-master[aria-pressed=true]{background:var(--secondary-container);color:var(--on-secondary-container);border-color:transparent}.info-master:hover:not([aria-pressed=true]){background:var(--surface-3)}.layout{display:grid;grid-template-columns:72px minmax(0,1fr);gap:24px;margin-top:24px}.nav-rail{position:sticky;top:80px;align-self:start;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;height:calc(100vh - 112px)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--muted);width:100%;padding:4px 0}.nav-indicator{display:flex;align-items:center;justify-content:center;width:56px;height:32px;border-radius:var(--radius-full);transition:background var(--duration-short) var(--easing-standard),color var(--duration-short) var(--easing-standard)}.nav-item:hover .nav-indicator,.nav-item:focus-visible .nav-indicator{background:color-mix(in srgb,var(--muted) 12%,transparent);color:var(--ink)}.nav-item.active .nav-indicator{background:var(--secondary-container);color:var(--on-secondary-container)}.nav-label{font-size:.625rem;font-weight:500;letter-spacing:.04em;text-align:center;color:inherit;line-height:1}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:22px;line-height:1;display:block;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}main{display:grid;gap:24px}.hero-card,.demo-card,.foundation-card,.rationale-card{position:relative;border-radius:var(--radius-xl);border:1px solid var(--line);background:color-mix(in srgb,var(--primary) 5%,var(--surface));box-shadow:var(--shadow-1)}.hero-card{display:grid;grid-template-columns:1.5fr 1fr;gap:24px 40px;padding:32px;align-items:start;clip-path:inset(0 round calc(var(--radius-xl) + var(--hero-clip)));transition:clip-path var(--duration-long) var(--easing-emphasis);overflow:hidden}.hero-card h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:400;letter-spacing:0;line-height:1.25;margin:6px 0 12px}.hero-card>div:first-child>p{max-width:60ch;color:var(--muted);font-size:.9375rem;line-height:1.6;letter-spacing:.016em;margin:0}.hero-card>.callout{grid-column:1 / -1}.hero-metrics{display:grid;grid-template-columns:1fr;gap:10px}.metric-card{background:var(--primary-container);color:var(--on-primary-container);border-radius:var(--radius-lg);padding:16px 20px}.metric-card span{display:block;font-size:clamp(2rem,4vw,2.75rem);font-weight:300;letter-spacing:-.03em;line-height:1;margin-bottom:4px}.metric-card small{font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.75}.showcase-section{display:grid;gap:20px}.section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end}.section-head h2{font-size:1.75rem;font-weight:400;letter-spacing:0;line-height:1.3;margin:6px 0 0}.section-copy{max-width:52ch;color:var(--muted);font-size:.9375rem;line-height:1.6;letter-spacing:.016em}.foundation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.motion-card{grid-column:span 2}.inputs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.feedback-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.rationale-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.rationale-intro{margin:-4px 0 4px;max-width:72ch;color:var(--muted);font-size:.9375rem;line-height:1.6}.rationale-panel.accented .rationale-card{border-color:color-mix(in srgb,var(--primary) 28%,var(--line));background:color-mix(in srgb,var(--primary) 9%,var(--surface))}.foundation-card,.demo-card,.rationale-card{padding:20px;display:flex;flex-direction:column;gap:0}.demo-card>p{color:var(--muted);font-size:.9375rem;line-height:1.6;letter-spacing:.016em;margin:0 0 16px}.foundation-card h3,.demo-card h3,.rationale-card h3{font-size:1rem;font-weight:500;letter-spacing:.01em;line-height:1.5rem;margin:0 0 14px}.swatch-row{display:flex;flex-wrap:wrap;gap:8px}.swatch{padding:10px 14px;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:500;letter-spacing:.04em;flex:1;min-width:72px}.swatch.primary{background:var(--primary);color:var(--on-primary)}.swatch.secondary{background:var(--secondary);color:var(--on-secondary)}.swatch.tertiary{background:var(--tertiary);color:var(--on-tertiary)}.swatch.surface{background:var(--surface-4);color:var(--ink);border:1px solid var(--line)}.type-display{font-size:clamp(1.75rem,3vw,2.25rem);font-weight:400;letter-spacing:-.016em;line-height:1.15;margin:0 0 4px}.type-headline{font-size:1.25rem;font-weight:400;letter-spacing:0;line-height:1.5rem;margin:0 0 8px}.type-body{font-size:.9375rem;font-weight:400;letter-spacing:.016em;line-height:1.6;color:var(--muted);margin:0}.shape-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.shape-sample{width:52px;height:52px;background:linear-gradient(145deg,var(--primary-container),color-mix(in srgb,var(--tertiary-container) 55%,var(--primary-container)))}.shape-sample.xs{border-radius:var(--radius-xs)}.shape-sample.sm{border-radius:var(--radius-sm)}.shape-sample.md{border-radius:var(--radius-md)}.shape-sample.lg{border-radius:var(--radius-xl)}.elevation-stack{padding-top:4px}.state-sample{position:relative;overflow:hidden;border:0;background:var(--surface-3);color:var(--ink);border-radius:var(--radius-full);padding:10px 20px;font:500 .875rem / 1.25rem var(--font-body);letter-spacing:.04em;cursor:pointer;transition:box-shadow var(--duration-short) var(--easing-standard),transform var(--duration-short) var(--easing-standard)}.state-sample:before{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;border-radius:inherit;pointer-events:none;transition:opacity var(--duration-short) var(--easing-standard)}.state-sample:hover:before{opacity:.08}.state-sample:active:before{opacity:.12}.state-sample:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}.motion-lane{overflow:hidden;border-radius:var(--radius-full);background:var(--surface-4);height:12px;position:relative;margin-bottom:10px}.motion-dot{position:absolute;inset:2px auto 2px 2px;width:64px;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--primary),var(--tertiary));animation:lane var(--duration-long) var(--easing-emphasis) infinite alternate}.motion-note{color:var(--muted);font-size:.875rem;letter-spacing:.016em;margin:0}.button-card{gap:0}.component-header{margin-bottom:16px}.component-header p{color:var(--muted);font-size:.9375rem;line-height:1.5;margin:4px 0 0}.button-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:4px}.cards-showcase{gap:0}.content-card{padding:20px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-2)}.content-card .eyebrow{margin-bottom:8px}.content-card h4{font-size:1rem;font-weight:500;letter-spacing:.01em;margin:0 0 8px}.content-card>p{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0}.content-card.highlight{background:var(--primary-container);color:var(--on-primary-container);border-color:transparent}.content-card.highlight h4,.content-card.highlight .eyebrow{color:var(--on-primary-container)}.content-card.highlight>p{color:color-mix(in srgb,var(--on-primary-container) 72%,transparent)}.content-card.outline{background:transparent}.field-stack{display:flex;flex-direction:column;gap:12px}.chip-stack{display:flex;flex-wrap:wrap;gap:8px}.switch-stack{display:flex;flex-direction:column;gap:8px}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-radius:var(--radius-md);background:var(--surface-3);border:1px solid var(--line);font-size:.9375rem;letter-spacing:.016em}.rationale-card ul{padding:0 0 0 20px;margin:0}.rationale-card li{color:var(--muted);font-size:.9375rem;line-height:1.6;letter-spacing:.016em;margin-bottom:6px}.callout{display:grid;gap:4px;margin-top:auto;padding:12px 14px;border-radius:var(--radius-md);background:var(--surface-3);border:1px solid var(--line);transition:opacity var(--duration-medium) var(--easing-standard),transform var(--duration-medium) var(--easing-standard)}.callout:not(:empty){margin-top:16px}.callout strong{font-size:.8125rem;font-weight:500;color:var(--ink);letter-spacing:.01em}.callout span{color:var(--muted);font-size:.8125rem;line-height:1.45;letter-spacing:.016em}:root[data-callouts=off] .callout{opacity:0;pointer-events:none;transform:translateY(4px)}.sc-demo-link{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:auto;padding:8px 4px 4px;text-decoration:none;color:var(--primary);font-size:.6875rem;font-weight:500;letter-spacing:.04em;text-align:center;border-top:1px solid var(--outline-variant);transition:color var(--duration-short) var(--easing-standard)}.sc-demo-link:hover,.sc-demo-link:focus-visible{color:var(--on-primary-container)}.sc-demo-link:before{content:"newspaper";font-family:Material Symbols Outlined;font-size:24px;width:56px;height:32px;display:grid;place-items:center;border-radius:var(--radius-full);background:color-mix(in srgb,var(--primary) 12%,transparent);transition:background var(--duration-short) var(--easing-standard)}.sc-demo-link:hover:before{background:color-mix(in srgb,var(--primary) 20%,transparent)}.global-fab{position:fixed;right:24px;bottom:24px;z-index:12}.snackbar{position:fixed;left:50%;bottom:88px;z-index:11;display:flex;gap:8px;align-items:center;min-width:min(92vw,320px);padding:12px 16px;border-radius:var(--radius-md);background:#313033;color:#e6e1e5;box-shadow:var(--shadow-3);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity var(--duration-medium) var(--easing-standard),transform var(--duration-medium) var(--easing-standard)}.snackbar.visible{opacity:1;pointer-events:auto;transform:translate(-50%)}.snackbar__label{flex:1;font-size:.875rem;letter-spacing:.016em}.snackbar__action{border:0;background:transparent;color:#d0bcff;font:500 .875rem / 1.25 var(--font-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.reveal-section{opacity:0;transform:translateY(16px);transition:opacity var(--duration-long) var(--easing-standard),transform var(--duration-long) var(--easing-standard)}.reveal-section.visible{opacity:1;transform:translateY(0)}md-filled-button,md-filled-tonal-button,md-outlined-button,md-text-button,md-elevated-button,md-fab{--md-sys-color-primary: var(--primary);--md-sys-color-on-primary: var(--on-primary);--md-sys-color-primary-container: var(--primary-container);--md-sys-color-on-primary-container: var(--on-primary-container);--md-sys-color-secondary: var(--secondary);--md-sys-color-secondary-container: var(--secondary-container);--md-sys-color-surface: var(--surface);--md-sys-color-surface-container: var(--surface-3);--md-sys-color-on-surface: var(--ink);--md-sys-color-outline: var(--outline);clip-path:inset(0 round var(--shape-morph));transition:clip-path var(--duration-medium) var(--easing-emphasis),transform var(--duration-medium) var(--easing-emphasis),filter var(--duration-medium) var(--easing-standard)}md-filled-button:hover,md-filled-tonal-button:hover,md-outlined-button:hover,md-text-button:hover,md-elevated-button:hover,md-fab:hover{clip-path:inset(0 round calc(var(--shape-morph) + 8px));filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--primary) 22%,transparent))}md-filled-button.is-pressed,md-filled-tonal-button.is-pressed,md-outlined-button.is-pressed,md-text-button.is-pressed,md-elevated-button.is-pressed,md-fab.is-pressed{clip-path:inset(1px round calc(var(--shape-morph) - 2px));transform:translateY(1px) scale(.98)}md-filled-text-field,md-outlined-text-field{--md-sys-color-primary: var(--primary);--md-sys-color-on-surface: var(--ink);--md-sys-color-on-surface-variant: var(--muted);--md-sys-color-surface-container-highest: var(--surface-4);--md-sys-color-outline: var(--outline)}md-switch{--md-sys-color-primary: var(--primary);--md-sys-color-on-primary: var(--on-primary)}md-assist-chip,md-filter-chip,md-input-chip,md-suggestion-chip{--md-sys-color-primary: var(--primary);--md-sys-color-on-surface: var(--ink);--md-sys-color-on-surface-variant: var(--muted);--md-sys-color-outline: var(--outline);--md-sys-color-secondary-container: var(--secondary-container);--md-sys-color-on-secondary-container: var(--on-secondary-container)}md-dialog{--md-sys-color-surface: var(--surface);--md-sys-color-on-surface: var(--ink);--md-sys-color-on-surface-variant: var(--muted);--md-sys-color-primary: var(--primary);--md-sys-color-surface-container-high: var(--surface-4)}:root[data-motion=reduced] .motion-dot,:root[data-motion=reduced] .reveal-section,:root[data-motion=reduced] md-filled-button,:root[data-motion=reduced] md-filled-tonal-button,:root[data-motion=reduced] md-outlined-button,:root[data-motion=reduced] md-text-button,:root[data-motion=reduced] md-elevated-button,:root[data-motion=reduced] md-fab{animation:none!important;transition-duration:1ms!important}@keyframes lane{0%{transform:translate(0)}to{transform:translate(calc(100% - 66px))}}:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:var(--radius-xs)}@media(max-width:1080px){.layout{grid-template-columns:1fr}.nav-rail{position:static;flex-direction:row;justify-content:space-around;width:100%;overflow-x:auto;border-bottom:1px solid var(--line);padding:8px 0 12px;gap:0}.nav-item{min-width:56px}.hero-card{grid-template-columns:1fr}.hero-metrics,.foundation-grid{grid-template-columns:repeat(3,1fr)}.inputs-grid,.rationale-panel{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.shell{padding:0 16px 96px}.top-app-bar{padding:8px 16px;height:auto;min-height:64px;flex-wrap:wrap}.section-head{flex-direction:column;align-items:flex-start}.hero-metrics,.foundation-grid,.inputs-grid,.feedback-grid,.card-grid,.rationale-panel{grid-template-columns:1fr}.motion-card{grid-column:span 1}.global-fab{right:16px;bottom:16px}}@property --holo-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}:root[data-theme=playful] body{background:radial-gradient(ellipse 80% 55% at 15% 0%,rgba(155,81,224,.22) 0%,transparent 55%),radial-gradient(ellipse 60% 45% at 85% 10%,rgba(255,127,106,.18) 0%,transparent 50%),radial-gradient(ellipse 50% 35% at 50% 95%,rgba(0,166,166,.15) 0%,transparent 55%),radial-gradient(ellipse 40% 30% at 5% 80%,rgba(255,200,80,.12) 0%,transparent 45%),var(--bg)}:root[data-theme=playful] .hero-card,:root[data-theme=playful] .foundation-card,:root[data-theme=playful] .demo-card,:root[data-theme=playful] .rationale-card{overflow:hidden;border-color:transparent;box-shadow:var(--shadow-2),0 0 0 1px #ffffff8c,0 0 0 2px #9b51e04d,0 0 0 3px #00a6a62e,0 0 0 4px #ff7f6a1f}:root[data-theme=playful] .hero-card:after,:root[data-theme=playful] .foundation-card:after,:root[data-theme=playful] .demo-card:after,:root[data-theme=playful] .rationale-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:linear-gradient(112deg,transparent 15%,rgba(255,60,180,.14) 24%,rgba(60,200,255,.16) 33%,rgba(255,240,60,.12) 42%,rgba(60,255,180,.14) 51%,rgba(200,60,255,.13) 60%,rgba(60,180,255,.14) 69%,rgba(255,60,120,.11) 78%,transparent 88%);background-size:400% 400%;animation:holo-sweep 6s ease-in-out infinite alternate;mix-blend-mode:hard-light}:root[data-theme=playful] .hero-card>*,:root[data-theme=playful] .foundation-card>*,:root[data-theme=playful] .demo-card>*,:root[data-theme=playful] .rationale-card>*{position:relative;z-index:1}@keyframes holo-sweep{0%{background-position:0% 30%}40%{background-position:80% 70%}to{background-position:200% 30%}}:root[data-theme=playful] .metric-card{background:linear-gradient(135deg,#f0d8ff,#ffd8f4,#fff3cc,#ccf7ee,#cce8ff,#deccff 80%,#f0d8ff);background-size:300% 300%;animation:metallic-shift 7s ease infinite;border:none;box-shadow:inset 0 1px #ffffffd9,inset 0 -1px #0000000f,var(--shadow-2);color:var(--on-primary-container)}:root[data-theme=playful] .metric-card span{background:linear-gradient(135deg,#6b21a8,#9b51e0 30%,#d88de8,#9b51e0 70%,#2d1b69);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:metallic-shift 5s ease infinite}@keyframes metallic-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}:root[data-theme=playful] .motion-dot{background:linear-gradient(90deg,#ff0080,#ff8c00,#ffe000,#0f9,#00cfff,#8000ff,#ff0080);background-size:250% 100%;animation:lane var(--duration-long) var(--easing-emphasis) infinite alternate,rainbow-scroll 2.5s linear infinite}@keyframes rainbow-scroll{0%{background-position:0% 0%}to{background-position:250% 0%}}:root[data-theme=playful] .hero-card h2{background:linear-gradient(125deg,var(--primary) 0%,#ff7f6a 25%,#00a6a6 50%,#ff7f6a 75%,var(--primary) 100%);background-size:250% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:text-shimmer 5s ease infinite alternate}:root[data-theme=playful] .section-kicker,:root[data-theme=playful] .eyebrow{background:linear-gradient(90deg,var(--primary),#ff7f6a,#00a6a6,var(--primary));background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:text-shimmer 4s ease infinite alternate}@keyframes text-shimmer{0%{background-position:0% center}to{background-position:200% center}}:root[data-theme=playful] md-filled-button:hover,:root[data-theme=playful] md-filled-tonal-button:hover,:root[data-theme=playful] md-fab:hover{filter:drop-shadow(0 0 12px rgba(155,81,224,.5)) drop-shadow(0 0 24px rgba(255,127,106,.3)) hue-rotate(20deg) saturate(1.5) brightness(1.1)}:root[data-theme=playful] .callout{background:linear-gradient(135deg,#f0d8ffe6,#ffd8f4e0,#d8f0ffe6);background-size:200% 200%;animation:metallic-shift 8s ease infinite;border-color:#b478ff59}:root[data-theme=playful] .top-app-bar{background:color-mix(in srgb,rgba(255,246,247,.93) 90%,transparent);border-bottom:1px solid rgba(155,81,224,.22);box-shadow:0 1px #ff7f6a26,0 2px 8px #9b51e01a}:root[data-theme=playful] .global-fab{filter:drop-shadow(0 0 8px rgba(155,81,224,.4)) drop-shadow(0 0 16px rgba(0,166,166,.2));animation:fab-pulse 3s ease-in-out infinite alternate}@keyframes fab-pulse{0%{filter:drop-shadow(0 0 8px rgba(155,81,224,.4)) drop-shadow(0 0 16px rgba(0,166,166,.2))}to{filter:drop-shadow(0 0 16px rgba(255,127,106,.5)) drop-shadow(0 0 28px rgba(155,81,224,.3))}}:root[data-theme=playful] .swatch{box-shadow:inset 0 1px #fff9,0 2px 6px #0000001a}:root[data-theme=playful][data-motion=reduced] .hero-card:after,:root[data-theme=playful][data-motion=reduced] .foundation-card:after,:root[data-theme=playful][data-motion=reduced] .demo-card:after,:root[data-theme=playful][data-motion=reduced] .rationale-card:after{animation:none;opacity:.25}:root[data-theme=playful][data-motion=reduced] .metric-card,:root[data-theme=playful][data-motion=reduced] .metric-card span,:root[data-theme=playful][data-motion=reduced] .motion-dot,:root[data-theme=playful][data-motion=reduced] .hero-card h2,:root[data-theme=playful][data-motion=reduced] .section-kicker,:root[data-theme=playful][data-motion=reduced] .eyebrow,:root[data-theme=playful][data-motion=reduced] .callout,:root[data-theme=playful][data-motion=reduced] .global-fab{animation:none!important;background-size:100% 100%!important}:root[data-theme=playful] .foundation-card,:root[data-theme=playful] .demo-card,:root[data-theme=playful] .rationale-card,:root[data-theme=playful] .metric-card{transform-style:preserve-3d;transform:perspective(800px) rotateX(0) rotateY(0) translateZ(0);transition:transform var(--duration-medium) var(--easing-emphasis),box-shadow var(--duration-medium) var(--easing-standard);will-change:transform;cursor:default}:root[data-theme=playful] .foundation-card:hover,:root[data-theme=playful] .demo-card:hover,:root[data-theme=playful] .rationale-card:hover{transform:perspective(800px) rotateX(-4deg) rotateY(5deg) translateZ(12px);box-shadow:var(--shadow-3),0 0 0 1px #ffffffa6,0 0 0 2px #9b51e066,0 0 0 3px #00a6a638,12px -8px 32px #9b51e033,-8px 12px 24px #00a6a626}:root[data-theme=playful] .foundation-card:hover:after,:root[data-theme=playful] .demo-card:hover:after,:root[data-theme=playful] .rationale-card:hover:after{opacity:1;background-position:60% 40%}:root[data-theme=playful] .metric-card:hover{transform:perspective(600px) rotateX(-6deg) rotateY(8deg) translateZ(16px) scale(1.04);box-shadow:inset 0 1px #ffffffe6,inset 0 -1px #00000014,0 20px 40px #9b51e040,8px -6px 20px #ff7f6a33}:root[data-theme=playful] .hero-card{transform-style:preserve-3d;transition:transform var(--duration-long) var(--easing-emphasis),box-shadow var(--duration-long) var(--easing-standard),clip-path var(--duration-long) var(--easing-emphasis)}:root[data-theme=playful] .hero-card:hover{transform:perspective(1200px) rotateX(-2deg) rotateY(3deg) translateZ(8px)}:root[data-theme=playful][data-motion=reduced] .foundation-card,:root[data-theme=playful][data-motion=reduced] .demo-card,:root[data-theme=playful][data-motion=reduced] .rationale-card,:root[data-theme=playful][data-motion=reduced] .metric-card,:root[data-theme=playful][data-motion=reduced] .hero-card{transform:none!important;transition-duration:1ms!important}