/* Device pages (/watch, /tv, ...): Apple-style product pages, built by tools/build-device-pages.mjs. */
.dp-page{--ink:#0B0B10;--yellow:#FFE500;--muted:#C9C4D6;--soft:#F4F2FA;--text:#1b1a24;margin:0;background:var(--ink);color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}
.dp-page *{box-sizing:border-box}
.dp-wrap{width:min(1180px,calc(100% - 80px));margin-inline:auto}
.dp-skip{position:fixed;left:16px;top:12px;padding:14px 20px;background:var(--yellow);color:var(--ink);transform:translateY(-180%);z-index:500;border-radius:999px}
.dp-skip:focus{transform:none}
.dp-nav{height:80px;background:var(--ink);color:#F2EFFF;display:flex;align-items:center;gap:24px;padding:0 max(28px,calc((100vw - 1360px)/2));position:relative;z-index:200}
.dp-logo img{display:block;height:40px;width:auto}
.dp-nav .nav-links{display:flex;align-items:center;justify-content:center;gap:18px;list-style:none;padding:0;margin:0 auto;font-size:12px;white-space:nowrap}
.dp-nav .nav-links a{color:inherit;text-decoration:none}
.dp-nav .nav-links a:hover{text-decoration:underline}
.dp-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;border-radius:999px;background:var(--yellow);color:#090909;padding:15px 28px;text-decoration:none;font-size:16px;font-weight:700;line-height:1.2;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.dp-button:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px #FFE500b0}
.dp-nav-cta{font-size:13px;min-height:42px;padding:10px 20px}
.dp-text-link{color:#fff;font-weight:600;text-decoration:none;font-size:16px}
.dp-text-link:hover{text-decoration:underline}
.dp-page :focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.dp-light :focus-visible{outline-color:#111118}
.dp-eyebrow{margin:0 0 18px;font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.dp-light .dp-eyebrow{color:#7a5f00}

.dp-hero{position:relative;text-align:center;padding:clamp(34px,6svh,56px) 0 0;overflow:hidden;background:linear-gradient(180deg,#0B0B1000 82%,#0B0B10 100%),radial-gradient(55% 50% at 50% 62%,#FFE50030,#FFE50000 72%),var(--ink)}
.dp-hero h1{margin:0;font-size:clamp(40px,min(7.2vw,10.5svh),92px);line-height:.98;letter-spacing:-.055em;font-weight:800}
.dp-hero h1 span{color:var(--muted)}
.dp-intro{max-width:600px;margin:clamp(10px,2svh,18px) auto 0;font-size:clamp(16px,min(1.8vw,2.6svh),21px);line-height:1.4;color:var(--muted)}
.dp-actions{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:clamp(16px,3svh,26px)}
.dp-hero-art{position:relative;margin:clamp(-10px,-1svh,0px) auto 0;display:flex;justify-content:center}
.dp-hero-art img{position:relative;z-index:1;display:block;width:auto;height:auto;max-height:min(760px,92vw * 1.7);max-width:min(760px,92vw);-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}

.dp-beat{padding:120px 0;position:relative;overflow:hidden}
.dp-dark{background:var(--ink);color:#fff}
.dp-light{background:var(--soft);color:var(--text)}
.dp-beat-in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}
.dp-flip .dp-copy{order:2}
.dp-copy h2{margin:0 0 20px;font-size:clamp(40px,6.2vw,84px);line-height:1;letter-spacing:-.05em;font-weight:800}
.dp-copy p:not(.dp-eyebrow){margin:0;max-width:520px;font-size:clamp(18px,1.8vw,24px);line-height:1.45}
.dp-dark .dp-copy p:not(.dp-eyebrow){color:var(--muted)}
.dp-light .dp-copy p:not(.dp-eyebrow){color:#4a4660}
.dp-art{margin:0;display:flex;justify-content:center}
.dp-art img{display:block;width:auto;height:auto;max-width:100%;max-height:680px}
.dp-light .dp-art img{filter:drop-shadow(0 30px 44px #19122444)}
.dp-solo .dp-beat-in{grid-template-columns:1fr;text-align:center}
.dp-solo .dp-copy p:not(.dp-eyebrow){margin-inline:auto}
.dp-solo{padding:150px 0}
.dp-solo .dp-copy h2{font-size:clamp(44px,8vw,112px)}
.dp-solo .dp-copy p:not(.dp-eyebrow){max-width:640px}

/* Stage: centred words, then a huge device rising from the bottom edge, cropped like an Apple keynote slide. */
.dp-stage{padding:120px 0 0}
.dp-stage .dp-beat-in{grid-template-columns:1fr;gap:0;text-align:center}
.dp-stage .dp-copy p:not(.dp-eyebrow){margin-inline:auto;max-width:640px}
.dp-stage .dp-art{margin:64px 0 0;height:clamp(380px,56vw,720px);overflow:hidden;align-items:flex-start}
.dp-stage .dp-art img{max-height:none;width:min(560px,78vw);height:auto;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}

/* The four rings, drawn as vectors so they can be enormous and sharp. */
.dp-rings{width:min(760px,92vw);aspect-ratio:1;margin:0 auto}
.dp-rings svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 70px #F7B93E40)}
.dp-rings circle{fill:none;stroke-width:44;stroke-linecap:round}
.dp-rings .t1{stroke:#2d2113}.dp-rings .t2{stroke:#12261f}.dp-rings .t3{stroke:#22143a}.dp-rings .t4{stroke:#2e1b0c}
.dp-rings .f{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1)}
.dp-rings .f1{stroke:#F7B93E;transition-delay:.15s}.dp-rings .f2{stroke:#62F58A;transition-delay:.35s}.dp-rings .f3{stroke:#C463FA;transition-delay:.55s}.dp-rings .f4{stroke:#F08A2E;transition-delay:.75s}
.dp-rings.is-in .f1{stroke-dashoffset:28}.dp-rings.is-in .f2{stroke-dashoffset:84}.dp-rings.is-in .f3{stroke-dashoffset:12}.dp-rings.is-in .f4{stroke-dashoffset:4}
.dp-rings-n{font:800 120px/1 Inter,sans-serif;letter-spacing:-.05em;fill:#fff}
.dp-stage .dp-rings{width:min(820px,94vw);margin-bottom:-26%}
.dp-stage .dp-rings svg{filter:none}
.dp-stage.dp-dark{background:radial-gradient(48% 36% at 50% 88%,#F7B93E24,#F7B93E00 72%),var(--ink)}
.dp-hero-art--rings .dp-rings-hero{position:absolute;left:50%;top:56%;width:min(900px,125vw);transform:translate(-50%,-50%);opacity:.9;margin:0;z-index:0;-webkit-mask-image:linear-gradient(transparent 4%,#000 32%,#000 58%,transparent 84%);mask-image:linear-gradient(transparent 4%,#000 32%,#000 58%,transparent 84%)}
.dp-hero .dp-wrap{position:relative;z-index:2}
.dp-hero-art--wide img{max-width:min(1240px,94vw);max-height:none;width:100%;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
.dp-chip{position:absolute;z-index:3;padding:12px 18px;border-radius:999px;font-size:15px;font-weight:600;color:#fff;background:#ffffff1f;box-shadow:0 0 0 1px #ffffff33 inset,0 18px 40px -16px #000;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);white-space:nowrap;opacity:0;animation:dp-chip-in 1.1s cubic-bezier(.16,1,.3,1) both}
.dp-chip-1{left:calc(50% - min(300px,44vw));top:24%;animation-delay:.5s}.dp-chip-2{right:calc(50% - min(310px,46vw));top:40%;animation-delay:.8s}.dp-chip-3{left:calc(50% - min(280px,42vw));bottom:26%;animation-delay:1.1s}.dp-chip-4{right:calc(50% - min(270px,40vw));bottom:16%;animation-delay:1.4s}
@keyframes dp-chip-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dp-chip{animation:none;opacity:1}}
@media(max-width:600px){.dp-chip{font-size:12px;padding:8px 12px}}
.dp-hero-art--tablet img{max-width:min(620px,84vw);max-height:none}
.dp-hero-art--glow::before{content:"";position:absolute;left:50%;top:46%;width:min(1000px,130vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow,#9B7BFF55),transparent 66%);z-index:0}
.dp-hero-art--rings .dp-rings svg{filter:none}
.dp-hero-art--rings img{max-height:min(640px,86vw * 1.6)}

.dp-tiles{padding:110px 0}
.dp-tiles h2,.dp-faq h2{margin:0 0 44px;font-size:clamp(34px,4.6vw,60px);line-height:1;letter-spacing:-.05em;font-weight:800;text-align:center}
.dp-tile-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dp-tile-grid li{background:#fff;border-radius:26px;padding:30px 28px 34px;box-shadow:0 1px 0 #1b1a2410}
.dp-tile-grid h3{margin:0 0 10px;font-size:22px;letter-spacing:-.03em;font-weight:700;color:var(--text)}
.dp-tile-grid p{margin:0;font-size:16px;line-height:1.5;color:#4a4660}

.dp-needs{padding:34px 0;border-block:1px solid #ffffff14}
.dp-needs ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:12px 36px;flex-wrap:wrap;font-size:15px;font-weight:600;color:var(--muted)}

.dp-faq{padding:110px 0}
.dp-faq-in{max-width:820px}
.dp-faq details{border-top:1px solid #1b1a2422;padding:22px 0}
.dp-faq details:last-child{border-bottom:1px solid #1b1a2422}
.dp-faq summary{cursor:pointer;font-size:20px;font-weight:700;letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:20px}
.dp-faq summary::-webkit-details-marker{display:none}
.dp-faq summary::after{content:"+";font-size:26px;line-height:1;font-weight:400;color:#7a5f00}
.dp-faq details[open] summary::after{content:"\2212"}
.dp-faq details p{margin:14px 0 0;font-size:17px;line-height:1.55;color:#4a4660;max-width:700px}

.dp-closing{padding:120px 0 90px;text-align:center;background:radial-gradient(60% 60% at 50% 38%,#FFE5001f,#FFE50000 72%),var(--ink)}
.dp-closing h2{margin:0;font-size:clamp(40px,6.4vw,84px);line-height:.98;letter-spacing:-.055em;font-weight:800}
.dp-devices{margin-top:64px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 12px}
.dp-devices p{width:100%;margin:0 0 6px;font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#8e8aa0}
.dp-devices a{padding:10px 18px;border-radius:999px;background:#ffffff14;color:#fff;text-decoration:none;font-size:14px;font-weight:600;transition:background .2s}
.dp-devices a:hover{background:#ffffff26}
.dp-fine{margin:34px auto 0;max-width:620px;font-size:13px;line-height:1.5;color:#8e8aa0}
.dp-footer{padding-top:44px;padding-bottom:40px;display:grid;grid-template-columns:1fr auto;gap:20px 36px;font-size:13px;color:var(--muted)}
.dp-footer>a{font-weight:700;text-decoration:none;font-size:16px;color:#fff}
.dp-footer>div{display:flex;gap:25px;grid-column:2;grid-row:1}
.dp-footer a{color:inherit;text-decoration:none}
.dp-footer .dp-fine{grid-column:2;grid-row:2;text-align:right;margin:0}

@media(max-width:1100px){.dp-nav{gap:16px;padding-inline:24px}.dp-nav .nav-links{gap:12px;font-size:11px}.dp-beat-in{gap:48px}}
@media(max-width:900px){
  .dp-solo{padding:96px 0}
  .dp-stage{padding:84px 0 0}
  .dp-stage .dp-art{margin-top:44px}
  .dp-nav{height:72px}.dp-nav .nav-links{display:none}.dp-nav-cta{margin-left:auto}
  .dp-beat{padding:76px 0}
  .dp-beat-in{grid-template-columns:1fr;gap:44px;text-align:center}
  .dp-flip .dp-copy{order:0}
  .dp-copy p:not(.dp-eyebrow){margin-inline:auto}
  .dp-art{order:2}
  .dp-art img{max-height:520px}
  .dp-tile-grid{grid-template-columns:1fr 1fr}
  .dp-tiles,.dp-faq{padding:76px 0}
}
@media(max-width:600px){
  .dp-wrap{width:calc(100% - 36px)}
  .dp-nav{padding-inline:18px;gap:10px}.dp-logo img{height:34px}
  .dp-hero{padding-top:36px}
  .dp-hero-art{margin-top:6px}.dp-hero-art img{max-height:520px}
  .dp-tile-grid{grid-template-columns:1fr}
  .dp-footer{grid-template-columns:1fr}.dp-footer>div,.dp-footer .dp-fine{grid-column:1;grid-row:auto;text-align:left}
  .dp-actions{gap:18px}
}
@media(prefers-reduced-motion:reduce){.dp-button,.dp-rings .f{transition:none!important}}

/* ---- Colour worlds: each page sets --ac and --ac2 on the body, so no two feel alike. ---- */
.dp-page{--ac:#FFE500;--ac2:#FF9A3C}
.dp-eyebrow{color:var(--ac)}
.dp-light .dp-eyebrow{color:color-mix(in srgb,var(--ac) 45%,#1b1a24)}
.dp-hero{background:linear-gradient(180deg,#0B0B1000 82%,var(--ink) 100%),radial-gradient(55% 50% at 50% 62%,color-mix(in srgb,var(--ac) 24%,transparent),transparent 72%),radial-gradient(40% 40% at 85% 10%,color-mix(in srgb,var(--ac2) 18%,transparent),transparent 70%),var(--ink)}
.dp-hero h1 span{background:linear-gradient(100deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.dp-dark{background:radial-gradient(70% 45% at 50% 0%,color-mix(in srgb,var(--ac) 20%,transparent),transparent 70%),var(--ink)}
.dp-stage.dp-dark{background:radial-gradient(50% 38% at 50% 92%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 72%),radial-gradient(70% 45% at 50% 0%,color-mix(in srgb,var(--ac2) 18%,transparent),transparent 70%),var(--ink)}
.dp-light{background:linear-gradient(0deg,color-mix(in srgb,var(--ac2) 22%,var(--soft)) 0,transparent 220px),linear-gradient(180deg,color-mix(in srgb,var(--ac) 32%,var(--soft)) 0,var(--soft) 280px),var(--soft)}
.dp-rings svg{filter:drop-shadow(0 0 70px color-mix(in srgb,var(--ac) 40%,transparent))}
.dp-tile-grid li{border-top:4px solid var(--ac);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.dp-tile-grid li:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--ac) 80%,#000)}
.dp-chip{box-shadow:0 0 0 1px #ffffff33 inset,0 0 34px -4px color-mix(in srgb,var(--ac) 60%,transparent),0 18px 40px -16px #000}
.dp-hero-art--wide{width:min(1240px,94vw);margin-inline:auto}
.dp-hero-art--wide img{max-width:100%}

/* ---- Second screens: small vector scenes ---- */
.dp-scene{width:min(860px,92vw);margin:0 auto}
.dp-scene svg{display:block;width:100%;height:auto;overflow:visible}
.dp-scene-trend .g path{stroke:#ffffff22;stroke-width:2;stroke-dasharray:4 10;fill:none}
.dp-scene-trend .l{fill:none;stroke:var(--ac);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 16px color-mix(in srgb,var(--ac) 60%,transparent))}
.dp-scene-trend .l2{stroke:var(--ac2);stroke-width:3;transition-delay:.3s;filter:none}
.dp-scene.is-in .l{stroke-dashoffset:0}
.dp-scene-breath{width:min(600px,86vw)}
.dp-scene-breath .b{fill:color-mix(in srgb,var(--ac) 10%,transparent);stroke:var(--ac);stroke-width:2;transform-origin:300px 300px;transform:scale(.55);opacity:.8}
.dp-scene-breath .b1{fill:color-mix(in srgb,var(--ac) 36%,transparent)}
.dp-scene-breath.is-in .b{animation:dp-breathe 5.5s ease-in-out 4 both}.dp-scene-breath.is-in .b2{animation-delay:.3s}.dp-scene-breath.is-in .b3{animation-delay:.6s}
@keyframes dp-breathe{0%,100%{transform:scale(.55)}50%{transform:scale(1)}}
.dp-scene-ring1{width:min(560px,84vw)}
.dp-scene-ring1 .r0{fill:none;stroke:#ffffff14;stroke-width:64}
.dp-scene-ring1 .rf{fill:none;stroke:var(--ac);stroke-width:64;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 2.2s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 40px color-mix(in srgb,var(--ac) 60%,transparent))}
.dp-scene-ring1.is-in .rf{stroke-dashoffset:26}
.dp-scene-bands .sb{transform-origin:left center;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.dp-scene-bands .s1{fill:color-mix(in srgb,var(--ac) 70%,transparent)}.dp-scene-bands .s2{fill:color-mix(in srgb,var(--ac2) 80%,transparent);transition-delay:.2s}.dp-scene-bands .s3{fill:color-mix(in srgb,var(--ac) 45%,transparent);transition-delay:.4s}.dp-scene-bands .s4{fill:color-mix(in srgb,var(--ac2) 55%,transparent);transition-delay:.6s}
.dp-scene-bands.is-in .sb{transform:none}
.dp-rotate img{transition:transform 1.8s cubic-bezier(.65,0,.35,1) .8s}
.dp-rotate.is-in img{transform:rotate(-90deg) scale(.64)}

/* ---- Signature animations on the hero: finite, off for reduced motion ---- */
.dp-hero-art>i,.dp-hero-art>span,.dp-hero-art>svg.dp-cursor,.dp-hero-art>svg.dp-route{position:absolute;pointer-events:none}
.dp-ripple{left:50%;top:51%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;border:3px solid var(--ac);z-index:3;opacity:0;animation:dp-ripple 2.6s ease-out 3 both}
.dp-ripple.r1{animation-delay:1s}.dp-ripple.r2{animation-delay:1.4s}.dp-ripple.r3{animation-delay:1.8s}
@keyframes dp-ripple{0%{transform:scale(.25);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.dp-cursor{z-index:4;width:34px;left:20%;top:80%;fill:#fff;stroke:#000;stroke-width:1.2;filter:drop-shadow(0 6px 10px #000a);animation:dp-cursor 3.4s cubic-bezier(.45,0,.2,1) 1.2s both}
@keyframes dp-cursor{0%{left:20%;top:80%}100%{left:75%;top:20%}}
.dp-click{z-index:3;left:75%;top:19%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;border:3px solid var(--ac);opacity:0;animation:dp-click 1.2s ease-out 4.5s 2 both}
@keyframes dp-click{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
.dp-breath-bg{z-index:0;left:50%;top:48%;width:78%;aspect-ratio:1;margin:0;transform:translate(-50%,-50%) scale(.7);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 50%,transparent),transparent 66%);animation:dp-tvbreath 5.5s ease-in-out 4 both}
@keyframes dp-tvbreath{0%,100%{transform:translate(-50%,-50%) scale(.7)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.dp-focus{z-index:3;left:43.2%;top:41.6%;width:14.7%;height:12%;border-radius:1.2vw;border:3px solid #fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 70%,transparent),0 0 40px color-mix(in srgb,var(--ac) 70%,transparent);animation:dp-focus 7s ease-in-out 1.4s 2 both}
@keyframes dp-focus{0%,12%{left:43.2%}38%,50%{left:58.5%}76%,100%{left:73.8%}}
.dp-route{z-index:2;left:50%;top:0;width:min(900px,100%);height:100%;transform:translateX(-50%);overflow:visible}
.dp-route path{fill:none;stroke:var(--ac);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 8px var(--ac));animation:dp-draw 1.8s cubic-bezier(.45,0,.2,1) 1s forwards}
@keyframes dp-draw{to{stroke-dashoffset:0}}
.dp-elemnt{z-index:3;left:calc(50% + min(360px,40vw));top:38%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 20px;border-radius:18px;background:#0e1424;box-shadow:0 0 0 1px #ffffff33 inset,0 0 36px -4px color-mix(in srgb,var(--ac) 70%,transparent);opacity:0;animation:dp-pop .8s cubic-bezier(.16,1,.3,1) 2.2s forwards}
.dp-elemnt b{font:700 13px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:#fff}
.dp-elemnt em{font:700 12px/1 Inter,sans-serif;font-style:normal;color:var(--ac2);opacity:0;animation:dp-fade .6s ease 3s forwards}
@keyframes dp-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%)}}
.dp-elemnt em{transform:none}
@keyframes dp-fade{to{opacity:1}}
.dp-flow{position:absolute;inset:0;z-index:0;pointer-events:none}
.dp-dot{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;border-radius:50%;background:var(--ac);box-shadow:0 0 22px var(--ac);opacity:0;animation:dp-flow 2.6s ease-in 3 both;animation-delay:calc(1s + var(--d))}
@keyframes dp-flow{0%{opacity:0}15%{opacity:1}100%{left:50%;top:52%;opacity:0;transform:scale(.3)}}
.dp-moon{z-index:0;right:calc(50% - min(430px,50vw));top:6%;width:min(300px,50vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7de,var(--ac) 55%,transparent 72%);filter:blur(2px);opacity:.85;box-shadow:0 0 120px 20px color-mix(in srgb,var(--ac) 40%,transparent);animation:dp-moon 3s ease-out both}
@keyframes dp-moon{from{opacity:0;transform:translateY(40px)}to{opacity:.85;transform:none}}
.dp-band{z-index:0;left:-20%;width:140%;height:110px;filter:blur(36px);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac2) 55%,transparent),transparent);animation:dp-drift 16s linear 1 both}
.dp-band-1{top:30%}.dp-band-2{top:62%;animation-delay:2s;animation-direction:reverse}
@keyframes dp-drift{from{transform:translateX(-15%)}to{transform:translateX(15%)}}
.dp-hero-art--rings .dp-rings-hero{z-index:0}
@media(max-width:700px){.dp-route,.dp-elemnt{display:none}.dp-moon{right:-10%}}
@media(prefers-reduced-motion:reduce){.dp-hero-art>i,.dp-hero-art>span,.dp-hero-art>svg.dp-cursor,.dp-hero-art>svg.dp-route,.dp-dot,.dp-band,.dp-moon,.dp-elemnt,.dp-elemnt em,.dp-route path,.dp-scene .b,.dp-scene .sb,.dp-rotate img{animation:none!important;transition:none!important}.dp-ripple,.dp-dot,.dp-click,.dp-breath-bg{display:none}.dp-route path,.dp-scene-trend .l{stroke-dashoffset:0!important}.dp-scene-ring1 .rf{stroke-dashoffset:26!important}.dp-scene-bands .sb{transform:none!important}.dp-scene-breath .b{transform:scale(.8)!important}.dp-elemnt,.dp-elemnt em{opacity:1!important}.dp-cursor{left:75%!important;top:20%!important}.dp-focus{left:43.2%!important}.dp-rotate img{transform:rotate(-90deg) scale(.64)!important}}