.scene {
    position: relative;
}

.scene-svg {
    display: block;
    width: 100%;
    height: auto;
}

.scene-svg-wide {
    display: none;
}

@media (min-width: 1024px) {
    .scene-svg-wide {
        display: block;
    }

    .scene-svg-compact {
        display: none;
    }

}

.scene-svg :where(polygon, rect, circle, ellipse, path),
:where(.scene-avatar-body-1, .scene-avatar-body-2, .scene-avatar-body-3, .scene-avatar-head-1, .scene-avatar-head-2, .scene-avatar-head-3, .scene-avatar-hair-1, .scene-avatar-hair-2, .scene-avatar-hair-3, .scene-card, .scene-card-line, .scene-mini-image) {
    stroke: var(--tk-scene-outline);
    stroke-width: var(--tk-scene-outline-width);
    stroke-linejoin: round;
}

.scene-stop-island-a {
    stop-color: var(--tk-scene-island);
}

.scene-stop-island-b {
    stop-color: var(--tk-scene-island-end);
}

.scene-stop-image-a {
    stop-color: var(--tk-scene-image);
}

.scene-stop-image-b {
    stop-color: var(--tk-scene-image-end);
}

.scene-stop-shield-a {
    stop-color: var(--tk-scene-shield);
}

.scene-stop-shield-b {
    stop-color: var(--tk-scene-shield-end);
}

.scene-stop-spark-a {
    stop-color: var(--tk-scene-spark);
}

.scene-stop-spark-b {
    stop-color: var(--tk-scene-spark-end);
}

.scene-stop-screen-a {
    stop-color: var(--tk-scene-screen);
}

.scene-stop-screen-b {
    stop-color: var(--tk-scene-screen-end);
}

.scene-stop-shadow {
    stop-color: var(--tk-scene-shadow);
}

.scene-stop-shadow-fade {
    stop-color: var(--tk-scene-shadow-fade);
}

.scene-stop-floor {
    stop-color: var(--tk-scene-floor);
}

.scene-stop-floor-fade {
    stop-color: var(--tk-scene-floor-fade);
}

.scene-stop-glow {
    stop-color: var(--tk-scene-glow);
}

.scene-stop-glow-fade {
    stop-color: var(--tk-scene-glow-fade);
}

.scene-svg :is(.scene-floor, .scene-shadow, .scene-glow, .scene-avatar-shadow) {
    stroke: none;
}

.scene-island-left {
    fill: var(--tk-scene-island-side);
}

.scene-island-right {
    fill: var(--tk-scene-island-side-dark);
}

.scene-island-inlay {
    fill: var(--tk-scene-island-inlay);
}

.scene-rock-left {
    fill: var(--tk-scene-rock);
}

.scene-rock-right {
    fill: var(--tk-scene-rock-dark);
}

.scene-rock-deep-left {
    fill: var(--tk-scene-rock-deep);
}

.scene-rock-deep-right {
    fill: var(--tk-scene-rock-deep-dark);
}

.scene-band-post {
    fill: var(--tk-scene-band-post);
}

.scene-band-post-side {
    fill: var(--tk-scene-band-post-dark);
}

.scene-band-live {
    fill: var(--tk-scene-band-live);
}

.scene-band-live-side {
    fill: var(--tk-scene-band-live-dark);
}

.scene-avatar-shadow {
    fill: var(--tk-scene-shadow);
}

.scene-avatar-body-1 {
    fill: var(--tk-scene-avatar-1);
}

.scene-avatar-body-2 {
    fill: var(--tk-scene-avatar-2);
}

.scene-avatar-body-3 {
    fill: var(--tk-scene-avatar-3);
}

.scene-avatar-head-1 {
    fill: var(--tk-scene-skin-1);
}

.scene-avatar-head-2 {
    fill: var(--tk-scene-skin-2);
}

.scene-avatar-head-3 {
    fill: var(--tk-scene-skin-3);
}

.scene-avatar-hair-1 {
    fill: var(--tk-scene-hair-1);
}

.scene-avatar-hair-2 {
    fill: var(--tk-scene-hair-2);
}

.scene-avatar-hair-3 {
    fill: var(--tk-scene-hair-3);
}

.scene-card,
.scene-notice,
.scene-collab {
    fill: var(--tk-scene-card);
}

.scene-card-edge-left,
.scene-card-edge-top {
    fill: var(--tk-scene-card-edge);
}

.scene-calendar-top {
    fill: var(--tk-scene-calendar-side);
}

