/* Visible project surfaces and shared native-dialog motion. */
html{scrollbar-gutter:stable}
#case-dialog[data-dialog-motion],#screen-dialog[data-dialog-motion]{opacity:1;transform:translateY(0) scale(1);transition:opacity .28s ease,transform .28s cubic-bezier(.2,.75,.2,1);will-change:opacity,transform}
#case-dialog[data-dialog-motion="opening"],#screen-dialog[data-dialog-motion="opening"]{opacity:0;transform:translateY(18px) scale(.986)}
#case-dialog[data-dialog-motion="closing"],#screen-dialog[data-dialog-motion="closing"]{opacity:0;transform:translateY(12px) scale(.99);transition-duration:.22s}
#case-dialog[data-dialog-motion]::backdrop,#screen-dialog[data-dialog-motion]::backdrop{opacity:1;transition:opacity .28s ease}
#case-dialog[data-dialog-motion="opening"]::backdrop,#screen-dialog[data-dialog-motion="opening"]::backdrop,#case-dialog[data-dialog-motion="closing"]::backdrop,#screen-dialog[data-dialog-motion="closing"]::backdrop{opacity:0}
#case-dialog[data-dialog-motion="closing"]::backdrop,#screen-dialog[data-dialog-motion="closing"]::backdrop{transition-duration:.22s}
#case-dialog:has(.cv-case){--cv-ink:#172238;--cv-muted:#6d7c91;--cv-line:#e2e7ef;--cv-soft:#f5f7fb;border-color:#e0e6ef;border-radius:13px;scroll-behavior:auto}
#case-dialog:has(.cv-case)::backdrop{background:#10182794;backdrop-filter:blur(4px)}
#case-dialog:has(.cv-case)>.case-topbar{background:#fffffff5;backdrop-filter:blur(12px)}
#case-dialog:has(.cv-case) .case-close{border-color:#e0e6ef;border-radius:6px}
.cv-intro{padding-top:25px;padding-bottom:23px}
.cv-intro h2{font-size:clamp(28px,3.3vw,39px)}
.cv-lead{font-size:14px;line-height:1.7;margin-top:10px!important}
.cv-tags{margin-top:13px;gap:8px 15px}
.cv-tags li{font-size:10px;color:#77849a;border-color:#e0e6ef;padding-bottom:5px}
.cv-overview{margin:0 48px 22px}
.cv-overview-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:15px}
.cv-overview-heading h3{font-size:17px;font-weight:550;letter-spacing:-.025em}
.cv-overview-heading p{font-size:10px;line-height:1.5;color:#8390a4}
.cv-overview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.52fr);gap:18px;align-items:start}
.cv-overview-grid--single{grid-template-columns:minmax(0,1fr)}
.cv-surface{min-width:0;border:1px solid #e1e7f0;border-radius:9px;background:#f6f8fb;padding:16px}
.cv-surface-heading{display:flex;align-items:center;gap:9px;min-height:20px;margin-bottom:14px}
.cv-surface-heading>span{font-size:9px;line-height:1;font-variant-numeric:tabular-nums;color:#90a0b8}
.cv-surface-heading h4{font-size:12px;font-weight:550;line-height:1.5;letter-spacing:-.015em}
.cv-surface-stage{display:flex;align-items:center;justify-content:center;height:292px;min-width:0}
.cv-surface-screen{display:block;width:100%;max-width:100%;min-width:0;padding:0;border:1px solid #d9e0eb;border-radius:6px;background:#fff;overflow:hidden;position:relative;cursor:zoom-in;box-shadow:0 6px 17px #1722380e;transition:border-color .2s,box-shadow .2s}
.cv-surface-screen:hover{border-color:#90a3cb;box-shadow:0 8px 23px #17223817}
.cv-surface-screen:focus-visible,.cv-device-choices button:focus-visible{outline:2px solid #2851ef;outline-offset:4px}
.cv-screen-chrome{height:13px;display:flex;align-items:center;gap:3px;padding:0 7px;background:#fff;border-bottom:1px solid #e7ebf1}
.cv-screen-chrome i{display:block;width:3px;height:3px;background:#c0c9d8;border-radius:50%}
.cv-surface-screen>img{display:block;width:100%;height:258px;object-fit:contain;object-position:center;background:#fff}
.cv-surface[data-cv-device="mobile"] .cv-surface-screen{width:134px;border:4px solid #172238;border-radius:15px;background:#172238}
.cv-surface[data-cv-device="mobile"] .cv-screen-chrome{display:none}
.cv-surface[data-cv-device="mobile"] .cv-surface-screen>img{width:100%;height:275px;object-fit:cover;object-position:top;border-radius:10px}
.cv-screen-enlarge{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;width:23px;height:23px;border-radius:5px;background:#fffffff2;color:#526784;box-shadow:0 1px 4px #1722380a}
.cv-screen-enlarge svg{width:13px;height:13px}
.cv-device-choices{display:flex;justify-content:center;gap:4px;margin:13px 0 0;flex-wrap:wrap}
.cv-device-choices button{appearance:none;border:1px solid transparent;border-radius:5px;background:transparent;min-height:34px;padding:7px 10px;color:#7d8ba0;font:500 10px/1.35 Commissioner,system-ui,sans-serif;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.cv-device-choices button[aria-pressed="true"]{color:#294267;border-color:#dce4f0;background:#fff;box-shadow:0 1px 3px #17223806}
.cv-surface-caption{margin-top:9px!important;min-height:27px;font-size:9px;line-height:1.55;text-align:center;color:#8b96a7}
.cv-surface--more{grid-column:1/-1;display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:25px;align-items:center;padding:19px 22px}
.cv-surface--more .cv-surface-heading{grid-column:1;grid-row:1;align-self:end;margin-bottom:11px;flex-wrap:wrap}
.cv-surface--more .cv-surface-stage{grid-column:2;grid-row:1/4;height:218px}
.cv-surface--more .cv-surface-screen{max-width:590px}
.cv-surface--more .cv-surface-screen>img{height:195px}
.cv-surface--more[data-cv-device="mobile"] .cv-surface-screen{width:98px;border-width:3px;border-radius:12px}
.cv-surface--more[data-cv-device="mobile"] .cv-surface-screen>img{height:209px;border-radius:8px}
.cv-surface--more .cv-device-choices{grid-column:1;grid-row:2;justify-content:start;align-self:center;margin:0}
.cv-surface--more .cv-surface-caption{grid-column:1;grid-row:3;align-self:start;text-align:left;margin-top:9px!important}
.cv-demo-note{margin:0 48px 24px!important;border:1px solid #e3e9f2;border-radius:7px;background:#f7f9fc;padding:12px 15px!important;font-size:10px!important;color:#73839a!important;line-height:1.65!important}
.cv-details{padding-top:12px}
@media(max-width:960px){.cv-overview{margin-inline:32px}.cv-overview-grid{gap:13px}.cv-surface{padding:13px}.cv-surface-stage{height:261px}.cv-surface-screen>img{height:222px}.cv-surface[data-cv-device="mobile"] .cv-surface-screen{width:120px}.cv-surface[data-cv-device="mobile"] .cv-surface-screen>img{height:245px}.cv-demo-note{margin-inline:32px!important}.cv-surface--more{grid-template-columns:150px minmax(0,1fr);padding:17px;gap:12px 18px}.cv-surface--more .cv-surface-stage{height:215px}.cv-surface--more .cv-surface-screen>img{height:192px}.cv-surface--more[data-cv-device="mobile"] .cv-surface-screen>img{height:201px}}
@media(max-width:760px){#case-dialog:has(.cv-case){width:calc(100% - 20px);max-height:95dvh;border-radius:10px}.cv-intro{padding:19px 20px 21px;grid-template-columns:minmax(0,1fr) 66px;gap:11px 14px}.cv-brand img{max-width:66px;max-height:39px}.cv-brand{min-height:39px}.cv-intro h2{font-size:28px}.cv-lead{font-size:12px;line-height:1.65;margin-top:0!important}.cv-tags{margin-top:2px;gap:6px 12px}.cv-tags li{font-size:9px}.cv-overview{margin:0 20px 18px}.cv-overview-heading{display:block;margin-bottom:13px}.cv-overview-heading h3{font-size:16px}.cv-overview-heading p{margin-top:5px;font-size:9px}.cv-overview-grid{grid-template-columns:minmax(0,1fr) minmax(0,.65fr);gap:9px}.cv-overview-grid--single{grid-template-columns:1fr}.cv-surface{padding:10px 8px;border-radius:7px}.cv-surface-heading{align-items:start;gap:5px;margin-bottom:8px;min-height:31px}.cv-surface-heading>span{font-size:7px;padding-top:3px}.cv-surface-heading h4{font-size:10px;line-height:1.5}.cv-surface-stage{height:188px}.cv-surface-screen>img{height:145px}.cv-screen-chrome{height:10px;padding-inline:5px}.cv-screen-chrome i{width:2px;height:2px}.cv-surface[data-cv-device="mobile"] .cv-surface-screen{width:84px;border-width:3px;border-radius:11px}.cv-surface[data-cv-device="mobile"] .cv-surface-screen>img{height:174px;border-radius:7px}.cv-device-choices{gap:2px;margin-top:8px;min-height:32px;align-items:center}.cv-device-choices button{padding:7px 5px;font-size:8px;min-height:32px}.cv-surface-caption{font-size:8px;line-height:1.6;min-height:39px}.cv-screen-enlarge{width:18px;height:18px;right:4px;bottom:4px}.cv-screen-enlarge svg{width:11px;height:11px}.cv-surface--more{display:block;padding:12px}.cv-surface--more .cv-surface-heading{min-height:20px;margin-bottom:10px;gap:7px}.cv-surface--more .cv-surface-heading h4{font-size:11px}.cv-surface--more .cv-surface-stage{height:180px}.cv-surface--more .cv-surface-screen>img{height:165px}.cv-surface--more[data-cv-device="mobile"] .cv-surface-screen{width:82px;border-width:3px}.cv-surface--more[data-cv-device="mobile"] .cv-surface-screen>img{height:172px}.cv-surface--more .cv-device-choices{justify-content:center;margin-top:8px}.cv-surface--more .cv-surface-caption{min-height:0;text-align:center}.cv-demo-note{margin:0 20px 23px!important;padding:10px 12px!important;font-size:9px!important}.cv-details{padding-top:8px}}
@media(max-width:365px){.cv-intro{padding-inline:16px}.cv-intro h2{font-size:25px}.cv-overview{margin-inline:16px}.cv-overview-grid{gap:7px;grid-template-columns:minmax(0,1fr) minmax(0,.76fr)}.cv-overview-grid--single{grid-template-columns:1fr}.cv-surface{padding-inline:6px}.cv-surface-stage{height:166px}.cv-surface-screen>img{height:133px}.cv-surface[data-cv-device="mobile"] .cv-surface-screen{width:74px}.cv-surface[data-cv-device="mobile"] .cv-surface-screen>img{height:155px}.cv-device-choices{gap:0}.cv-device-choices button{padding-inline:3px;font-size:7px}.cv-demo-note{margin-inline:16px!important}.cv-surface-caption{font-size:7px}}
/* Keep the browser itself at the screenshot ratio, with space outside it. */
.cv-surface:not([data-cv-device="mobile"]) .cv-surface-screen{max-width:387px}
.cv-surface:not([data-cv-device="mobile"]) .cv-surface-screen>img{height:auto;aspect-ratio:3/2;object-fit:contain}
.cv-surface--more:not([data-cv-device="mobile"]) .cv-surface-screen{max-width:292px}
.cv-case[data-case-view="sport"] .cv-surface-stage{height:auto;min-height:180px}
.cv-case[data-case-view="sport"] .cv-surface-screen{max-width:320px}
.cv-case[data-case-view="sport"] .cv-surface-screen>img{aspect-ratio:940/928}
@media(max-width:960px){.cv-surface:not([data-cv-device="mobile"]) .cv-surface-screen{max-width:334px}.cv-surface--more:not([data-cv-device="mobile"]) .cv-surface-screen{max-width:288px}}
@media(max-width:760px){.cv-surface:not([data-cv-device="mobile"]) .cv-surface-screen{max-width:218px}.cv-surface--more:not([data-cv-device="mobile"]) .cv-surface-screen{max-width:248px}.cv-case[data-case-view="sport"] .cv-surface-screen{max-width:260px}}
@media(max-width:365px){.cv-surface:not([data-cv-device="mobile"]) .cv-surface-screen{max-width:200px}.cv-surface--more:not([data-cv-device="mobile"]) .cv-surface-screen{max-width:230px}}
@media(prefers-reduced-motion:reduce){#case-dialog[data-dialog-motion],#screen-dialog[data-dialog-motion],#case-dialog[data-dialog-motion]::backdrop,#screen-dialog[data-dialog-motion]::backdrop{transition:none!important;transform:none!important}.cv-surface-screen,.cv-device-choices button{transition:none}}