/* The refreshed shell shares the original navigation and motion implementation. */
:root{--ink:#202326;--black:#202326;--grey:#202326;--muted-ink:#73777d;--font-sans:"Aeonik",Arial,sans-serif;--stage:#f1f2f3;--mono:"Geist Mono",monospace;--nav-radius:12px;--widget-border:1px solid #e1e3df;--widget-shadow:0 2px 3px #20232602}
body,input,button{font-family:var(--font-sans)}
.site-header{border-width:.5px}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.site-header.is-scrolled{background:#fff;border-color:#e1e3df;backdrop-filter:none;-webkit-backdrop-filter:none}}
button,input,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #7374ad;outline-offset:5px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.site-nav{justify-self:end;gap:4px;padding:6px}
.site-nav{position:relative;isolation:isolate}
.site-nav a,.site-header.is-scrolled .site-nav a{z-index:1;padding:9px 14px;border-radius:26px;font:400 11px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;color:var(--ink);opacity:.56;transition:opacity .26s cubic-bezier(.32,.72,.24,1)}
.site-header .site-nav a:hover{opacity:.76}
.site-header .site-nav a[aria-current="page"]{opacity:1}
.site-nav a::after{content:none}
.site-nav:not(:has(.site-nav-indicator)) a[aria-current="page"]{background:#2023260d}
/* Shares the filter pill's two-phase motion; refresh.js places it. */
.site-nav-indicator{position:absolute;left:0;top:0;height:34px;border-radius:26px;background:#2023260d;pointer-events:none}
.site-nav-indicator[data-phase=stretch]{transition:transform 190ms cubic-bezier(.32,.72,.24,1),width 190ms cubic-bezier(.32,.72,.24,1)}
.site-nav-indicator[data-phase=settle]{transition:transform 420ms cubic-bezier(.28,1.28,.36,1),width 420ms cubic-bezier(.24,1.34,.38,1)}
@media(prefers-reduced-motion:reduce){.site-nav-indicator,.site-nav a{transition:none!important}}
.showcase-hero{min-height:475px;padding:154px 24px 66px;text-align:center;display:flex;align-items:center;flex-direction:column}
.showcase-hero h1{max-width:320px;margin:0;font:400 24px/30px var(--font-sans);letter-spacing:-.48px}
.showcase-hero>p{font:400 16px/17.6px var(--font-sans);letter-spacing:-.32px;color:#777d84;margin:24px 0 0}
.showcase-hero>.hero-summary{max-width:320px;line-height:24px}
.hero-actions{display:flex;align-items:center;flex-direction:column;gap:22px;margin-top:36px}
.hero-cases{padding:10px 16px;margin:-10px -16px;gap:8px;background:#20232608;border:0;border-radius:999px;color:var(--ink);font:400 14px/20px var(--font-sans);letter-spacing:0}
.hero-cases::after{content:none}
.hero-cases [data-lucide="arrow-up-right"]{color:#858a91;transition:color 160ms ease}
.hero-cases:hover [data-lucide="arrow-up-right"],.hero-cases:focus-visible [data-lucide="arrow-up-right"]{color:var(--ink)}
.hero-cases .hero-cases-outline{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b6b9bd;stroke-width:.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hero-cases-outline rect{width:calc(100% - 2px);height:calc(100% - 2px)}
.hero-cases-track{stroke:#20232626}
.hero-cases-trace{stroke-dasharray:100 102;stroke-dashoffset:101;opacity:0;transition:stroke-dashoffset 180ms cubic-bezier(.22,1,.36,1),opacity 160ms ease-out}
.hero-cases:hover .hero-cases-trace,.hero-cases:focus-visible .hero-cases-trace{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 280ms cubic-bezier(.45,0,.55,1),opacity 100ms ease-out}
@media(prefers-reduced-motion:reduce){.hero-cases-trace,.hero-cases:is(:hover,:focus-visible) .hero-cases-trace{transition:none}}
.showcase-end svg{width:14px;height:14px}
.case-list-heading{text-align:center;padding:155px 24px 75px}
.case-list-heading h1{max-width:400px;font:400 24px/30px var(--font-sans);letter-spacing:-.48px;margin:0 auto 20px;text-wrap:balance}
.case-list-heading p{max-width:440px;font-size:16px;line-height:24px;margin:0 auto;color:#7b8289;text-wrap:pretty}
/* Case studies: Home's stage tiles and control pill, one grid instead of a sticky slideshow. */
.refresh-cases{--muted-ink:#777d84}
.refresh-cases .case-list-heading p{color:var(--muted-ink)}
.case-section{padding-bottom:128px}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 16px;width:calc(100% - 48px);max-width:1392px;margin:0 auto;padding:0;list-style:none}
.case-tile-featured{grid-column:1/-1}
.case-link{display:flex;flex-direction:column;color:var(--ink)}
.case-link[aria-disabled=true]{cursor:default}
.case-tile-featured .case-link{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:end;column-gap:48px}
.case-media{aspect-ratio:4/3;border-radius:26px;background:var(--stage);isolation:isolate}
.case-media img,.case-media video{transition:transform 700ms cubic-bezier(.22,1,.36,1)}
.case-status{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 12px;border:1px solid #2023260b;border-radius:18px;background:#fffffff2;background-clip:padding-box;box-shadow:0 1px 2px #20232605;color:var(--ink);font:400 12.5px/18px var(--font-sans);letter-spacing:-.01em;white-space:nowrap}
.case-status svg{width:14px;height:14px;stroke-width:1.8;color:#74787d}
.case-tile-featured .case-media{aspect-ratio:16/10}
.case-media .media-toggle{right:12px;bottom:12px;color:var(--ink)}
.case-media .media-toggle::before{inset:4px;border:1px solid #2023260b;background:#fffffff2;background-clip:padding-box;box-shadow:0 1px 2px #20232605}
.case-media .media-progress{inset:4px;width:36px;height:36px;stroke:#20232633}
.case-media .media-toggle:focus-visible{outline-color:#7374ad}
.case-copy{padding:20px 4px 0}
.case-tile-featured .case-copy{padding:0 0 8px}
.case-meta{display:flex;justify-content:space-between;gap:16px;margin:0 0 8px;font:400 11px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-ink)}
.case-index{font-variant-numeric:tabular-nums}
.case-title{margin:0;font:400 20px/28px var(--font-sans);letter-spacing:-.02em;color:var(--ink)}
.case-tile-featured .case-title{font-size:24px;line-height:30px}
.case-desc{max-width:560px;margin:8px 0 0;font:400 16px/24px var(--font-sans);letter-spacing:-.02em;color:var(--muted-ink);text-wrap:pretty}
.case-link:focus-visible{outline:none}
.case-link:focus-visible .case-media{outline:2px solid #7374ad;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.case-link:not([aria-disabled=true]):hover .case-media :is(img,video){transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){.case-media img,.case-media video{transition:none}.case-link:hover .case-media :is(img,video){transform:none}}
@media(max-width:1000px){.case-tile-featured .case-link{display:flex;flex-direction:column}.case-tile-featured .case-copy{padding:20px 4px 0}}
@media(max-width:800px){.case-grid{grid-template-columns:minmax(0,1fr);row-gap:48px;width:calc(100% - 24px)}.case-media{border-radius:20px}.case-status{left:12px;bottom:12px}.case-copy,.case-tile-featured .case-copy{padding:16px 8px 0}.case-section{padding-bottom:96px}}
/* About: one label/content grid below the shared hero; surfaces reuse Home's stage and control edge. */
.refresh-about{--muted-ink:#777d84;--about-edge:#20232612}
.about-layout{width:calc(100% - 48px);margin:0 auto;padding:32px 0 128px}
.about-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,800px) minmax(0,1fr);column-gap:40px}
.about-section+.about-section{margin-top:128px}
.about-label{position:sticky;top:96px;grid-column:1;justify-self:end;align-self:start;width:200px;margin:0;padding-top:4px;font:400 16px/24px var(--font-sans);letter-spacing:-.02em;color:var(--ink)}
.about-body{grid-column:2;display:flex;flex-direction:column;gap:40px;min-width:0}
.about-prose p{max-width:720px;margin:0;font:400 20px/28px var(--font-sans);letter-spacing:-.02em;color:var(--muted-ink);text-wrap:pretty}
.about-prose p+p{margin-top:28px}
.about-prose strong{font-weight:400;color:var(--ink)}
.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.role-card{display:flex;flex-direction:column;padding:4px 4px 12px;border-radius:20px;background:var(--stage)}
.role-panel{display:flex;flex:1;flex-direction:column;min-height:232px;padding:20px;border:1px solid #2023260b;border-radius:16px;background:#fff;background-clip:padding-box;box-shadow:0 1px 2px #20232605}
.role-kicker{margin:0;font:400 11px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-ink)}
.role-summary{max-width:320px;margin:8px 0 0;font:400 16px/24px var(--font-sans);letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.role-facts{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;margin:auto 0 0;padding-top:16px;border-top:1px solid var(--about-edge)}
.role-facts>div{display:flex;flex-direction:column-reverse;gap:2px}
.role-facts>div+div{padding-left:16px;border-left:1px solid var(--about-edge)}
.role-facts dt{font:400 12.5px/18px var(--font-sans);letter-spacing:-.01em;color:var(--muted-ink)}
.role-facts dd{margin:0;font:400 24px/30px var(--font-sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.role-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 0 21px}
.role-name{margin:0;font:400 16px/24px var(--font-sans);letter-spacing:-.02em;color:var(--ink)}
.role-link{display:grid;flex:none;place-items:center;width:36px;height:36px;border:1px solid #2023260b;border-radius:50%;background:#fff;background-clip:padding-box;box-shadow:0 1px 2px #20232605;color:#74787d;transition:border-color 150ms ease,box-shadow 150ms ease,color 150ms ease}
.role-link svg{width:16px;height:16px;stroke-width:1.8}
.role-link:is(:hover,:focus-visible){color:var(--ink)}
.role-link:hover{border-color:#20232614;box-shadow:0 1px 2px #2023260d,0 4px 8px -3px #20232608}
.role-link:active{box-shadow:inset 0 1px 1px #20232608}
.role-link:focus-visible{outline-offset:3px}
.refresh-about .activity-card{padding:4px 4px 12px;border-radius:20px;background:var(--stage)}
.refresh-about .activity-calendar-shell{margin:0;border:1px solid #2023260b;border-radius:16px;box-shadow:0 1px 2px #20232605}
.refresh-about .activity-calendar{width:auto;height:auto;min-height:0;padding:8px 12px 12px}
.refresh-about .activity-scroll{padding:0}
.refresh-about .activity-graph{width:100%;min-width:739px;height:auto}
.refresh-about .activity-footer{justify-content:flex-end;padding:0;white-space:normal}
.refresh-about :is(.activity-graph text,.activity-legend>span:not(.activity-legend-cells)){color:var(--muted-ink)}
.refresh-about .activity-scroll:focus-visible{outline:2px solid #7374ad}
.refresh-about .activity-actions{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 0 13px}
.refresh-about .activity-total{margin:0;font-size:14px;line-height:20px;color:var(--muted-ink);font-variant-numeric:tabular-nums}
.activity-link{display:inline-flex;flex:none;align-items:center;gap:4px;height:36px;padding:0 12px 0 14px;border:1px solid #2023260b;border-radius:18px;background:#fff;background-clip:padding-box;box-shadow:0 1px 2px #20232605;color:var(--ink);font:400 12.5px/18px var(--font-sans);letter-spacing:-.01em;transition:border-color 150ms ease,box-shadow 150ms ease}
.activity-link svg{width:14px;height:14px;stroke-width:1.6;color:#858a91;transition:color 150ms ease}
.activity-link:hover{border-color:#20232614;box-shadow:0 1px 2px #2023260d,0 4px 8px -3px #20232608}
.activity-link:active{box-shadow:inset 0 1px 1px #20232608}
.activity-link:is(:hover,:focus-visible) svg{color:var(--ink)}
.activity-link:focus-visible{outline-offset:3px}
.tool-index{display:flex;flex-direction:column;gap:40px;margin-top:16px}
.tool-group-title{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--about-edge);font:400 11px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-ink)}
.tool-list{margin:0;padding:0;list-style:none}
.tool-row{display:grid;grid-template-columns:184px minmax(0,1fr) 88px 14px;column-gap:24px;align-items:baseline;margin:0 -12px;padding:12px;border-radius:12px;color:var(--ink);transition:background-color 150ms ease}
.tool-name{font:400 16px/24px var(--font-sans);letter-spacing:-.02em}
.tool-desc{font:400 14px/20px var(--font-sans);color:var(--muted-ink);text-wrap:pretty}
.tool-reach{grid-column:3;justify-self:end;font:400 14px/20px var(--font-sans);color:var(--muted-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tool-row svg{grid-column:4;grid-row:1;align-self:start;width:14px;height:14px;margin-top:5px;stroke-width:1.6;color:#858a91;transition:color 150ms ease}
.tool-row:focus-visible{outline-offset:0}
.tool-row:active{background:#eaebec}
@media(hover:hover) and (pointer:fine){.tool-row:hover{background:var(--stage)}.tool-row:hover svg{color:var(--ink)}}
.tool-list-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.tool-list-compact .tool-row{grid-template-columns:minmax(0,1fr) 14px;row-gap:2px}
.tool-list-compact .tool-desc{grid-column:1;grid-row:2}
.tool-list-compact .tool-row svg{grid-column:2}
@media(prefers-reduced-motion:reduce){.activity-link,.activity-link svg,.role-link,.tool-row,.tool-row svg{transition:none}}
@media(max-width:1327px){.about-layout{width:min(1040px,calc(100% - 48px))}.about-section{grid-template-columns:180px minmax(0,1fr)}.about-label{justify-self:stretch;width:auto}}
@media(max-width:860px){.about-layout{padding-top:16px}.about-section{grid-template-columns:minmax(0,1fr);row-gap:20px}.about-label,.about-body{grid-column:1}.about-label{position:static;padding-top:0}.about-section+.about-section{margin-top:88px}}
@media(max-width:640px){.role-grid{grid-template-columns:minmax(0,1fr);gap:12px}.role-panel{min-height:0}.role-facts{margin-top:24px}.about-layout{padding-bottom:96px}.about-section+.about-section{margin-top:72px}.tool-row{grid-template-columns:minmax(0,1fr) auto 14px;column-gap:12px;row-gap:2px}.tool-desc{grid-column:1/3;grid-row:2}.tool-reach{grid-column:2;grid-row:1}.tool-row svg{grid-column:3}.tool-list-compact{grid-template-columns:minmax(0,1fr)}}
.refresh-home .contact-section{margin-top:0}
.contact-section .contact-lead>p{font-size:16px}
.contact-section .contact-lead h2{font-size:clamp(52px,7vw,100px)}
.contact-footer{font-size:13px}
@media(max-width:1000px){.about-prose p{font-size:18px}.case-list-heading{padding-top:140px;padding-bottom:55px}}
@media(max-width:540px){.showcase-hero{padding:143px 22px 51px;min-height:426px}.showcase-end{flex-direction:column;align-items:flex-start;gap:14px;padding:30px 22px 48px}}
/* Measured stages; component exports read only locally scoped design tokens. */
.showcase-filters{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;width:fit-content;max-width:calc(100% - 48px);gap:4px;padding:6px;margin:0 24px 16px;border-radius:26px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(2px) saturate(150%);backdrop-filter:blur(2px) saturate(150%)}
/* Bencho GlassIconBar, Copyright (c) 2026 Lorenzo Cabra, MIT.
   Adapted for text and wrapped rows; see components/bencho/LICENSE. */
.showcase-filter-indicator{position:absolute;left:0;top:0;height:34px;border-radius:26px;background:#2023260d;pointer-events:none}
.showcase-filter-indicator[data-phase=stretch]{transition:transform 190ms cubic-bezier(.32,.72,.24,1),width 190ms cubic-bezier(.32,.72,.24,1)}
.showcase-filter-indicator[data-phase=settle]{transition:transform 420ms cubic-bezier(.28,1.28,.36,1),width 420ms cubic-bezier(.24,1.34,.38,1)}
.showcase-filters button{position:relative;z-index:1;border:0;border-radius:26px;background:transparent;color:var(--ink);opacity:.56;padding:9px 14px;font:400 11px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:opacity .26s cubic-bezier(.32,.72,.24,1)}
.showcase-filters button:hover{opacity:.76}
.showcase-filters button[aria-pressed=true]{opacity:1}
.demo-tile.is-filter-exiting{pointer-events:none}
.demo-tile[data-offscreen] *{animation-play-state:paused!important}
.showcase-grid{position:relative;margin:0 24px;max-width:1752px;min-height:0;overflow-anchor:none}
@media(prefers-reduced-motion:reduce){.showcase-filter-indicator,.showcase-filters button{transition:none!important}}
.showcase-empty{margin:0;padding:28px 24px 48px;text-align:center;font:400 14px/20px var(--font-sans);color:#646970}
.showcase-empty p{margin:16px 0 0}
.website-illustration{display:block;width:240px;max-width:100%;height:auto;margin:auto;overflow:visible}
.website-window{filter:drop-shadow(0 2px 2px #20232606) drop-shadow(0 8px 10px #20232608)}
.website-copy{animation:website-reveal 7s ease-out infinite}
.website-art{animation:website-reveal 7s .18s ease-out infinite;transform-origin:182px 122px}
.website-cursor{animation:website-cursor 7s ease-in-out infinite}
.website-click{opacity:0;transform-origin:220px 140px;animation:website-click 7s ease-out infinite}
@keyframes website-reveal{0%,12%{opacity:0;transform:translateY(5px)}24%,88%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes website-cursor{0%,12%{opacity:0;transform:translate(16px,14px)}30%,78%{opacity:1;transform:translate(0,0)}90%,100%{opacity:0;transform:translate(8px,7px)}}
@keyframes website-click{0%,30%,46%,100%{opacity:0;transform:scale(.5)}33%{opacity:.5;transform:scale(.5)}45%{opacity:0;transform:scale(1.6)}}
@media(prefers-reduced-motion:reduce){.website-copy,.website-art,.website-cursor,.website-click{animation:none}.website-click{display:none}}
@media(min-width:1800px){.showcase-grid{margin-inline:auto}.showcase-filters{margin-left:calc((100% - 1752px)/2)}}
@media(max-width:760px){.showcase-filters{max-width:calc(100% - 24px);margin-inline:12px}.showcase-filters button{padding-inline:10px}}
.demo-tile,.viewer-preview{--font-ui:var(--font-sans);--card:#fff;--ink-rgb:32,35,38;--fill-slab:#fff;--fill-on:#202326;--fill-on-rgb:32,35,38;--pane-edge:#20232612;--focus:#7374ad;--ink-2:#777d84;--ink-4:#92979d;--on-ink:#fff}
.demo-tile{position:absolute;background:#f1f2f3;border-radius:26px;overflow:hidden;cursor:pointer;min-width:0}
.demo-stage{position:absolute;inset:0;overflow:hidden}
.demo-object{position:absolute;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%) scale(var(--object-scale,1));transform-origin:center;cursor:auto}
.demo-object[data-kind=project]{width:480px}
.block-mount{width:max-content}
.tile-label{position:absolute;bottom:14px;left:14px;max-width:calc(100% - 120px);z-index:2;padding:10px 14px;border-radius:19px;margin:0;opacity:0;transform:translateY(4px);font:400 12.5px/18px var(--font-sans);letter-spacing:-.01em;color:#202326;pointer-events:none;transition:opacity .2s,transform .26s cubic-bezier(.28,1.3,.36,1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-label span{display:none}
.tile-label,.tile-action,.video-toggle{background:#ffffffb8;-webkit-backdrop-filter:blur(2px) saturate(150%);backdrop-filter:blur(2px) saturate(150%)}
.tile-actions{position:absolute;right:14px;bottom:14px;display:flex;gap:8px;z-index:4;opacity:0;pointer-events:none;transition:opacity .18s}
.tile-action,.video-toggle{width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;padding:0;color:#74787d;transition:background .2s,color .16s,transform .24s cubic-bezier(.28,1.3,.36,1)}
.tile-action svg,.video-toggle svg{width:16px;height:16px;stroke-width:1.8}
.tile-action{position:relative;isolation:isolate}
.tile-action__icon{display:grid;place-items:center}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.tile-label,.tile-action:not([aria-pressed=true]),.video-toggle{background:#fff;backdrop-filter:none}}
.tile-action:hover,.video-toggle:hover{color:var(--ink);background:#ffffffeb;transform:translateY(-1px)}
.tile-action:active,.video-toggle:active{transform:scale(.94)}
.tile-action[aria-pressed=true]{background:#202326;color:white}
.demo-tile:is(:hover,:has(:focus-visible))>.tile-label{opacity:1;transform:none}
.demo-tile:is(:hover,:has(:focus-visible)) .tile-actions{opacity:1;pointer-events:auto}
.demo-tile.is-expanded{visibility:hidden}
.design-preview{display:block;border:0;padding:0;background:transparent;width:100%;line-height:0;cursor:zoom-in}
.design-preview>img,.showcase-video{display:block;width:100%;height:auto;border-radius:8px}
.preview-affordance{display:none}
.video-toggle{position:absolute;right:60px;bottom:14px;z-index:4;opacity:0}
.demo-tile:is(:hover,:focus-within) .video-toggle,.viewer-preview .video-toggle{opacity:1}
.mag-chip:nth-child(2) img{filter:hue-rotate(35deg)}.mag-chip:nth-child(3) img{filter:hue-rotate(70deg)}.mag-chip:nth-child(4) img{filter:hue-rotate(120deg)}.mag-chip:nth-child(5) img{filter:hue-rotate(180deg)}.mag-chip:nth-child(6) img{filter:hue-rotate(220deg)}.mag-chip:nth-child(7) img{filter:hue-rotate(290deg)}
.mag-chip:focus-visible,.sld-grip:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.search-demo{width:310px;position:relative}
.search-field{height:58px;display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:0 19px;border:var(--widget-border);box-shadow:var(--widget-shadow);transition:border-color .25s}
.search-field>svg{width:20px;height:20px;flex:none;stroke-width:1.6}
.search-field input{width:100%;min-width:0;height:100%;font:400 14px var(--font-sans);border:0;outline:none;background:none;color:var(--ink)}
.search-field input::placeholder{color:#93989e}
.search-field kbd{font:12px var(--mono);color:#a3a7ae;border:1px solid #e2e5e8;border-radius:4px;padding:2px 5px}
.search-field:focus-within{border-color:#b8bec9}
.search-results{position:absolute;top:65px;left:0;width:100%;padding:6px;background:#fff;border-radius:14px;border:var(--widget-border);box-shadow:var(--widget-shadow);z-index:10}
.search-results a{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:8px;font-size:13px;line-height:20px}
.search-results a:hover{background:#f3f4f6}
.search-results a svg{width:14px;height:14px;color:#9b9fa5}
.search-empty{font-size:13px;padding:8px 10px;color:#777d84;margin:0}
.tile-search:focus-within,.tile-search.is-playing{z-index:5;overflow:visible}
.tile-search:focus-within .demo-stage,.tile-search.is-playing .demo-stage{overflow:visible}
.notification-demo{width:270px;background:#fff;border-radius:17px;padding:18px 20px;border:var(--widget-border);box-shadow:var(--widget-shadow)}
.notification-demo>div{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:14px}
.notification-demo>p{display:flex;gap:9px;align-items:center;font-size:12px;color:#8b929a;margin:15px 0 0}
.status-dot{width:6px;height:6px;border-radius:50%;background:#459b4e;transition:background .3s}
.liquid-switch{position:relative;width:49px;height:29px;background:#399948;border-radius:999px;padding:3px;transition:background .25s;box-shadow:inset 0 1px 3px #0001}
.liquid-switch>span{display:block;width:23px;height:23px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transform:translateX(20px);transition:transform .45s cubic-bezier(.3,1.15,.4,1),width .16s}
.liquid-switch:active>span{width:27px}
.liquid-switch[aria-checked=false]{background:#c9cdd1}
.liquid-switch[aria-checked=false]>span{transform:translateX(0)}
.notification-demo:has([aria-checked=false]) .status-dot{background:#afb4bb}
.tool-dock{display:flex;align-items:center;gap:3px;padding:6px;background:#fff;border:var(--widget-border);border-radius:14px;box-shadow:var(--widget-shadow)}
.tool-dock button{position:relative;width:43px;height:42px;display:grid;place-items:center;border-radius:9px;background:transparent;color:#73777d;transition:transform .18s,background .18s,color .18s}
.tool-dock button svg{width:19px;height:19px;stroke-width:1.7}
.tool-dock button[aria-pressed=true]{color:#202326;background:#eceeed}
.tool-dock button:hover{background:#f0f1f0;color:#202326}
.tool-dock button:active{transform:scale(.94)}
.tool-dock button>span{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,4px);font-size:11px;background:#262b30;padding:7px 9px;color:#fff;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .18s,transform .25s;white-space:nowrap}
.tool-dock button:is(:hover,:focus-visible)>span{transform:translate(-50%,0);opacity:1}
.showcase-end{padding:42px 26px 70px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;color:#7b8088;max-width:1800px;margin:0 auto}
.showcase-end>a{display:flex;align-items:center;gap:7px;color:#42494e}
.showcase-end>a:hover{text-decoration:underline;text-underline-offset:5px}
.demo-cursor{position:absolute;left:0;top:0;width:18px;height:18px;z-index:6;pointer-events:none;filter:drop-shadow(0 1px 2px #0002);transform:translate(-3px,-3px);color:#8b8f96}
.demo-cursor svg{width:100%;height:100%;fill:#fff;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;transform-origin:3px 3px;transition:transform .1s,fill .1s}
.demo-cursor.is-down svg{transform:scale(.86);fill:#dddfe4;transition:transform .1s,fill .1s}
/* Shared shell: project metadata selects a preset, never a private layout. */
:root{--showcase-safe-top:env(safe-area-inset-top,0px);--showcase-safe-right:env(safe-area-inset-right,0px);--showcase-safe-bottom:env(safe-area-inset-bottom,0px);--showcase-safe-left:env(safe-area-inset-left,0px)}
.demo-tile{border-radius:var(--showcase-tile-radius,26px);--action-clearance:120px}
.tile-label{left:var(--showcase-control-inset,16px);bottom:var(--showcase-control-inset,16px);max-width:calc(100% - var(--action-clearance) - 32px);height:var(--showcase-control-size,44px);padding:12px 14px;border:1px solid #2023260b;border-radius:calc(var(--showcase-control-size,44px)/2);background:#fffffff2;box-shadow:0 1px 2px #20232605}
.demo-stage .demo-object{left:0;top:0;transform-origin:0 0;transition:none}
.presentation-surface{position:absolute;pointer-events:none;background-size:cover;background-repeat:no-repeat}
.demo-stage[data-presentation=screen] .demo-object{overflow:clip;isolation:isolate;box-shadow:0 2px 4px #2023260a,0 12px 28px #20232614}
/* A captured still stands in for the live page while the page moves: the page is not rendered at all
   until the gallery rests, then the still fades out over it. Scrolling brings the still back instantly. */
.demo-stage[data-still]:not([data-live-render]) .desk-desktop-frame{content-visibility:hidden}
.demo-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;user-select:none}
.demo-stage[data-live-shown] .demo-still{opacity:0;transition:opacity .3s cubic-bezier(.23,1,.32,1)}
@media(prefers-reduced-motion:reduce){.demo-stage[data-live-shown] .demo-still{transition:none}}
.demo-stage .desk-desktop-frame{position:relative;inset:auto;width:100%;height:100%;transform:none;overflow:hidden;border-radius:0;clip-path:none;box-shadow:none}
.demo-stage .desk-desktop-frame iframe{display:block;width:100%;height:100%;border:0;transform:none;border-radius:0;background:transparent}
.demo-stage[data-presentation=screen] .desk-desktop-frame iframe{pointer-events:auto}
.demo-tile .desk-desktop-frame,.demo-tile .demo-stage .desk-desktop-frame iframe{pointer-events:none}
.demo-stage[data-viewport=portrait] .block-mount,.demo-stage[data-viewport=portrait] .block-mount>div{width:100%;height:100%}
.demo-stage[data-presentation=asset] .design-preview,.demo-stage[data-presentation=asset] .design-preview>img,.demo-stage[data-presentation=asset] video{width:100%;height:100%;object-fit:contain}
.demo-tile .desk-demo-control{display:none}
.tile-actions{right:var(--showcase-control-inset,16px);bottom:var(--showcase-control-inset,16px);gap:8px}
.tile-action,.video-toggle,.viewer-close{width:var(--showcase-control-size,44px);height:var(--showcase-control-size,44px);border:1px solid #2023260b;border-radius:50%;color:#74787d;background:#fffffff2;box-shadow:0 1px 2px #20232605;backdrop-filter:blur(2px) saturate(150%)}
.tile-action svg,.video-toggle svg,.viewer-close svg{width:var(--showcase-icon-size,16px);height:var(--showcase-icon-size,16px);stroke-width:1.8}
.tile-action:focus-visible,.video-toggle:focus-visible,.viewer-close:focus-visible,.viewer-info-toggle:focus-visible{outline:2px solid #7374ad;outline-offset:3px}
.video-toggle{right:68px;bottom:var(--showcase-control-inset,16px)}
.showcase-viewer{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden;--morph-ease:cubic-bezier(.33,.55,.2,1)}
.showcase-viewer::backdrop{background:#ffffffc7;backdrop-filter:blur(22px) saturate(130%);opacity:0;transition:opacity .26s}
.showcase-viewer.is-open::backdrop{opacity:1}
.viewer-shell{position:absolute;inset:var(--showcase-viewer-gutter,24px);margin:auto;pointer-events:none}
.showcase-viewer[data-presentation=component] .viewer-shell{max-width:var(--showcase-component-width,800px);max-height:var(--showcase-component-height,512px)}
.viewer-preview{position:absolute;inset:0;background:transparent;pointer-events:auto;overflow:visible}
.viewer-preview .demo-stage{overflow:visible}
.viewer-preview .tile-actions{right:calc(16px + var(--showcase-safe-right));bottom:calc(16px + var(--showcase-safe-bottom));opacity:1;pointer-events:auto;transition:opacity .16s}
.showcase-viewer:not(.is-open) .tile-actions{opacity:0;pointer-events:none}
.viewer-close{position:absolute;right:calc(var(--showcase-control-inset,16px) + var(--showcase-safe-right));top:calc(var(--showcase-control-inset,16px) + var(--showcase-safe-top));z-index:9;display:grid;place-items:center;padding:0;pointer-events:auto;opacity:0;transition:opacity .2s,background .16s,color .16s,transform .16s}
.showcase-viewer.is-open .viewer-close{opacity:1}
.viewer-close:hover{background:#fff;color:#202326}.viewer-close:active{transform:scale(.94)}
.viewer-details{position:absolute;right:0;top:0;bottom:0;width:var(--showcase-notes-width,240px);padding:20px 18px;border:1px solid #20232612;background:#fff;border-radius:var(--showcase-viewer-radius,24px);pointer-events:auto;opacity:0;transform:translateX(10px);transition:opacity .2s,transform .28s var(--morph-ease);display:flex;flex-direction:column;overflow:auto}
.viewer-details[hidden]{display:none}
.showcase-viewer.is-open .viewer-details{opacity:1;transform:none}
.viewer-details h2{font:400 17px/22px var(--font-sans);letter-spacing:-.02em;margin:0 42px 20px 0}
.viewer-details h2:focus{outline:none}
.viewer-description{font:400 14px/21px var(--font-sans);color:#646970;margin:0 0 24px}
.viewer-stack,.viewer-credit{font:400 12px/19px var(--font-sans);color:#646970;margin:0 0 20px}
.viewer-credit .inline-link{align-items:center}.viewer-credit svg{width:12px;height:12px}
.viewer-case{font:400 14px/20px var(--font-sans);margin-top:auto;align-self:flex-start;align-items:center;gap:4px}.viewer-case svg{width:12px;height:12px;stroke-width:1.8;color:#74787d;transition:color 150ms ease}
.viewer-case:is(:hover,:focus-visible) svg{color:currentColor}
.viewer-info-content,.viewer-info-body{display:contents}.viewer-info-toggle{display:none}
.showcase-viewer[data-presentation] .viewer-details{inset:auto auto calc(16px + var(--showcase-safe-bottom)) calc(16px + var(--showcase-safe-left));width:120px;padding:0;min-height:44px;overflow:hidden;z-index:7;border-radius:22px;transform:translateY(8px);transition:width .3s var(--morph-ease),opacity .2s,transform .28s var(--morph-ease)}
.showcase-viewer[data-presentation].is-open .viewer-details{transform:none}
.showcase-viewer[data-presentation].is-info-open .viewer-details{width:340px;border-radius:20px}
.showcase-viewer[data-presentation] .viewer-info-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--morph-ease)}
.showcase-viewer[data-presentation].is-info-open .viewer-info-content{grid-template-rows:1fr}
.showcase-viewer[data-presentation] .viewer-info-body{display:block;width:338px;min-height:0;max-height:60dvh;overflow:auto;overscroll-behavior:contain;opacity:0;transition:opacity .18s}
.showcase-viewer.is-info-open .viewer-info-body{opacity:1!important}
.showcase-viewer[data-presentation] .viewer-info-body>h2{margin:20px 20px 12px;font-size:16px}
.showcase-viewer[data-presentation] .viewer-info-body>p,.showcase-viewer[data-presentation] .viewer-info-body>.viewer-case{margin:0 20px 20px}
.showcase-viewer[data-presentation] .viewer-case{display:inline-flex}
.showcase-viewer[data-presentation] .viewer-case[hidden]{display:none}
.viewer-info-toggle{align-items:center;justify-content:space-between;gap:12px;width:100%;height:44px;padding:0 16px;background:transparent;color:inherit;text-align:left;border:0;border-radius:22px;font:400 13px/18px var(--font-sans);flex-shrink:0}
.showcase-viewer[data-presentation] .viewer-info-toggle{display:flex}
.viewer-info-toggle>span{display:flex;align-items:center;gap:8px}.viewer-info-toggle svg{width:16px;height:16px}
.viewer-info-toggle>svg{transition:transform .3s var(--morph-ease)}.viewer-info-toggle[aria-expanded=true]>svg{transform:rotate(180deg)}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
 .showcase-grid{margin-inline:12px}
 .showcase-viewer .viewer-shell,.showcase-viewer[data-presentation=component] .viewer-shell{inset:0;max-width:none;max-height:none}
 .viewer-close{top:calc(16px + var(--showcase-safe-top));right:calc(16px + var(--showcase-safe-right))}
 .viewer-preview .tile-actions{right:calc(16px + var(--showcase-safe-right));bottom:calc(16px + var(--showcase-safe-bottom))}
 .showcase-viewer .viewer-details,.showcase-viewer[data-presentation] .viewer-details{inset:auto auto calc(16px + var(--showcase-safe-bottom)) calc(16px + var(--showcase-safe-left));width:120px;min-height:44px;padding:0;border-radius:22px;overflow:hidden;z-index:7;transform:translateY(8px);transition:width .3s var(--morph-ease),opacity .2s,transform .28s var(--morph-ease)}
 .showcase-viewer.is-open .viewer-details{transform:none}
 .showcase-viewer.is-info-open .viewer-details,.showcase-viewer[data-presentation].is-info-open .viewer-details{width:calc(100% - 32px - var(--showcase-safe-left) - var(--showcase-safe-right));border-radius:20px}
 .showcase-viewer .viewer-info-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--morph-ease)}
 .showcase-viewer.is-info-open .viewer-info-content{grid-template-rows:1fr}
 .showcase-viewer .viewer-info-body,.showcase-viewer[data-presentation] .viewer-info-body{display:block;width:calc(100vw - 34px - var(--showcase-safe-left) - var(--showcase-safe-right));min-height:0;max-height:60dvh;overflow:auto;overscroll-behavior:contain;opacity:0;transition:opacity .18s}
 .showcase-viewer .viewer-info-body>h2{margin:20px 20px 12px;font-size:16px}
 .showcase-viewer .viewer-info-body>p,.showcase-viewer .viewer-info-body>.viewer-case{margin:0 20px 20px}
 .showcase-viewer .viewer-info-toggle{display:flex}
 .showcase-viewer .viewer-info-toggle[aria-expanded=true]{padding-right:72px}
}
@media(hover:none){.tile-label,.tile-actions,.video-toggle{opacity:1;transform:none}.tile-actions{pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.showcase-grid *,.showcase-grid *::before,.showcase-grid *::after,.showcase-viewer *,.showcase-viewer *::before,.showcase-viewer *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.showcase-viewer::backdrop{backdrop-filter:none;background:#fff}.tile-action,.video-toggle,.viewer-close,.viewer-details{backdrop-filter:none;background:#fff}}

.tile-action:disabled{opacity:.4;cursor:wait}

/* Clip the iframe compositor surface to the same animated screen corners. */
.demo-stage[data-presentation=screen] .desk-desktop-frame{border-radius:inherit;clip-path:inset(0 round var(--screen-radius,0px))}

/* Phrase uses its approved compact editor canvas in the shared viewer. */
.demo-stage .demo-object.phrase-canvas{width:640px;height:704px;box-shadow:none}

/* Interface previews share the same clipped frame; Phrase carries its frame inside the iframe. */
.demo-stage[data-interface-card=true] .demo-object:not(.phrase-canvas){overflow:clip;isolation:isolate}

.demo-stage .demo-object.publish-canvas{width:500px;height:582px}

.demo-stage .demo-object.pulse-canvas{width:480px;height:454px}
.demo-stage .demo-object.sum-canvas{width:1144px;height:847px}

.demo-stage .demo-object.calibrate-canvas{width:1180px;height:840px}
.demo-stage .demo-object.relate-canvas{width:1320px;height:800px}

/* Full-screen interfaces use static close crops; live documents appear in the viewer. */
.interface-poster{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#faf9f6 center/cover no-repeat}
.interface-glass{position:absolute;background:rgb(255 255 255 / 52%);outline:.5px solid rgb(255 255 255 / 78%);outline-offset:-.5px;box-shadow:0 2px 4px rgb(20 35 31 / 4%),0 16px 32px -16px rgb(20 35 31 / 22%)}
.interface-sheet{position:relative;width:100%;height:100%;overflow:hidden;border-radius:9px;background:white;outline:.5px solid rgb(30 40 36 / 18%);outline-offset:-.5px;box-shadow:0 1px 2px rgb(20 35 31 / 9%),0 3px 8px -3px rgb(20 35 31 / 12%)}
.interface-sheet img{position:absolute;top:0;max-width:none;height:auto;pointer-events:none}
.demo-stage[data-static-preview] .demo-object{visibility:hidden;pointer-events:none}
.showcase-viewer .demo-stage[data-static-preview] .demo-object{visibility:visible;opacity:0;transition:opacity .18s ease}
.showcase-viewer .demo-stage[data-static-preview][data-live-ready=true] .demo-object{opacity:1;pointer-events:auto}
.showcase-viewer .demo-stage[data-static-preview] .interface-poster{display:none}
.showcase-viewer .demo-stage[data-static-preview] .presentation-surface{background-image:var(--interface-artwork);background-size:cover;background-position:center}
.interface-live-glass{visibility:hidden;pointer-events:none;backdrop-filter:blur(8px)}
.showcase-viewer .demo-stage[data-static-preview] .interface-live-glass{visibility:visible;opacity:0;transition:opacity .18s ease}
.showcase-viewer .demo-stage[data-static-preview][data-live-ready=true] .interface-live-glass{opacity:1}
.showcase-viewer .demo-stage[data-static-preview] .demo-object{outline:.5px solid rgb(30 40 36 / 18%);outline-offset:-.5px;box-shadow:0 1px 2px rgb(20 35 31 / 9%),0 3px 8px -3px rgb(20 35 31 / 12%)}

/* Gallery motion is visibility-gated; product input belongs to the viewer. */
.demo-tile .demo-play-control,.demo-tile .video-toggle{display:none}
.demo-tile .demo-object,.demo-tile .demo-object *{pointer-events:none!important}
@media(prefers-reduced-motion:reduce){.demo-tile .demo-object *,.demo-tile .demo-object *::before,.demo-tile .demo-object *::after{animation:none!important}}
/* Footer cards: artwork fills an inset panel; the name, a plain descriptor and the expand control sit in the row below. */
.demo-tile .tile-footer{position:absolute;left:calc(var(--showcase-card-panel-inset,4px) + 16px);right:calc(var(--showcase-control-size,44px) + 24px);bottom:0;z-index:2;display:flex;flex-direction:column;justify-content:center;height:var(--showcase-card-footer-height,64px);min-width:0}
.demo-tile .tile-label,.viewer-footer .tile-label{position:static;max-width:none;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1;transform:none;font:400 16px/24px var(--font-sans);letter-spacing:-.02em;color:#202326;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-tile .tile-label span,.viewer-footer .tile-label span{display:block;overflow:hidden;text-overflow:ellipsis;font:400 13px/18px var(--font-sans);letter-spacing:-.01em;color:#777d84}
.demo-tile .tile-actions{right:12px;bottom:calc((var(--showcase-card-footer-height,64px) - var(--showcase-control-size,44px))/2);opacity:1;pointer-events:auto}
.demo-tile>.demo-stage>.presentation-surface{box-shadow:0 0 0 1px #2023260b,0 1px 2px #20232605}
/* Card-frame viewer: grey frame, inset panel and footer carry over from the card. */
.viewer-frame,.viewer-footer{display:none}
.showcase-viewer[data-frame=card] .viewer-frame{display:block;position:absolute;background:#f1f2f3;box-shadow:0 1px 2px #2023260a,0 24px 48px -20px #20232624;pointer-events:none}
.showcase-viewer[data-frame=card] .presentation-surface{box-shadow:0 0 0 1px #2023260b,0 1px 2px #20232605}
.showcase-viewer[data-frame=card] .viewer-footer{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;height:var(--showcase-card-footer-height,64px);padding:0 clamp(68px,calc(100% - 520px),var(--footer-clear,196px)) 0 20px;min-width:0}
/* Controls arrive once the frame has reached the viewer edge. */
.showcase-viewer[data-frame=card].is-open :is(.viewer-close,.viewer-details,.viewer-fullscreen){transition:opacity .2s .3s,transform .2s .3s}
/* Notes keeps its width and radius transitions, so the pill and panel resize as one surface. */
.showcase-viewer[data-frame=card].is-open .viewer-details{transition:opacity .2s .3s,transform .2s .3s,width .3s var(--morph-ease),border-radius .3s var(--morph-ease)}
/* The title footer travels inside the frame; only the controls, anchored to the viewer, fade. */
.showcase-viewer[data-frame=card]:not(.is-open) :is(.viewer-close,.viewer-details,.viewer-fullscreen){transition:opacity .1s,transform .1s}
.showcase-viewer[data-frame=card] .viewer-close{top:auto;right:12px;bottom:calc((var(--showcase-card-footer-height,64px) - var(--showcase-control-size,44px))/2)}
.showcase-viewer[data-frame=card][data-presentation] .viewer-details{inset:auto calc(20px + var(--showcase-control-size,44px)) calc((var(--showcase-card-footer-height,64px) - var(--showcase-control-size,44px))/2) auto}
.showcase-viewer[data-frame=card] .viewer-preview .tile-actions{right:calc(var(--footer-clear,196px) - 52px);bottom:10px}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){.showcase-viewer[data-frame=card] .viewer-footer{bottom:var(--showcase-safe-bottom);padding-right:var(--footer-clear,196px)}.showcase-viewer[data-frame=card] .viewer-close{bottom:calc(10px + var(--showcase-safe-bottom))}.showcase-viewer[data-frame=card][data-presentation] .viewer-details{bottom:calc(10px + var(--showcase-safe-bottom))}.showcase-viewer[data-frame=card][data-presentation].is-info-open .viewer-details{width:calc(100% - 76px - var(--showcase-safe-left))}}

/* Loading: a Home control pill with a quick spinner, centred on the panel and held back briefly
   so fast loads never flash it. Errors drop the spinner and keep the retry. */
.presentation-status{position:absolute;inset:var(--showcase-card-panel-inset,4px) var(--showcase-card-panel-inset,4px) var(--showcase-card-footer-height,64px);z-index:3;display:grid;place-content:center;justify-items:center;gap:12px;pointer-events:none;animation:presentation-status-in 200ms cubic-bezier(.23,1,.32,1) 300ms both}
.presentation-status[hidden]{display:none}
.presentation-status [role=status]{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border:1px solid #2023260b;border-radius:18px;background:#fff;background-clip:padding-box;box-shadow:0 1px 2px #20232605;color:#646970;font:400 12.5px/18px var(--font-sans);letter-spacing:-.01em;white-space:nowrap}
.presentation-status [role=status]::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid #20232624;border-top-color:#202326;animation:presentation-spin 700ms linear infinite}
.presentation-status[data-state=error] [role=status]::before{display:none}
.presentation-status button{pointer-events:auto;height:36px;padding:0 14px;border:1px solid #2023260b;border-radius:18px;background:#fff;background-clip:padding-box;box-shadow:0 1px 2px #20232605;color:#202326;font:400 12.5px/18px var(--font-sans)}
.presentation-status button:active{transform:scale(.97)}
@keyframes presentation-spin{to{transform:rotate(1turn)}}
@keyframes presentation-status-in{from{opacity:0;transform:translateY(4px)}}
/* Hairline website screens (Sona prototype): square corners and a single hairline; no rim or shadow. */
.demo-stage[data-presentation=screen][data-screen=hairline] .demo-object{outline:.5px solid rgb(30 40 36 / 18%);outline-offset:-.5px;box-shadow:none}

/* Footer controls, right to left: close, full screen (where supported), Notes, then any play control.
   One variable sets the title's clearance and the play control's position. */
.showcase-viewer{--footer-clear:196px}
.showcase-viewer:has(.viewer-preview .tile-actions>button:not([hidden])),.showcase-viewer.can-fullscreen{--footer-clear:248px}
.showcase-viewer.can-fullscreen:has(.viewer-preview .tile-actions>button:not([hidden])){--footer-clear:300px}
.showcase-viewer.can-fullscreen[data-frame=card][data-presentation] .viewer-details{right:calc(28px + 2 * var(--showcase-control-size,44px))}
.viewer-fullscreen{position:absolute;right:calc(20px + var(--showcase-control-size,44px));bottom:calc((var(--showcase-card-footer-height,64px) - var(--showcase-control-size,44px))/2 + var(--showcase-safe-bottom));z-index:9;display:grid;place-items:center;padding:0;pointer-events:auto;opacity:0}
.showcase-viewer.is-open .viewer-fullscreen{opacity:1}
.viewer-root{position:absolute;inset:0}
.viewer-root:fullscreen{background:#fff}

/* Scroll performance: footer controls sit on solid grey, so the old glass blur did nothing but cost a
   backdrop pass per button per frame; offscreen cards skip rendering until they approach the viewport. */
.demo-tile .tile-actions .tile-action{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
.demo-tile{content-visibility:auto}