@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700;800&family=Oswald:wght@500;600;700&family=Roboto:wght@400;500;700;900&family=Teko:wght@500;600;700&family=Rajdhani:wght@500;600;700&family=Exo+2:wght@500;600;700;800&family=Orbitron:wght@500;700;800&family=Bebas+Neue&display=swap');
*{box-sizing:border-box}body{margin:0;background:#10151d;color:#eef4fc;font:15px Inter,Arial,sans-serif}header{height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 5%;background:#0a1018;border-bottom:1px solid #273848}header b{color:#7bbde9}header span,p{color:#a6b7c5}h1{font:48px Teko,sans-serif;margin:0;letter-spacing:2px}h2{font:24px Teko,sans-serif;letter-spacing:1px}main{max-width:1500px;margin:auto;padding:30px}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.columns{display:grid;grid-template-columns:430px minmax(400px,1fr);gap:22px}.panel,.login{background:#18212c;border:1px solid #33485d;border-radius:16px;padding:24px;box-shadow:0 12px 35px #0004}label{display:block;color:#9db9ce;font-weight:bold;font-size:12px;margin:18px 0 6px}input,select{width:100%;background:#0e1822;color:#fff;border:1px solid #3b5269;border-radius:8px;padding:11px;font:inherit}input[type=color]{height:44px;padding:4px}input[type=range]{accent-color:#7bbde9;padding:0}button,.button{background:#7bbde9;color:#07121b;display:inline-block;border:0;border-radius:8px;padding:12px 16px;font-weight:800;cursor:pointer;text-decoration:none}button:hover,.button:hover{filter:brightness(1.14)}button.secondary{background:#263a50;color:#d9ecff}.small{padding:9px 11px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.preview{height:340px;background:linear-gradient(180deg,#e8eff5 0%,#d8e2ec 100%);display:flex;align-items:flex-start;justify-content:flex-start;border-radius:12px;overflow:hidden;margin:18px 0 28px;padding:28px}.testgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.testgrid button{font-size:12px;padding:12px 4px}.urlrow{display:flex;gap:8px}.urlrow input{min-width:0}pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#8fd4ff}.login{max-width:440px;margin:12vh auto;text-align:center}.login input,.login button{margin-top:15px}#notice{color:#7bbde9;margin-top:10px}.overlay{background:transparent!important;overflow:hidden}
.overlay-card{--accent:#1aa6ff;--titleColor:#fff;--textColor:#eef7ff;--mutedColor:#1aa6ff;position:absolute;left:12px;top:24px;width:min(780px,calc(100vw - 24px));min-height:156px;display:flex;align-items:center;gap:15px;padding:14px 20px 14px 14px;background:linear-gradient(180deg,#263d52f2 0%,#21364af2 100%);border:2px solid var(--accent);border-radius:2px;box-shadow:0 10px 24px #0005,0 0 0 1px #0a2235 inset;overflow:hidden;transform:translateX(-120%);opacity:0;transition:none}.overlay-card.preview-mode{position:relative;left:auto;top:auto;transform:none;opacity:1}.overlay-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(150deg,transparent 0 44px,rgba(30,143,230,.13) 45px 47px,transparent 48px 92px),linear-gradient(90deg,rgba(0,0,0,.16),transparent 22%,transparent 100%)}.artwrap{position:relative;flex:0 0 128px;height:128px;border:3px solid var(--accent);background:linear-gradient(180deg,#11283b 0%,#0d1f31 100%);overflow:hidden;box-shadow:0 0 0 1px #072134 inset;z-index:1}.artwrap::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(145deg,rgba(43,164,255,.18) 0 24%,transparent 24% 54%,rgba(43,164,255,.16) 54% 64%,transparent 64% 100%)}.mascot{font-size:68px;line-height:1;display:grid;place-items:center;width:100%;height:100%;position:relative;z-index:1}.info{flex:1;min-width:0;position:relative;padding-right:110px;z-index:1}.kicker{font:700 12px Rajdhani,sans-serif;letter-spacing:4px;color:var(--accent);text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:3px}.line{height:2px;background:color-mix(in srgb,var(--accent) 72%,transparent);flex:1;opacity:.8}.heading-main{font:700 42px Teko,sans-serif;line-height:.95;text-transform:uppercase;font-style:italic;color:var(--titleColor);text-shadow:3px 3px 0 #1b71b5;letter-spacing:.4px;transform:skewX(-10deg);display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.user-main{margin-top:2px;font:700 22px Rajdhani,sans-serif;color:var(--textColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-main{font:700 18px Rajdhani,sans-serif;color:var(--mutedColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brandmark{position:absolute;right:20px;bottom:10px;color:var(--accent);font:700 18px Teko,sans-serif;font-style:italic;letter-spacing:.25px;z-index:1}.overlay-card.show.slide{animation:slideIn .5s forwards}.overlay-card.hide.slide{animation:slideOut .5s forwards}.overlay-card.show.fade{animation:fadeIn .5s forwards}.overlay-card.hide.fade{animation:fadeOut .5s forwards}.overlay-card.show.zoom{animation:zoomIn .5s forwards}.overlay-card.hide.zoom{animation:fadeOut .5s forwards}@keyframes slideIn{to{transform:translateX(0);opacity:1}}@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(-120%);opacity:0}}@keyframes fadeIn{from{transform:translateX(0);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeOut{from{transform:translateX(0);opacity:1}to{transform:translateX(0);opacity:0}}@keyframes zoomIn{from{transform:translateX(0) scale(.8);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}@media(max-width:900px){.columns{grid-template-columns:1fr}.intro{display:block}.testgrid{grid-template-columns:repeat(2,1fr)}}