@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Manrope:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
:root{font-family:"DM Sans",sans-serif;color:#f0f4fc;color-scheme:dark;background:#050713}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #8deeff;outline-offset:4px}
#installation{position:relative;height:100vh;height:100svh;min-height:470px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 53% 49%,#1c1734 0%,#080c1b 54%,#04050e 100%)}
#shader,#particles,.grain,.vignette,.transition{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#shader{z-index:0;display:block}#particles{z-index:1}.vignette{z-index:2;background:radial-gradient(ellipse at 50% 45%,transparent 34%,rgba(2,3,12,.18) 64%,rgba(1,3,11,.55) 100%)}.grain{z-index:3;opacity:.23;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");background-size:180px;mix-blend-mode:screen}.transition{z-index:4;background:#040611;opacity:0;transition:opacity .62s cubic-bezier(.25,.7,.25,1)}.transition.cover{opacity:1}
.pointer-orb{pointer-events:none;position:absolute;z-index:5;inset:auto;width:170px;height:170px;top:-150px;left:-150px;border-radius:50%;border:1px solid rgba(197,241,255,.08);box-shadow:inset 0 0 28px rgba(183,245,255,.025),0 0 35px rgba(113,198,250,.02);transform:translate(-50%,-50%);transition:opacity .2s;opacity:0}
.topbar,.art-title,.vertical-meta,.scene-index,.bottom{position:absolute;z-index:6}.topbar{top:0;left:0;right:0;padding:31px 43px;display:flex;align-items:flex-start;justify-content:space-between}.identity{color:#f3f6fb;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.35em;display:flex;align-items:center;gap:15px}.identity small{display:block;margin-top:7px;color:rgba(212,224,244,.42);font-family:Manrope,sans-serif;font-size:8px;letter-spacing:.25em;font-weight:500}.identity-mark{position:relative;width:28px;height:28px;display:block}.identity-mark i{position:absolute;inset:2px;border:1px solid rgba(203,238,254,.85);border-radius:50%;transform:rotate(60deg) scaleX(.4)}.identity-mark i:nth-child(2){transform:rotate(0deg) scaleX(.4);border-color:#b7b3eb}.identity-mark i:nth-child(3){transform:rotate(-60deg) scaleX(.4);border-color:#6dd9f1}
.topright{display:flex;align-items:center;gap:32px;padding-top:9px;font-size:9px;letter-spacing:.19em;color:rgba(223,232,246,.5)}.live-mark{display:flex;gap:11px;align-items:center}.live-dot{width:5px;height:5px;border-radius:50%;background:#79f6db;box-shadow:0 0 0 4px rgba(72,225,180,.08),0 0 13px #79f6db;animation:beacon 3s ease-in-out infinite}.edition{color:rgba(219,230,250,.33)}
.art-title{top:19%;left:50%;width:min(80%,850px);text-align:center;transform:translateX(-50%);pointer-events:none;text-shadow:0 1px 32px #03030f}.eyebrow{display:flex;justify-content:center;align-items:center;gap:15px;color:rgba(215,235,255,.62);font-size:9px;letter-spacing:.35em;font-weight:500}.eyebrow .line{width:32px;height:1px;background:linear-gradient(90deg,transparent,rgba(186,221,241,.5))}.eyebrow .line:last-child{transform:rotate(180deg)}h1{font:400 clamp(48px,6.2vw,101px)/1.16 "Playfair Display",Georgia,serif;letter-spacing:-.035em;margin:18px 0 8px;background:linear-gradient(105deg,#dfedff 17%,#fdfaff 45%,#b1cbe7 74%,#f7e7ee);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 22px rgba(72,80,185,.13))}.art-title p{font-family:"Manrope",sans-serif;color:rgba(213,221,241,.56);font-size:11px;letter-spacing:.2em;font-weight:300;margin:0}
.vertical-meta{top:43%;left:45px;display:flex;align-items:center;gap:13px;writing-mode:vertical-rl;font-size:9px;letter-spacing:.23em;color:rgba(223,234,255,.36)}.vertical-line{width:1px;height:64px;background:linear-gradient(to bottom,rgba(228,231,250,.4),transparent)}
.scene-index{right:45px;top:58%;text-align:right;display:flex;flex-direction:column;gap:11px}.scene-no{font-size:9px;letter-spacing:.27em;color:rgba(224,233,250,.45)}.scene-no strong{font-size:13px;font-weight:400;color:rgba(242,246,255,.92);padding-left:8px}.tags{font-size:8px;letter-spacing:.16em;color:rgba(210,220,244,.4);max-width:230px;line-height:1.75}
.bottom{bottom:0;left:0;right:0;padding:0 43px 34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px}.tiny-label{display:block;font-size:9px;letter-spacing:.24em;color:rgba(210,231,249,.35);margin-bottom:9px}.seed{border:0;background:transparent;color:rgba(240,244,255,.8);font-size:11px;letter-spacing:.2em;padding:2px 0}.copy-icon{opacity:.6;font-size:13px;margin-left:5px}.controls{display:flex;align-items:center;gap:9px;padding:7px;border:1px solid rgba(179,204,255,.16);background:rgba(7,11,28,.55);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:100px;box-shadow:0 9px 43px rgba(0,0,0,.22)}.action{height:45px;border:0;color:#eaf5ff;display:inline-flex;align-items:center;justify-content:center;gap:11px;border-radius:99px}.quiet{background:transparent;min-width:45px;font-size:10px;letter-spacing:.17em;padding:0 13px;color:rgba(224,238,252,.65)}.quiet:hover{background:rgba(234,245,255,.07);color:white}.auto-indicator{width:5px;height:5px;background:#8cfad8;border-radius:50%;box-shadow:0 0 12px #8cfad8}.auto-on[aria-pressed=false] .auto-indicator{background:#66738f;box-shadow:none}.primary{min-width:196px;background:#e6edf7;color:#10182c;box-shadow:0 0 25px rgba(153,195,245,.15);padding:0 19px 0 22px;font-size:9px;font-weight:600;letter-spacing:.2em;transition:background .22s,transform .22s,box-shadow .22s}.primary:hover{background:white;transform:translateY(-2px);box-shadow:0 0 35px rgba(188,210,255,.28)}.arrow{font-size:20px;line-height:1;font-weight:300;margin-left:2px}.hint{text-align:right;font-size:8px;line-height:2;letter-spacing:.21em;color:rgba(206,222,244,.35)}.hint-divider{padding:0 8px}
.play-icon{display:none}body.paused .pause-icon{display:none}body.paused .play-icon{display:block}.toast{position:absolute;z-index:10;top:90px;left:50%;transform:translateX(-50%) translateY(-8px);border:1px solid rgba(191,233,255,.25);border-radius:100px;background:rgba(5,10,25,.8);padding:11px 22px;color:#e2f3ff;letter-spacing:.15em;font-size:10px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.fallback{position:absolute;z-index:9;bottom:100px;text-align:center;width:100%;color:#cdd4fa;font-size:11px}
@keyframes beacon{50%{opacity:.4;box-shadow:0 0 0 7px rgba(72,225,180,.03),0 0 6px #79f6db}}
@media(max-width:760px){.topbar{padding:23px 21px}.identity{font-size:11px;gap:10px;letter-spacing:.24em}.identity-mark{width:22px;height:22px}.identity small{font-size:6px;letter-spacing:.17em}.topright{gap:0;font-size:7px;letter-spacing:.1em}.edition{display:none}.art-title{top:20%;width:95%}h1{font-size:clamp(43px,10vw,66px);margin:16px 0 12px}.eyebrow{font-size:7px;letter-spacing:.18em;gap:7px}.eyebrow .line{width:17px}.art-title p{font-size:10px;letter-spacing:.1em}.vertical-meta{left:18px;top:49%;font-size:7px}.vertical-line{height:29px}.scene-index{right:21px;top:auto;bottom:147px;gap:8px}.scene-no{font-size:8px}.tags{font-size:7px;max-width:180px}.bottom{grid-template-columns:1fr auto;grid-template-rows:auto auto;row-gap:19px;padding:0 17px 18px;align-items:center}.controls{grid-column:1 / 3;grid-row:1;justify-self:center;gap:2px;padding:5px}.specimen{grid-row:2;grid-column:1}.hint{grid-row:2;grid-column:2;font-size:7px}.hint-divider{display:none}.hint span:last-child{display:none}.primary{min-width:175px;height:43px;font-size:8px}.quiet{min-width:38px;padding:0 9px}.tiny-label{font-size:7px;margin-bottom:7px}.seed{font-size:10px}}
@media(max-height:620px){.art-title{top:15%}.scene-index{top:55%}.bottom{padding-bottom:14px}.topbar{padding-top:17px}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}.primary{transition:none}.transition{transition:opacity .1s}.pointer-orb{display:none}}

/* CINEMATIC V2: brilliant blue, crystalline glow and a bigger stage */
#installation{background:radial-gradient(ellipse at 51% 55%,#102b64 0%,#081733 39%,#030817 78%,#02040d 100%)}
.topbar{padding-top:28px}
.art-title{top:11.5%;text-shadow:0 0 40px rgba(7,25,59,.75)}
.art-title h1{font-size:clamp(43px,5.4vw,82px);background:linear-gradient(120deg,#cbfaff 8%,#ffffff 28%,#85e8ff 58%,#b9c9ff 82%,#f7ffff 100%);background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 0 20px rgba(62,205,255,.19))}
.art-title p{color:rgba(210,242,255,.78);text-shadow:0 0 16px rgba(40,156,230,.33)}
.eyebrow{color:rgba(175,228,255,.72)}
.live-dot{background:#7efaff;box-shadow:0 0 0 5px rgba(53,190,255,.1),0 0 20px rgba(83,227,255,1)}
.controls{border-color:rgba(118,219,255,.28);box-shadow:0 0 42px rgba(25,143,235,.18),0 9px 43px rgba(0,0,0,.27)}
.primary{background:linear-gradient(120deg,#f1faff,#c0eeff);box-shadow:0 0 35px rgba(30,202,255,.19)}
.primary:hover{box-shadow:0 0 45px rgba(59,218,255,.43)}
.vignette{background:radial-gradient(ellipse at 50% 54%,transparent 36%,rgba(2,4,17,.12) 67%,rgba(1,4,12,.56) 100%)}
.pointer-orb{border-color:rgba(172,235,255,.23);box-shadow:0 0 60px rgba(20,156,255,.09),inset 0 0 25px rgba(170,225,255,.08)}
@media(max-width:760px){.art-title{top:15%}.art-title h1{font-size:clamp(38px,9.1vw,60px)}.scene-index{bottom:157px}.topbar{padding-top:21px}}