.scene-card-edge-right {
    fill: var(--tk-scene-card-edge-dark);
}

.scene-card-line,
.scene-notice-line,
.scene-phone-line {
    fill: var(--tk-scene-card-line);
}

.scene-card-line-soft {
    fill: var(--tk-scene-card-line-soft);
}

.scene-card-avatar,
.scene-card-caret {
    fill: var(--tk-scene-flow-post);
}

.scene-card-sun {
    fill: var(--tk-scene-sun);
}

.scene-card-hill {
    fill: var(--tk-scene-card-hill);
}

.scene-card-heart,
.scene-notice-heart,
.scene-phone-heart {
    fill: var(--tk-scene-heart);
}

.scene-trail {
    fill: none;
    stroke: var(--tk-scene-spark);
    stroke-width: var(--tk-scene-flow-width);
    stroke-dasharray: var(--tk-scene-trail-dash);
    stroke-linecap: round;
}

.scene-spark-star {
    stroke: none;
}

.scene-shield-side {
    fill: var(--tk-scene-shield-side);
}

.scene-shield-shine {
    fill: var(--tk-scene-shine);
    stroke: none;
}

.scene-check,
.scene-status-check,
.scene-calendar-check {
    fill: none;
    stroke: var(--tk-scene-check);
    stroke-width: var(--tk-scene-stroke-strong);
    stroke-linecap: round;
}

.scene-calendar-check {
    stroke: var(--tk-scene-calendar-check);
    stroke-width: var(--tk-scene-stroke-thin);
}

.scene-clock-back {
    fill: var(--tk-scene-clock-back);
}

.scene-clock-face {
    fill: var(--tk-scene-clock-face);
}

.scene-clock-tick,
.scene-clock-pin {
    fill: var(--tk-scene-clock-hand);
    stroke: none;
}

.scene-clock-hand {
    stroke: var(--tk-scene-clock-hand);
    stroke-width: var(--tk-scene-stroke);
    stroke-linecap: round;
}

.scene-clock-minute {
    stroke: var(--tk-scene-flow-post);
}

.scene-calendar-left {
    fill: var(--tk-scene-calendar);
}

.scene-calendar-right {
    fill: var(--tk-scene-calendar-side-dark);
}

.scene-calendar-head {
    fill: var(--tk-scene-band-post);
}

.scene-calendar-ring {
    fill: var(--tk-scene-calendar-ring);
}

.scene-calendar-cell {
    fill: var(--tk-scene-calendar-cell);
}

.scene-calendar-pick {
    fill: var(--tk-scene-calendar-pick);
}

.scene-phone-left,
.scene-phone-notch {
    fill: var(--tk-scene-phone);
}

.scene-phone-right,
.scene-phone-top {
    fill: var(--tk-scene-phone-side);
}

.scene-phone-screen {
    fill: var(--tk-scene-screen);
}

.scene-phone-glass {
    stroke: none;
}

.scene-phone-tile {
    fill: var(--tk-scene-phone-tile);
}

.scene-phone-play {
    fill: var(--tk-scene-play);
}

.scene-phone-bar {
    fill: var(--tk-scene-phone-tile);
}

.scene-phone-progress {
    fill: var(--tk-scene-band-live);
}

.scene-building-left {
    fill: var(--tk-scene-building);
}

.scene-building-right,
.scene-building-top {
    fill: var(--tk-scene-building-side);
}

.scene-roof-top {
    fill: var(--tk-scene-roof);
}

.scene-roof-left,
.scene-roof-right {
    fill: var(--tk-scene-roof-side);
}

.scene-window,
.scene-window-side {
    fill: var(--tk-scene-window);
}

.scene-door {
    fill: var(--tk-scene-band-post);
}

.scene-awning {
    fill: var(--tk-scene-band-live);
}

.scene-flow-base {
    fill: none;
    stroke-width: var(--tk-scene-flow-base-width);
    stroke-linecap: round;
    opacity: var(--tk-scene-flow-base-opacity);
}

.scene-flow {
    fill: none;
    stroke-width: var(--tk-scene-flow-width);
    stroke-dasharray: var(--tk-scene-dash);
    stroke-linecap: round;
}

.scene-flow-base-post,
.scene-flow-post {
    stroke: var(--tk-scene-flow-post);
}

.scene-flow-base-live,
.scene-flow-live {
    stroke: var(--tk-scene-flow-live);
}

