.sw-work{scroll-margin-top:1rem}.sw-work-head{margin-bottom:var(--spacing-stack);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.sw-h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:var(--primitive-fontWeight-bold);letter-spacing:var(--primitive-tracking-tight);margin:0;line-height:1.1}.autoplay-toggle{font:inherit;font-size:var(--typography-caption);font-weight:var(--primitive-fontWeight-medium);letter-spacing:var(--primitive-tracking-wider);text-transform:uppercase;color:var(--color-ink-muted);cursor:pointer;transition:color var(--motion-hover) var(--motion-ease-default);background:0 0;border:0;align-items:center;gap:.6rem;padding:0;display:inline-flex}.autoplay-toggle:hover{color:var(--color-ink)}.autoplay-track{border:1px solid var(--color-border);border-radius:var(--primitive-radius-full);background:var(--color-surface-sunken);width:2rem;height:1.125rem;transition:background var(--motion-hover) var(--motion-ease-default), border-color var(--motion-hover) var(--motion-ease-default);position:relative}.autoplay-thumb{border-radius:var(--primitive-radius-full);background:var(--color-ink-muted);width:12px;height:12px;transition:translate var(--motion-playful) var(--motion-ease-playful), background var(--motion-hover) var(--motion-ease-default);position:absolute;top:2px;left:2px}.autoplay-toggle[aria-pressed=true] .autoplay-track{border-color:var(--color-accent);background:var(--color-accent)}.autoplay-toggle[aria-pressed=true] .autoplay-thumb{background:var(--color-accent-foreground);translate:14px}.bento{--bento-gap:clamp(.75rem, 1.6vw, 1rem);gap:var(--bento-gap);grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));align-items:start;display:grid}.bento[data-masonry]{grid-auto-rows:1px;grid-auto-flow:dense;row-gap:0}.bento[data-masonry]>.tile{grid-row-end:span var(--span)}.tile{border:1px solid var(--color-border);border-radius:var(--primitive-radius-lg);background:var(--color-surface);box-shadow:var(--shadow-hairline);transition:translate var(--motion-playful) var(--motion-ease-playful), box-shadow var(--motion-hover) var(--motion-ease-default), border-color var(--motion-hover) var(--motion-ease-default);display:block;position:relative;overflow:hidden}.tile:is(:hover,:focus-visible,:has(:focus-visible)){border-color:var(--color-accent);box-shadow:var(--shadow-glow-accent);translate:0 -3px}.tile:not([data-shape])>.showcase{aspect-ratio:1}.tile[data-shape]{container-type:inline-size}.tile[data-shape=wide]{grid-column:span 2}.tile[data-shape=wide]>.showcase{height:calc((100cqi - var(--bento-gap)) / 2 - 1px)}.tile[data-shape=tall]>.showcase{height:calc(200cqi + 2px + var(--bento-gap))}@media (max-width:640px){.tile[data-shape=wide]{grid-column:auto}}.showcase{background:var(--placeholder-bg);display:block;position:relative;overflow:hidden}.showcase-bg{object-fit:cover;filter:blur(16px)saturate(1.15);transition:scale .7s var(--motion-ease-default);scale:1.15}.showcase-screen{background:var(--color-surface);height:80%;box-shadow:0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--color-ink) 14%, transparent), 0 18px 40px color-mix(in srgb, var(--color-ink) 24%, transparent);transition:translate var(--motion-playful) var(--motion-ease-playful), box-shadow var(--motion-hover) var(--motion-ease-default);position:absolute;top:50%;left:50%;overflow:hidden;translate:-50% -50%}.tile[data-shape=tall] .showcase-screen{aspect-ratio:9/19.5;border-radius:14%/6.5%}.tile[data-shape=wide] .showcase-screen{aspect-ratio:16/10;border-radius:2%/3.2%}.showcase-screen :is(video,img){object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.showcase-blank{text-align:center;text-wrap:balance;height:100%;font-weight:var(--primitive-fontWeight-bold);color:var(--placeholder-fg);background:var(--placeholder-bg);place-items:center;padding:.75rem;display:grid}.showcase-logo{filter:drop-shadow(0 10px 18px color-mix(in srgb, var(--color-ink) 22%, transparent));transition:translate var(--motion-playful) var(--motion-ease-playful), filter var(--motion-hover) var(--motion-ease-default);position:absolute;inset:24%}.showcase-logo img{border-radius:var(--primitive-radius-lg);max-width:100%;max-height:100%;margin:auto;width:auto!important;height:auto!important;inset:0!important}.showcase-wordmark{text-align:center;text-wrap:balance;font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:var(--primitive-fontWeight-bold);letter-spacing:var(--primitive-tracking-tight);color:var(--color-surface);filter:drop-shadow(0 2px 10px color-mix(in srgb, var(--color-ink) 45%, transparent));place-items:center;line-height:1.15;display:grid;inset:12%}.showcase:not(:has(.showcase-bg)) .showcase-wordmark{color:var(--color-ink-muted);filter:none}.tile:is(:hover,:focus-visible,:has(:focus-visible)) .showcase-logo{filter:drop-shadow(0 18px 28px color-mix(in srgb, var(--color-ink) 28%, transparent));translate:0 -6px}.tile:is(:hover,:focus-visible,:has(:focus-visible)) .showcase-screen{box-shadow:0 0 0 1px color-mix(in srgb, var(--color-ink) 10%, transparent), 0 4px 10px color-mix(in srgb, var(--color-ink) 16%, transparent), 0 28px 56px color-mix(in srgb, var(--color-ink) 30%, transparent);translate:-50% calc(-50% - 6px)}.tile:is(:hover,:focus-visible,:has(:focus-visible)) .showcase-bg{scale:1.22}.tile-caption{background:linear-gradient(to top, color-mix(in srgb, var(--chip-bg) 88%, transparent), transparent);color:var(--chip-fg);opacity:0;transition:opacity var(--motion-hover) var(--motion-ease-default), translate var(--motion-playful) var(--motion-ease-playful);gap:.15rem;padding:2.5rem 1rem .9rem;display:grid;position:absolute;inset:auto 0 0;translate:0 .5rem}.tile:is(:hover,:focus-visible,:has(:focus-visible)) .tile-caption{opacity:1;translate:0}@media (hover:none){.tile-caption{opacity:1;translate:0}}.tile-name{font-size:var(--typography-body);font-weight:var(--primitive-fontWeight-bold);letter-spacing:var(--primitive-tracking-tight);text-wrap:balance}.tile-when{font-size:var(--typography-caption);font-variant-numeric:tabular-nums;letter-spacing:var(--primitive-tracking-wide);color:color-mix(in srgb, var(--chip-fg) 70%, transparent)}@media (prefers-reduced-motion:reduce){.tile,.tile-caption{translate:none!important}}