:root{--text:#efefef;--text-h:#c8c8c8;--text-date:#afb2b8;--bg:#1e1e49;--border:#4a9eff;--accent-bg:#2841a3aa;--social-bg:#0d223180;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:16px/145% var(--sans);letter-spacing:.18px;color:var(--text);background-color:var(--bg)}body{margin:0}h1,h2{font-family:var(--mono);color:var(--text-h);-webkit-text-decoration:bold;text-decoration:bold;font-weight:500}h1{letter-spacing:-1.68px;text-shadow:0 4px 4px #00000040;margin:32px 0;font-size:60px}@media (width<=1024px){h1{margin:40px 0;font-size:40px}}h2{letter-spacing:-.24px;text-overflow:ellipsis;white-space:nowrap;margin:0 0 8px;font-size:24px;line-height:118%;overflow:hidden}@media (width<=1024px){h2{font-size:20px}}#app{text-align:center;box-sizing:border-box;flex-direction:column;width:100%;min-height:100vh;margin:0;padding:0;display:flex;position:fixed}#bg-container{z-index:-1;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}#bg-container img,#bg-container video{object-fit:cover;width:100%;height:100%}#top{z-index:10;width:100%;padding:32px 40px 24px;display:flex}@media (width<=1024px){#top{gap:20px;padding:20px}}#top .nav{justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}@media (width<=444px){#top .nav{flex-wrap:wrap;justify-content:center;gap:12px}}#top .nav .logo-container{align-items:center;gap:8px;display:inline-flex}#top .nav .logo-container .logo{width:32px;height:32px}#top .nav .logo-container .logo img{object-fit:cover;width:100%;height:100%}#top .nav .logo-container .logo-text{color:var(--text-h);font-size:20px;font-weight:500}#top .nav .nav-buttons{color:var(--text-h);gap:8px;margin-right:45px;font-size:16px;display:flex}#top .nav .nav-buttons button{cursor:pointer;border:1px solid var(--border);background:var(--text);border-radius:6px;align-items:center;width:55px;height:40px;padding:6px 12px;transition:box-shadow .3s;display:flex}#top .nav .nav-buttons button:hover{box-shadow:var(--shadow)}#top .nav .nav-buttons button img{object-fit:cover;width:100%;height:100%}#center{z-index:10;flex-direction:column;flex-grow:1;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#center p{color:var(--text-date)}#bottom{text-align:left;z-index:10;flex-direction:column;gap:32px;padding:32px 40px 24px;display:flex}@media (width<=1024px){#bottom{gap:20px;padding:20px}}#bottom .title{color:var(--text-h);text-overflow:ellipsis;white-space:nowrap;font-size:20px;font-weight:500;overflow:hidden}#bottom .date{color:var(--text-date);text-overflow:ellipsis;white-space:nowrap;flex-direction:column;gap:16px;font-size:16px;display:flex;overflow:hidden}@media (width<=1024px){#bottom .date{gap:12px}}#bottom .explanation{text-align:left;max-width:60%;color:var(--text);-webkit-line-clamp:4;-webkit-box-orient:vertical;font-size:17px;line-height:150%;display:-webkit-box;overflow:hidden}@media (width<=1024px){#bottom .explanation{max-width:80%;font-size:16px}}@media (width<=674px){#bottom .explanation{max-width:100%;font-size:16px}}#middle{text-align:center;color:var(--text-h);z-index:10;flex-direction:column;gap:8px;font-size:16px;display:flex}@media (width<=1024px){#middle{gap:18px;padding:32px 20px 24px}}#middle p{color:var(--text-date)}#reload-section{justify-content:center;align-items:center;width:100%;margin:32px 0;display:flex}#reload-section button{cursor:pointer;border:1px solid var(--border);background:var(--text);border-radius:6px;align-items:center;width:100px;height:80px;padding:6px 12px;transition:box-shadow .3s;display:flex}#reload-section button:hover{box-shadow:var(--shadow)}#reload-section button img{object-fit:cover;width:100%;height:100%}#loading-screen{background-color:var(--bg);z-index:9999;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.loader{border:8px solid #f3f3f3;border-top:8px solid var(--border);border-radius:50%;width:30px;height:30px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
