:root {
  --rainbow:linear-gradient(180deg,#68a561 0 16.66%,#e5c351 16.66% 33.33%,#df9447 33.33% 50%,#cf6358 50% 66.66%,#9d719c 66.66% 83.33%,#5b82b2 83.33% 100%);
}
.hero { padding-top:64px; padding-bottom:52px; }
.hero h1 { font-weight:600; }
.hero:before { content:""; position:absolute; inset:0; pointer-events:none; background:url('/sylloro/assets/noise.svg'); opacity:.2; z-index:-1; }
.archive-label { font-family:"Courier New",monospace; font-weight:400; letter-spacing:.01em; }
.spectrum-chip { width:19px; height:15px; display:inline-block; background:var(--rainbow); }
.story {
  height:510svh; position:relative; isolation:isolate;
  --app:0; --drop:0; --confirm:0; --processing:0; --result:0; --export:0;
  --file-opacity:1; --cursor-opacity:0; --story-progress:0;
}
.story .story-sticky {
  position:sticky; top:0; height:100svh; min-height:0; max-height:none;
  display:flex; flex-direction:column; overflow:hidden;
  background:#f5f5f1;
}
.story-sticky:before { content:""; position:absolute; inset:0; z-index:0; background:url('/sylloro/assets/noise.svg'); opacity:.16; pointer-events:none; }
.story .story-top { position:relative; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding-top:26px; z-index:4; gap:30px; }
.story .story-top h2 { font-size:32px; letter-spacing:-.04em; margin-top:9px; }
.story .story-top .eyebrow { font-size:11px; }
.story .demo-label { font-size:11px; line-height:1.8; text-align:right; max-width:280px; color:#5e687b; }
.demo-label>span { display:block; color:#5e687b; }
.machine-stage { position:relative; flex:1; min-height:0; width:100%; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; perspective:2200px; perspective-origin:50% 48%; }
.spectrum-field { position:absolute; top:calc(49% + var(--beam-y,0px)); left:-25%; width:150%; height:142px; transform:rotate(-18deg); background:var(--rainbow); opacity:.18; mask-image:linear-gradient(90deg,transparent,#000 24%,#000 75%,transparent); pointer-events:none; }
.mac-shadow { position:absolute; top:calc(50% + 245px); left:50%; width:610px; height:44px; background:radial-gradient(ellipse,#22251f28,transparent 70%); transform:translateX(-50%); opacity:var(--shadow,.4); }
.story .mac-scene { position:relative; width:520px; height:578px; zoom:1; transform-style:preserve-3d; transform-origin:50% 210px; transform:translateY(200px) rotateX(53deg) rotateY(-126deg) rotateZ(-8deg) scale(3); will-change:auto; }
.story.is-visible .mac-scene { will-change:transform; }
.macintosh { position:absolute; inset:0; transform-style:preserve-3d; }
.mac-front,.mac-back,.mac-side,.mac-top,.mac-bottom { position:absolute; backface-visibility:hidden; }
.mac-front {
  inset:0; transform:translateZ(150px); border-radius:20px 20px 12px 12px;
  background:linear-gradient(112deg,#f2efdf,#e1ddc9 35%,#e8e4d2 65%,#cfcbb8);
  box-shadow:inset 3px 3px 4px #fbfbfbb0,inset -5px -3px 8px #88888850,inset 0 0 0 2px #b2b2b2;
  overflow:hidden;
}
.mac-front:after,.mac-back:after,.mac-top:after,.mac-side:after { content:""; position:absolute; inset:0; border-radius:inherit; background:url('/sylloro/assets/noise.svg'); opacity:.45; pointer-events:none; }
.mac-back { inset:0; transform:translateZ(-150px) rotateY(180deg); border-radius:0; background:linear-gradient(115deg,#d7d2bc,#e6e0ca 45%,#b9b49f); box-shadow:inset 3px 3px 5px #ffffff66,inset -4px -3px 8px #72727260; }
.rear-handle { position:absolute; top:30px; left:143px; width:226px; height:45px; border-radius:9px 9px 17px 17px; background:linear-gradient(#686958,#a9a48e); box-shadow:inset 0 5px 7px #38383890,0 2px 1px #ffffff55; border:9px solid #c9c3aa; }
.rear-vents { position:absolute; top:114px; left:44px; right:44px; height:146px; border-radius:5px; background:repeating-linear-gradient(0deg,#6f715e 0 2px,#d5cfb6 2px 10px); box-shadow:inset 0 2px 3px #6c6c6c50; }
.rear-label { position:absolute; top:310px; left:115px; right:115px; padding:19px; border:1px solid #a6a18d; background:#ded8bf; font-family:"Courier New",monospace; font-size:16px; color:#545848; text-align:center; }
.rear-label>span { display:block; font-size:7px; margin-top:8px; }
.rear-pixels { height:24px; margin:15px auto 0; width:105px; background:repeating-linear-gradient(90deg,#696b58 0 1px,transparent 1px 3px,#696b58 3px 5px,transparent 5px 8px); opacity:.7; }
.rear-ports { position:absolute; bottom:45px; left:64px; right:64px; height:30px; display:flex; justify-content:space-between; }
.rear-ports>i { width:78px; height:16px; border:4px solid #8d8b76; border-radius:4px; background:repeating-linear-gradient(90deg,#373e34 0 2px,#b0ad93 2px 6px); }
.mac-side { top:0; height:578px; width:300px; border-radius:0; background:linear-gradient(90deg,#b8b49f,#ddd8c0 50%,#c1bca7); }
.mac-side:before { content:""; position:absolute; top:87px; left:34px; width:220px; height:220px; border-radius:3px; background:repeating-linear-gradient(0deg,#7b7e6970 0 2px,transparent 2px 9px); }
.mac-right { left:520px; transform-origin:left center; transform:translateZ(150px) rotateY(90deg); }
.mac-left { left:0; transform-origin:left center; transform:translateZ(-150px) rotateY(-90deg); }
.mac-top { top:0; left:0; width:520px; height:300px; transform-origin:center top; transform:translateZ(-150px) rotateX(90deg); border-radius:0; background:linear-gradient(#d0cab2,#e8e2cc); box-shadow:inset 2px 2px 4px #fdfdfda0; }
.top-vents { position:absolute; left:43px; right:43px; top:42px; height:80px; border-radius:3px; background:repeating-linear-gradient(0deg,#989680 0 2px,#d0cbb4 2px 9px); }
.mac-top>span { position:absolute; bottom:30px; right:40px; color:#817e69; font-family:Georgia,serif; font-style:italic; font-size:24px; letter-spacing:-1px; }
.mac-bottom { left:0; top:578px; width:520px; height:300px; transform-origin:center top; transform:translateZ(150px) rotateX(-90deg); background:#a5a28f; border-radius:8px; }
.screen-recess { position:absolute; z-index:1; top:39px; left:37px; right:37px; height:330px; border-radius:23px; padding:15px; background:linear-gradient(130deg,#969483,#c6c2af 45%,#f4f0e0); box-shadow:inset 3px 4px 6px #6c6c6c75,1px 2px 1px #fefefe8f; }
.screen-glass { height:100%; border-radius:15px; overflow:hidden; position:relative; background:#c0c5ba; box-shadow:0 0 0 3px #4f4f4f; }
.screen-glass:after { content:""; position:absolute; z-index:20; inset:0; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 5px #1a1a1a60; }
.retro-desktop { position:relative; height:100%; background:#c7c9c4; background-image:repeating-conic-gradient(#adb1ab 0% 25%,transparent 0% 50%); background-size:3px 3px; font-family:"Courier New",monospace; color:#22271f; }
.retro-menubar { display:flex; align-items:center; gap:13px; padding:0 9px; height:19px; background:#f6f6ec; border-bottom:1px solid #34392e; font-size:9px; }
.retro-menubar>b:first-child { font-size:16px; }
.retro-menubar>i { margin-left:auto; font-size:8px; font-style:normal; }
.desktop-icon { position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:8px; }
.desktop-icon>span,.demo-file>span,.retro-trash>span { background:#e8e9df; padding:1px 3px; white-space:nowrap; }
.disk { right:14px; top:31px; }
.disk>svg { width:26px; height:28px; fill:#f0f0e6; }
.launch-icon { left:30px; top:64px; }
.launch-icon img { object-fit:contain; }
.demo-file { position:absolute; z-index:8; left:5px; top:172px; display:flex; flex-direction:column; align-items:center; gap:5px; opacity:var(--file-opacity); transform:translate(var(--file-x,0px),var(--file-y,0px)) scale(var(--file-scale,1)); }
.demo-file>svg { width:28px; height:35px; fill:#f6f7f3; stroke:#495057; stroke-width:1; }
.demo-file>span { font-size:6px; }
.retro-trash { position:absolute; bottom:12px; right:19px; display:flex; align-items:center; flex-direction:column; gap:4px; font-size:7px; }
.retro-trash>svg { width:23px; height:25px; fill:#f0f0e6; }
.native-app { position:absolute; inset:calc(19px + (1 - var(--window-expanded,0))*15px) calc((1 - var(--window-expanded,0))*8px) calc((1 - var(--window-expanded,0))*16px) calc((1 - var(--window-expanded,0))*80px); background:#f3f4f8; opacity:var(--app); transform:translateY(calc((1 - var(--app))*15px)) scale(calc(.87 + var(--app)*.13)); transform-origin:15% 15%; overflow:hidden; }
.capture-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.native-home { opacity:1; }
.native-drop { opacity:var(--drop); }
.native-confirm { opacity:var(--confirm); }
.native-processing { position:absolute; inset:0; opacity:var(--processing); }
.native-result { opacity:var(--result); }
.native-export { opacity:var(--export); }
.demo-cursor { position:absolute; z-index:12; width:15px; height:20px; left:var(--cursor-x,70px); top:var(--cursor-y,90px); opacity:var(--cursor-opacity); filter:drop-shadow(0 1px 1px #17223a30); }
.cursor-click { position:absolute; z-index:11; width:20px; height:20px; border-radius:50%; border:1px solid #174bdf; left:var(--cursor-x,70px); top:var(--cursor-y,90px); transform:translate(-50%,-50%) scale(var(--click-scale,0)); opacity:var(--click-opacity,0); }
.machine-chin { position:absolute; top:407px; left:42px; right:39px; height:100px; }
.vintage-mark { display:flex; align-items:center; gap:9px; color:#535348; font:14px "Courier New",monospace; }
.vintage-mark>span { display:block; width:14px; height:16px; border-radius:3px 3px 6px 6px; background:var(--rainbow); }
.vintage-mark>b { font-weight:400; }
.floppy-slot { position:absolute; top:7px; right:0; width:147px; height:7px; border-radius:1px; background:#54584d; box-shadow:0 2px 1px #fdfdfd,inset 0 2px 2px #00000099; }
.floppy-slot>i { position:absolute; right:20px; top:-3px; width:22px; height:14px; border-radius:2px; background:#4b5148; box-shadow:inset 1px 2px 1px #33333388,0 1px 1px #f2f2f2; }
.speaker-grille { position:absolute; top:49px; left:0; width:62px; height:47px; border-radius:2px; background:repeating-linear-gradient(90deg,#7b7b69 0 1px,#dedac6 1px 4px); opacity:.6; }
.machine-foot { position:absolute; bottom:0; left:0; right:0; height:24px; border-top:1px solid #c0bba7; display:flex; align-items:center; justify-content:space-between; padding:0 25px; color:#73715e; font:6px "Courier New",monospace; }
.story .era-left { display:none; }
.story .era-right { position:relative; inset:auto; flex-shrink:0; width:100%; min-height:44px; margin:0; text-align:center; display:flex; justify-content:center; align-items:center; gap:13px; z-index:4; background:#f5f5f1; padding:8px 20px; }
.step-number { color:var(--blue); font:11px "Courier New",monospace; white-space:nowrap; }
.step-heading { color:var(--ink); font-size:17px; letter-spacing:-.025em; }
.story .step-description { display:none; }
.story .story-controls { --controls-inset:max(20px,calc((100% - 1160px)/2)); position:relative; width:100%; margin-inline:0; padding:12px var(--controls-inset) 23px; flex-shrink:0; z-index:5; background:#f5f5f1; }
.step-tabs { display:flex; justify-content:center; align-items:center; gap:26px; }
.step-tabs>button { border:0; background:none; padding:10px 0; min-height:44px; color:var(--muted); font-size:12px; cursor:pointer; transition:color .22s; }
.step-tabs>button>span { margin-right:6px; font:11px "Courier New",monospace; }
.step-tabs>button[aria-pressed=true],.step-tabs>button:hover { color:var(--blue); }
.story-progress { height:1px; max-width:650px; margin:3px auto 0; background:#d9dedf; }
.story-progress>i { display:block; height:1px; background:var(--blue); transform:scaleX(var(--story-progress)); transform-origin:left; }
.story .scroll-hint { font-size:12px; color:var(--muted); text-align:center; margin-top:14px; }
.scroll-hint>span { color:var(--blue); padding-left:7px; }
.story .skip-demo { position:absolute; bottom:25px; right:var(--controls-inset); display:block; margin:0; font-size:12px; color:var(--muted); }
.skip-demo:hover { color:var(--blue); }
.skip-demo>span { padding-left:5px; }
.story:not([data-ready]) { height:auto; --app:1; --result:1; --file-opacity:0; }
.story:not([data-ready]) .story-sticky { position:relative; height:850px; }
.story:not([data-ready]) .mac-scene { transform:translateY(10px) scale(.92); }
.story:not([data-ready]) .step-tabs,.story:not([data-ready]) .scroll-hint,.story:not([data-ready]) .era-right { display:none; }

/* The print-like treatments stay on the site and hardware, never on the app captures. */
.feature-editor>img { border-radius:10px; }
.privacy-section { background:#eff0ec; }
.privacy-art { isolation:isolate; }
.privacy-spectrum { position:absolute; width:130%; height:100px; background:var(--rainbow); transform:rotate(-25deg); opacity:.3; z-index:-1; mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent); }
.orbit { border-style:dotted; border-color:#c6cbbf; }
.orbit-label { background:#eff0ec; }
.private-tile { background:linear-gradient(135deg,#fffffff0,#f3f3e1c0); }
.use-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:20px; }
.use-grid article { min-width:0; border-radius:4px; padding:30px; }
.use-grid h3 { font-size:32px; }
.use-grid article:nth-child(3) { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; position:relative; }
.use-grid article:nth-child(3) .use-top,.use-grid article:nth-child(3) h3,.use-grid article:nth-child(3)>p,.use-grid article:nth-child(3) .use-tag { grid-column:1; }
.use-grid article:nth-child(3) .use-visual { grid-column:2; grid-row:1/5; margin:0; min-height:260px; }
.use-visual { position:relative; overflow:hidden; height:210px; margin-top:27px; background:#182b42; }
.use-visual>img { width:100%; height:100%; object-fit:cover; }
.use-visual>span { position:absolute; bottom:15px; left:17px; font:11px "Courier New",monospace; color:#eef0f2; }
.tape-visual { display:grid; place-items:center; background:#e1dcca; }
.tape-visual:after,.ascii-visual:after { content:""; position:absolute; inset:0; background:url('/sylloro/assets/noise.svg'); opacity:.5; pointer-events:none; }
.tape-visual>span { color:#4f584b; }
.ascii-visual { background:#dce0d2; display:flex; align-items:center; justify-content:center; }
.ascii-visual>pre { position:relative; z-index:1; font:18px/1.9 "Courier New",monospace; color:#314538; letter-spacing:-.6px; }
.ascii-visual>pre>b { font-weight:400; color:var(--blue); }
.ascii-spectrum { position:absolute; height:85px; left:-20%; width:140%; bottom:18px; background:var(--rainbow); transform:rotate(-21deg); opacity:.22; }
.paper-front { padding:0; overflow:hidden; }
.paper-front>img { width:100%; height:100%; object-fit:contain; display:block; }
.export-sticker { color:#68758a; }
.release-panel { background:linear-gradient(120deg,#edf0f4,#f1f2ed 60%,#e9edf2); }
.release-panel:after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; opacity:.7; background:linear-gradient(90deg,#68a561 0 16.66%,#e5c351 16.66% 33.33%,#df9447 33.33% 50%,#cf6358 50% 66.66%,#9d719c 66.66% 83.33%,#5b82b2 83.33%); }

@media(max-width:1100px) {
  .story .skip-demo { position:relative; text-align:center; bottom:auto; right:auto; padding-top:14px; }
  .story .story-controls { padding-bottom:16px; }
  .use-grid h3 { font-size:28px; }
  .use-grid article:nth-child(3) { gap:0 28px; }
}
@media(max-width:800px) {
  .story .story-top { padding-top:22px; }
  .story .story-top h2 { font-size:27px; }
  .story .mac-scene { zoom:1; }
  .story .era-right { bottom:0; }
  .use-grid article { padding:23px; }
  .use-grid h3 { font-size:25px; }
  .use-visual { height:175px; }
    .ascii-visual>pre { font-size:13px; }
}
@media(max-width:560px) {
  .hero { padding-top:46px; padding-bottom:37px; }
  .story { height:480svh; }
  .story .story-sticky { height:100svh; min-height:0; }
  .story .story-top { display:block; padding-top:22px; }
  .story .story-top h2 { font-size:25px; margin-top:8px; }
  .story .story-top .archive-label { font-size:11px; }
  .story .demo-label { display:block; text-align:left; max-width:none; margin-top:7px; font-size:11px; line-height:1.5; }
  .demo-label>span { display:inline; }
  .story .mac-scene { zoom:1; }
  .story .era-right { padding:9px 12px; gap:8px; }
  .step-heading { font-size:14px; }
  .step-number { font-size:11px; }
  .story .step-tabs { gap:0; justify-content:space-between; }
  .step-tabs>button { font-size:clamp(9px,2.8vw,11px); padding:6px 0; }
  .step-tabs>button>span { display:block; margin:0 0 6px; font-size:11px; }
  .story .story-controls { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding-top:8px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .story .step-tabs { grid-column:1/-1; grid-row:1; }
  .story .story-progress { grid-column:1/-1; grid-row:2; width:100%; }
  .story .scroll-hint { grid-column:1/-1; grid-row:4; font-size:11px; margin-top:0; }
  .story .skip-demo { grid-column:2; grid-row:3; position:static; display:flex; align-items:center; min-height:44px; font-size:11px; padding:0; }
  .story .story-controls>.motion-toggle { grid-column:1; grid-row:3; position:static; margin:0; justify-self:start; }
  .spectrum-field { height:90px; opacity:.22; }
  .use-grid { grid-template-columns:minmax(0,1fr); }
  .use-grid article { padding:24px; }
  .use-grid h3 { font-size:30px; }
  .use-grid article:nth-child(3) { display:flex; grid-column:auto; }
  .use-grid article:nth-child(3) .use-visual { min-height:190px; margin-top:25px; }
  .use-visual { height:190px; }
    .ascii-visual>pre { font-size:16px; }
  .privacy-spectrum { width:160%; height:85px; }
  .story:not([data-ready]) .story-sticky { height:650px; }
  .story:not([data-ready]) .mac-scene { transform:translateY(20px) scale(.5); }
}
@media(prefers-reduced-motion:reduce) {
  .story { height:auto!important; }
  .story .story-sticky { position:relative; height:900px; }
  .story .mac-scene { transform:translateY(80px) scale(var(--front-scale,1.05))!important; will-change:auto; }
  .story .scroll-hint { font-size:0; }
  .story .scroll-hint:after { content:"Wähle einen Schritt, um die Originaloberfläche anzusehen."; font-size:12px; }
  .story .scroll-hint>span { display:none; }
}
@media(prefers-reduced-motion:reduce) and (max-width:560px) {
  .story .story-sticky { height:720px; }
  .story .mac-scene { transform:translateY(80px) scale(var(--front-scale,.5))!important; }
}

/* Motion lives inside the native recording and the three analog media vignettes. */
.native-motion { z-index:1; opacity:0; }
.native-motion.is-ready { opacity:1; }
.native-processing .capture-frame:not(video) { z-index:0; }
.native-confirm { transform:translateY(calc((1 - var(--confirm))*6px)); }
.native-export { transform:translateY(calc((1 - var(--export))*6px)); }
.archive-label { display:flex; align-items:center; gap:9px; font-size:11px; color:#5e687b; }
.motion-toggle { background:none; border:0; padding:10px 0; min-height:44px; font-size:11px; color:#5e687b; cursor:pointer; text-decoration:underline; text-decoration-color:#a8b1bb; text-underline-offset:4px; transition:color .2s; }
.motion-toggle:hover { color:#174bdf; }
.motion-toggle:disabled { cursor:default; text-decoration:none; }
.story-controls>.motion-toggle { position:absolute; left:var(--controls-inset); bottom:11px; }
.use-aside { text-align:right; font-size:13px; color:#5e687b; }
.use-aside .motion-toggle { margin-top:9px; }
.waveform-visual { background:#172a3b; border-radius:2px; }
.waveform-visual:before { content:""; position:absolute; inset:0; background:url('/sylloro/assets/noise.svg'); opacity:.3; pointer-events:none; }
.scope-toolbar { display:flex; justify-content:space-between; position:absolute; left:17px; right:17px; top:13px; color:#dde6dd; font:10px 'Courier New',monospace; }
.scope-lamp:before { content:""; display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:#80b477; }
.live-waveform { width:100%; height:100%; padding-block:26px; display:block; }
.live-waveform g { transform-box:view-box; transform-origin:50% 50%; animation:wave-beat calc(var(--beat-duration)*3.8) ease-in-out var(--beat-delay) infinite alternate; animation-play-state:paused; }
.wave-playhead { position:absolute; top:40px; bottom:40px; left:0; width:100%; background:none; opacity:.28; animation:wave-scan 23s linear both; animation-play-state:paused; }
.wave-playhead:before { content:""; position:absolute; inset-block:0; left:0; width:1px; background:#f3f0d5; }
.tape-visual { height:270px; background:#e7e3d5; overflow:visible; }
.tape-visual:after { display:none; }
.cassette-art { position:relative; width:min(100%,420px); aspect-ratio:3/2; transform:rotate(-6deg); }
.cassette-art>img { display:block; width:100%; height:auto; }
.cassette-reel { position:absolute; width:10.5%; aspect-ratio:1; border-radius:50%; background-image:url('/sylloro/assets/cassette-1984.webp'); background-size:952.38% 634.92%; animation:reel-turn 4s linear infinite; animation-play-state:paused; }
.reel-left { left:24.95%; top:39.4%; background-position:27.89% 46.8%; }
.reel-right { left:64.62%; top:39.4%; background-position:72.25% 46.8%; animation-duration:5.5s; }
.tape-visual>span { bottom:8px; font-size:10px; }
.ascii-visual { align-items:center; min-height:280px; padding:54px 38px 48px; background:#e9e8db; border-radius:0; color:#263c30; }
.ascii-visual:before { content:""; position:absolute; inset:0; border-inline:1px dashed #b9bba9; margin-inline:15px; pointer-events:none; }
.ascii-visual:after { opacity:.55; }
.ascii-windowbar { position:absolute; z-index:1; top:0; left:0; right:0; display:flex; justify-content:space-between; gap:12px; padding:12px 20px; border-bottom:1px solid #b6b8a6; color:#354335; background:#e1e0cf; font:9px 'Courier New',monospace; }
.ascii-visual .typewriter { margin:0; width:100%; font:18px/1.9 'Courier New',monospace; font-weight:700; letter-spacing:0; white-space:normal; }
.typed-line { display:block; white-space:pre; }
.type-caret { position:absolute; color:#244b38; animation:caret-blink 1.1s steps(1,end) infinite; animation-play-state:paused; }
.ascii-visual .matrix-foot { left:28px; right:28px; bottom:13px; font-size:9px; color:#45513f; }
.motion-ready .typed-line { animation:type-line 1.15s steps(var(--letters),end) var(--type-delay) both; animation-play-state:paused; }
.motion-active .live-waveform g,.motion-active .wave-playhead,.motion-active .cassette-reel,.motion-active .type-caret,.motion-active .typed-line { animation-play-state:running; }
.motion-paused .type-caret,.motion-paused .live-waveform g,.motion-paused .wave-playhead,.motion-paused .cassette-reel,.motion-paused .typed-line { animation-play-state:paused; }
@keyframes wave-beat { from { transform:scaleY(.79); } to { transform:scaleY(.94); } }
@keyframes wave-scan { from { transform:translateX(0); } to { transform:translateX(100%); } }
@keyframes reel-turn { to { transform:rotate(360deg); } }
@keyframes caret-blink { 50% { opacity:0; } }
@keyframes type-line { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@media(max-width:1100px) {
  .story-controls>.motion-toggle { position:relative; display:block; margin:0 auto; bottom:auto; }
}
@media(max-width:800px) {
  .cassette-art { width:min(100%,330px); }
  .ascii-visual .typewriter { font-size:14px; }
  .ascii-windowbar { font-size:8px; padding:12px 19px; }
}
@media(max-width:560px) {
  .use-heading { align-items:start; gap:20px; flex-direction:column; }
  .use-aside { text-align:left; }
  .use-aside>p { display:none; }
  .use-aside .motion-toggle { margin:0; }
  .use-grid .tape-visual { height:235px; }
  .ascii-visual { padding:56px 29px 44px; }
  .ascii-visual .typewriter { font-size:16px; }
  .ascii-windowbar>span:last-child { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .native-motion { display:none; }
  .native-confirm,.native-export { transform:none; }
  .live-waveform g,.wave-playhead,.cassette-reel,.type-caret,.motion-ready .typed-line { animation:none; clip-path:none; }
}
.archive-interlude { display:flex; align-items:center; justify-content:space-between; gap:30px; padding-block:48px; border-bottom:1px dotted #aeb6a7; color:#364c3c; }
.archive-interlude>pre { margin:0; font:17px/1.4 'Courier New',monospace; letter-spacing:0; }
.archive-interlude>div { text-align:right; }
.archive-command { color:#5e687b; font:10px 'Courier New',monospace; }
.archive-interlude p { margin-top:13px; font-size:21px; font-weight:500; line-height:1.3; letter-spacing:-.02em; }
.typed-line { width:max-content; max-width:100%; }
@media(max-width:800px) { .archive-interlude>pre { font-size:13px; } }
@media(max-width:560px) { .archive-interlude { flex-direction:column; align-items:flex-start; gap:23px; padding-block:35px; } .archive-interlude>pre { font-size:11px; } .archive-interlude>div { text-align:left; } .archive-interlude p { font-size:20px; } }
.native-result { position:absolute; inset:0; }
.native-result .capture-frame:not(video) { z-index:0; }
.native-app { isolation:isolate; }
.native-home { z-index:0; }
.native-drop { z-index:1; }
.native-confirm { z-index:2; }
.native-processing { z-index:3; isolation:isolate; }
.native-result { z-index:4; isolation:isolate; }
.native-export { z-index:5; }
.cassette-art { width:min(calc(100% - 24px),380px); transform:translateY(-12px) rotate(-5deg); }
.tape-visual { height:300px; overflow:hidden; }
.cassette-reel { background-color:#35382e; }
@media(max-width:560px) { .use-grid .tape-visual { height:250px; } }