/* Sounds: Rubi's window at night, four small windows to begin from, and faders
   that carry their own weather. The page takes a little of the scene's light:
   warm when the fire is in, cooler under rain. */
@property --fire {syntax:'<number>';inherits:false;initial-value:0;}
@property --rain {syntax:'<number>';inherits:false;initial-value:0;}
@property --wind {syntax:'<number>';inherits:false;initial-value:0;}
@property --waves {syntax:'<number>';inherits:false;initial-value:0;}

.screen--sounds {width:100%!important;max-width:none;overflow-x:clip;}
.sn-page {--night:#0b1024;--glass-ink:#f3ecdf;width:min(1320px,100%);margin:0 auto;padding:calc(112px + env(safe-area-inset-top,0px)) clamp(18px,4.5vw,56px) 40px;color:var(--ink);position:relative;isolation:isolate;transition:--fire 1.6s ease,--rain 1.6s ease,--wind 1.6s ease,--waves 1.6s ease;}
/* The room's light on the page itself. */
.sn-page::before {content:'';--fire:inherit;--rain:inherit;--waves:inherit;position:absolute;inset:0 -30vw;z-index:-1;pointer-events:none;background:
  radial-gradient(60% 50% at 18% 40%,rgb(240 130 60 / calc(var(--fire) * .12)),transparent 70%),
  radial-gradient(60% 45% at 80% 20%,rgb(70 110 190 / calc(var(--rain) * .10)),transparent 70%),
  radial-gradient(50% 40% at 70% 60%,rgb(60 120 170 / calc(var(--waves) * .06)),transparent 70%);}

.sn-eyebrow {font-family:var(--font-sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}

/* ---- the heading ---- */
.sn-head {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:28px 48px;}
.sn-head h1 {display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 22px;margin-top:16px;font-family:var(--font-serif);font-weight:400;font-size:clamp(50px,5.8vw,84px);line-height:1;letter-spacing:-.035em;}
.sn-head .lettering-sounds {width:clamp(200px,22vw,300px);margin:0 0 -.12em;}
.sn-head__lede {padding-bottom:10px;}
.sn-head__lede p {font-family:var(--font-serif);font-size:clamp(21px,2vw,26px);line-height:1.4;color:var(--ink-2);}
.sn-head__lede small {display:block;margin-top:12px;font-size:13px;color:var(--ink-3);}

/* ---- the window ---- */
.sn-stage {position:relative;margin-top:clamp(24px,3vw,36px);border-radius:10px;overflow:hidden;background:var(--night);box-shadow:0 1px 0 rgb(255 255 255 / .04) inset,0 30px 70px -36px rgb(8 10 24 / .75);--fire:inherit;}
.sn-stage__canvas {display:block;width:100%;aspect-ratio:2.15/1;min-height:440px;max-height:78vh;}
.sn-stage::after,.sn-scene__art::after {content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 95% at 50% 46%,transparent 55%,rgb(4 6 14 / .5));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07);}
/* The room's own fire, caught in the glass: a warm breath from the lower left. */
.sn-stage__hearth {--fire:inherit;position:absolute;inset:0;pointer-events:none;opacity:var(--fire);}
.sn-stage__hearth::before {content:'';position:absolute;inset:0;background:radial-gradient(70% 95% at -4% 108%,rgb(255 150 70 / .3),rgb(210 90 40 / .08) 45%,transparent 72%);animation:sn-hearth 2.6s linear infinite;will-change:opacity;}
@keyframes sn-hearth {0% {opacity:.85;} 9% {opacity:.7;} 21% {opacity:.95;} 34% {opacity:.78;} 47% {opacity:1;} 58% {opacity:.82;} 71% {opacity:.92;} 84% {opacity:.74;} 100% {opacity:.85;}}
.sn-stage__notice {position:absolute;z-index:2;top:18px;left:18px;padding:8px 14px;border-radius:999px;background:rgb(0 0 0 / .45);color:var(--glass-ink);font-size:13px;}

