*{box-sizing:border-box;margin:0;font-family:Quicksand,sans-serif}html{font-size:10vw}#app{height:100vh;display:flex}.clock{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0f1226,#1d2a5b 60%,#0b3b5a);width:100%}.clock div{margin:0 10px}.separator{align-items:center;color:#fff;font-family:Quicksand,sans-serif;font-weight:200;font-size:2rem}body{background-color:#0f1226}.color{background:radial-gradient(circle at center,rgba(90,209,255,.5) 0%,rgba(60,150,210,.35) 15%,rgba(40,90,160,.22) 32%,rgba(29,42,91,.1) 52%,rgba(15,18,38,0) 75%) top right/200% 200%,#0f1226;background-position:var(--x, 100%) var(--y, 0%),0 0;transition:background-position 4s ease-in-out;width:100%}.joke-display{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:100vh;padding:12vh 14vw;overflow:hidden;color:#fff;font-family:Quicksand,sans-serif;background:linear-gradient(160deg,#0f1226,#1d2a5b 60%,#0b3b5a)}.joke-display:before,.joke-display:after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(6vmax);opacity:.35;animation:joke-drift 20s ease-in-out infinite alternate}.joke-display:before{top:-30vmax;left:-20vmax;background:radial-gradient(circle,#5ad1ff,transparent 65%)}.joke-display:after{bottom:-30vmax;right:-20vmax;background:radial-gradient(circle,#8a5cff,transparent 65%);animation-duration:26s;animation-direction:alternate-reverse}@keyframes joke-drift{to{transform:translate(12vmax,8vmax) scale(1.2)}}.joke-box{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:76vh;overflow:hidden;border-radius:3vw;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);backdrop-filter:blur(12px);box-shadow:0 2vw 6vw #00000059,inset 0 0 4vw #5ad1ff14}.joke-box:before{content:"?!";position:absolute;top:-4vw;right:2vw;font-size:22vw;font-weight:700;color:#5ad1ff;opacity:.07;pointer-events:none}.joke-text{position:relative;width:100%;padding:5vw 7vw;text-align:center;font-size:5vw;font-weight:200;line-height:1.3;overflow-wrap:anywhere;text-shadow:0 0 2vw rgba(90,209,255,.45);animation:joke-in .9s ease-out}@keyframes joke-in{0%{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}.quote-display{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:100vh;padding:12vh 14vw;overflow:hidden;color:#fff;font-family:Quicksand,sans-serif;background:linear-gradient(160deg,#0f1226,#1d2a5b 60%,#0b3b5a)}.quote-display:before,.quote-display:after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(6vmax);opacity:.35;animation:quote-drift 20s ease-in-out infinite alternate}.quote-display:before{top:-30vmax;right:-20vmax;background:radial-gradient(circle,#5ad1ff,transparent 65%)}.quote-display:after{bottom:-30vmax;left:-20vmax;background:radial-gradient(circle,#8a5cff,transparent 65%);animation-duration:26s;animation-direction:alternate-reverse}@keyframes quote-drift{to{transform:translate(-12vmax,8vmax) scale(1.2)}}.quote-box{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:76vh;overflow:hidden;border-radius:3vw;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);backdrop-filter:blur(12px);box-shadow:0 2vw 6vw #00000059,inset 0 0 4vw #5ad1ff14}.quote-box:before{content:"“";position:absolute;top:-3vw;left:2vw;font-family:Quicksand,sans-serif;font-size:30vw;line-height:1;color:#5ad1ff;opacity:.1;pointer-events:none}.quote-text{position:relative;width:100%;padding:5vw 7vw;text-align:center;font-size:5vw;font-weight:200;text-shadow:0 0 2vw rgba(90,209,255,.35);animation:quote-in .9s ease-out}.quote-text .quote{line-height:1.3;font-style:italic;overflow-wrap:anywhere}.quote-text .author{margin-top:.8em;text-align:end;font-size:.7em;font-style:normal;font-weight:300;letter-spacing:.08em;color:#5ad1ff;text-shadow:none}.quote-text .author:before{content:"";display:inline-block;width:1.5em;height:1px;margin-right:.6em;vertical-align:middle;background:#5ad1ff}@keyframes quote-in{0%{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}.player{position:relative;display:flex;flex-direction:column;align-items:center;gap:1vw;width:100%;height:100%;min-height:30vw;padding:2vw;box-sizing:border-box;overflow:hidden;color:#fff;font-family:Quicksand,sans-serif;background:linear-gradient(160deg,#0f1226,#1d2a5b 60%,#0b3b5a)}.wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.info,.progress,.controls,.playlist{position:relative;z-index:1}.info{text-align:center}.track-count{font-size:1.5vw;opacity:.6;letter-spacing:.2em}.title{font-size:5vw;font-weight:200}.progress{display:flex;align-items:center;gap:1vw;width:70%;font-size:1.5vw;opacity:.85}.progress input{flex:1;height:6px;appearance:none;border-radius:3px;cursor:pointer;background:linear-gradient(to right,#5ad1ff var(--pct),rgba(255,255,255,.2) var(--pct))}.progress input::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:white}.controls{display:flex;align-items:center;gap:2vw;margin-top:auto}.controls button{width:5vw;height:5vw;border:none;border-radius:50%;font-size:2.2vw;color:#fff;cursor:pointer;background:rgba(255,255,255,.12);transition:transform .15s,background .15s}.controls button:hover{transform:scale(1.1);background:rgba(255,255,255,.25)}.controls button.main{width:7vw;height:7vw;font-size:3vw;background:#5ad1ff;color:#0f1226}.controls button.active{background:rgba(90,209,255,.4)}.playlist{position:absolute;inset:auto 2vw 10vw 2vw;max-height:50%;margin:0;padding:.5vw;overflow-y:auto;list-style:none;font-size:2vw;border-radius:1vw;background:rgba(10,14,40,.92);backdrop-filter:blur(8px)}.playlist li{padding:.6vw 1vw;border-radius:.6vw;cursor:pointer}.playlist li:hover{background:rgba(255,255,255,.1)}.playlist li.current{color:#5ad1ff;background:rgba(90,209,255,.12)}.playlist .num{display:inline-block;width:3vw;opacity:.5}.timer{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#0f1226,#1d2a5b 60%,#0b3b5a);width:100%;font:200 5vw Quicksand,sans-serif;color:#fff}.timer .timer{background:none}.timer div{margin:0 10px}.controls{display:flex;align-items:center;justify-content:center;margin-top:20px}.controls input{width:10vw;height:10vh;font:200 7vh Quicksand,sans-serif;text-align:center;color:#fff;background:rgba(255,255,255,.12);border:2px solid transparent;border-radius:1vw;outline:none}.controls input:focus{border-color:#5ad1ff}.timer button{margin:30px;padding:.4em 1.6em;font:200 3vw Quicksand,sans-serif;color:#0f1226;background:#5ad1ff;border:none;border-radius:999px;cursor:pointer;transition:transform .15s}.timer button:hover{transform:scale(1.08)}.controls .separator{align-items:center;color:#fff;font:200 1.5em Quicksand,sans-serif}.number{display:flex;width:1rem}.number-part{fill:#5ad1ff;filter:drop-shadow(0 0 12px rgba(90,209,255,.6));opacity:.05;transition:opacity .75s ease}.is-active{opacity:1}.countdown{display:flex;align-items:center;justify-content:center;width:100%}.countdown div{margin:0 10px}canvas{position:absolute;overflow-y:hidden;overflow-x:hidden;width:100%;margin:0}.countdown-separator{align-items:center;color:#fff;font-family:Quicksand,sans-serif;font-weight:200;font-size:2rem}@keyframes flash{0%{opacity:0}10%{opacity:.85}40%,to{opacity:0}}.timer-flash:after{content:"";position:absolute;inset:0;background:white;pointer-events:none;animation:flash 1s infinite}.timer-expired{background:#ffffff}.demo{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0f1226,#1d2a5b 60%,#0b3b5a);font-family:Quicksand,sans-serif}.demo-aurora{position:absolute;width:60vmax;height:40vmax;border-radius:50%;filter:blur(8vmax);mix-blend-mode:screen;opacity:.45;animation:demo-drift 18s ease-in-out infinite alternate,demo-hue 12s linear infinite}.demo-aurora-1{top:-20vmax;left:-15vmax;background:radial-gradient(circle,#5ad1ff,transparent 65%)}.demo-aurora-2{bottom:-20vmax;right:-15vmax;background:radial-gradient(circle,#8a5cff,transparent 65%);animation-duration:23s,16s;animation-direction:alternate-reverse,normal}.demo-aurora-3{top:20vmax;left:20vmax;background:radial-gradient(circle,#2cffb5,transparent 65%);opacity:.25;animation-duration:29s,20s}@keyframes demo-drift{0%{transform:translate(0) rotate(0) scale(1)}50%{transform:translate(12vmax,8vmax) rotate(40deg) scale(1.25)}to{transform:translate(-8vmax,14vmax) rotate(-30deg) scale(.9)}}@keyframes demo-hue{to{filter:blur(8vmax) hue-rotate(360deg)}}.demo-star{position:absolute;border-radius:50%;background:white;box-shadow:0 0 .6vmin #fff;opacity:0;animation:demo-twinkle ease-in-out infinite}@keyframes demo-twinkle{0%,to{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.4)}}.demo-stage{position:relative;width:70vmin;height:70vmin;display:flex;align-items:center;justify-content:center;margin-bottom:10vmin}.demo-ripple{position:absolute;width:20vmin;height:20vmin;border:.3vmin solid #5ad1ff;border-radius:50%;opacity:0;animation:demo-ripple 4.5s ease-out infinite}@keyframes demo-ripple{0%{transform:scale(.5);opacity:.8}to{transform:scale(4.5);opacity:0}}.demo-blob{position:absolute;width:30vmin;height:30vmin;background:linear-gradient(135deg,#5ad1ff,#8a5cff,#ff5ccf);background-size:300% 300%;filter:blur(1vmin);opacity:.55;animation:demo-morph 8s ease-in-out infinite,demo-gradient 6s ease infinite,demo-spin 20s linear infinite}@keyframes demo-morph{0%,to{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}25%{border-radius:30% 60% 70% 40%/50% 60% 30%}50%{border-radius:50% 50% 33% 67%/55% 27% 73% 45%}75%{border-radius:33% 67% 58% 42%/63% 68% 32% 37%}}@keyframes demo-gradient{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes demo-spin{to{transform:rotate(360deg)}}.demo-orbit{position:absolute;width:var(--size);height:var(--size);border-radius:50%;border:1px solid hsla(var(--hue),90%,70%,.25);animation:demo-spin var(--dur) linear infinite}.demo-planet{position:absolute;top:-1.2vmin;left:50%;width:2.4vmin;height:2.4vmin;margin-left:-1.2vmin;border-radius:50%;background:hsl(var(--hue),90%,70%);box-shadow:0 0 2vmin hsl(var(--hue),90%,65%)}.demo-float{perspective:90vmin;animation:demo-bob 5s ease-in-out infinite}@keyframes demo-bob{0%,to{transform:translateY(-2vmin)}50%{transform:translateY(2vmin)}}.demo-cube{position:relative;width:16vmin;height:16vmin;transform-style:preserve-3d;animation:demo-tumble 14s linear infinite}@keyframes demo-tumble{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(720deg) rotate(360deg)}}.demo-face{position:absolute;inset:0;border:.3vmin solid rgba(255,255,255,.7);background:rgba(90,209,255,.15);box-shadow:inset 0 0 3vmin #5ad1ff99,0 0 3vmin #5ad1ff66;backdrop-filter:blur(2px);animation:demo-glow 4s ease-in-out infinite alternate}.demo-front{transform:translateZ(8vmin)}.demo-back{transform:rotateY(180deg) translateZ(8vmin)}.demo-right{transform:rotateY(90deg) translateZ(8vmin)}.demo-left{transform:rotateY(-90deg) translateZ(8vmin)}.demo-top{transform:rotateX(90deg) translateZ(8vmin)}.demo-bottom{transform:rotateX(-90deg) translateZ(8vmin)}@keyframes demo-glow{0%{background:rgba(90,209,255,.1)}to{background:rgba(138,92,255,.3)}}.demo-title{position:absolute;bottom:6vmin;margin:0;display:flex;font-size:7vmin;font-weight:200;letter-spacing:.3vmin}.demo-title span{display:inline-block;background:linear-gradient(90deg,#5ad1ff,#ffffff,#8a5cff,#5ad1ff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:demo-wave 2.4s ease-in-out infinite,demo-sweep 5s linear infinite;animation-delay:calc(var(--i) * .1s),calc(var(--i) * -.15s)}@keyframes demo-wave{0%,to{transform:translateY(0)}50%{transform:translateY(-1.6vmin)}}@keyframes demo-sweep{to{background-position:-300% 0}}@media (prefers-reduced-motion: reduce){.demo *{animation-duration:60s!important}}.news{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:100vh;padding:8vh 10vw;overflow:hidden;color:#fff;font-family:Quicksand,sans-serif;background:linear-gradient(160deg,#0f1226,#1d2a5b 60%,#0b3b5a)}.news:before,.news:after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(6vmax);opacity:.3;animation:news-drift 22s ease-in-out infinite alternate}.news:before{top:-30vmax;left:-20vmax;background:radial-gradient(circle,#5ad1ff,transparent 65%)}.news:after{bottom:-30vmax;right:-20vmax;background:radial-gradient(circle,#8a5cff,transparent 65%);animation-direction:alternate-reverse}@keyframes news-drift{to{transform:translate(12vmax,8vmax) scale(1.2)}}.news-panel{position:relative;z-index:1;width:100%;max-height:84vh;overflow:hidden;padding:3vmin 4vmin;border-radius:3vmin;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);backdrop-filter:blur(12px);box-shadow:0 2vmin 6vmin #00000059}.news-header{display:flex;align-items:center;gap:1.2vmin;margin-bottom:2.5vmin;font-size:2.2vmin;letter-spacing:.3em;text-transform:uppercase;color:#5ad1ff}.news-live{width:1.2vmin;height:1.2vmin;border-radius:50%;background:#5ad1ff;box-shadow:0 0 1.5vmin #5ad1ff;animation:news-pulse 1.6s ease-in-out infinite}@keyframes news-pulse{50%{opacity:.3;transform:scale(.7)}}.news-status{padding:4vmin 0;text-align:center;font-size:3vmin;font-weight:200;opacity:.7}.news-list{display:flex;flex-direction:column;gap:2.2vmin;margin:0;padding:0;list-style:none}.news-item{opacity:0;animation:news-in .8s ease-out forwards;animation-delay:calc(var(--i) * .12s)}.news-link{display:flex;align-items:baseline;gap:2.5vmin;padding:1vmin 1.5vmin;margin:-1vmin -1.5vmin;border-radius:1.5vmin;color:inherit;text-decoration:none;transition:background .2s}.news-link:hover{background:rgba(90,209,255,.12)}.news-link:hover .news-title{color:#5ad1ff}@keyframes news-in{0%{opacity:0;transform:translate(-3vmin)}to{opacity:1;transform:translate(0)}}.news-rank{flex:none;width:5vmin;font-size:4vmin;font-weight:200;color:#5ad1ff;opacity:.8}.news-body{min-width:0}.news-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:3.4vmin;font-weight:300;line-height:1.25}.news-meta{margin-top:.5vmin;font-size:2vmin;letter-spacing:.05em;opacity:.55}.church-display{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:100vh;padding:12vh 14vw;overflow:hidden;color:#fff;font-family:Quicksand,sans-serif;background:linear-gradient(160deg,#0f1226,#1d2a5b 60%,#0b3b5a)}.church-display:before,.church-display:after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(6vmax);opacity:.35;animation:church-drift 20s ease-in-out infinite alternate}.church-display:before{top:-30vmax;right:-20vmax;background:radial-gradient(circle,#5ad1ff,transparent 65%)}.church-display:after{bottom:-30vmax;left:-20vmax;background:radial-gradient(circle,#8a5cff,transparent 65%);animation-duration:26s;animation-direction:alternate-reverse}@keyframes church-drift{to{transform:translate(-12vmax,8vmax) scale(1.2)}}.church-box{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:76vh;overflow:hidden;border-radius:3vw;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);backdrop-filter:blur(12px);box-shadow:0 2vw 6vw #00000059,inset 0 0 4vw #5ad1ff14}.church-box:before{content:"“";position:absolute;top:-3vw;left:2vw;font-family:Quicksand,sans-serif;font-size:30vw;line-height:1;color:#5ad1ff;opacity:.1;pointer-events:none}.church-text{position:relative;width:100%;padding:5vw 7vw;text-align:center;font-size:5vw;font-weight:200;text-shadow:0 0 2vw rgba(90,209,255,.35);animation:church-in .9s ease-out}.church-text .quote{line-height:1.3;font-style:italic;overflow-wrap:anywhere}.church-text .author{margin-top:.8em;text-align:end;font-size:.7em;font-style:normal;font-weight:300;letter-spacing:.08em;color:#5ad1ff;text-shadow:none}.church-text .author:before{content:"";display:inline-block;width:1.5em;height:1px;margin-right:.6em;vertical-align:middle;background:#5ad1ff}@keyframes church-in{0%{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
