.werk-demo { position: relative; min-width: 0; width: 100%; --werk-accent: var(--accent-1); --job-blue: #60a5fa; animation: fadeInUp .9s ease-out .5s both; }
[data-theme="light"] .werk-demo { --job-blue: #2563eb; }
.werk-demo[data-phase="1"] { --werk-accent: var(--job-blue); }
.werk-demo[data-phase="2"] { --werk-accent: #df5429; }
.werk-demo[data-phase="3"] { --werk-accent: var(--accent-4); }
.werk-scene { display: block; width: 100%; height: auto; overflow: visible; }
.werk-orbit { fill: none; stroke: var(--text-muted); opacity: .1; }
.werk-halo { fill: url(#werkGlow); }
.werk-board { transform-origin: 320px 235px; transition: transform 1.3s cubic-bezier(.22,.8,.2,1), opacity .8s; }
.werk-demo[data-phase="0"] .werk-board { transform: translate(22px, 15px) scale(.94); opacity: .35; }
.werk-demo[data-phase="2"] .werk-board { transform: translate(-32px, 0) scale(.94); }
.werk-demo[data-phase="3"] .werk-board { transform: translate(-40px, 8px) scale(.9); opacity: .65; }
.werk-surface { fill: var(--bg-elevated); stroke: color-mix(in srgb, var(--job-blue) 55%, transparent); stroke-width: 1; }
.werk-line { fill: none; stroke: var(--text-muted); opacity: .15; }
.werk-soft { fill: var(--job-blue); opacity: .08; }
.werk-label { fill: var(--text-muted); font: 10px 'JetBrains Mono', monospace; }
.werk-heading { fill: var(--text-primary); font: 600 13px 'Outfit', sans-serif; }
.werk-skeleton { fill: var(--text-muted); opacity: .24; }
.werk-icon { fill: none; stroke: var(--job-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.werk-small-job { fill: color-mix(in srgb, var(--job-blue) 12%, var(--bg-elevated)); stroke: var(--job-blue); stroke-width: .6; opacity: .5; }
.werk-document { opacity: 0; transform: translate(-12px, 12px); transition: opacity .7s, transform 1s; }
.werk-demo[data-phase="0"] .werk-document { opacity: 1; transform: none; }
.werk-job { transform: translate(53px, 145px); transition: transform 1.5s cubic-bezier(.22,.8,.2,1); }
.werk-job-card { fill: color-mix(in srgb, var(--job-blue) 14%, var(--bg-elevated)); stroke: var(--job-blue); stroke-width: 1.5; }
.werk-job-stripe { fill: var(--job-blue); }
.werk-job-id { fill: var(--job-blue); font: 11px 'JetBrains Mono', monospace; }
.werk-job-name { fill: var(--text-primary); font: 600 15px 'Outfit', sans-serif; }
.werk-demo[data-phase="1"] .werk-job { transform: translate(260px, 201px) scale(.88); }
.werk-demo[data-phase="2"] .werk-job { transform: translate(232px, 203px) scale(.83); }
.werk-demo[data-phase="3"] .werk-job { transform: translate(210px, 208px) scale(.8); }
.werk-day-highlight { fill: var(--job-blue); opacity: 0; transition: opacity .8s .8s; }
.werk-demo:not([data-phase="0"]) .werk-day-highlight { opacity: .09; }
.werk-confirm { color: var(--accent-4); }
.werk-confirm circle { fill: var(--bg-elevated); stroke: currentColor; }
.werk-confirm path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.werk-phone { opacity: 0; transform: translate(68px, 15px) rotate(5deg); transform-origin: 520px 270px; transition: opacity .65s, transform 1.2s cubic-bezier(.22,.8,.2,1); }
.werk-demo[data-phase="2"] .werk-phone { opacity: 1; transform: none; }
.werk-phone-body { fill: var(--bg-elevated); stroke: var(--text-muted); stroke-width: 2; }
.werk-phone .werk-phone-body, .werk-phone .werk-icon { stroke: #df5429; }
.werkteam-wordmark { font-weight: 800; }
.werkteam-wordmark-werk { fill: #2563eb; }
.werkteam-wordmark-team { fill: #df5429; }
.werk-phone-check { opacity: 0; transform: translateY(8px); transition: opacity .7s .8s, transform .7s .8s; }
.werk-demo[data-phase="2"] .werk-phone-check { opacity: 1; transform: none; }
.werk-sync { fill: none; stroke: #df5429; stroke-width: 1.7; stroke-dasharray: 10 120; opacity: 0; }
.werk-demo[data-phase="2"] .werk-sync { opacity: .8; animation: werk-sync 2.8s linear infinite; }
@keyframes werk-sync { to { stroke-dashoffset: -130; } }
.werk-invoice { opacity: 0; transform: translate(40px, 20px) rotate(4deg); transform-origin: 465px 235px; transition: opacity .7s, transform 1.2s cubic-bezier(.22,.8,.2,1); }
.werk-demo[data-phase="3"] .werk-invoice { opacity: 1; transform: none; }
.werk-invoice .werk-surface { stroke: var(--accent-4); }
.werk-invoice-items { opacity: 0; transform: translateY(12px); transition: opacity .8s .55s, transform .8s .55s; }
.werk-demo[data-phase="3"] .werk-invoice-items { opacity: 1; transform: none; }
.werk-invoice-status { fill: var(--accent-4); font: 10px 'JetBrains Mono', monospace; }
.werk-demo[data-paused="true"] .werk-sync, .werk-demo[data-suspended="true"] .werk-sync { animation-play-state: paused; }
.werk-topline { display: flex; justify-content: space-between; align-items: center; gap: .7rem; color: var(--text-dim); font: .62rem 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em; }
.werk-toggle { display: none; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--text-muted); font: inherit; letter-spacing: 0; cursor: pointer; padding: .7rem 0; }
.werk-ready .werk-toggle { display: inline-flex; }
.werk-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.werk-toggle .play-icon, .werk-demo[data-paused="true"] .pause-icon { display: none; }
.werk-demo[data-paused="true"] .play-icon { display: block; }
.werk-caption { display: grid; padding: 1rem 0 1.3rem; }
.werk-caption > div { grid-area: 1 / 1; }
.werk-caption [hidden] { display: block; visibility: hidden; }
.werk-caption h2 { margin: 0 0 .45rem; color: var(--text-primary); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; line-height: 1.3; }
.werk-caption p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
.werk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.werk-step { min-width: 0; position: relative; border: 0; border-top: 2px solid var(--card-border); padding: .8rem 0 .5rem; text-align: left; color: var(--text-muted); background: transparent; font: .66rem 'JetBrains Mono', monospace; cursor: pointer; }
.werk-step::before { content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 2px; background: var(--werk-accent); transform: scaleX(0); transform-origin: left; }
.werk-step[aria-pressed="true"] { color: var(--text-primary); }
.werk-step[aria-pressed="true"]::before { transform: scaleX(var(--werk-progress, 1)); }
.werk-step span:first-child { display: block; margin-bottom: .4rem; color: var(--werk-accent); font-size: .6rem; }
.werk-step:hover, .werk-toggle:hover { color: var(--text-primary); }
.werk-step:focus-visible, .werk-toggle:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 5px; border-radius: 2px; }
@media (max-width: 1050px) { .werk-demo { max-width: 640px; margin: 0 auto; } }
@media (max-width: 440px) {
  .werk-topline { font-size: .53rem; letter-spacing: .06em; }
  .werk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
  .werk-step { font-size: .7rem; padding-top: .6rem; }
  .werk-caption p { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .werk-demo * { animation: none !important; transition: none !important; } }