@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Unbounded:wght@500;700&display=swap";*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0}body{background:#05070e;font-family:Manrope,Segoe UI,sans-serif}img,video{display:block}button{font:inherit}.midnight-shell{--beat-level:.1;--text:#e6ecff;--muted:#e6ecffb8;--line:#819acf59;--line-strong:#9ebaff94;min-height:100dvh;padding:14px 12px calc(90px + env(safe-area-inset-bottom));color:var(--text);background:radial-gradient(95% 110% at 88% -10%,#2d437a33,#0000 60%),radial-gradient(120% 85% at 10% 15%,#161e3a52,#0000 72%),linear-gradient(#010102 0%,#04060d 45%,#040409 100%);position:relative;overflow-x:hidden}.atmo-shadow{pointer-events:none;transform:scale(calc(1 + var(--beat-level) * .045));background:radial-gradient(60% 50% at 50% 28%,#293c7033,#0000 70%),radial-gradient(80% 60% at 50% 78%,#0c102770,#0000 72%);transition:transform .16s ease-out;position:absolute;inset:0}.grain{pointer-events:none;opacity:.06;background-image:radial-gradient(circle at 15% 20%,#fff .6px,#0000 .7px),radial-gradient(circle at 85% 38%,#fff .7px,#0000 .8px),radial-gradient(circle at 60% 75%,#fff .8px,#0000 .9px);background-size:120px 120px,150px 150px,180px 180px;position:absolute;inset:0}.chaos-pulse-field{z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.8;position:absolute;inset:0;overflow:hidden}.chaos-pulse-field span{left:var(--x);top:var(--y);width:var(--size);height:var(--size);filter:blur(20px);animation:chaos-pulse var(--duration) ease-in-out infinite;animation-delay:var(--delay);background:radial-gradient(circle,#7197ff61 0%,#4159b11f 48%,#0000 75%);border-radius:999px;position:absolute;transform:translate(-50%,-50%)scale(.7)}.topbar{z-index:2;text-align:center;margin-bottom:10px;position:relative}.chip{letter-spacing:1.4px;background:#060910bf;border:1px solid #99b5f459;border-radius:999px;width:fit-content;margin:0 auto;padding:5px 10px;font-size:11px;font-weight:700}.topbar h1{letter-spacing:2px;text-shadow:0 8px 26px #070a14f2;margin:7px 0 4px;font:700 clamp(34px,11vw,54px)/1 Unbounded,Arial Black,sans-serif}.meta{color:var(--muted);margin:0;font-size:clamp(12px,3.4vw,14px)}.scene-stage{z-index:2;width:min(100%,520px);min-height:clamp(460px,64dvh,760px);margin:0 auto;position:relative}.frame-chaos-ring{pointer-events:none;z-index:0;border-radius:32px;position:absolute;inset:-14px}.frame-chaos-ring:before,.frame-chaos-ring:after{content:"";border-radius:32px;transition:opacity 90ms linear,transform 90ms linear,filter 90ms linear;position:absolute;inset:0}.frame-chaos-ring:before{opacity:calc(.16 + var(--beat-level) * .95);transform:scale(calc(.985 + var(--beat-level) * .024));filter:drop-shadow(0 0 calc(5px + var(--beat-level) * 24px) #4878ffe6);border:1.6px solid #84adffb8}.frame-chaos-ring:after{opacity:calc(.08 + var(--beat-level) * .78);transform:scale(calc(1.004 + var(--beat-level) * .034));filter:blur(calc(1px + var(--beat-level) * 1.8px));border:2.2px solid #4067d06b}.ring-node{width:14px;height:14px;opacity:calc(.22 + var(--beat-level) * .9);transform:scale(calc(.52 + var(--beat-level) * var(--mul,1.8)));filter:blur(.2px) drop-shadow(0 0 calc(2px + var(--beat-level) * 14px) #5984fff2);background:radial-gradient(circle,#b5d1ff 0%,#487af733 68%,#0000 100%);border-radius:999px;transition:opacity 80ms linear,transform 80ms linear,filter 80ms linear;position:absolute}.node-1{--mul:1.55;top:4%;left:8%}.node-2{--mul:2.3;top:-1%;left:51%}.node-3{--mul:1.82;top:9%;right:8%}.node-4{--mul:2.1;bottom:14%;left:-1%}.node-5{--mul:1.68;bottom:22%;right:0%}.node-6{--mul:2.42;bottom:-1%;left:44%}.scene-layer{border:1px solid var(--line);z-index:1;background:linear-gradient(165deg,#080a12f2,#05070cf5);border-radius:24px;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.scene-back{filter:saturate(.75)brightness(.58);opacity:.72;transform:scale(.965)translateY(8px)}.scene-current{border-color:var(--line-strong);animation:.62s cubic-bezier(.16,1,.3,1) scene-appear;box-shadow:0 24px 48px #000000a3,inset 0 0 0 1px #8da7e53d}.media-frame{background:#04050a;flex:1;justify-content:center;align-items:flex-start;min-height:0;padding:8px;display:flex}.media-frame img,.media-frame video{width:100%;height:auto;max-height:calc(100% - 4px);aspect-ratio:var(--media-aspect,.75);object-fit:contain;object-position:top center;border-radius:14px}.scene-current .media-frame img{transform:scale(calc(1 + var(--beat-level) * .022));transition:transform .15s ease-out}.scene-layer footer{letter-spacing:1px;text-transform:uppercase;color:#d2e0ffd1;border-top:1px solid #6e89c447;justify-content:space-between;gap:10px;padding:11px 13px;font-size:11px;display:flex}.scene-layer footer span:last-child{color:#9bb9fceb}.film-roll{z-index:2;width:min(100%,760px);margin:0 auto;animation:.68s cubic-bezier(.18,.88,.22,1) both film-roll-enter;position:relative}.film-title{letter-spacing:1px;text-transform:uppercase;text-align:center;color:#e0ebfff0;margin:4px 0 12px;font:700 16px/1.2 Unbounded,Arial Black,sans-serif}.film-grid{column-count:2;column-gap:10px}.film-cell{break-inside:avoid;cursor:pointer;width:100%;transform:translateY(var(--shift,0px)) rotate(var(--tilt,0deg));filter:hue-rotate(var(--hue,0deg));animation:.54s cubic-bezier(.18,.88,.22,1) both film-cell-enter;animation-delay:var(--stagger,0s);background:0 0;border:0;margin:0 0 10px;padding:0;transition:transform .22s,filter .22s;display:block;position:relative}.film-cell:active{transform:translateY(var(--shift,0px)) rotate(var(--tilt,0deg)) scale(.986)}.film-cell img,.film-cell video{width:100%;aspect-ratio:var(--cell-aspect,.75);object-fit:cover;background:#05060b;border:1px solid #809ace59;border-radius:12px}.film-cell span{letter-spacing:.8px;text-transform:uppercase;color:#e6f0fff2;background:#040810ad;border:1px solid #93b0f347;border-radius:999px;padding:4px 7px;font-size:10px;position:absolute;bottom:8px;left:8px}.film-cell.is-video span{bottom:34px}.video-chip{letter-spacing:.9px;text-transform:uppercase;color:#f5f8ff;background:#12244cc7;border:1px solid #a8c5ff80;border-radius:999px;padding:3px 8px;font-size:10px;position:absolute;bottom:8px;left:8px}.finish{text-align:center;color:#d9e5ffe6;background:#06080eb3;border:1px solid #819acf57;border-radius:15px;margin:10px auto 0;padding:12px;font-size:13px}.start{left:50%;bottom:max(16px, env(safe-area-inset-bottom));z-index:5;letter-spacing:1px;color:#edf3ff;background:linear-gradient(160deg,#23356df5,#16224dfa);border:1px solid #9bb8f780;border-radius:17px;width:min(100% - 24px,380px);padding:15px 16px;font:700 14px/1 Unbounded,Arial Black,sans-serif;position:fixed;transform:translate(-50%);box-shadow:0 16px 40px #0009}.start:active{transform:translate(-50%)translateY(1px)scale(.993)}.viewer{z-index:20;background:#000000e0;place-items:center;padding:10px;display:grid;position:fixed;inset:0}.viewer-card{background:#070b15;border:1px solid #91acec6b;border-radius:16px;width:min(100%,540px);max-height:94dvh;position:relative;overflow:hidden}.viewer-card img,.viewer-card video{object-fit:contain;background:#02040b;width:100%;max-height:calc(94dvh - 70px)}.viewer-close{color:#e9f1ff;z-index:2;background:#060c1acc;border:1px solid #a2bcf885;border-radius:999px;width:34px;height:34px;font-size:22px;line-height:1;position:absolute;top:8px;right:8px}.viewer-bar{border-top:1px solid #819acf57;justify-content:space-between;align-items:center;gap:12px;padding:10px;display:flex}.viewer-bar span{text-align:center;letter-spacing:.9px;text-transform:uppercase;flex:1;font-size:12px}.viewer-bar button{color:#e9f1ff;background:#090e1ed9;border:1px solid #9bb8f76b;border-radius:10px;width:44px;height:34px;font-size:17px}@keyframes scene-appear{0%{opacity:0;transform:translateY(24px)scale(.968)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes film-roll-enter{0%{opacity:0;filter:blur(1.6px);transform:translateY(28px)scale(.985)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes film-cell-enter{0%{opacity:0;transform:translateY(calc(var(--shift,0px) + 16px)) rotate(var(--tilt,0deg)) scale(.96)}to{opacity:1;transform:translateY(var(--shift,0px)) rotate(var(--tilt,0deg)) scale(1)}}@keyframes chaos-pulse{0%{opacity:.2;transform:translate(-50%,-50%)scale(.62)}35%{opacity:.46;transform:translate(-50%,-50%)scale(1.08)}66%{opacity:.31;transform:translate(-50%,-50%)scale(.86)}to{opacity:.18;transform:translate(-50%,-50%)scale(.64)}}@media (width>=768px){.midnight-shell{padding-top:20px}.scene-stage{min-height:clamp(560px,70dvh,890px)}.film-grid{column-count:3}}