.hub{display:flex;flex-direction:column;gap:24px;padding:32px 32px 0}.hub-head{display:flex;align-items:center;height:75px;padding:0 60px;color:#000;font-weight:500}.hub-head h2{margin:0;flex:none;font:500 clamp(36px,2.5vw,48px)/normal var(--font);text-box:trim-both cap alphabetic}.hub-head h2 img{width:80px;height:80px;margin:-24px 4px -24px -14px;vertical-align:middle}.hub-head time{flex:1;text-align:right;font:500 24px/normal var(--font);color:#6c6c84;text-box:trim-both cap alphabetic}.hub-ban{container-type:inline-size;position:relative;height:340px;display:flex;flex-direction:column;gap:32px;padding:60px 60px 32px;border-radius:calc(48px * var(--sq));corner-shape:squircle;background:#8cc0f2;color:#fff}.hub-scene{position:absolute;inset:0;overflow:hidden;border-radius:inherit;corner-shape:inherit}.hub-scene i{position:absolute;inset:0}.hub-scene .sky{background:url(../assets/hub/idyll-far.webp) 50% 0 / max(1536px,100%) auto no-repeat;filter:blur(18px);transform:scale(1.1)}.hub-scene .far{left:50%;right:auto;width:960px;height:640px;inset-block:auto;top:-145px;transform:translate(-50%);background:url(../assets/hub/idyll-far.webp) 50% 0 / 100% auto no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.hub-scene .mid{background:url(../assets/hub/idyll-mid.webp) 50% calc(100% + 80px) / 1000px 420px repeat-x}.hub-scene .near{background:url(../assets/hub/idyll-near.webp) right -120px bottom -35px / 480px 300px repeat-x}.hub-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,36,72,.66),rgba(24,36,72,.52) 360px,rgba(24,36,72,.32) 700px,transparent 1040px)}.hub-txt,.hub-next{position:relative}.hub-txt{flex:1;min-height:0;display:flex;flex-direction:column;gap:32px;width:810px;max-width:calc(100% - 430px)}.hub-txt h3{margin:0;font:600 min(64px,5.2cqi)/normal var(--font);text-transform:uppercase;color:#f8f8f8;text-box:trim-both cap alphabetic}.hub-txt p{margin:0;font:400 18px/1.2 var(--font);text-box:trim-both cap alphabetic}.hub-pet{position:absolute;right:calc(1856px - 1402.43px - 289.829px);top:-87px;width:289.829px;height:416px;pointer-events:none}.hub-pet .shadow{position:absolute;left:44px;top:390px;width:220px;height:24px;border-radius:50%;background:#23501f;filter:blur(9px);opacity:.55;transform:skew(-15deg)}.hub-pet>img{position:relative;width:100%;height:100%;object-fit:cover}.hub-tag{position:absolute;right:0;top:0;width:111px;height:340px;overflow:hidden;border-radius:0 calc(48px * var(--sq)) calc(48px * var(--sq)) 0;corner-shape:squircle}.hub-tag span{position:absolute;left:39px;top:188.5px;width:87px;height:313px;transform:translateY(-50%)}.hub-tag b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font:700 96.547px/.9 var(--font-wide);color:#fff6}.hub-foot{position:relative;display:flex;align-items:flex-end;gap:32px}.hub-go{flex:none;padding:16px 24px;border-radius:calc(14px * var(--sq));corner-shape:squircle;background:var(--lime);color:#11182f;font:600 16px/1 var(--font);text-decoration:none}.hub-next{width:294px;display:flex;flex-direction:column;gap:6px;padding-top:16px}.hub-next .row{display:flex;gap:6px;font-weight:500}.hub-next .row p{flex:1;margin:0;font-size:16px;line-height:1.2}.hub-next button{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.hub-next .row p+p{padding-top:3px;font-size:12px;opacity:.6;text-align:right}.hub-next .bars{display:flex;gap:6px}.hub-next .bars i{flex:1;cursor:pointer;height:8px;border-radius:calc(2px * var(--sq));corner-shape:squircle;background:#fff9}.hub-next .bars i.on{background:var(--lime)}.hub-txt.in{animation:hub-in .45s cubic-bezier(.3,1.3,.5,1)}@keyframes hub-in{0%{opacity:0;transform:translateY(8px)}}.hub-labels{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}.hub-labels .hub-label{margin:0;box-sizing:border-box;padding-left:60px}.hub-labels .hub-label:first-child{grid-column:1 / 7}.hub-labels .hub-label+.hub-label{grid-column:9 / 13}.hub-label{font:600 13px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:#6c6c84}.hub-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;height:340px;color:#383840}.hub-row a{color:inherit;text-decoration:none}.hub-cards{grid-column:1 / 7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.hub-sq{grid-column:7 / 9;justify-self:end;display:flex;flex-direction:column;gap:28.849px}.hub-lines{grid-column:9 / 13;min-width:0;display:flex;flex-direction:column;gap:24px}.hub-card{position:relative;min-width:0;overflow:hidden;color:#fff!important;border-radius:calc(48px * var(--sq));corner-shape:squircle}.hub-card:before{content:"";position:absolute;left:50%;top:40%;width:320px;height:320px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.38),transparent)}.hub-card.holo{background:url(../assets/hub/holo-topo.svg) center / cover no-repeat,radial-gradient(90% 45% at 50% 0%,rgba(80,130,255,.45),transparent 70%),linear-gradient(175deg,#0b1650,#13237a 55%,#1a2f95)}.hub-card.holo:before{background:radial-gradient(closest-side,rgba(110,150,255,.4),transparent)}.hub-card.egg{background:linear-gradient(170deg,#ffc15a,#f39a2c,#d26a12)}.hub-card.night{background:radial-gradient(90% 60% at 50% 45%,rgba(240,130,40,.55),transparent 70%),linear-gradient(170deg,#1f1640,#3b2468 60%,#26174a)}.hub-card .art{position:absolute;inset:66px 16px 80px}.hub-card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}.hub-card.full:before{content:none}.hub-card.full .art{inset:0}.hub-card.full .art img{object-fit:cover;object-position:50% 0}.hub-card .txt{position:absolute;left:28px;right:28px;bottom:28px}.hub-card .dt{position:absolute;top:28px;right:28px;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:15px;background:#11182fb8;font:600 14px/1 var(--font);color:#fff}.hub-card .dt em{font-style:normal;color:var(--lime)}.hub-card .dt i{width:1px;height:14px;background:#ffffff59}.hub-card b{font:600 clamp(17px,1.05vw,20px)/1.15 var(--font);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}.hub-ava{width:155.58px;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;text-align:center;border-radius:calc(36px * var(--sq));corner-shape:squircle;background:#ffffffd1}.hub-ava .lbl{font:600 10px/1.1 var(--font);letter-spacing:.04em;text-transform:uppercase;color:#6c6c84}.hub-ava img,.hub-ava i{width:56px;height:56px;border-radius:50%;background:#ececf6;flex:none}.hub-ava i{display:grid;place-items:center;font:600 28px/1 var(--font);font-style:normal;color:#7171e8}.hub-ava b{font:600 14px/1.1 var(--font)}.hub-ava small{font:500 12px/1 var(--font);color:#6c6c84}.hub-ava.pic{position:relative;padding:0;overflow:hidden;background:#fff}.hub-ava.pic>:not(.full,.ico){display:none}.hub-ava:not(.pic,.whos) .ico{display:none}.hub-ava.pic .ico{display:block;position:absolute;left:10px;bottom:10px;width:44px;height:44px;border-radius:0;background:none}.hub-ava.pic .full{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:calc(30px * var(--sq));corner-shape:squircle;object-fit:cover}.hub-ava.whos{position:relative;padding:0;overflow:hidden;background:#fff}.hub-ava.whos .in{position:absolute;inset:6px;overflow:hidden;border-radius:calc(30px * var(--sq));corner-shape:squircle;background:url(../assets/hub/whos-tiles.svg) center / cover}.hub-ava.whos .who{position:absolute;left:-40%;top:-11%;width:180%;height:180%;max-width:none;border-radius:0;background:none;object-fit:contain}.hub-ava.whos .in i{position:absolute;width:auto;height:auto;border-radius:0;background:none;font-family:var(--font);font-weight:700;line-height:1;font-style:normal;color:#b7c0cf}.hub-ava.whos .q1{right:-14px;top:18px;font-size:118px;transform:rotate(14deg)}.hub-ava.whos .q2{left:30px;top:10px;font-size:54px;transform:rotate(-18deg)}.hub-ava.whos .ico{position:absolute;left:10px;bottom:10px;width:44px;height:44px;border-radius:0;background:none}.hub-line{position:relative;flex:1;min-height:0;display:flex;align-items:stretch;gap:20px;padding:6px;border-radius:calc(24px * var(--sq));corner-shape:squircle;background:#fff}.hub-line .ava{position:relative;flex:none;aspect-ratio:1;height:100%;overflow:hidden;border-radius:calc(18px * var(--sq));corner-shape:squircle;background:radial-gradient(120% 90% at 50% 12%,color-mix(in srgb,var(--cat) 8%,#fff),color-mix(in srgb,var(--cat) 48%,#fff))}.hub-line .ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hub-line .txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}.hub-line b{font:600 17px/1.2 var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-line .txt small{font:400 14px/1.3 var(--font);color:#6c6c84;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hub-line .when{flex:none;align-self:stretch;width:112px;padding:0 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:calc(18px * var(--sq));corner-shape:squircle;background:#f1f2f7}.hub-line .when b{font:600 20px/1 var(--font);color:#383840;white-space:normal;overflow:visible}.hub-line .when em{font:600 13px/1 var(--font);font-style:normal;color:#383840}.hub-line .when small{font:500 12px/1 var(--font);color:#6c6c84;white-space:nowrap}
