.sv-desktop .serif{font-family:'Bodoni Moda',Didot,Georgia,serif}
.sv-desktop .hand{font-family:'Reenie Beanie','Comic Sans MS',cursive}
.sv-desktop .mono{font-family:'IBM Plex Mono',monospace}
.sv-desktop .skip:focus-visible{outline:3px solid var(--accent, #2E5A1C);outline-offset:2px}
.sv-desktop .tape{position:absolute;background:var(--tape, #EADCAE);opacity:0.9;border:1px solid var(--tape-edge, #CDBE8C)}
.sv-desktop .grain{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(color-mix(in srgb, var(--ink, #0F1D0B) 9%, transparent) 0.7px, transparent 1px),radial-gradient(color-mix(in srgb, var(--ink, #0F1D0B) 6%, transparent) 0.6px, transparent 1px),repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink, #0F1D0B) 3%, transparent) 0 1px, transparent 1px 3px);background-size:7px 7px,11px 11px,auto;background-position:0 0,3px 5px,0 0}
.sv-desktop .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--sand-8, #AFB397) 38%, transparent) 100%)}
.sv-desktop .print{border:1px solid var(--ink, #0F1D0B);box-shadow:inset 0 0 0 4px var(--card, #FFFCF3), inset 0 0 0 5px var(--ph-a, #D0CFB5), 0 10px 22px -10px color-mix(in srgb, var(--ink, #0F1D0B) 45%, transparent);filter:saturate(0.9) contrast(1.03)}
@media (prefers-reduced-motion: no-preference){@keyframes inSan-sd{from{transform:translate(-900px,-600px) rotate(-40deg);opacity:0}60%{opacity:1}to{transform:rotate(-2deg);opacity:1}}
@keyframes inIgna-sd{from{transform:translate(0,900px) rotate(25deg);opacity:0}60%{opacity:1}to{transform:rotate(1.5deg);opacity:1}}
@keyframes inCio-sd{from{transform:translate(900px,-600px) rotate(35deg);opacity:0}60%{opacity:1}to{transform:rotate(-1deg);opacity:1}}
@keyframes inTape-sd{from{transform:translateY(-.3em) rotate(-48deg);opacity:0}to{transform:rotate(-32deg);opacity:0.92}}
@keyframes inNote-sd{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes inFade-sd{from{opacity:0}to{opacity:1}}
@keyframes inPhoto-sd{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes fillTape-sd{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sv-desktop .a-san{animation:inSan-sd 0.55s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-desktop .a-igna{animation:inIgna-sd 0.55s 0.12s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-desktop .a-cio{animation:inCio-sd 0.55s 0.24s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-desktop .a-tape{animation:inTape-sd 0.3s 0.7s ease-out both}
.sv-desktop .a-note{animation:inNote-sd 0.5s 0.95s steps(14,end) both}
.sv-desktop .a-ed{animation:inFade-sd 0.25s 1.35s ease-out both}
.sv-desktop .a-photo{animation:inPhoto-sd 0.5s 1.2s cubic-bezier(0.23,1,0.32,1) both}
.sv-desktop .a-load{animation:fillTape-sd 1.6s linear both;transform-origin:left}
.sv-desktop .press{transition:scale 140ms cubic-bezier(0.23,1,0.32,1)}
.sv-desktop .press:active{scale:0.97}}
.sv-tablet .serif{font-family:'Bodoni Moda',Didot,Georgia,serif}
.sv-tablet .hand{font-family:'Reenie Beanie','Comic Sans MS',cursive}
.sv-tablet .mono{font-family:'IBM Plex Mono',monospace}
.sv-tablet .skip:focus-visible{outline:3px solid var(--accent, #2E5A1C);outline-offset:2px}
.sv-tablet .tape{position:absolute;background:var(--tape, #EADCAE);opacity:0.9;border:1px solid var(--tape-edge, #CDBE8C)}
.sv-tablet .grain{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(color-mix(in srgb, var(--ink, #0F1D0B) 9%, transparent) 0.7px, transparent 1px),radial-gradient(color-mix(in srgb, var(--ink, #0F1D0B) 6%, transparent) 0.6px, transparent 1px),repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink, #0F1D0B) 3%, transparent) 0 1px, transparent 1px 3px);background-size:7px 7px,11px 11px,auto;background-position:0 0,3px 5px,0 0}
.sv-tablet .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--sand-8, #AFB397) 38%, transparent) 100%)}
.sv-tablet .print{border:1px solid var(--ink, #0F1D0B);box-shadow:inset 0 0 0 4px var(--card, #FFFCF3), inset 0 0 0 5px var(--ph-a, #D0CFB5), 0 10px 22px -10px color-mix(in srgb, var(--ink, #0F1D0B) 45%, transparent);filter:saturate(0.9) contrast(1.03)}
@media (prefers-reduced-motion: no-preference){@keyframes inSan-st{from{transform:translate(-600px,-500px) rotate(-40deg);opacity:0}60%{opacity:1}to{transform:rotate(-2deg);opacity:1}}
@keyframes inIgna-st{from{transform:translate(0,600px) rotate(25deg);opacity:0}60%{opacity:1}to{transform:rotate(1.5deg);opacity:1}}
@keyframes inCio-st{from{transform:translate(600px,-500px) rotate(35deg);opacity:0}60%{opacity:1}to{transform:rotate(-1deg);opacity:1}}
@keyframes inTape-st{from{transform:translateY(-.3em) rotate(-48deg);opacity:0}to{transform:rotate(-32deg);opacity:0.92}}
@keyframes inNote-st{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes inFade-st{from{opacity:0}to{opacity:1}}
@keyframes inPhoto-st{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes fillTape-st{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sv-tablet .a-san{animation:inSan-st 0.55s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-tablet .a-igna{animation:inIgna-st 0.55s 0.12s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-tablet .a-cio{animation:inCio-st 0.55s 0.24s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-tablet .a-tape{animation:inTape-st 0.3s 0.7s ease-out both}
.sv-tablet .a-note{animation:inNote-st 0.5s 0.95s steps(14,end) both}
.sv-tablet .a-ed{animation:inFade-st 0.25s 1.35s ease-out both}
.sv-tablet .a-photo{animation:inPhoto-st 0.5s 1.2s cubic-bezier(0.23,1,0.32,1) both}
.sv-tablet .a-load{animation:fillTape-st 1.6s linear both;transform-origin:left}
.sv-tablet .press{transition:scale 140ms cubic-bezier(0.23,1,0.32,1)}
.sv-tablet .press:active{scale:0.97}}
.sv-phone .serif{font-family:'Bodoni Moda',Didot,Georgia,serif}
.sv-phone .hand{font-family:'Reenie Beanie','Comic Sans MS',cursive}
.sv-phone .mono{font-family:'IBM Plex Mono',monospace}
.sv-phone .skip:focus-visible{outline:3px solid var(--accent, #2E5A1C);outline-offset:2px}
.sv-phone .tape{position:absolute;background:var(--tape, #EADCAE);opacity:0.9;border:1px solid var(--tape-edge, #CDBE8C)}
.sv-phone .grain{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(color-mix(in srgb, var(--ink, #0F1D0B) 9%, transparent) 0.7px, transparent 1px),radial-gradient(color-mix(in srgb, var(--ink, #0F1D0B) 6%, transparent) 0.6px, transparent 1px),repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink, #0F1D0B) 3%, transparent) 0 1px, transparent 1px 3px);background-size:7px 7px,11px 11px,auto;background-position:0 0,3px 5px,0 0}
.sv-phone .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%, transparent 55%, color-mix(in srgb, var(--sand-8, #AFB397) 38%, transparent) 100%)}
.sv-phone .print{border:1px solid var(--ink, #0F1D0B);box-shadow:inset 0 0 0 4px var(--card, #FFFCF3), inset 0 0 0 5px var(--ph-a, #D0CFB5), 0 10px 22px -10px color-mix(in srgb, var(--ink, #0F1D0B) 45%, transparent);filter:saturate(0.9) contrast(1.03)}
@media (prefers-reduced-motion: no-preference){@keyframes inSan-sp{from{transform:translate(-450px,-300px) rotate(-40deg);opacity:0}60%{opacity:1}to{transform:rotate(-2deg);opacity:1}}
@keyframes inIgna-sp{from{transform:translate(0,450px) rotate(25deg);opacity:0}60%{opacity:1}to{transform:rotate(1.5deg);opacity:1}}
@keyframes inCio-sp{from{transform:translate(450px,-300px) rotate(35deg);opacity:0}60%{opacity:1}to{transform:rotate(-1deg);opacity:1}}
@keyframes inTape-sp{from{transform:translateY(-.3em) rotate(-48deg);opacity:0}to{transform:rotate(-32deg);opacity:0.92}}
@keyframes inNote-sp{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes inFade-sp{from{opacity:0}to{opacity:1}}
@keyframes inPhoto-sp{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes fillTape-sp{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sv-phone .a-san{animation:inSan-sp 0.55s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-phone .a-igna{animation:inIgna-sp 0.55s 0.12s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-phone .a-cio{animation:inCio-sp 0.55s 0.24s cubic-bezier(0.2,0.9,0.3,1.1) both}
.sv-phone .a-tape{animation:inTape-sp 0.3s 0.7s ease-out both}
.sv-phone .a-note{animation:inNote-sp 0.5s 0.95s steps(14,end) both}
.sv-phone .a-ed{animation:inFade-sp 0.25s 1.35s ease-out both}
.sv-phone .a-photo{animation:inPhoto-sp 0.5s 1.2s cubic-bezier(0.23,1,0.32,1) both}
.sv-phone .a-load{animation:fillTape-sp 1.6s linear both;transform-origin:left}
.sv-phone .press{transition:scale 140ms cubic-bezier(0.23,1,0.32,1)}
.sv-phone .press:active{scale:0.97}}