/* Independent card themes: edit these tokens to restyle each app example.
   --card-bg accepts a color or gradient; radius, border and shadow are optional. */
.work-card[data-style="files"]{--card-bg:#fff;--card-ink:#292b25;--card-accent:#3175fb}
.work-card[data-style="documents"]{--card-bg:#91d45f;--card-ink:#203017;--card-accent:#203017}
.work-card[data-style="messages"]{--card-bg:#ff705e;--card-ink:#291713;--card-accent:#291713}
.work-card[data-style="browser"]{--card-bg:#e6c2fb;--card-ink:#372444;--card-accent:#583570;--card-radius:28px}
.work-card[data-style="code"]{--card-bg:#262b24;--card-ink:#f3f3e9;--card-accent:#b5f54b;--card-radius:16px}
.work-card[data-style="assistants"]{--card-bg:#b5f54b;--card-ink:#243015;--card-accent:#243015}
.work-stack{background:var(--paper);padding:70px var(--pad);border-bottom:1px solid var(--line)}
.work-stack__stage{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,7vw,110px);align-items:start;max-width:1440px;margin:auto}
.work-stack__intro{padding-top:20px}
.work-stack__intro h2{font-size:clamp(52px,6.7vw,104px);font-weight:500;line-height:.99;letter-spacing:-.065em;margin-top:22px}
.work-stack__intro h2 span{text-decoration:underline;text-decoration-color:#dfb1f5;text-decoration-thickness:8px;text-underline-offset:9px}
.work-stack__lede{max-width:32ch;font-size:clamp(17px,1.6vw,23px);line-height:1.4;margin-top:clamp(32px,6vh,70px)}
.work-stack__hint{display:none;margin-top:28px;color:#626353}
.work-stack__hint span{display:inline-block;margin-left:14px;font-size:20px}
.work-stack__cards{display:grid;gap:20px;min-width:0}
.work-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(22px,3vw,44px);background:var(--card-bg,#fff);color:var(--card-ink,#292b25);border:var(--card-border,0);border-radius:var(--card-radius,48px);box-shadow:var(--card-shadow,none);overflow:hidden}
.work-card__number{align-self:flex-end;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--card-ink);color:var(--card-badge-ink,#fff);font-size:17px;margin-bottom:16px}
.work-card .use__scene{height:clamp(170px,19vw,260px);flex:1;min-height:160px;padding:14px 0;margin-bottom:22px;overflow:visible}
.work-card .use__scene .mw{width:86%;transform:rotate(-3deg)}
.work-card .mw__body{font-size:clamp(10px,1vw,14px);padding:14px}
.work-card .minipeek{width:44%;right:0;bottom:0}
.work-card .use__txt{padding:0;container-type:inline-size}
.work-card .use__t{font-size:clamp(14px,6.3cqw,32px);font-weight:500;line-height:1.1;letter-spacing:-.04em;margin-top:12px;max-width:none;white-space:nowrap}
/* Only enhance when JS and the viewport can support the pinned composition. */
@media(min-width:901px) and (min-height:650px) and (prefers-reduced-motion:no-preference){
  .sheet:has(.work-stack.is-animated){overflow:clip}
  .work-stack.is-animated{height:280vh;padding-block:0}
  .is-animated .work-stack__stage{position:sticky;top:0;height:100vh;align-items:center}
  .is-animated .work-stack__cards{position:relative;height:min(62vh,580px);display:block}
  .is-animated .work-card{position:absolute;inset:0;min-height:0;transform:translateY(var(--card-y,0px));will-change:transform}
  .is-animated .work-stack__hint{display:block}
}
@media(max-width:900px){
  .work-stack{padding-block:48px}
  .work-stack__stage{grid-template-columns:1fr;gap:36px}
  .work-stack__intro h2{font-size:clamp(48px,10vw,78px)}
  .work-stack__intro h2 br{display:none}
  .work-stack__lede{margin-top:28px;max-width:40ch}
  .work-stack__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-card{--card-radius:28px;padding:24px}
}
@media(max-width:580px){.work-stack__cards{grid-template-columns:1fr}.work-card .use__scene{height:230px;flex:auto}}

/* Tiny source thumbnails make the full-size hover preview useful. */
.work-card[data-style="browser"] .thumbs--tiny{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;max-width:210px}
.work-card[data-style="browser"] .thumbs--tiny img{padding:20%}
#everyday-details .uses{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:640px){#everyday-details .uses{grid-template-columns:1fr}}

/* Size titles against their own card, including the two-column mobile layout. */
#everyday-details .use__txt{container-type:inline-size}
#everyday-details .use__t{font-size:clamp(12px,5.8cqw,18px);white-space:nowrap}
.get__platform{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.get__platform .beta{margin-left:0}