@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',Arial,sans-serif;color:#f4f1f8;background:#100d19}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px;isolation:isolate;background:radial-gradient(ellipse at 50% 0%,#211a30 0,transparent 65%)}
.ambient{position:fixed;z-index:-2;inset:10% 18%;background:radial-gradient(ellipse,#9d67d552,transparent 66%);filter:blur(45px);animation:breathe 8s ease-in-out infinite;pointer-events:none}.ambient:after{content:"";position:absolute;inset:30% 0 -10%;background:radial-gradient(ellipse,#d3c9e020,transparent 65%)}.grain{position:fixed;inset:0;z-index:-1;opacity:.13;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.3' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.portal{width:min(100%,760px);padding:26px 30px 20px;border:1px solid #c6b2dd28;border-radius:28px;background:linear-gradient(145deg,#ffffff09,#ffffff02),#15111ee8;box-shadow:0 30px 100px #0005,0 1px 0 #f0e2ff12 inset;position:relative}.portal:before{content:"";position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#d5c0ed88,transparent)}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 22px}.brand{width:240px;height:58px;object-fit:contain;object-position:left}.intro{text-align:right}h1{font-family:Manrope,Arial,sans-serif;font-size:20px;letter-spacing:-.6px;margin:0 0 6px;font-weight:600}.intro p{margin:0;color:#a9a0b5;font-size:11px}
nav{display:grid;gap:12px}.banner{height:108px;position:relative;isolation:isolate;overflow:hidden;border-radius:15px;border:1px solid #ffffff28;display:flex;align-items:center;gap:18px;padding:18px 22px;text-decoration:none;color:#fff;transition:transform .3s,border-color .3s,box-shadow .3s;background:#17121d}.art{position:absolute;z-index:-3;width:100%;height:100%;inset:0;object-fit:cover;object-position:70% 45%;transition:transform .7s;opacity:.8}.wash{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#0c0a13ee,#0c0a13cf 30%,#0c0a1368 65%,#0c0a1320)}.crime .wash{background:linear-gradient(90deg,#1d0e19f0,#1d0e19cc 35%,#1d0e1930)}.mystery .wash{background:linear-gradient(90deg,#18140bf5,#18140bc7 40%,#18140b30)}.abi .wash{background:linear-gradient(90deg,#11241cf0,#11241cbd 38%,#11241c18)}.logo{width:62px;height:62px;object-fit:contain;flex:none;border-radius:13px;filter:drop-shadow(0 3px 10px #0005)}.abi-logo{object-fit:cover;border:1px solid #fff5}.vy-logo{padding:7px;background:#d5c6ed09;border:1px solid #d5c6ed22}
.category{font-size:8px;font-weight:600;letter-spacing:2px;color:#e5b5c7}.mystery .category{color:#dfc292}.abi .category{color:#d4eabc}.vyform .category{color:#ceb4ec}.copy{min-width:0}h2{font-family:Manrope,Arial,sans-serif;font-size:22px;letter-spacing:-.65px;line-height:1.2;margin:5px 0 6px;font-weight:700}.copy p{font-size:11px;color:#e0dce3;margin:0;line-height:1.4}.arrow{margin-left:auto;flex:none;width:32px;height:32px;border:1px solid #ffffff45;background:#ffffff0a;border-radius:50%;display:grid;place-items:center;font-size:20px;transition:background .3s}.banner:hover{transform:translateY(-2px);border-color:#d9b9ff77;box-shadow:0 8px 25px #0004}.banner:hover .art{transform:scale(1.04)}.banner:hover .arrow{background:#ffffff20}.banner:focus-visible{outline:2px solid #dcc3ff;outline-offset:4px}
.vy-art{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 80% 40%,#685581aa,transparent 65%),linear-gradient(120deg,#171221,#211b30);overflow:hidden}.vy-art>img{position:absolute;right:40px;top:-14px;width:150px;height:150px;opacity:.65;transform:rotate(-12deg);filter:grayscale(.65)}.orb{position:absolute;width:280px;height:280px;border-radius:50%;border:1px solid #d8cbe940;right:-30px;top:-130px;box-shadow:0 0 50px #b394d733,inset 0 0 40px #b394d722}.orb:after{content:"";position:absolute;inset:30px;border:1px solid #cbb4df30;border-radius:50%}
footer{display:flex;justify-content:space-between;align-items:center;padding-top:20px;gap:12px;color:#8f859d;font-size:8px;letter-spacing:1.3px}.signature{letter-spacing:0;font-size:10px;color:#a89bb7}.signature i{font-style:normal;color:#cab0e5;margin-left:6px}@keyframes breathe{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:.85;transform:scale(1.06)}}
@media(max-width:600px){body{padding:16px}.portal{padding:20px 18px 16px;border-radius:24px}header{display:block;text-align:center;padding-bottom:18px}.brand{width:235px;height:52px;object-position:center}.intro{text-align:center;margin-top:7px}h1{font-size:18px}.intro p{font-size:11px}.banner{height:103px;padding:14px;gap:12px;border-radius:14px}.logo{width:48px;height:48px}h2{font-size:18px;letter-spacing:-.5px}.category{font-size:7px;letter-spacing:1.3px}.copy p{font-size:10px;max-width:220px}.arrow{width:26px;height:26px;font-size:17px}.art{object-position:65% center}footer{justify-content:center;padding-top:17px;font-size:7px}.signature{display:none}}
@media(max-height:700px){body{padding:12px}.portal{padding-top:16px;padding-bottom:14px}header{padding-bottom:14px}.banner{height:clamp(76px,14svh,100px)}nav{gap:9px}footer{padding-top:13px}.brand{height:45px}.intro{margin-top:3px}h2{margin:3px 0}.category{font-size:7px}}
@media(max-width:360px){.portal{padding-inline:12px}.banner{gap:10px;padding:12px}.logo{width:40px;height:40px}h2{font-size:16px}.copy p{font-size:9px}.arrow{width:22px;height:22px}.category{letter-spacing:1px}}
.football .wash{background:linear-gradient(90deg,#071c28f5,#071c28cc 40%,#071c2820)}.football .category{color:#a4e2f3}
.banner{height:clamp(76px,12.6svh,96px)}nav{gap:10px}
@media(max-width:600px){.banner{height:clamp(76px,12.5svh,100px)}}
@media(max-height:650px){.brand{height:36px}header{padding-bottom:10px}.intro h1{font-size:16px}.intro p{font-size:10px}.banner{height:clamp(65px,12svh,78px)}nav{gap:7px}footer{padding-top:10px}.portal{padding-top:12px;padding-bottom:10px}}
.studio-art{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#261b36}.studio-art img{position:absolute;height:100%;object-fit:cover}.studio-abi{left:0;width:76%;object-position:80% 43%}.studio-arcade{right:0;width:48%;object-position:78% 42%;mask-image:linear-gradient(90deg,transparent,#000 24%)}.dinkumdo .wash{background:linear-gradient(90deg,#21192bef,#21192bbd 37%,#21192b18 75%)}.dinkumdo .category{color:#ffdb9a}.dinkumdo{border-color:#d7b77b50}
.banner{height:clamp(70px,10.5svh,88px)}nav{gap:9px}.portal{padding-top:20px;padding-bottom:16px}header{padding-bottom:16px}footer{padding-top:15px}
@media(max-width:600px){.banner{height:clamp(68px,10.5svh,85px)}.dinkumdo h2{font-size:17px}.dinkumdo .copy p{max-width:190px}.studio-abi{object-position:78% 40%}.studio-arcade{width:50%}}
@media(max-height:650px){.banner{height:clamp(59px,10.3svh,70px)}.logo{width:42px;height:42px}.category{font-size:6px}h2{font-size:17px}.copy p{font-size:9px}nav{gap:6px}.portal{padding-top:10px;padding-bottom:10px}}
.harrison .wash{background:linear-gradient(90deg,#082630f0,#082630bd 38%,#08263018)}.harrison .category{color:#9feaf0}.harrison-logo{object-fit:cover;object-position:78% center;border:1px solid #fff5}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}