@font-face { font-family: 'Swork Barlow'; font-style: normal; font-weight: 400; font-display: optional; src: url('/fonts/swork/barlow-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Swork Barlow'; font-style: normal; font-weight: 400; font-display: optional; src: url('/fonts/swork/barlow-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20CF; }
@font-face { font-family: 'Swork Barlow'; font-style: normal; font-weight: 500; font-display: optional; src: url('/fonts/swork/barlow-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Swork Barlow'; font-style: normal; font-weight: 500; font-display: optional; src: url('/fonts/swork/barlow-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20CF; }
@font-face { font-family: 'Swork Barlow'; font-style: normal; font-weight: 600 800; font-display: optional; src: url('/fonts/swork/barlow-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: 'Swork Barlow'; font-style: normal; font-weight: 600 800; font-display: optional; src: url('/fonts/swork/barlow-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02FF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+20A0-20CF; }
.swork-showcase { margin: 0; min-width: 0; container: swork-controls / inline-size; }
.swork-showcase .swork-presentation { position: relative; align-items: start; }
.swork-preview-toggle, .swork-preview-hint { display: none; }
.swork-preview-toggle { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.swork-preview-toggle:focus-visible { outline: 3px solid #0e7490; outline-offset: 4px; border-radius: 14px; }
.swork-screen { position: relative; overflow: hidden; container-type: inline-size; background: #fff; }
.swork-screen-desktop { aspect-ratio: 1280 / 800; }
.swork-screen-mobile { aspect-ratio: 390 / 844; }
.swork-showcase .swork-canvas { position: absolute; inset: 0 auto auto 0; transform-origin: 0 0; container: swork-viewport / size; font: 400 16px/1.5 'Swork Barlow', 'Segoe UI', sans-serif; color: #102a4c; background: #fff; overflow: hidden; text-align: left; }
.swork-canvas-desktop { width: 1280px; height: 800px; transform: scale(calc(100cqw / 1280px)); }
.swork-canvas-mobile { width: 390px; height: 844px; transform: scale(calc(100cqw / 390px)); }
.swork-showcase .swork-canvas *, .swork-showcase .swork-canvas *::before, .swork-showcase .swork-canvas *::after { box-sizing: border-box; border-width: 0; border-style: solid; margin: 0; padding: 0; }
.swork-showcase .swork-canvas p { line-height: inherit; margin-bottom: 1rem; }
.swork-showcase .swork-canvas :is(.swork-heading-1, .swork-heading-2, .swork-heading-3) { font: inherit; }
.swork-showcase .swork-canvas :is(input, select, textarea, button) { font: inherit; color: inherit; }
.swork-showcase .swork-canvas :is(img, svg) { display: block; vertical-align: middle; }
.swork-showcase .swork-canvas img { max-width: 100%; height: auto; }
.swork-showcase .swork-canvas .swork-link { color: inherit; }
.swork-showcase .swork-canvas .shot { pointer-events: none; }
.swork-showcase .swork-canvas .shot-content { will-change: transform; }
.swork-scene-caption { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 16px 20px; width: 470px; min-height: 104px; max-width: 100%; border: 1px solid #e2e9f0; border-radius: 14px; background: #fff; }
.swork-scene-caption > div { min-width: 0; }
.swork-scene-count { flex: 0 0 auto; padding-right: 16px; border-right: 1px solid #e2e9f0; font-size: 12px; color: #425b7c; font-variant-numeric: tabular-nums; }
.swork-scene-kicker { display: block; font-size: 10px; line-height: 1.4; font-weight: 700; letter-spacing: .12em; color: #0e7490; }
.customer-project .swork-scene-title { margin: 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.swork-playback { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.swork-playback[hidden] { display: none; }
.swork-chapters { display: flex; flex: 1; flex-wrap: wrap; gap: 6px 12px; min-width: 0; margin-top: 20px; }
.swork-chapter { position: relative; flex: 1 1 70px; min-height: 44px; padding: 10px 0 12px; border: 0; border-bottom: 2px solid #e2e9f0; color: #425b7c; background: transparent; font-size: 12px; text-align: left; cursor: pointer; }
.swork-chapter > span { position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #0e7490; transform: scaleX(0); transform-origin: left; }
.swork-chapter[aria-pressed=true] { color: #0b1220; font-weight: 700; }
.swork-chapter[aria-pressed=true] > span { transform: scaleX(var(--scene-progress, 0)); }
.swork-pause { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin-top: 20px; padding: 0; border: 1px solid #dce4eb; border-radius: 50%; color: #0b1220; background: #fff; font-size: 19px; cursor: pointer; }
.swork-pause:disabled { cursor: default; opacity: .55; }
.swork-pause:hover, .swork-chapter:hover { color: #0e7490; }
.swork-snapshot-note { margin-top: 20px; font-size: 12px; line-height: 1.6; color: #425b7c; }
.swork-demo-cursor { position: absolute; width: 23px; height: 29px; background: #17243d; clip-path: polygon(0 0, 0 90%, 25% 68%, 43% 100%, 60% 92%, 43% 62%, 77% 61%); filter: drop-shadow(0 2px 2px #fff); z-index: 6; opacity: .8; transition: left .7s ease, top .7s ease; }
@media (max-width: 600px) {
    .swork-scene-caption { width: 100%; min-height: 132px; gap: 12px; padding: 14px; }
    .customer-project .swork-scene-title { font-size: 17px; }
}
/* Nine 70px chapters, eight 12px gaps, the 44px pause button and its 20px gap need one row. */
@container swork-controls (width < 790px) {
    .swork-chapters, .swork-pause { display: none; }
    .swork-preview-toggle:not([hidden]) { display: block; }
    .swork-preview-hint:not([hidden]) { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    .swork-showcase *, .swork-showcase *::before, .swork-showcase *::after { animation: none !important; transition: none !important; }
    .swork-showcase .shot-content { transform: none !important; }
}