.scene-flow-base-collab,
.scene-flow-collab {
    stroke: var(--tk-scene-flow-collab);
}

.scene-flow-end-post {
    fill: var(--tk-scene-flow-post);
}

.scene-flow-end-live {
    fill: var(--tk-scene-flow-live);
}

.scene-flow-end-collab {
    fill: var(--tk-scene-flow-collab);
}

.scene-svg .scene-flow-end {
    stroke: var(--tk-scene-card);
    stroke-width: var(--tk-scene-stroke-thin);
}

.scene-collab-a {
    fill: var(--tk-scene-avatar-1);
}

.scene-collab-b {
    fill: var(--tk-scene-flow-collab);
}

.scene-svg :is(.scene-collab-a, .scene-collab-b) {
    stroke: var(--tk-scene-card);
    stroke-width: var(--tk-scene-stroke);
}

.scene-collab-link {
    fill: none;
    stroke: var(--tk-scene-check);
    stroke-width: var(--tk-scene-stroke);
    stroke-linecap: round;
}

.scene-traveller {
    opacity: 0;
}

.scene-status {
    fill: var(--tk-scene-status);
}

.scene-pulse {
    fill: none;
    stroke: var(--tk-scene-band-live);
    stroke-width: var(--tk-scene-stroke-thin);
    opacity: 0;
}

.scene-sheet-left,
.scene-sheet-right {
    fill: var(--tk-scene-card-edge);
}

.scene-sheet-top {
    fill: var(--tk-scene-card);
}

.scene-sheet-draft {
    fill: none;
    stroke: var(--tk-scene-card-line);
    stroke-dasharray: var(--tk-scene-ghost-dash);
}

.scene-role-left,
.scene-tray-left,
.scene-book-left,
.scene-bar-left,
.scene-keyboard-left,
.scene-gate-left {
    fill: var(--tk-scene-calendar-side);
}

.scene-role-right,
.scene-tray-right,
.scene-book-right,
.scene-bar-right,
.scene-keyboard-right,
.scene-gate-right {
    fill: var(--tk-scene-calendar-side-dark);
}

.scene-role-top,
.scene-tray-top,
.scene-bar-top,
.scene-keyboard-top,
.scene-gate-top {
    fill: var(--tk-scene-card);
}

.scene-role-dot {
    fill: var(--tk-scene-band-post);
    stroke: none;
}

.scene-switch-manual {
    fill: var(--tk-scene-card-line-soft);
}

.scene-switch-review {
    fill: var(--tk-scene-band-post);
}

.scene-switch-auto {
    fill: var(--tk-scene-band-live);
}

.scene-switch-knob {
    fill: var(--tk-scene-card);
}

.scene-switch-mark {
    fill: none;
    stroke: var(--tk-scene-band-post);
    stroke-width: var(--tk-scene-stroke-thin);
    stroke-linecap: round;
}

.scene-server-left,
.scene-monitor-left,
.scene-panel-left,
.scene-stand-left {
    fill: var(--tk-scene-phone);
}

.scene-server-right,
.scene-server-top,
.scene-monitor-right,
.scene-monitor-top,
.scene-panel-right,
.scene-panel-top,
.scene-stand-right,
.scene-stand-top {
    fill: var(--tk-scene-phone-side);
}

.scene-server-slot {
    fill: var(--tk-scene-phone-side);
}

.scene-server-led {
    fill: var(--tk-scene-band-live);
    stroke: none;
}

.scene-key {
    fill: var(--tk-scene-sun);
}

.scene-key-hole {
    fill: var(--tk-scene-card);
}

.scene-book-top {
    fill: var(--tk-scene-band-post);
}

.scene-book-cover {
    fill: var(--tk-scene-card);
}

.scene-book-band {
    fill: var(--tk-scene-flow-collab);
    stroke: none;
}

.scene-bar-hot-left {
    fill: var(--tk-scene-band-live);
}

.scene-bar-hot-right {
    fill: var(--tk-scene-band-live-dark);
}

.scene-bar-hot-top {
    fill: var(--tk-scene-calendar-pick);
}

.scene-tile-left,
.scene-tile-top {
    fill: var(--tk-scene-card);
}

.scene-tile-right {
    fill: var(--tk-scene-card-edge-dark);
}

.scene-tile-play-bg {
    fill: var(--tk-scene-phone);
}

.scene-chunk-panel {
    fill: var(--tk-scene-card);
}

.scene-chunk-track {
    fill: var(--tk-scene-card-line-soft);
}

