.oxh-main>.oxa-page{position:relative;margin-top:calc(-1 * var(--oxh-bar))} .oxa{display:block} .oxa-in{position:relative;z-index:1;width:min(100% - 2 * var(--oxh-gut),1440px);margin-inline:auto} .oxa a:focus-visible{outline:2px solid var(--oxh-acc);outline-offset:3px;border-radius:4px} .oxa-crumbs{ position:absolute;z-index:3;left:0;right:0;top:calc(var(--oxh-bar) + clamp(30px,3vw,56px)); width:min(100% - 2 * var(--oxh-gut),1640px);margin:0 auto;pointer-events:none; } .oxa-crumbs nav{display:inline-block;pointer-events:auto} .oxa-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:0;list-style:none;font-size:15.1px;color:rgba(255,255,255,.95)} .oxa-crumb li{display:inline-flex;align-items:center;gap:10px} .oxa-crumb a{color:rgba(255,255,255,.98);text-decoration:none} .oxa-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} .oxa-crumb i{font-style:normal;color:rgba(255,255,255,.7)} .oxa-crumb span{color:#fff} .oxa-progress{ display:none;position:fixed;z-index:80;left:0;right:0;top:0;height:3px;pointer-events:none; transform-origin:0 50%;background:linear-gradient(90deg,#ff8a50,#e4589a 55%,#7c3aed); box-shadow:0 0 14px rgba(228,88,154,.6); } .oxa-arrow{width:16px;height:16px;flex:none;transition:transform .35s var(--oxh-ease)} @property --oxa-a{syntax:'<angle>';inherits:false;initial-value:0deg} .oxa-frame{position:relative;margin:0;isolation:isolate} .oxa-frame-glow{ position:absolute;inset:10% 6% 0;z-index:-1;border-radius:40px;opacity:.26;filter:blur(64px); background:conic-gradient(from 210deg,#ff8a50,#e4589a,#7c3aed,#2f6e9c,#ff8a50); } .oxa-frame-in{ position:relative;display:block;overflow:hidden;border-radius:18px;background:#0d0c12;padding:0; box-shadow:0 0 0 1px rgba(11,11,12,.08),0 1px 2px rgba(11,11,12,.08),0 40px 80px -48px rgba(11,11,12,.55); } .oxa-frame-in::before{ content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--oxa-a),transparent 0deg,rgba(255,170,120,.95) 40deg,rgba(228,88,154,.9) 80deg,transparent 130deg,transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; opacity:.55; } .oxa-frame img{display:block;width:100%;height:auto;object-fit:cover} .oxa-sheen{ position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit; background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 30%); } .oxa-sheen::after{ content:'';position:absolute;top:-10%;bottom:-10%;left:-50%;width:30%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-16deg); } .oxa-hero{position:relative;isolation:isolate;overflow:clip;background:#050508;color:#fff;padding-top:var(--oxh-bar)} .oxa-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden} .oxa-hero-grade{ position:absolute;inset:0; background: radial-gradient(55% 50% at 14% 30%,rgba(221,110,62,.34),transparent 70%), radial-gradient(48% 60% at 92% 12%,rgba(124,58,237,.38),transparent 72%), radial-gradient(42% 42% at 66% 86%,rgba(219,39,119,.22),transparent 70%), linear-gradient(180deg,#07060b 0%,#050508 100%); } .oxa-aurora{ position:absolute;left:-16%;top:-34%;width:80%;aspect-ratio:1;border-radius:50%;opacity:.36;filter:blur(92px); background:conic-gradient(from 200deg,#ff7a3d,#db2777 30%,#7c3aed 55%,transparent 72%,#ff7a3d); } .oxa-beam{position:absolute;left:40%;top:0;width:min(62%,1000px);height:100%;pointer-events:none;opacity:.7} .oxa-beam i{position:absolute;top:-10%;height:2px;border-radius:2px;filter:blur(1px);transform-origin:0 50%} .oxa-beam i:nth-child(1){left:6%;top:24%;width:58%;transform:rotate(-8deg);background:linear-gradient(90deg,transparent,rgba(255,122,61,.6),transparent)} .oxa-beam i:nth-child(2){left:22%;top:46%;width:30%;transform:rotate(3deg);background:linear-gradient(90deg,transparent,rgba(255,226,214,.7),transparent)} .oxa-beam i:nth-child(3){left:30%;top:70%;width:50%;transform:rotate(11deg);background:linear-gradient(90deg,transparent,rgba(196,90,255,.6),transparent)} .oxa-stars{ position:absolute;inset:0;opacity:.5; background-image: radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 34% 64%,#ffd9c2,transparent), radial-gradient(1px 1px at 58% 18%,#fff,transparent),radial-gradient(1.4px 1.4px at 76% 52%,#e9d5ff,transparent), radial-gradient(1px 1px at 88% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 22% 84%,#fff,transparent), radial-gradient(1px 1px at 46% 40%,#ffd9c2,transparent),radial-gradient(1.2px 1.2px at 66% 88%,#fff,transparent); } .oxa-grid-floor{ position:absolute;left:0;right:0;bottom:0;height:42%; background:radial-gradient(70% 80% at 50% 100%,rgba(255,150,100,.16),transparent 70%),radial-gradient(90% 50% at 50% 100%,rgba(124,58,237,.2),transparent 72%); } .oxa-hero-in{ position:relative;width:min(100% - 2 * var(--oxh-gut),1640px);margin:0 auto; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);gap:clamp(36px,4.6vw,90px);align-items:center; padding-block:calc(clamp(30px,3vw,56px) + 56px) clamp(40px,3.6vw,64px); } .oxa-hero-txt{max-width:840px} .oxa-pill{ display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:8px 15px 8px 12px;border-radius:999px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); font-family:var(--oxh-mono);font-size:14.7px;font-weight:500;letter-spacing:.16em;line-height:1;text-transform:uppercase;color:rgba(255,255,255,.95); } .oxa-pill i{width:7px;height:7px;border-radius:50%;background:var(--oxh-acc-hi);box-shadow:0 0 12px 2px rgba(255,138,80,.8)} .oxa-h1{ margin:0;font-size:clamp(46px,calc(5.4vw + .4px),96px);font-weight:500;line-height:1;letter-spacing:-.038em;color:#fff;text-wrap:balance; } .oxa-h1-em,.oxa-em{font-style:normal} .oxa-h1-em{color:#ffb38a} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .oxa-h1-em{ background-image:linear-gradient(100deg,#ffd9c2 0%,#ffa06a 24%,#f2733f 48%,#e4589a 74%,#b48cff 100%); background-size:200% 100%;background-position:0% 50%; -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-box-decoration-break:clone;box-decoration-break:clone; } } .oxa-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:24px 0 0;font-family:var(--oxh-mono);font-size:15.1px;color:rgba(255,255,255,.96)} .oxa-meta i{font-style:normal;color:rgba(255,255,255,.66)} .oxa-lede{margin:20px 0 0;max-width:640px;font-size:clamp(19.5px,calc(1.4vw + .9px),22.9px);line-height:1.6;color:#fff} .oxa-author{ position:relative;display:flex;align-items:center;gap:18px;margin-top:30px;padding:14px 22px 14px 14px;max-width:560px; border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -36px rgba(0,0,0,.9); } .oxa-author-face{position:relative;flex:none;width:84px;height:84px} .oxa-author-halo{ position:absolute;inset:-5px;border-radius:50%; background:conic-gradient(from var(--oxa-a),#ff8a50,#e4589a,#7c3aed,#2f6e9c,#ff8a50); } .oxa-author-face img{position:relative;width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid #0b0a10;display:block} .oxa-author-txt{display:grid;gap:3px;min-width:0} .oxa-author-k{font-family:var(--oxh-mono);font-size:13.1px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#ffb38a} .oxa-author-n{font-size:21.5px;font-weight:600;letter-spacing:-.015em;color:#fff !important;text-decoration:none} .oxa-author-n:hover{text-decoration:underline;text-underline-offset:4px} .oxa-author-r{font-size:15.5px;color:rgba(255,255,255,.97)} .oxa-author-b{font-size:15.5px;color:rgba(255,255,255,.92)} .oxa-hero-art{position:relative;width:100%;max-width:640px;justify-self:end;padding-bottom:clamp(40px,5vw,80px)} .oxa-hero-halo{ position:absolute;inset:8% -4% 18% 10%;border-radius:50%;opacity:.45;filter:blur(70px); background:radial-gradient(closest-side,rgba(255,138,80,.8),rgba(124,58,237,.5),transparent); } .oxa-hero-frame .oxa-frame-in{border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 100px -44px rgba(0,0,0,.8)} .oxa-ranked{ position:absolute;left:clamp(-60px,-4vw,-20px);bottom:0;z-index:4;width:min(78%,380px);padding:14px 12px 12px; border-radius:18px;background:linear-gradient(150deg,rgba(18,16,26,.84),rgba(10,9,14,.72)); border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 80px -30px rgba(0,0,0,.95); } .oxa-ranked ol{margin:0;padding:0;list-style:none;display:grid;gap:2px} .oxa-ranked a{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px; color:#fff !important;text-decoration:none;font-size:16.9px;font-weight:500;transition:background-color .3s ease; } .oxa-ranked a:hover{background:rgba(255,255,255,.08)} .oxa-ranked a:hover .oxa-arrow{transform:translateX(4px)} .oxa-ranked b{ font-family:var(--oxh-mono);font-size:13.9px;font-weight:600;letter-spacing:.06em;color:#ffb38a; min-width:34px;padding:5px 7px;border-radius:9px;text-align:center;background:rgba(255,138,80,.12);border:1px solid rgba(255,138,80,.3); } .oxa-ranked li:first-child b{color:#160b05;background:linear-gradient(135deg,#ffd9c2,#ff8a50);border-color:transparent} .oxa-ranked .oxa-arrow{color:rgba(255,255,255,.88)} .oxa-ticker{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);padding-block:18px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .oxa-ticker-track{display:flex;width:max-content} .oxa-ticker-set{display:flex;gap:56px;padding-right:56px} .oxa-ticker-set span::before{ content:attr(data-l);font-size:clamp(22.5px,2vw,30px);font-weight:500;letter-spacing:-.02em;color:rgba(255,255,255,.58);white-space:nowrap; } .oxa-ticker-set span::after{content:'';display:inline-block;width:8px;height:8px;margin-left:56px;border-radius:50%;vertical-align:middle;background:#ff8a50;box-shadow:0 0 12px #ff8a50} .oxa-room{color:var(--oxh-ink)} .oxa-wash{position:absolute;inset:0;z-index:0;pointer-events:none} .oxa-p{margin:0;font-size:19.1px;line-height:1.72;color:#202126} .oxa-p+.oxa-p{margin-top:18px} .oxa-p-lead{font-size:clamp(20.5px,calc(1.3vw + 1.1px),23.5px);line-height:1.58;color:var(--oxh-ink);letter-spacing:-.008em} .oxa-p a,.oxa-hub a{color:var(--oxh-acc-ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(221,110,62,.45);transition:text-decoration-color .25s ease,color .25s ease} .oxa-p a:hover,.oxa-hub a:hover{text-decoration-color:currentColor} .oxa-cite::after{content:' ↗';font-size:.86em;opacity:.9} .oxa-h2{margin:0;font-size:clamp(36px,calc(3.6vw + .4px),62px);font-weight:500;line-height:1.05;letter-spacing:-.034em;text-wrap:balance;scroll-margin-top:110px} .oxa-em{color:var(--oxh-acc-ink)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .oxa-em{ background-image:linear-gradient(100deg,#c2531f 0%,#dd6e3e 30%,#c03f86 70%,#7c3aed 100%); -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-box-decoration-break:clone;box-decoration-break:clone; } } .oxa-h3{margin:0 0 14px;font-size:clamp(23.5px,1.7vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.02em;scroll-margin-top:110px} .oxa-copy{margin-top:24px} .oxa-open{background:#fff} .oxa-open .oxa-wash{background:linear-gradient(180deg,#fbfaf8 0%,#fff 46%)} .oxa-open-k{display:flex;align-items:center;gap:16px;margin:0 0 clamp(34px,3.4vw,54px)} .oxa-open-k::before{content:attr(data-l);font-family:var(--oxh-mono);font-size:13.9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--oxh-acc-ink);white-space:nowrap} .oxa-open-k::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(11,11,12,.16),rgba(11,11,12,.04))} .oxa-open-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,6vw,120px);align-items:start} .oxa-open-txt{max-width:720px} .oxa-open .oxa-p-lead{ position:relative;margin-bottom:28px;padding-left:24px; font-size:clamp(20.5px,calc(.9vw + 7.4px),22px);line-height:1.6;font-weight:500;letter-spacing:-.012em;color:var(--oxh-ink); } .oxa-open .oxa-p-lead::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(180deg,#ff8a50,#e4589a 55%,#7c3aed)} .oxa-open .oxa-p-lead+.oxa-p{margin-top:0} .oxa-open .oxa-p{color:#2b2c31} .oxa-hub{ display:flex;align-items:center;gap:14px;margin:32px 0 0;padding:18px 0 0; font-size:17.1px;line-height:1.6;color:#202126;border-top:1px solid rgba(11,11,12,.1); } .oxa-hub-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0b0a10} .oxa-hub-ic svg{width:15px;height:15px;fill:#ff9b68} .oxa-open-art{position:relative;margin-top:6px} .oxa-open-art .oxa-frame-in img{aspect-ratio:4 / 5;object-fit:cover} .oxa-badge{ position:absolute;left:16px;bottom:16px;z-index:3;display:flex;align-items:center;gap:12px; padding:10px 16px 10px 10px;border-radius:14px;color:#fff; background:rgba(11,10,16,.72);border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%); box-shadow:0 20px 40px -24px rgba(0,0,0,.8); } .oxa-badge::before{ content:attr(data-v);display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font-size:21px;font-weight:600; background:linear-gradient(135deg,#ff8a50,#e4589a 60%,#7c3aed);color:#fff; } .oxa-badge::after{content:attr(data-l);font-size:15.1px;font-weight:500;line-height:1.3;max-width:132px;color:#fff} .oxa-ag.is-light{background:#fff} .oxa-ag.is-paper{background:var(--oxh-paper)} .oxa-ag.is-dark{background:#07060b;color:#fff} .oxa-ag.is-dark .oxa-wash{background:radial-gradient(50% 60% at 6% 10%,rgba(221,110,62,.24),transparent 70%),radial-gradient(46% 56% at 96% 92%,rgba(124,58,237,.3),transparent 72%)} .oxa-ag.is-light .oxa-wash{background:radial-gradient(46% 60% at 100% 0%,rgba(124,58,237,.06),transparent 70%)} .oxa-ag.is-paper .oxa-wash{background:radial-gradient(50% 60% at 0% 0%,rgba(255,138,80,.09),transparent 70%)} .oxa-ag.is-dark .oxa-p{color:rgba(255,255,255,.96)} .oxa-ag.is-dark .oxa-p-lead{color:#fff} .oxa-ag.is-dark .oxa-h2,.oxa-ag.is-dark .oxa-h3{color:#fff} .oxa-ag.is-dark .oxa-em{color:#ffb38a} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .oxa-ag.is-dark .oxa-em{background-image:linear-gradient(100deg,#ffd9c2 0%,#ffa06a 28%,#f2733f 52%,#e4589a 76%,#b48cff 100%)} } .oxa-ag.is-dark .oxa-p a{color:#ffcdb1;text-decoration-color:rgba(255,205,177,.7)} .oxa-kick{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-family:var(--oxh-mono);font-size:14.7px;font-weight:500;letter-spacing:.14em;color:#26272c} .oxa-kick::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--oxh-acc);box-shadow:0 0 0 4px rgba(221,110,62,.15)} .oxa-kick::after{content:attr(data-n) '  /  ' attr(data-of);white-space:pre} .oxa-ag.is-dark .oxa-kick{color:#fff} .oxa-ag-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(36px,5vw,100px);align-items:center} .oxa-ag-grid.is-flip .oxa-ag-txt{order:2} .oxa-ag-txt{position:relative;max-width:760px} .oxa-ag-art{position:relative} .oxa-ag-frame{max-width:620px;margin-inline:auto} .oxa-browser{ position:relative;margin:0;border-radius:16px;padding:0 8px 8px; background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18); box-shadow:0 60px 120px -60px rgba(124,58,237,.7),0 40px 90px -50px rgba(0,0,0,.9); } .oxa-browser-bar{display:flex;align-items:center;gap:8px;height:46px;padding:0 10px} .oxa-browser-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.28)} .oxa-browser-bar i:nth-child(1){background:#ff6b5f} .oxa-browser-bar i:nth-child(2){background:#ffbd2e} .oxa-browser-bar i:nth-child(3){background:#28c840} .oxa-browser-bar::after{ content:attr(data-l);flex:1;margin-left:18px;max-width:420px;padding:6px 14px;border-radius:999px; background:rgba(255,255,255,.08);font-family:var(--oxh-mono);font-size:13.5px;color:rgba(255,255,255,.95); } .oxa-browser-shot .oxa-frame-glow{display:none} .oxa-browser-shot .oxa-frame-in{border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.12)} .oxa-spot{ position:relative;isolation:isolate;padding:clamp(20px,2.6vw,44px);border-radius:28px; background: radial-gradient(70% 50% at 0% 0%,rgba(255,138,80,.14),transparent 70%), radial-gradient(60% 50% at 100% 100%,rgba(124,58,237,.2),transparent 72%), linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 80px 160px -80px rgba(124,58,237,.6); } .oxa-spot-rim{ position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--oxa-a),transparent 0deg,rgba(255,170,120,.95) 40deg,rgba(228,88,154,.9) 90deg,transparent 150deg,transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; } .oxa-spot-top{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:0 0 clamp(18px,2vw,28px);padding-inline:4px} .oxa-spot-no::before{ content:attr(data-n);display:grid;place-items:center;width:58px;height:58px;border-radius:18px; font-size:24px;font-weight:600;letter-spacing:-.02em;color:#fff; background:linear-gradient(135deg,#ffb38a,#ff8a50 30%,#e4589a 65%,#7c3aed); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 16px 36px -14px rgba(228,88,154,.9); } .oxa-spot-of::before{content:attr(data-l);font-family:var(--oxh-mono);font-size:14.7px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff} .oxa-spot-tags{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto} .oxa-spot-tags span::before{ content:attr(data-l);display:inline-block;padding:8px 15px;border-radius:999px;font-size:14.9px;font-weight:500;color:#fff; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2); } .oxa-spot-grid{ display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(30px,4vw,80px);align-items:start; margin-top:clamp(40px,4.4vw,64px);padding-inline:clamp(4px,1.6vw,28px); } .oxa-spot-txt .oxa-h2{font-size:clamp(38px,calc(3.9vw + .4px),68px)} .oxa-spot-side{position:relative} .oxa-spot .oxa-subs{margin-top:clamp(40px,4.4vw,72px);margin-inline:clamp(4px,1.6vw,28px)} .oxa-spec{ position:relative;padding:clamp(22px,2.2vw,32px);border-radius:20px; background:linear-gradient(160deg,rgba(28,24,38,.92),rgba(14,12,20,.92));border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 80px -40px rgba(0,0,0,.9); } .oxa-spec-k{display:block} .oxa-spec-k::before{content:attr(data-l);font-family:var(--oxh-mono);font-size:13.9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#ffcdb1} .oxa-spec-k.is-2{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)} .oxa-spec-list{display:grid;gap:4px;margin:14px 0 0;padding:0;list-style:none} .oxa-spec-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:10px 0} .oxa-spec-row+.oxa-spec-row{border-top:1px solid rgba(255,255,255,.08)} .oxa-spec-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,138,80,.14);border:1px solid rgba(255,138,80,.3)} .oxa-spec-ic svg{width:21px;height:21px;fill:none;stroke:#ffb38a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .oxa-spec-row:nth-child(2) .oxa-spec-ic{background:rgba(228,88,154,.14);border-color:rgba(228,88,154,.32)} .oxa-spec-row:nth-child(2) .oxa-spec-ic svg{stroke:#f59cc4} .oxa-spec-row:nth-child(3) .oxa-spec-ic{background:rgba(124,58,237,.18);border-color:rgba(160,110,255,.36)} .oxa-spec-row:nth-child(3) .oxa-spec-ic svg{stroke:#c9a8ff} .oxa-spec-row:nth-child(4) .oxa-spec-ic{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.3)} .oxa-spec-row:nth-child(4) .oxa-spec-ic svg{stroke:#7ee2b8} .oxa-spec-t{display:grid;gap:2px} .oxa-spec-t::before{content:attr(data-k);font-size:14.1px;color:rgba(255,255,255,.82)} .oxa-spec-t::after{content:attr(data-v);font-size:18.5px;font-weight:600;letter-spacing:-.01em;color:#fff} .oxa-spec-chips{margin-top:14px} .oxa-spec .oxa-spec-chips span::before{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff} .oxa-subs{ position:relative;margin-top:clamp(52px,5vw,84px);padding-inline:clamp(22px,3.4vw,64px);border-radius:20px; background:#fff;border:1px solid rgba(11,11,12,.1);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 40px 90px -60px rgba(11,11,12,.35); } .oxa-subs::before{ content:'';position:absolute;left:clamp(22px,3.4vw,64px);top:-1px;width:88px;height:2px;border-radius:2px; background:linear-gradient(90deg,#ff8a50,#e4589a); } .oxa-ag.is-light .oxa-subs{background:linear-gradient(180deg,#fff,#fbfaf8)} .oxa-sub{ position:relative;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,4.4vw,96px); padding-block:clamp(34px,3.4vw,56px);border-top:1px solid rgba(11,11,12,.09); } .oxa-sub:first-child{border-top:0} .oxa-sub-head{align-self:start;position:sticky;top:clamp(96px,8vw,124px)} .oxa-sub-no{display:flex;align-items:center;gap:12px;margin:0 0 16px} .oxa-sub-no::before{ content:attr(data-n);display:inline-grid;place-items:center;min-width:46px;height:28px;padding:0 10px;border-radius:8px; font-family:var(--oxh-mono);font-size:13.9px;font-weight:600;letter-spacing:.04em;color:var(--oxh-acc-ink); background:rgba(221,110,62,.08);border:1px solid rgba(221,110,62,.28); } .oxa-sub .oxa-h3{margin:0;font-size:clamp(25px,2.1vw,34px);font-weight:500;line-height:1.14;letter-spacing:-.026em;color:var(--oxh-ink);text-wrap:balance} .oxa-sub-body{max-width:780px} .oxa-ag.is-dark .oxa-subs{ background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border-color:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 90px -60px rgba(0,0,0,.9); } .oxa-ag.is-dark .oxa-sub{border-top-color:rgba(255,255,255,.12)} .oxa-ag.is-dark .oxa-sub .oxa-h3{color:#fff} .oxa-ag.is-dark .oxa-sub-no::before{color:#ffcdb1;background:rgba(255,138,80,.1);border-color:rgba(255,170,120,.32)} .oxa-note{ position:relative;padding:18px 20px 18px 22px;border-radius:12px; background:linear-gradient(135deg,rgba(255,138,80,.12),rgba(228,88,154,.07));border:1px solid rgba(221,110,62,.28);color:var(--oxh-ink); } .oxa-note b{font-weight:600;color:var(--oxh-acc-ink)} .oxa-p+.oxa-note,.oxa-note+.oxa-p{margin-top:18px} .oxa-chips{display:flex;flex-wrap:wrap;gap:8px} .oxa-chips span::before{ content:attr(data-l);display:inline-block;padding:8px 14px;border-radius:999px;font-size:14.9px;font-weight:500; background:rgba(11,11,12,.05);border:1px solid rgba(11,11,12,.1);color:var(--oxh-ink); } .oxa-team{display:flex;flex-wrap:wrap;align-items:center;gap:20px 26px;margin-top:clamp(30px,3vw,44px)} .oxa-team-grid{display:grid;grid-template-columns:repeat(8,14px);gap:8px} .oxa-team-grid i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#ff8a50,#e4589a);opacity:.85} .oxa-team-grid i:nth-child(3n){background:linear-gradient(135deg,#e4589a,#7c3aed)} .oxa-team-grid i:nth-child(5n){background:linear-gradient(135deg,#7c3aed,#2f6e9c)} .oxa-team-l::before{content:attr(data-l);font-size:17.5px;font-weight:600;color:var(--oxh-ink)} .oxa-journey{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:clamp(34px,3.4vw,50px);padding-top:26px} .oxa-journey-track{position:absolute;left:12.5%;right:12.5%;top:8px;height:2px;border-radius:2px;background:rgba(11,11,12,.12)} .oxa-journey-track i{position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#ff8a50;box-shadow:0 0 0 5px rgba(255,138,80,.2),0 0 18px #ff8a50} .oxa-journey-stop{position:relative;display:grid;justify-items:center;text-align:center;gap:8px} .oxa-journey-stop::before{ content:'';position:absolute;top:-26px;width:18px;height:18px;border-radius:50%; background:#fff;border:2px solid #dd6e3e; } .oxa-journey-stop::after{content:attr(data-l);font-size:14.9px;font-weight:500;line-height:1.3;color:var(--oxh-ink)} .oxa-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(34px,3.4vw,50px);max-width:560px} .oxa-ring{position:relative;display:grid;justify-items:center;gap:10px;text-align:center} .oxa-ring svg{width:min(100%,128px);aspect-ratio:1;rotate:-90deg;fill:none;stroke-width:5} .oxa-ring circle{stroke:rgba(255,255,255,.12)} .oxa-ring circle.is-on{stroke:#ff8a50;stroke-linecap:round;stroke-dasharray:var(--p) 1} .oxa-ring:nth-child(2) circle.is-on{stroke:#e4589a} .oxa-ring:nth-child(3) circle.is-on{stroke:#b48cff} .oxa-ring::before{content:attr(data-v);position:absolute;top:0;left:0;right:0;aspect-ratio:1;max-width:128px;margin:0 auto;display:grid;place-items:center;font-size:25px;font-weight:600;color:#fff} .oxa-ring::after{content:attr(data-l);font-size:14.5px;line-height:1.3;color:rgba(255,255,255,.96)} .oxa-roof{position:relative;margin-top:clamp(34px,3.4vw,50px);padding:20px;border-radius:16px;background:linear-gradient(160deg,rgba(255,138,80,.08),rgba(124,58,237,.06));border:1px solid rgba(124,58,237,.16)} .oxa-roof-top{display:block;margin-bottom:14px} .oxa-roof-chips span::before{background:#fff} .oxa-roof-top::before{content:attr(data-l);font-family:var(--oxh-mono);font-size:13.9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--oxh-acc-ink)} .oxa-check{background:#07060b;color:#fff} .oxa-check .oxa-wash{background:radial-gradient(50% 60% at 100% 0%,rgba(124,58,237,.3),transparent 70%),radial-gradient(46% 56% at 0% 100%,rgba(221,110,62,.26),transparent 72%)} .oxa-check-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,100px);align-items:center} .oxa-check-art{position:relative} .oxa-check-txt{max-width:760px} .oxa-check-frame .oxa-frame-in{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 100px -44px rgba(0,0,0,.8)} .oxa-check .oxa-h2{color:#fff} .oxa-check .oxa-em{color:#ffb38a} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .oxa-check .oxa-em{background-image:linear-gradient(100deg,#ffd9c2 0%,#ffa06a 28%,#f2733f 52%,#e4589a 76%,#b48cff 100%)} } .oxa-check .oxa-p{color:rgba(255,255,255,.96)} .oxa-check .oxa-p-lead{color:#fff} .oxa-check .oxa-p a{color:#ffcdb1;text-decoration-color:rgba(255,205,177,.7)} .oxa-key{ position:absolute;right:16px;top:16px;z-index:3;display:flex;align-items:center;gap:12px; padding:10px 16px 10px 10px;border-radius:14px;background:rgba(14,12,20,.78);border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 60px -26px rgba(0,0,0,.9); } .oxa-key svg{width:36px;height:36px;padding:8px;border-radius:10px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;background:linear-gradient(135deg,#ff8a50,#e4589a)} .oxa-key::after{content:attr(data-l);font-size:15.9px;font-weight:600;color:#fff} .oxa-tick-k{display:inline-grid;place-items:center;width:52px;height:52px;margin:0 0 22px;border-radius:16px;background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 14px 30px -12px rgba(16,185,129,.8)} .oxa-tick-k svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .oxa-next-room{background:var(--oxh-paper)} .oxa-next-h{margin:0 0 26px;font-size:clamp(30px,2.6vw,42px);font-weight:500;letter-spacing:-.03em} .oxa-next ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;margin:0;padding:0;list-style:none} .oxa-next a{ position:relative;display:grid;gap:10px;height:100%;padding:18px 18px 22px;border-radius:18px;background:#fff;border:1px solid var(--oxh-line); color:var(--oxh-ink);text-decoration:none;transition:transform .5s var(--oxh-ease),box-shadow .5s ease; } .oxa-next a:hover{transform:translateY(-4px);box-shadow:0 40px 70px -44px rgba(124,58,237,.4)} .oxa-next a:hover .oxa-arrow{transform:translateX(4px)} .oxa-next-art{display:block;overflow:hidden;border-radius:16px;aspect-ratio:16 / 9;background:#0d0c12} .oxa-next-art>*{width:100%;height:100%} .oxa-next b{font-size:19.9px;font-weight:600;line-height:1.3;letter-spacing:-.012em} .oxa-next-d{font-size:16.1px;line-height:1.55;color:#2b2c31} .oxa-next-go{display:inline-flex;color:var(--oxh-acc-ink)} .oxa-offer-room{background:var(--oxh-paper);padding-top:clamp(60px,6vw,100px)} .oxa-next-room:has(+ .oxa-offer-room){padding-bottom:0} .oxa-next-room + .oxa-offer-room{padding-top:clamp(40px,4vw,64px)} .oxa-offer{ position:relative;overflow:hidden;isolation:isolate;padding:clamp(40px,5vw,84px);border-radius:28px;color:#fff; background:radial-gradient(60% 80% at 10% 0%,rgba(255,138,80,.42),transparent 70%),radial-gradient(60% 80% at 100% 100%,rgba(124,58,237,.5),transparent 70%),#08070c; box-shadow:0 60px 120px -60px rgba(124,58,237,.7); } .oxa-offer-rim{ position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--oxa-a),transparent 0deg,rgba(255,170,120,.95) 50deg,rgba(228,88,154,.9) 100deg,transparent 160deg,transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; } .oxa-offer-sky{position:absolute;inset:0;z-index:-1;pointer-events:none} .oxa-offer-sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff} .oxa-offer-sky i:nth-child(1){left:72%;top:22%} .oxa-offer-sky i:nth-child(2){left:86%;top:58%} .oxa-offer-sky i:nth-child(3){left:60%;top:76%} .oxa-offer-h{margin:0;max-width:820px;font-size:clamp(36px,3.8vw,64px);font-weight:500;line-height:1.04;letter-spacing:-.035em;color:#fff} .oxa-offer p{margin:22px 0 0;max-width:640px;font-size:19.9px;line-height:1.6;color:#fff} .oxa-offer-go{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:34px} .oxa-btn{ display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:999px;background:#fff;color:var(--oxh-ink) !important; font-size:17.5px;font-weight:600;text-decoration:none;box-shadow:0 14px 36px -14px rgba(255,255,255,.55);transition:transform .4s var(--oxh-ease),box-shadow .4s ease; } .oxa-btn:hover{transform:translateY(-2px);box-shadow:0 18px 46px -14px rgba(255,150,100,.75)} .oxa-btn:hover .oxa-arrow{transform:translateX(4px)} .oxa-btn:focus-visible{outline:2px solid #ff8a50;outline-offset:3px} .oxa-faces{display:flex;margin:0;padding:0;list-style:none} .oxa-faces li{width:46px;height:46px;margin-left:-12px;border-radius:50%;overflow:hidden;border:2px solid #08070c;background:#2a2830} .oxa-faces li:first-child{margin-left:0} .oxa-faces img{width:100%;height:100%;object-fit:cover} @media (max-width:1000px){ .oxa-hero-in,.oxa-open-grid,.oxa-ag-grid,.oxa-check-grid,.oxa-spot-grid,.oxa-sub{grid-template-columns:minmax(0,1fr)} .oxa-sub{gap:18px} .oxa-sub-head{position:relative;top:auto} .oxa-hero-art{justify-self:center} .oxa-ag-grid.is-flip .oxa-ag-txt{order:0} .oxa-spot-tags{margin-left:0} .oxa-ranked{position:relative;left:auto;width:100%;margin-top:-40px} } @media (max-width:640px){ .oxa-hero-in{padding-top:calc(clamp(30px,3vw,56px) + 84px)} .oxa-author{gap:14px;padding:12px 16px 12px 12px} .oxa-author-face,.oxa-author-face img{width:68px;height:68px} .oxa-journey{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px} .oxa-journey-track{display:none} .oxa-badge{left:12px;bottom:12px} .oxa-open-art .oxa-frame-in img{aspect-ratio:4 / 3} .oxa-key{right:12px;top:12px} .oxa-open .oxa-p-lead{font-size:19.5px;padding-left:18px} .oxa-spot{border-radius:28px} .oxa-subs{border-radius:24px} } @media (prefers-reduced-motion:no-preference){ .oxa-frame-in::before,.oxa-author-halo,.oxa-offer-rim{animation:oxaTurn 6s linear infinite} .oxa-spot-rim{animation:oxaTurn 9s linear infinite} .oxa-spec-row{animation:oxaRankIn .9s var(--oxh-ease) both;animation-delay:calc(.2s + var(--i) * .1s)} .oxa-frame-in img{animation:oxaKen 24s ease-in-out infinite alternate} .oxa-sheen::after{animation:oxaGlint 7s var(--oxh-ease) infinite} .oxa-aurora{animation:oxaAurora 28s linear infinite} .oxa-beam i{animation:oxaBeam 7s ease-in-out infinite} .oxa-beam i:nth-child(2){animation-delay:-2.4s} .oxa-beam i:nth-child(3){animation-delay:-4.6s} .oxa-stars{animation:oxaTwinkle 6s ease-in-out infinite alternate} .oxa-h1-em{animation:oxaShine 8s ease-in-out infinite alternate} .oxa-pill i{animation:oxaPulse 2.4s ease-in-out infinite} .oxa-ranked li{animation:oxaRankIn .9s var(--oxh-ease) both;animation-delay:calc(.35s + var(--i) * .12s)} .oxa-ranked li:first-child b{animation:oxaPulseGold 2.8s ease-in-out infinite} .oxa-ticker-track{animation:oxaTicker 42s linear infinite} .oxa-author{animation:oxaRankIn 1s var(--oxh-ease) .25s both} .oxa-team-grid i{animation:oxaLight 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .09s)} .oxa-journey-track i{animation:oxaTravel 6s var(--oxh-ease) infinite} .oxa-journey-stop::before{animation:oxaStop 6s ease-in-out infinite;animation-delay:calc(var(--i) * 1.5s)} .oxa-offer-sky i{animation:oxaPulse 3s ease-in-out infinite} .oxa-offer-sky i:nth-child(2){animation-delay:-1s} .oxa-offer-sky i:nth-child(3){animation-delay:-2s} } @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .oxa-rv{animation:oxaRise linear both;animation-timeline:view();animation-range:entry 0% entry 180px} .oxa-frame-in{animation:oxaWipe linear both;animation-timeline:view();animation-range:entry 0% entry 70%} .oxa-hero-frame .oxa-frame-in{animation:none} .oxa-ring circle.is-on{animation:oxaDial linear both;animation-timeline:view();animation-range:entry 20% cover 45%} .oxa-chips:not(.oxa-spec-chips) span{animation:oxaChip linear both;animation-timeline:view();animation-range:entry calc(var(--i) * 18px) entry calc(160px + var(--i) * 18px)} .oxa-tick-k path{animation:oxaDraw linear both;animation-timeline:view();animation-range:entry 30% entry 100%} } } @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion:no-preference){ .oxa-progress{display:block;animation:oxaProgress linear both;animation-timeline:scroll(root)} } } @keyframes oxaTurn{to{--oxa-a:360deg}} @keyframes oxaKen{from{transform:scale(1.01)}to{transform:scale(1.07) translate(-1.2%,-1%)}} @keyframes oxaGlint{0%{translate:0 0}38%,100%{translate:560% 0}} @keyframes oxaAurora{to{transform:rotate(360deg)}} @keyframes oxaBeam{0%,100%{opacity:.3;translate:-30px 0}50%{opacity:1;translate:30px 0}} @keyframes oxaTwinkle{from{opacity:.3}to{opacity:.7}} @keyframes oxaShine{from{background-position:0% 50%}to{background-position:100% 50%}} @keyframes oxaFloat{0%,100%{translate:0 0}50%{translate:0 -10px}} @keyframes oxaPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.8)}} @keyframes oxaPulseGold{0%,100%{box-shadow:0 0 0 0 rgba(255,138,80,.6)}50%{box-shadow:0 0 0 7px rgba(255,138,80,0)}} @keyframes oxaRankIn{from{opacity:.2;translate:-18px 0;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}} @keyframes oxaTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes oxaLight{0%,100%{opacity:.85;transform:scale(1)}40%{opacity:.35;transform:scale(.7)}} @keyframes oxaTravel{0%{left:0}85%,100%{left:calc(100% - 14px)}} @keyframes oxaStop{0%,20%,100%{box-shadow:0 0 0 0 rgba(221,110,62,0)}8%{box-shadow:0 0 0 7px rgba(221,110,62,.25);background:#dd6e3e}} @keyframes oxaRise{from{opacity:.55;translate:0 28px}to{opacity:1;translate:0 0}} @keyframes oxaWipe{from{clip-path:inset(0 100% 0 0 round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}} @keyframes oxaDial{from{stroke-dasharray:0 1}to{stroke-dasharray:var(--p) 1}} @keyframes oxaChip{from{opacity:.6;translate:0 14px;scale:.92}to{opacity:1;translate:0 0;scale:1}} @keyframes oxaDraw{from{stroke-dashoffset:1;stroke-dasharray:1}to{stroke-dashoffset:0;stroke-dasharray:1}} @keyframes oxaProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}