.sn-console {position:absolute;z-index:2;left:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);display:flex;align-items:center;gap:18px;padding:10px 12px 10px 10px;border-radius:999px;color:var(--glass-ink);background:linear-gradient(180deg,rgb(14 18 38 / .62),rgb(8 11 26 / .78));border:1px solid rgb(255 255 255 / .12);box-shadow:0 12px 40px -18px rgb(0 0 0 / .6);}
.sn-play {position:relative;flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;color:#10142a;background:var(--glass-ink);transition:transform 200ms var(--ease-out),background-color 200ms ease;}
.sn-play:hover {transform:scale(1.05);}
.sn-play:active {transform:scale(.97);}
.sn-play:focus-visible {outline:2px solid var(--glass-ink);outline-offset:4px;}
.sn-play__icon {display:grid;place-items:center;position:relative;z-index:1;}
.sn-play[aria-pressed=false] .sn-play__icon svg {margin-left:3px;}
/* Breathing rings while sound plays. */
.sn-play__ring,.sn-play__ring::before {position:absolute;inset:0;border-radius:50%;border:1px solid rgb(243 236 223 / .55);opacity:0;}
.sn-play__ring::before {content:'';inset:-1px;}
.is-playing .sn-play__ring {animation:sn-breathe 4.2s var(--ease-out) infinite;}
.is-playing .sn-play__ring::before {animation:sn-breathe 4.2s var(--ease-out) 2.1s infinite;}
@keyframes sn-breathe {0% {transform:scale(1);opacity:.7;} 100% {transform:scale(1.9);opacity:0;}}

.sn-now {display:flex;flex-direction:column;gap:3px;min-width:0;}
.sn-now__label {font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgb(243 236 223 / .62);}
.sn-now__scene {font-family:var(--font-serif);font-size:clamp(20px,2vw,25px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sn-sleep {margin-left:auto;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgb(255 255 255 / .06);border:1px solid rgb(255 255 255 / .08);position:relative;}
.sn-sleep__label {display:inline-flex;align-items:center;gap:6px;padding:0 10px 0 8px;font-size:12px;color:rgb(243 236 223 / .7);}
.sn-sleep button {height:32px;padding:0 12px;border-radius:999px;font-size:12px;color:rgb(243 236 223 / .82);transition:background-color 160ms ease,color 160ms ease;}
.sn-sleep button:hover {color:#fff;background:rgb(255 255 255 / .08);}
.sn-sleep [aria-pressed=true] {background:rgb(243 236 223 / .92);color:#10142a;font-weight:600;}
.sn-sleep [aria-pressed=true]:hover {background:#fff;color:#10142a;}
.sn-sleep__status {position:absolute;right:14px;bottom:calc(100% + 8px);font-size:12px;color:rgb(243 236 223 / .8);white-space:nowrap;text-shadow:0 1px 8px rgb(0 0 0 / .6);}
.sn-sleep__status:empty {display:none;}

/* ---- sections ---- */
.sn-section {margin-top:clamp(56px,7vw,88px);}
.sn-section__head {display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line-soft);}
.sn-section__head h2 {font-family:var(--font-serif);font-weight:400;font-size:clamp(30px,3.2vw,40px);line-height:1.05;}
.sn-section__head p {font-size:14px;color:var(--ink-3);}

/* ---- scenes: four small windows ---- */
.sn-scenes {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);}
.sn-scene {display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;color:var(--ink);border-radius:12px;}
.sn-scene:focus-visible {outline:none;}
.sn-scene__art {position:relative;display:block;width:100%;aspect-ratio:4/3;margin-bottom:10px;border-radius:8px;overflow:hidden;background:var(--night);box-shadow:0 18px 36px -24px rgb(8 10 24 / .7);outline:2px solid transparent;outline-offset:4px;transition:transform 260ms var(--ease-out),box-shadow 260ms ease,outline-color 200ms ease;}
.sn-scene__art canvas {display:block;width:100%;height:100%;transition:transform 900ms var(--ease-out);}
.sn-scene:hover .sn-scene__art {transform:translateY(-3px);box-shadow:0 26px 44px -24px rgb(8 10 24 / .8);}
.sn-scene:hover .sn-scene__art canvas {transform:scale(1.05);}
.sn-scene:focus-visible .sn-scene__art {outline-color:var(--line-strong);}
.sn-scene[aria-pressed=true] .sn-scene__art {outline-color:var(--ink);}
.sn-scene__playing {position:absolute;z-index:2;left:12px;bottom:12px;display:flex;align-items:flex-end;gap:3px;height:16px;padding:6px 8px;box-sizing:content-box;border-radius:999px;background:rgb(10 14 30 / .66);opacity:0;transform:translateY(6px);transition:opacity 200ms ease,transform 260ms var(--ease-out);}
.sn-scene__playing i {width:3px;height:100%;border-radius:2px;background:var(--glass-ink);transform-origin:bottom;animation:sn-eq 1.1s ease-in-out infinite;}
.sn-scene__playing i:nth-child(2) {animation-delay:-.4s;animation-duration:.9s;}
.sn-scene__playing i:nth-child(3) {animation-delay:-.75s;animation-duration:1.3s;}
@keyframes sn-eq {0%,100% {transform:scaleY(.3);} 50% {transform:scaleY(1);}}
.sn-scene[aria-pressed=true] .sn-scene__playing {opacity:1;transform:none;}
.sn-scene__label {font-family:var(--font-serif);font-size:25px;line-height:1.1;}
.sn-scene__note {font-size:13px;line-height:1.45;color:var(--ink-3);}
.sn-scene__chips {display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.sn-scene__chips span {display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:999px;border:1px solid var(--line-soft);font-size:11.5px;color:var(--ink-2);}
.sn-scene__chips span::before {content:'';width:7px;height:7px;border-radius:50%;background:var(--pigment);}

/* ---- the mixer ---- */
.sn-stop {min-height:36px;font-size:13px;color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px;}
.sn-stop:hover {color:var(--ink);}
.sn-channels {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.sn-channel {--vn:0;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:18px;padding:16px 20px 16px 16px;border:1px solid var(--line-soft);border-radius:16px;background:color-mix(in srgb,var(--ink) 2%,transparent);transition:border-color 300ms ease,background-color 300ms ease;}
.sn-channel.is-on {border-color:color-mix(in srgb,var(--pigment) 45%,var(--line-soft));background:color-mix(in srgb,var(--pigment) 6%,transparent);}
.sn-channel__toggle {display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);color:var(--ink-2);transition:background-color 260ms ease,color 260ms ease,border-color 260ms ease,box-shadow 400ms ease,transform 200ms var(--ease-out);}
.sn-channel__toggle:hover {border-color:var(--pigment);color:var(--ink);}
.sn-channel__toggle:active {transform:scale(.95);}
.sn-channel.is-on .sn-channel__toggle {background:var(--pigment);border-color:var(--pigment);color:#fff;box-shadow:0 8px 24px -8px color-mix(in srgb,var(--pigment) 80%,transparent);}
.sn-channel__body {display:flex;flex-direction:column;gap:10px;min-width:0;}
.sn-channel__top {display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.sn-channel__name {display:block;min-width:0;font-family:var(--font-serif);font-size:23px;line-height:1.15;color:var(--ink);}
.sn-channel__name::first-letter {text-transform:uppercase;}
.sn-channel__name small {font-family:var(--font-sans);font-size:11px;color:var(--ink-3);}
.sn-channel output {font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}

/* The fader: a pill of its own weather that fills as the sound rises. */
.sn-fader {position:relative;height:34px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden;}
.sn-fader__fill {position:absolute;inset:0 auto 0 0;width:calc(34px + (100% - 34px) * var(--vn));border-radius:999px;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--pigment) 70%,#000),var(--pigment));opacity:0;transition:opacity 300ms ease;}
.sn-channel.is-on .sn-fader__fill {opacity:1;}
.sn-fader__texture {position:absolute;inset:-40px -150px;background-repeat:repeat;opacity:.9;will-change:transform;animation-play-state:paused;}
.is-playing .sn-channel.is-on .sn-fader__texture {animation-play-state:running;}
.sn-slider {-webkit-appearance:none;appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;cursor:pointer;}
.sn-slider::-webkit-slider-runnable-track {height:100%;background:transparent;}
.sn-slider::-moz-range-track {height:100%;background:transparent;}
.sn-slider::-webkit-slider-thumb {-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:var(--bg-raised);border:2px solid color-mix(in srgb,var(--pigment) 70%,var(--line));box-shadow:0 2px 6px rgb(0 0 0 / .22);transition:transform 160ms var(--ease-out);}
.sn-slider::-moz-range-thumb {width:30px;height:30px;border-radius:50%;background:var(--bg-raised);border:2px solid color-mix(in srgb,var(--pigment) 70%,var(--line));box-shadow:0 2px 6px rgb(0 0 0 / .22);}
.sn-slider:active::-webkit-slider-thumb {transform:scale(.92);}
.sn-slider:focus-visible {outline:2px solid var(--pigment);outline-offset:3px;border-radius:999px;}

/* Each sound's weather, moving faster as it gets louder. */
[data-kind=rain] .sn-fader__texture {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg stroke='%23fff' stroke-linecap='round' stroke-opacity='.55'%3E%3Cpath d='M6 2l-2 7M20 14l-2 7M31 5l-2 7M13 25l-2 7M27 26l-2 7'/%3E%3C/g%3E%3C/svg%3E");animation:sn-rain calc(.9s / (.35 + var(--vn))) linear infinite;}
@keyframes sn-rain {to {transform:translate3d(0,36px,0);}}
[data-kind=wind] .sn-fader__texture {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='34'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath stroke-opacity='.5' d='M4 11c18-6 30 6 50 0s24-4 34 0'/%3E%3Cpath stroke-opacity='.3' d='M60 24c16-5 26 5 44 0s18-3 30 1'/%3E%3C/g%3E%3C/svg%3E");animation:sn-wind calc(3.6s / (.35 + var(--vn))) linear infinite;}
@keyframes sn-wind {to {transform:translate3d(140px,0,0);}}
[data-kind=waves] .sn-fader__texture {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath stroke-opacity='.55' d='M0 14c7.5-6 15-6 22.5 0S37.5 20 45 14s11-4 15-2'/%3E%3Cpath stroke-opacity='.3' d='M0 24c7.5-5 15-5 22.5 0S37.5 29 45 24s11-3 15-1'/%3E%3C/g%3E%3C/svg%3E");animation:sn-waves calc(3s / (.35 + var(--vn))) linear infinite;}
@keyframes sn-waves {to {transform:translate3d(-60px,0,0);}}
[data-kind=fire] .sn-fader__fill {background:linear-gradient(90deg,#8f2d0c,#e2601c 55%,#ffb45e);}
[data-kind=fire] .sn-fader__texture {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cg fill='%23ffe2a8'%3E%3Ccircle cx='6' cy='30' r='1.3' opacity='.9'/%3E%3Ccircle cx='21' cy='12' r='1' opacity='.7'/%3E%3Ccircle cx='33' cy='26' r='1.5' opacity='.8'/%3E%3Ccircle cx='40' cy='5' r='.9' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");animation:sn-embers calc(2.2s / (.35 + var(--vn))) linear infinite;}
[data-kind=fire] .sn-fader__fill::after {content:'';position:absolute;inset:0;background:radial-gradient(40% 90% at 70% 110%,rgb(255 220 150 / .55),transparent);will-change:opacity;animation:sn-flicker 1.7s steps(1) infinite;animation-play-state:paused;}
.is-playing [data-kind=fire].is-on .sn-fader__fill::after {animation-play-state:running;}
@keyframes sn-embers {to {transform:translate3d(0,-40px,0);}}
@keyframes sn-flicker {0% {opacity:.9;} 23% {opacity:.72;} 41% {opacity:1;} 66% {opacity:.8;} 83% {opacity:.95;}}
[data-kind=other] .sn-fader__texture {inset:0 auto 0 0;width:50%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .35),transparent);animation:sn-shimmer calc(3s / (.35 + var(--vn))) ease-in-out infinite;}
@keyframes sn-shimmer {from {transform:translate3d(-100%,0,0);} to {transform:translate3d(300%,0,0);}}
/* The per-sound animation shorthands above reset animation-play-state. */
.sn-page:not(.is-playing) .sn-fader__texture,.sn-channel:not(.is-on) .sn-fader__texture {animation-play-state:paused;}
.sn-page[data-covered] *,.sn-page[data-covered] *::before,.sn-page[data-covered] *::after,
.sn-page [data-offscreen],.sn-page [data-offscreen]::after,.sn-page [data-offscreen] *,.sn-page [data-offscreen] *::before,.sn-page [data-offscreen] *::after {animation-play-state:paused!important;}
.sound-origin {margin-top:18px;font-size:12px;line-height:1.7;color:var(--ink-3);}

/* ---- the ocean ---- */
.sn-ocean {position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:24px;margin-top:clamp(56px,7vw,88px);min-height:360px;padding:0 clamp(24px,5vw,72px) 0 0;border-radius:14px;overflow:hidden;color:#eaf0ff;background:radial-gradient(70% 90% at 22% 45%,#1b2c6e 0%,#0a1238 45%,#040716 100%);box-shadow:0 30px 70px -40px rgb(4 7 22 / .9);}
.sn-ocean::after {content:'';position:absolute;inset:0 0 -260px;pointer-events:none;background-image:radial-gradient(1.2px 1.2px at 20% 30%,rgb(200 220 255 / .5),transparent),radial-gradient(1px 1px at 60% 70%,rgb(200 220 255 / .4),transparent),radial-gradient(1.4px 1.4px at 82% 22%,rgb(200 220 255 / .35),transparent),radial-gradient(1px 1px at 40% 85%,rgb(200 220 255 / .4),transparent),radial-gradient(1px 1px at 90% 60%,rgb(200 220 255 / .3),transparent);background-size:260px 260px;animation:sn-snow 40s linear infinite;opacity:.8;will-change:transform;}
@keyframes sn-snow {to {transform:translate3d(0,-260px,0);}}
.sn-ocean__jelly {position:relative;z-index:1;justify-self:center;width:min(300px,80%);height:auto;margin:-20px 0 -60px;-webkit-mask-image:radial-gradient(60% 62% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(60% 62% at 50% 45%,#000 55%,transparent 100%);animation:sn-drift 11s ease-in-out infinite;will-change:transform;}
@keyframes sn-drift {0%,100% {transform:translateY(8px) rotate(-2deg);} 50% {transform:translateY(-16px) rotate(2deg);}}
.sn-ocean__copy {position:relative;z-index:1;padding:44px 0;}
.sn-ocean .sn-eyebrow {color:rgb(200 214 255 / .7);}
.sn-ocean h2 {margin-top:12px;font-family:var(--font-serif);font-weight:400;font-size:clamp(38px,4.6vw,60px);line-height:1;letter-spacing:-.02em;}
.sn-ocean__copy > p:not(.sn-eyebrow) {margin-top:14px;max-width:40ch;font-family:var(--font-serif);font-size:20px;line-height:1.45;color:rgb(222 230 255 / .8);}
.sn-ocean__go {display:inline-flex;align-items:center;gap:10px;margin-top:26px;height:48px;padding:0 22px;border-radius:999px;background:#eaf0ff;color:#0a1238;font-size:14px;font-weight:600;transition:transform 200ms var(--ease-out),box-shadow 300ms ease;box-shadow:0 0 0 0 rgb(140 170 255 / .0);}
.sn-ocean__go:hover {transform:translateY(-1px);box-shadow:0 0 36px 2px rgb(140 170 255 / .45);}
.sn-ocean__go svg {transition:transform 200ms var(--ease-out);}
.sn-ocean__go:hover svg {transform:translateX(3px);}

/* ---- smaller screens ---- */
@media (max-width:1080px) {
  .sn-scenes {grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;}
}
@media (max-width:900px) {
  .sn-page {padding-top:calc(96px + env(safe-area-inset-top,0px));}
  .sn-head {grid-template-columns:minmax(0,1fr);gap:14px;}
  .sn-head__lede {padding-bottom:0;}
  .sn-channels {grid-template-columns:minmax(0,1fr);}
}
@media (max-width:700px) {
  .sn-stage__canvas {aspect-ratio:4/5;min-height:0;max-height:none;}
  .sn-console {position:static;flex-wrap:wrap;gap:14px;padding:16px;border-radius:0;border:0;border-top:1px solid rgb(255 255 255 / .08);background:#0e1328;box-shadow:none;}
  .sn-now {flex:1;}
  .sn-sleep {margin-left:0;width:100%;justify-content:space-between;}
  .sn-sleep button {flex:1;padding:0 6px;}
  .sn-sleep__status {position:static;order:-1;width:100%;padding:0 8px 6px;text-shadow:none;}
  .sn-scenes {gap:14px;row-gap:24px;}
  .sn-scene__label {font-size:21px;}
  .sn-scene__note {font-size:12px;}
  .sn-channel {grid-template-columns:48px minmax(0,1fr);gap:14px;padding:14px;}
  .sn-channel__toggle {width:48px;height:48px;}
  .sn-channel__name {font-size:21px;}
  .sn-ocean {grid-template-columns:minmax(0,1fr);padding:0 24px 8px;text-align:center;}
  .sn-ocean__jelly {width:min(220px,60%);margin:0 auto -40px;}
  .sn-ocean__copy {padding:0 0 32px;}
  .sn-ocean__copy > p:not(.sn-eyebrow) {margin-inline:auto;font-size:18px;}
}
@media (max-width:420px) {
  .sn-scenes {grid-template-columns:minmax(0,1fr);}
}

@media (prefers-reduced-motion:reduce) {
  .sn-stage__hearth::before,.sn-fader__fill::after,.sn-fader__texture,.sn-play__ring,.sn-play__ring::before,.sn-scene__playing i,.sn-ocean::after,.sn-ocean__jelly {animation:none!important;}
  .sn-scene__art,.sn-scene__art canvas,.sn-play {transition:none;}
  .sn-scene:hover .sn-scene__art canvas {transform:none;}
}