@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#18181a;--surface:#222225;--text:#ededed;--muted:#a5a5ad;--red:#ee5358;--accent:#f4ce49;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-bottom:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--red);outline-offset:5px}.skip{position:fixed;top:-100px;left:15px;z-index:30;background:var(--red);padding:15px}.skip:focus{top:10px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:25px 4.5%;border-bottom:1px solid #ffffff0d}.wordmark{font-size:20px;font-weight:700;letter-spacing:-1px}.wordmark span{color:var(--red);margin-left:5px}.edition,.fan{font-size:12px;letter-spacing:1.6px;color:var(--muted)}.intro{height:615px;min-height:530px;position:relative;padding:35px 5% 30px;overflow:hidden}.intro-meta{display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:#77777f}.type-composition{position:relative;width:min(850px,100%);height:360px;margin:30px auto 0}.vertical{position:absolute;left:19.5%;top:5px;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:500;font-size:59px;line-height:.99;color:var(--red);text-align:center}.type-composition h1{position:absolute;top:65px;left:0;right:0;text-align:center;white-space:nowrap;margin:0;font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:clamp(90px,12.5vw,169px);font-weight:700;letter-spacing:-3px;line-height:1}.type-composition h1 span{color:var(--red)}.trainer{position:absolute;left:66%;top:256px;font-size:14px;line-height:1.6;letter-spacing:2px;color:var(--muted)}.serial{position:absolute;left:39%;top:234px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:33px;font-weight:500;line-height:1.2;color:var(--red);letter-spacing:5px}.serial span{color:#5e5e64}.intro-caption{text-align:center;font-size:17px;color:#b4b4bc;margin:10px 0 23px}.explore{display:flex;justify-content:center;align-items:center;gap:15px;font-size:12px;letter-spacing:2px;color:var(--muted)}.explore span{font-size:23px;color:var(--red)}.collection{padding:30px 0 20px;scroll-margin-top:25px}.collection-top{display:flex;justify-content:space-between;align-items:end;padding:0 5% 25px}.collection-top p{margin:0;line-height:1.7;color:var(--muted);font-size:14px}.collection-top p span{font-size:12px;letter-spacing:2px;color:var(--text)}.controls{display:flex;gap:20px;align-items:center}.controls button{background:transparent;border:1px solid #46464c;border-radius:50%;width:40px;height:40px;font-size:26px;line-height:1}.controls button:hover{background:var(--red);border-color:var(--red)}#position{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:2px}.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:7px max(5%,calc((100vw - 1090px)/2)) 15px;overscroll-behavior-x:contain}.rail::-webkit-scrollbar{display:none}.card{flex:0 0 330px;height:438px;border:0;background:var(--card);position:relative;overflow:hidden;text-align:left;scroll-snap-align:center;padding:25px;color:#fff;transition:transform .25s,filter .25s;filter:saturate(.6) brightness(.75)}.card:hover,.card:focus-visible{filter:none;transform:translateY(-4px)}.card.selected{filter:none;box-shadow:inset 0 0 0 2px #ffffffa0}.card .card-top{display:flex;justify-content:space-between;position:relative;z-index:2;font-size:12px;letter-spacing:1.6px;color:#ffffffb5}.card img{position:absolute;width:96%;height:78%;object-fit:contain;top:30px;left:2%;filter:drop-shadow(0 20px 20px #0005);transition:transform .4s}.card:hover img{transform:scale(1.045) rotate(-3deg)}.card .card-id{position:absolute;top:84px;left:17px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:138px;line-height:1;color:#ffffff13;font-weight:800}.card .card-bottom{position:absolute;bottom:22px;left:25px;right:25px;border-top:1px solid #ffffff40;padding-top:15px}.card h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:41px;text-transform:uppercase;margin:0;line-height:1.05;letter-spacing:1px}.card .sub{font-size:12px;letter-spacing:1.5px;color:#ffffffc0;margin-top:7px;display:block}.collection-bottom{display:flex;justify-content:space-between;margin:20px 5% 0;color:#909098;font-size:12px;letter-spacing:1.4px}.collection-bottom span:last-child{color:var(--red)}.detail{display:grid;grid-template-columns:1fr 1fr;max-width:1190px;margin:110px auto 100px;gap:70px;padding:0 35px;scroll-margin-top:65px}.detail-art{min-height:450px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)}.ghost-number{position:absolute;inset:0;text-align:center;font-family:'Barlow Condensed',Impact,sans-serif;font-size:245px;color:#ffffff07;font-weight:800;line-height:1.2}.detail-art img{width:100%;height:420px;object-fit:contain;position:relative;filter:drop-shadow(0 25px 30px #0007)}.art-label{position:absolute;bottom:0;font-size:12px;letter-spacing:3px;color:#76767e}.eyebrow{font-size:12px;color:var(--red);letter-spacing:2px;margin:0 0 18px}.detail h2,dialog h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:76px;line-height:.95;letter-spacing:-1px;margin:0 0 25px;font-weight:600}.detail h2 span,dialog h2 span{color:var(--red)}.types{display:flex;gap:8px}.types span{padding:7px 13px;border:1px solid #4b4b52;border-radius:30px;font-size:12px;letter-spacing:1px}.description{font-size:17px;line-height:1.8;color:#b7b7c0;max-width:440px;margin:24px 0 27px}.facts{display:grid;grid-template-columns:1.7fr 1fr 1fr;border-top:1px solid #3a3a40;border-bottom:1px solid #3a3a40;padding:20px 0;gap:10px}.facts dt{font-size:12px;letter-spacing:1.1px;color:#909098;margin-bottom:9px}.facts dd{margin:0;font-size:16px}.evolution>span{font-size:12px;color:#909098;letter-spacing:1px}.evolution p{font-size:16px;margin:10px 0 28px}.back-link{font-size:14px;border-bottom:1px solid var(--red);padding-bottom:5px}.credits{margin:0 5%;padding:30px 0 125px;border-top:1px solid #34343a;display:flex;gap:35px;align-items:flex-start}.credits>span{font-size:12px;letter-spacing:2px;white-space:nowrap}.credits p{font-size:12px;line-height:1.7;color:#85858e;margin:0;flex:1}.text-button{border:0;background:none;font-size:12px;color:var(--muted);padding:0}.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:10;background:#222225ec;backdrop-filter:blur(20px);display:flex;justify-content:center;gap:45px;padding:21px 20px;border-top:1px solid #ffffff08;font-size:16px}.bottomnav .active{color:var(--red);font-weight:600}.bottomnav button{border:0;background:none;padding:0}.bottomnav a:hover,.bottomnav button:hover{color:var(--red)}dialog{border:1px solid #43434a;background:#222225;color:var(--text);padding:50px;width:min(600px,90vw);max-height:85vh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}dialog p{font-size:16px;line-height:1.7;color:#b6b6bf}dialog .eyebrow{font-size:12px;color:var(--red)}dialog h2{font-size:62px}.close{position:absolute;top:12px;right:17px;background:none;border:0;font-size:30px}.primary{padding:13px 20px;background:var(--red);border:0;margin-top:12px;font-size:14px}.about-note{font-size:14px!important}.detail-copy{animation:appear .35s ease}@keyframes appear{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.intro{height:690px}.type-composition{margin-top:65px}.card{flex-basis:360px;height:470px}}@media(max-width:760px){.topbar{padding:20px 6%}.fan{display:none}.edition{font-size:10px;letter-spacing:1px}.intro{height:510px;min-height:0;padding:27px 6%}.intro-meta{font-size:10px;letter-spacing:1px}.type-composition{height:295px;margin-top:35px}.type-composition h1{top:75px;font-size:clamp(65px,17vw,124px);letter-spacing:-1px}.vertical{left:19%;font-size:43px;top:5px}.serial{top:177px;font-size:28px;left:36%}.trainer{left:61%;top:201px;font-size:10px;letter-spacing:1px}.intro-caption{font-size:15px;margin-bottom:22px}.collection{padding-top:12px}.collection-top{padding:0 6% 20px;gap:15px}.collection-top p{font-size:12px}.collection-top p span{font-size:10px;letter-spacing:1px}.controls{gap:9px}.controls button{width:34px;height:34px}#position{font-size:10px;letter-spacing:0}.card{flex-basis:76vw;max-width:330px;height:405px}.collection-bottom{font-size:10px;letter-spacing:.8px;gap:15px;margin:16px 6% 0}.collection-bottom span:first-child{max-width:170px;line-height:1.7}.detail{grid-template-columns:1fr;gap:35px;padding:0 7%;margin:65px auto 65px}.detail-art{min-height:310px}.detail-art img{height:310px}.ghost-number{font-size:210px}.detail h2{font-size:64px}.description{font-size:16px}.credits{flex-wrap:wrap;padding-bottom:115px;gap:18px;margin:0 7%}.credits p{flex-basis:100%;order:3}.bottomnav{gap:24px;font-size:13px;padding:20px 12px}.bottomnav a:first-child{max-width:85px;overflow:hidden;text-overflow:ellipsis}dialog{padding:35px 25px}dialog h2{font-size:50px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