.scene-chunk-fill {
    fill: var(--tk-scene-band-live);
}

.scene-chunk-gap,
.scene-upload {
    fill: none;
    stroke: var(--tk-scene-card);
    stroke-width: var(--tk-scene-stroke-thin);
}

.scene-upload {
    stroke: var(--tk-scene-band-post);
    stroke-width: var(--tk-scene-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scene-lens-glass {
    fill: var(--tk-scene-lens);
    stroke: var(--tk-scene-clock-hand);
    stroke-width: var(--tk-scene-stroke-strong);
}

.scene-lens-handle {
    fill: none;
    stroke: var(--tk-scene-clock-hand);
    stroke-width: var(--tk-scene-stroke-heavy);
    stroke-linecap: round;
}

.scene-lens-shine {
    fill: none;
    stroke: var(--tk-scene-card);
    stroke-width: var(--tk-scene-stroke-thin);
    stroke-linecap: round;
}

.scene-pool {
    fill: var(--tk-scene-pool);
    stroke: none;
}

.scene-pool-ring {
    fill: none;
    stroke: var(--tk-scene-band-live);
    stroke-width: var(--tk-scene-stroke-thin);
    stroke-dasharray: var(--tk-scene-ghost-dash);
}

.scene-eye-badge,
.scene-retry-badge {
    fill: var(--tk-scene-card);
}

.scene-eye {
    fill: var(--tk-scene-card-line-soft);
}

.scene-eye-iris {
    fill: var(--tk-scene-band-post);
}

.scene-panel-screen {
    fill: var(--tk-scene-screen);
}

.scene-field {
    fill: var(--tk-scene-card-line-soft);
}

.scene-field-button {
    fill: var(--tk-scene-band-post);
}

.scene-lock {
    fill: var(--tk-scene-sun);
}

.scene-lock-shackle {
    fill: none;
    stroke: var(--tk-scene-clock-hand);
    stroke-width: var(--tk-scene-stroke-heavy);
    stroke-linecap: round;
}

.scene-lock-hole {
    fill: none;
    stroke: var(--tk-scene-clock-hand);
    stroke-width: var(--tk-scene-stroke);
    stroke-linecap: round;
}

.scene-ledger-left,
.scene-ledger-top {
    fill: var(--tk-scene-card-edge);
}

.scene-ledger-right {
    fill: var(--tk-scene-card-edge-dark);
}

.scene-ledger-check {
    fill: none;
    stroke: var(--tk-scene-band-live);
    stroke-width: var(--tk-scene-stroke-thin);
    stroke-linecap: round;
}

.scene-lane {
    fill: var(--tk-scene-card-line-soft);
}

.scene-lane-mark {
    fill: none;
    stroke: var(--tk-scene-card);
    stroke-width: var(--tk-scene-stroke-thin);
    stroke-dasharray: var(--tk-scene-dash);
}

.scene-job-left {
    fill: var(--tk-scene-band-post);
}

.scene-job-right {
    fill: var(--tk-scene-band-post-dark);
}

.scene-job-top,
.scene-job-retry-top {
    fill: var(--tk-scene-card);
}

.scene-job-retry-left {
    fill: var(--tk-scene-heart);
}

.scene-job-retry-right {
    fill: var(--tk-scene-alert-dark);
}

.scene-retry,
.scene-retry-head {
    fill: none;
    stroke: var(--tk-scene-heart);
    stroke-width: var(--tk-scene-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scene-boom-left,
.scene-boom-right,
.scene-boom-top {
    fill: var(--tk-scene-card);
}

.scene-boom-stripe {
    fill: var(--tk-scene-heart);
}

.scene-mail {
    fill: var(--tk-scene-card);
}

.scene-mail-flap {
    fill: none;
    stroke: var(--tk-scene-band-post);
    stroke-width: var(--tk-scene-stroke);
    stroke-linejoin: round;
}

.scene-svg :is(.scene-ghost-left, .scene-ghost-right, .scene-ghost-top) {
    fill: var(--tk-scene-ghost);
    stroke: var(--tk-scene-card-line);
    stroke-width: var(--tk-scene-stroke-thin);
    stroke-dasharray: var(--tk-scene-ghost-dash);
}

.scene-ghost-plus {
    fill: none;
    stroke: var(--tk-scene-card-line);
    stroke-width: var(--tk-scene-stroke-strong);
    stroke-linecap: round;
}

.scene-ui-light {
    fill: var(--tk-scene-ui-light);
}

.scene-ui-dark {
    fill: var(--tk-scene-ui-dark);
}

.scene-ui-bar {
    fill: var(--tk-scene-band-post);
}

.scene-ui-line-light,
.scene-ui-soft-dark {
    fill: var(--tk-scene-ui-dark-line);
}

.scene-ui-line-dark,
.scene-ui-soft-light {
    fill: var(--tk-scene-ui-light-line);
}

.scene-ui-button-light {
    fill: var(--tk-scene-band-post);
}

.scene-ui-button-dark {
    fill: var(--tk-scene-band-live);
}

.scene-theme {
    fill: var(--tk-scene-card);
}

.scene-theme-sun {
    fill: var(--tk-scene-sun);
}

.scene-theme-moon {
    fill: var(--tk-scene-band-post);
}

.scene-theme-contrast {
    fill: var(--tk-scene-card);
    stroke: var(--tk-scene-clock-hand);
    stroke-width: var(--tk-scene-stroke-thin);
}

.scene-theme-contrast-half {
    fill: var(--tk-scene-clock-hand);
}

.scene-theme-knob {
    fill: none;
    stroke: var(--tk-scene-band-live);
    stroke-width: var(--tk-scene-stroke);
}

.scene-bubble-a {
    fill: var(--tk-scene-band-post);
}

.scene-bubble-b {
    fill: var(--tk-scene-card);
}

.scene-bubble-line-a {
    fill: var(--tk-scene-check);
    stroke: none;
}

.scene-bubble-line-b {
    fill: var(--tk-scene-card-line);
}

.scene-keycap {
    fill: var(--tk-scene-calendar-cell);
}

.scene-keycap-focus {
    fill: var(--tk-scene-band-post);
}

.scene-focus-ring {
    fill: none;
    stroke: var(--tk-scene-band-live);
    stroke-width: var(--tk-scene-stroke);
}

.scene-globe {
    fill: var(--tk-scene-card);
    stroke: var(--tk-scene-band-post);
    stroke-width: var(--tk-scene-stroke-thin);
}

.scene-globe-line {
    fill: none;
    stroke: var(--tk-scene-band-post);
    stroke-width: var(--tk-scene-stroke-hair);
}

.scene-story {
    display: grid;
    gap: var(--tk-space-6);
}

.scene-story-stage {
    position: sticky;
    top: var(--tk-size-header);
    z-index: 1;
    height: var(--tk-scene-compact-height);
    padding-block: var(--tk-space-3);
    background-color: var(--tk-color-bg);
}

.scene-story-stage .scene,
.scene-story-stage .scene-svg {
    height: 100%;
}

.scene-story-card {
    flex-grow: 1;
    padding: var(--tk-space-5) var(--tk-space-6);
    background-color: var(--tk-color-surface);
    border: var(--tk-border-width) solid var(--tk-color-line);
    border-radius: var(--tk-radius-lg);
    box-shadow: var(--tk-shadow-md);
}

.scene-story-card p:last-child {
    margin-bottom: 0;
    color: var(--tk-color-text-muted);
}

.scene-story-card :is(h2, h3) {
    margin-bottom: var(--tk-space-2);
}

.scene-story-number {
    display: inline-block;
    padding: var(--tk-space-1) var(--tk-space-2);
    margin-bottom: var(--tk-space-3);
    font-family: var(--tk-font-mono);
    font-size: var(--tk-font-size-xs);
    font-weight: var(--tk-font-weight-semibold);
    line-height: var(--tk-line-height-none);
    color: var(--tk-color-primary-text);
    background-color: var(--tk-color-primary-soft);
    border-radius: var(--tk-radius-sm);
}

.scene-story-step {
    display: flex;
    align-items: flex-start;
    min-height: var(--tk-scene-step-height);
}

@media (min-width: 1024px) {
    .scene-story {
        grid-template-columns: var(--tk-scene-story-columns);
        align-items: start;
    }

    .scene-story-stage {
        order: 2;
        top: var(--tk-scene-sticky-top);
        height: auto;
        padding-block: 0;
        background-color: transparent;
    }

    .scene-story-stage .scene,
    .scene-story-stage .scene-svg {
        height: auto;
    }

    .scene-story-step {
        align-items: center;
        min-height: var(--tk-scene-step-height-wide);
    }

    .scene-story-card {
        flex-grow: 0;
        max-width: var(--tk-size-step-card);
    }

}