/* App demonstration palette. These are decorative illustrations, not app screenshots. */
:root {
  --demo-sky:oklch(83% .055 232);--demo-sun:oklch(86% .13 85);
  --demo-hill-back:oklch(55% .065 175);--demo-hill-front:oklch(42% .055 174);
  --demo-leaf:oklch(56% .11 155);--demo-pot:oklch(72% .15 48);
  --demo-pot-rim:oklch(81% .13 55);--demo-river:oklch(74% .045 230);
  --demo-cover-blue:oklch(47% .065 243);--demo-cover-violet:oklch(51% .085 305);
  --demo-cover-rose:oklch(62% .11 18);--demo-cover-light:oklch(88% .04 82);
  --demo-dark:oklch(24% .02 230);--demo-white:oklch(97% .01 90);
  --demo-duration:4800ms;
}
.card-art.app-demo {
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  min-width:0;gap:0;padding:clamp(14px,2vw,24px);isolation:isolate;
  background:var(--color-paper-3);color:var(--color-ink);
}
.app-card .card-art.app-demo,.detail-hero .card-art.app-demo {background:var(--color-paper-3)}
/* Product objects float on the page; the demonstration retains its own content. */
html[data-public-page] .app-card .card-art.app-demo {
  background:var(--color-clear);padding:var(--space-sm) 0;gap:var(--space-md);
}
html[data-public-page] .app-card .card-art.app-demo::before {
  content:"";position:absolute;inset:5% -4%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--color-ambient-brand),var(--color-clear) 68%);
}
html[data-public-page] .app-card .app-demo .demo-heading {display:none}
html[data-public-page] .app-card .app-demo .demo-scene {flex:none;max-height:none;filter:drop-shadow(0 16px 22px var(--color-shadow-space))}
html[data-public-page] .app-card .app-demo .demo-caption>span {color:var(--color-muted)}
html[data-public-page] .app-card .app-demo.demo-started {
  animation:showcase-float var(--demo-duration) var(--ease-in-out) 1 both paused;
}
html[data-public-page] .app-card .app-demo.demo-started.demo-running {animation-play-state:running}
@keyframes showcase-float {
  0%,100% {transform:translateY(0)}
  45% {transform:translateY(-6px)}
}
.demo-heading {display:flex;align-items:center;gap:8px;min-height:26px;flex:none;font:500 11px/1.4 var(--font-body);color:var(--color-muted)}
.demo-heading img {width:20px;height:20px;object-fit:contain;flex:none}
.demo-sequence-count {margin-left:auto;color:var(--color-muted);font:10px/1.4 var(--font-mono);flex:none}
.demo-scene {display:block;width:100%;height:auto;flex:1;min-height:0;max-height:310px;overflow:visible}
.demo-caption {display:grid;place-items:center;flex:none;min-height:24px;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.demo-caption>span {font-size:11px;font-weight:500;color:var(--color-ink)}
.demo-scene text {font:500 10px var(--font-body);fill:var(--color-ink);letter-spacing:0}
.demo-sky {fill:var(--demo-sky)}.demo-sun {fill:var(--demo-sun)}
.demo-hill-back {fill:var(--demo-hill-back)}.demo-hill-front {fill:var(--demo-hill-front)}
.demo-checker-base {fill:var(--color-paper-2)}.demo-checker-alt {fill:var(--color-rule);opacity:.6}
.demo-shadow {fill:var(--demo-dark);opacity:.14}
.demo-stem {fill:none;stroke:var(--demo-hill-front);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.demo-leaf {fill:var(--demo-leaf)}.demo-pot {fill:var(--demo-pot)}.demo-pot-rim {fill:var(--demo-pot-rim)}
.demo-subject-outline {fill:none;stroke:var(--color-accent);stroke-width:1.5;stroke-dasharray:5 5;opacity:.85}
.demo-scan-line,.demo-clean-sweep {stroke:var(--color-accent);fill:var(--color-accent);stroke-width:2;opacity:0}
.demo-remove-background,.demo-before-label {opacity:0}
.demo-after-label {opacity:1}.demo-label-bg {fill:var(--color-paper-2)}
.demo-scene .demo-after-label text {font-size:8.5px}
.demo-river {fill:var(--demo-river)}
.demo-caption-bg {fill:var(--demo-dark);opacity:.8}
.demo-scene .demo-caption-text {fill:var(--demo-white);font-size:12px;font-weight:600}
.demo-caption-original,.demo-caption-selection {opacity:0}
.demo-caption-selection {fill:none;stroke:var(--color-accent);stroke-width:2;stroke-dasharray:6 4}
.demo-success-disc {fill:var(--color-accent)}
.demo-check {fill:none;stroke:var(--color-accent-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.demo-workflow-line {fill:none;stroke:var(--color-rule);stroke-width:2;stroke-dasharray:5 4}
.demo-workflow-lane {fill:var(--color-paper-2);stroke:var(--color-rule);stroke-width:1}
.demo-scene .demo-lane-number {font:10px var(--font-mono);fill:var(--color-muted)}
.demo-scene .demo-lane-title {font-size:10px}
.demo-task-card {transform:translateX(232px)}
.demo-task-shadow {fill:var(--demo-dark);opacity:.12}
.demo-task-paper {fill:var(--color-accent)}
.demo-task-image {fill:var(--color-accent-ink);opacity:.12}
.demo-task-play {fill:var(--color-accent-ink)}
.demo-task-lines {fill:none;stroke:var(--color-accent-ink);stroke-width:3;stroke-linecap:round;opacity:.6}
.demo-task-done {opacity:1}
.demo-media-track {fill:var(--demo-dark);opacity:.35}
.demo-media-progress {fill:var(--color-accent);transform:scaleX(.9);transform-origin:57px 157px}
.demo-media-playhead {fill:var(--color-accent);stroke:var(--color-paper-2);stroke-width:2;transform:translateX(257.4px)}
.demo-bird {fill:none;stroke:var(--demo-dark);stroke-width:2;stroke-linecap:round;transform:translate(70px,-10px)}
.demo-wave {fill:var(--color-accent);transform-box:fill-box;transform-origin:center;transform:scaleY(.55);opacity:.8}
.demo-anime-scene {display:flex;flex-direction:column;justify-content:center;gap:12px;max-height:none;padding:16px 0;flex:1}
.demo-anime-posters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,18px);align-items:start}
.demo-anime-poster {min-width:0;margin:0;opacity:1;transform:translateY(0)}
.demo-anime-poster a {display:block;color:var(--color-ink);text-decoration:none;border-radius:8px}
.demo-anime-poster a:focus-visible {outline:2px solid var(--color-accent);outline-offset:5px}
.demo-anime-visual {position:relative}
.demo-anime-poster img {display:block;width:100%;height:auto;object-fit:contain;border-radius:8px;background:var(--color-paper-2);box-shadow:0 5px 16px color-mix(in oklch,var(--color-ink) 13%,transparent)}
.demo-anime-selection {position:absolute;inset:-3px;border:2px solid var(--color-accent);border-radius:11px;pointer-events:none;opacity:0}
.demo-anime-poster[data-anime-rank="3"] .demo-anime-selection {opacity:1}
.demo-anime-save {position:absolute;top:7px;right:7px;display:grid;place-items:center;width:24px;height:28px;border-radius:5px;background:var(--color-accent);color:var(--color-accent-ink);opacity:1;box-shadow:0 2px 8px color-mix(in oklch,var(--demo-dark) 25%,transparent)}
.demo-anime-save svg {width:15px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.demo-started .demo-anime-poster[data-anime-rank="1"] .demo-anime-selection {animation-name:demo-anime-select-first}
.demo-started .demo-anime-poster[data-anime-rank="2"] .demo-anime-selection {animation-name:demo-anime-select-second}
.demo-started .demo-anime-poster[data-anime-rank="3"] .demo-anime-selection {animation-name:demo-anime-select-third}
.demo-started .demo-anime-save {animation-name:demo-anime-save}
@keyframes demo-anime-select-first {0%,7%{opacity:0}16%,27%{opacity:1}37%,100%{opacity:0}}
@keyframes demo-anime-select-second {0%,29%{opacity:0}39%,50%{opacity:1}60%,100%{opacity:0}}
@keyframes demo-anime-select-third {0%,53%{opacity:0}66%,100%{opacity:1}}
@keyframes demo-anime-save {0%,64%{opacity:0;transform:translateY(-3px)}80%,100%{opacity:1;transform:translateY(0)}}
.demo-anime-poster figcaption {display:flex;align-items:baseline;gap:5px;margin-top:9px;font:500 clamp(10px,.9vw,12px)/1.45 var(--font-body);overflow-wrap:anywhere}
.demo-anime-rank {flex:none;font:10px/1.4 var(--font-mono);color:var(--color-accent)}
.demo-anime-source {margin:0;text-align:center;font:10px/1.5 var(--font-body);color:var(--color-muted)}
.demo-anime-source a {color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:45rem) {
  html[data-public-page] .app-card .card-art.anime-art.app-demo {height:auto;min-height:0}
  .demo-anime-scene {padding:12px 0;flex:none}
}
.demo-studio-tile,.demo-library {fill:var(--color-paper-2);stroke:var(--color-rule);stroke-width:1}
.demo-scene .demo-studio-title {font-size:11px;font-weight:600}
.demo-studio-wave {fill:none;stroke:var(--color-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.demo-studio-music {stroke:var(--demo-pot)}
.demo-studio-branch {fill:none;stroke:var(--color-muted);stroke-width:1.5;opacity:.6;stroke-linejoin:round}
.demo-scene .demo-studio-track-label {font-size:8px;fill:var(--color-muted)}
.demo-studio-handle {fill:none;stroke:var(--color-rule);stroke-width:1;stroke-dasharray:3 3}
.demo-studio-curve {fill:none;stroke:var(--color-accent);stroke-width:2.5}
.demo-studio-keyframe {fill:var(--color-accent);transform:translate(91px,-50px)}
.demo-studio-layer-back {fill:var(--color-rule)}.demo-studio-layer-mid {fill:var(--color-muted)}.demo-studio-layer-front {fill:var(--color-accent)}
.demo-studio-hub {fill:var(--color-accent)}
.demo-scene .demo-studio-hub-label {fill:var(--color-accent-ink);font-size:11px;font-weight:600}
.demo-studio-node {fill:var(--color-paper-3);stroke:var(--color-rule);stroke-width:1}
.demo-studio-node-icon {fill:none;stroke:var(--color-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-studio-node-play {fill:var(--color-accent)}
.demo-library-folder {fill:var(--color-accent);opacity:.75}
.demo-library-file {fill:var(--color-paper-3);stroke:var(--color-rule);stroke-width:1}
.demo-library-file-icon {fill:var(--color-muted)}
.demo-library-file-line {fill:none;stroke:var(--color-muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.demo-speed-label {fill:var(--color-paper-3)}
.demo-scene .demo-speed-text {fill:var(--color-accent);font-size:12px;font-weight:600}
.demo-library-to-editor {fill:none;stroke:var(--color-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-editor-target {fill:var(--color-paper-2);stroke:var(--color-accent);stroke-width:1.2;stroke-dasharray:5 4}
.demo-scene .demo-editor-label {font-size:11px;fill:var(--color-muted)}
.demo-editor-tracks {fill:none;stroke:var(--color-rule);stroke-width:4;stroke-linecap:round}
.demo-media-asset {fill:var(--color-accent);stroke:var(--color-paper-2);stroke-width:2}
.demo-media-asset-play {fill:var(--color-accent-ink)}
.demo-drag-pointer {fill:var(--color-ink);stroke:var(--color-paper-2);stroke-width:1.5;stroke-linejoin:round}
.demo-media-drag {opacity:0;transform:translate(282px,47px)}
.demo-studio-step {display:none}
.demo-studio-step.is-active {display:inline}
.demo-voice-source,.demo-voice-track {fill:var(--color-paper-2);stroke:var(--color-rule);stroke-width:1.3}
.demo-scene .demo-voice-source-label {font-size:12px;fill:var(--color-muted)}
.demo-scene .demo-voice-track-label {font-size:12px;font-weight:600;fill:var(--color-ink)}
.demo-voice-wave {stroke-width:2.5}
.demo-voice-branch {stroke-width:2}
.demo-ae-grid {fill:none;stroke:var(--color-rule);stroke-width:1;stroke-dasharray:3 5}
.demo-ae-curve-track {fill:none;stroke:var(--color-accent);stroke-width:3;opacity:.2}
.demo-ae-curve {stroke-width:3;stroke-dasharray:100;stroke-dashoffset:0}
.demo-ae-handles {fill:none;stroke:var(--color-muted);stroke-width:1.4;stroke-dasharray:4 4}
.demo-ae-anchor,.demo-ae-keyframe {fill:var(--color-accent)}
/* Use the exact SVG Bézier, with the same progress as the curve reveal. */
.demo-ae-keyframe {offset-path:path('M48 174C148 174 107 54 218 54');offset-rotate:0deg;offset-anchor:center;transform-box:fill-box;offset-distance:100%}
.demo-ae-layer-content {fill:none;stroke:var(--color-accent-ink);stroke-width:4;stroke-linecap:round;opacity:.65}
.demo-scene .demo-ae-title {font-size:12px;fill:var(--color-muted)}
.app-demo.studio-art.studio-feature-fading > :is(.demo-heading,.demo-scene,.demo-caption),
.studio-feature-copy.studio-feature-fading {
  animation:studio-feature-fade-out 220ms ease-in both;animation-play-state:paused;
}
.app-demo.studio-art.studio-feature-entering > :is(.demo-heading,.demo-scene,.demo-caption),
.studio-feature-copy.studio-feature-entering {
  animation:studio-feature-fade-in 220ms ease-out both;animation-play-state:paused;
}
.app-demo.studio-art.demo-running.studio-feature-fading > :is(.demo-heading,.demo-scene,.demo-caption),
.app-demo.studio-art.demo-running.studio-feature-entering > :is(.demo-heading,.demo-scene,.demo-caption),
.studio-feature-copy[data-studio-motion="running"].studio-feature-fading,
.studio-feature-copy[data-studio-motion="running"].studio-feature-entering {animation-play-state:running}

/* A single short sequence. Pausing never advances to a false completion frame. */
.app-demo.demo-started .demo-motion {animation-duration:var(--demo-duration);animation-timing-function:ease-in-out;animation-iteration-count:1;animation-fill-mode:both;animation-play-state:paused}
.app-demo.demo-started.demo-running .demo-motion {animation-play-state:running}
.app-demo[data-app-demo="studio"].demo-started .demo-studio-step:not(.is-active) .demo-motion {animation:none}
.demo-started .demo-remove-background {animation-name:demo-remove-background}
.demo-started .demo-subject-outline {animation-name:demo-subject-outline}
.demo-started .demo-scan-line {animation-name:demo-scan-line}
.demo-started .demo-before-label {animation-name:demo-before-label}
.demo-started .demo-after-label {animation-name:demo-after-label}
.demo-started .demo-caption-original {animation-name:demo-caption-original}
.demo-started .demo-caption-selection {animation-name:demo-caption-selection}
.demo-started .demo-clean-sweep {animation-name:demo-clean-sweep}
.demo-started .demo-clean-done {animation-name:demo-clean-done}
.demo-started .demo-task-card {animation-name:demo-task-card}
.demo-started .demo-task-done {animation-name:demo-task-done}
.demo-started .demo-media-progress {animation-name:demo-media-progress}
.demo-started .demo-media-playhead {animation-name:demo-media-playhead}
.demo-started .demo-bird {animation-name:demo-bird}
.demo-started .demo-wave {animation-name:demo-wave}
.demo-started .demo-day-focus {animation-name:demo-day-focus}
.demo-started .demo-cover-save {animation-name:demo-cover-save}
.demo-started .demo-bookmark {animation-name:demo-bookmark}
.demo-started .demo-studio-audio-output {animation-name:demo-studio-audio-output}
.demo-started .demo-studio-keyframe {animation-name:demo-studio-keyframe}
.demo-started .demo-studio-layers {animation-name:demo-studio-layers}
.demo-started .demo-studio-hub-nodes {animation-name:demo-studio-hub-nodes}
.demo-started .demo-media-drag {animation-name:demo-media-drag}
.demo-started .demo-media-dropped {animation-name:demo-media-dropped}
.demo-started .demo-ae-keyframe {animation-name:demo-ae-keyframe}
.demo-started .demo-ae-curve {animation-name:demo-ae-curve-reveal}
@keyframes demo-remove-background {0%,18%{opacity:1}66%,100%{opacity:0}}
@keyframes demo-subject-outline {0%,18%{opacity:0}32%,100%{opacity:.85}}
@keyframes demo-scan-line {0%,18%{opacity:0;transform:translateX(0)}22%{opacity:1;transform:translateX(0)}65%{opacity:1;transform:translateX(280px)}70%,100%{opacity:0;transform:translateX(280px)}}
@keyframes demo-before-label {0%,24%{opacity:1}45%,100%{opacity:0}}
@keyframes demo-after-label {0%,59%{opacity:0}74%,100%{opacity:1}}
@keyframes demo-caption-original {0%,39%{opacity:1}70%,100%{opacity:0}}
@keyframes demo-caption-selection {0%,10%{opacity:0}20%,69%{opacity:1}82%,100%{opacity:0}}
@keyframes demo-clean-sweep {0%,31%{opacity:0;transform:translateX(0)}36%{opacity:1;transform:translateX(0)}68%{opacity:1;transform:translateX(194px)}74%,100%{opacity:0;transform:translateX(194px)}}
@keyframes demo-clean-done {0%,72%{opacity:0}87%,100%{opacity:1}}
@keyframes demo-task-card {0%,17%{transform:translateX(0)}36%,53%{transform:translateX(116px)}77%,100%{transform:translateX(232px)}}
@keyframes demo-task-done {0%,76%{opacity:0}90%,100%{opacity:1}}
@keyframes demo-media-progress {from{transform:scaleX(.08)}to{transform:scaleX(.9)}}
@keyframes demo-media-playhead {from{transform:translateX(22.88px)}to{transform:translateX(257.4px)}}
@keyframes demo-bird {from{transform:translate(-28px,8px)}to{transform:translate(70px,-10px)}}
@keyframes demo-wave {0%,100%{transform:scaleY(.55)}18%{transform:scaleY(.9)}35%{transform:scaleY(.4)}53%{transform:scaleY(1)}72%{transform:scaleY(.5)}87%{transform:scaleY(.8)}}
@keyframes demo-day-focus {0%,15%{transform:translateX(0)}38%,100%{transform:translateX(132px)}}
@keyframes demo-cover-save {0%,49%{transform:translateY(0)}70%,100%{transform:translateY(-5px)}}
@keyframes demo-bookmark {0%,62%{opacity:0;transform:translateY(-5px)}83%,100%{opacity:1;transform:translateY(0)}}
@keyframes demo-studio-audio-output {0%,14%{opacity:.15;transform:translateX(-7px)}45%,100%{opacity:1;transform:translateX(0)}}
@keyframes demo-studio-keyframe {0%,20%{transform:translate(0,0)}40%{transform:translate(35px,-12px)}62%{transform:translate(56px,-38px)}80%,100%{transform:translate(91px,-50px)}}
@keyframes demo-studio-layers {0%,35%{opacity:.3;transform:translateY(5px)}72%,100%{opacity:1;transform:translateY(0)}}
@keyframes demo-studio-hub-nodes {0%,48%{opacity:.25}82%,100%{opacity:1}}
@keyframes demo-media-drag {0%,24%{opacity:0;transform:translate(0,0)}32%{opacity:1;transform:translate(0,0)}73%{opacity:1;transform:translate(282px,47px)}84%,100%{opacity:0;transform:translate(282px,47px)}}
@keyframes demo-media-dropped {0%,72%{opacity:0}85%,100%{opacity:1}}
@keyframes demo-ae-keyframe {0%,12%{offset-distance:0%}88%,100%{offset-distance:100%}}
@keyframes demo-ae-curve-reveal {0%,12%{stroke-dashoffset:100}88%,100%{stroke-dashoffset:0}}
@keyframes studio-feature-fade-out {from{opacity:1}to{opacity:0}}
@keyframes studio-feature-fade-in {from{opacity:0}to{opacity:1}}
@media(max-width:30rem) {
  .card-art.app-demo {padding:12px}
  .demo-heading {font-size:10px;min-height:23px}.demo-heading img{width:18px;height:18px}
  .demo-caption>span {font-size:10px}
  .demo-caption {min-height:24px}
}
@media(prefers-reduced-motion:reduce) {
  .app-demo .demo-motion {animation:none!important}
  html[data-public-page] .app-card .app-demo.demo-started {animation:none}
}