:root{color-scheme:dark;background:#08080a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}main{height:100svh;position:relative;overflow:hidden;isolation:isolate;background:#08080a}.reveal{position:absolute;left:50%;top:50%;width:max(110vw,110svh);height:max(160vh,145vw);transform:translate(-50%,-50%) rotate(19deg);isolation:isolate;animation:arrive 2.5s ease-out both}.reveal img{position:absolute;width:100%;height:100%;object-fit:cover;filter:brightness(.24);opacity:.8}.color{position:absolute;inset:0;background:linear-gradient(90deg,#07090d 6%,#151f42 36%,#825edf 48.8%,#edcaff 49.9%,#df98ef 50.7%,#4c2446 54%,#09080b 86%);mix-blend-mode:color;animation:palette 18s linear infinite}.spill{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#7f43ec8a,transparent 48%);mix-blend-mode:screen;animation:spill 8s ease-in-out infinite,palette 18s linear infinite}.line{position:absolute;top:0;bottom:0;left:49.15%;width:1.7%;background:linear-gradient(180deg,#4c2251 0%,#db72ff 30%,#f8ddff 48%,#84e0ff 64%,#153146 88%);background-size:100% 250%;mix-blend-mode:screen;box-shadow:0 0 24px #b26bfe88,0 0 100px #8e68ff35;animation:sweep 9s ease-in-out infinite,palette 18s linear infinite;mask-image:linear-gradient(transparent 12%,#000 30%,#000 70%,transparent 88%)}.shadow{position:absolute;inset:0;background:linear-gradient(90deg,#0009,transparent 38%,transparent 53%,#0009),linear-gradient(#000b,transparent 35%,transparent 62%,#000b)}.frame{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 12%,#08080a44 57%,#08080aed 100%);pointer-events:none}button{position:absolute;bottom:24px;right:24px;width:44px;height:44px;border:1px solid #ffffff14;border-radius:50%;color:#c3b9ce77;background:#09090a55;cursor:pointer;backdrop-filter:blur(10px)}button:hover,button:focus-visible{color:#fff;background:#ffffff12;outline:1px solid #c9b6e4}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.paused *{animation-play-state:paused!important}@keyframes palette{to{filter:hue-rotate(360deg)}}@keyframes sweep{0%,100%{background-position:0 0;opacity:.45}50%{background-position:0 100%;opacity:1}}@keyframes spill{0%,100%{opacity:.35;transform:translateY(-8%)}50%{opacity:.85;transform:translateY(8%)}}@keyframes arrive{from{opacity:0}to{opacity:1}}@media(max-width:600px){.reveal{width:160vw;height:140svh;transform:translate(-50%,-50%) rotate(13deg)}.line{width:1.5%;left:49.25%}}@media(prefers-reduced-motion:reduce){*{animation:none!important}button{display:none}}
