/* Preview 01 details scoped to avoid any changes to the live-style hero. */
.details-content{color-scheme:dark;--bg:#090e1d;--surface:#111a2a;--ink:#f3f6ff;--muted:#97a9c7;--accent:#adbfff;--bright:#d9e4ff;--line:#7793ce2b;--button:#7188ed;--halo:#687cf424}
html[data-palette=green] .details-content{--bg:#050e0b;--surface:#0c1c16;--ink:#effff5;--muted:#8fae9f;--accent:#8beab0;--bright:#d6ffe4;--line:#74c69629;--button:#8beab0;--halo:#52e68d17}
.details-content *{box-sizing:border-box}
.details-content{scroll-behavior:smooth;scroll-padding-top:35px}
.details-content{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
.details-content a{color:inherit;text-decoration:none}
.details-content button,.details-content summary{font:inherit;cursor:pointer}
.details-content button{color:inherit;border:0}
.details-content a,.details-content button,.details-content summary{-webkit-tap-highlight-color:transparent}
.details-content a:focus-visible,.details-content button:focus-visible,.details-content summary:focus-visible,.details-content input:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.details-content img{max-width:100%;object-fit:contain}
.details-content p,.details-content h1,.details-content h2,.details-content h3,.details-content h4{margin:0}
.details-content p{color:var(--muted)}
.details-content .wrap{width:calc(100% - 100px);max-width:1280px;margin-inline:auto}
.details-content .preview-notice{display:flex;justify-content:space-between;gap:15px;padding:9px max(30px,calc((100vw - 1280px)/2));font-size:9px;letter-spacing:1.6px;color:#b6bfd9;background:#0f172a;border-bottom:1px solid #6b7c9f1a}
.details-content .preview-notice a{letter-spacing:0;color:#8395b8;white-space:nowrap}
.details-content .header{height:86px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:10;border-bottom:1px solid var(--line)}
.details-content .brand{display:inline-flex;gap:10px;align-items:center;font-size:23px;font-weight:550;letter-spacing:-.8px}
.details-content .header nav,.details-content .header-tools{display:flex;align-items:center;gap:30px}
.details-content .header nav{font-size:13px;color:var(--muted)}
.details-content .header nav a:hover{color:var(--bright)}
.details-content .header-tools{gap:22px}
.details-content .palette{display:flex;padding:4px;border:1px solid var(--line);border-radius:25px;gap:4px}
.details-content .palette button{font-size:10px;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid transparent;background:none;color:var(--muted);border-radius:20px}
.details-content .palette button[aria-pressed=true]{background:var(--halo);color:var(--bright);border-color:var(--line)}
.details-content .palette button i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#94aaff}
.details-content .palette button[data-palette=green] i{background:#90edac}
.details-content .language{position:relative;font-size:11px}
.details-content .language summary{list-style:none;padding-block:10px;white-space:nowrap;cursor:pointer}
.details-content .language summary::-webkit-details-marker{display:none}
.details-content .language-list{position:absolute;inset-inline-end:0;inset-block-start:44px;width:210px;max-height:min(68vh,550px);overflow:auto;background:var(--surface);border:1px solid var(--line);padding:8px;border-radius:12px;box-shadow:0 20px 70px #0008}
.details-content .language-list a{display:flex;gap:12px;padding:10px 12px;border-radius:7px}
.details-content .language-list a:hover,.details-content .language-list a[aria-current]{background:var(--halo)}
.details-content .language-list span{font-size:10px;color:var(--muted);width:24px}
.details-content .hero{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;min-height:470px;padding-block:42px 35px;position:relative}
.details-content .hero-copy{position:relative;z-index:2}
.details-content .eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:550;line-height:1.6;color:var(--muted);display:flex;align-items:center;gap:10px}
.details-content .live-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.details-content h1{font-size:clamp(40px,4.2vw,61px);line-height:1.06;letter-spacing:-2.7px;font-weight:550;margin:23px 0 20px}
.details-content h1 span{color:var(--accent)}
.details-content .intro{font-size:15px;line-height:1.8;max-width:500px}
.details-content .button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:13px 22px;font-size:12px;min-height:46px;line-height:1.5;font-weight:600;border-radius:9px;transition:transform .2s,background .2s;white-space:normal}
.details-content .button:hover{transform:translateY(-2px)}
.details-content .primary{background:var(--button);color:#081226;box-shadow:0 8px 35px var(--halo);margin-top:27px}
.details-content .primary:hover{background:var(--accent)}
.details-content .universe{height:380px;position:relative;isolation:isolate}
.details-content .universe:before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse,var(--halo),transparent 70%);filter:blur(25px)}
.details-content #sphere{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}
.details-content .orbit{position:absolute;inset:48px 20px;border:1px solid var(--line);border-radius:50%;transform:rotate(-25deg);opacity:.65;z-index:-1}
.details-content .orbit-two{inset:28px 66px;transform:rotate(30deg)}
.details-content .floating-product{position:absolute;display:flex;align-items:center;gap:12px;padding:13px 16px 13px 12px;min-width:200px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(125deg,var(--surface),var(--bg));box-shadow:0 16px 50px #0004;animation:float 7s ease-in-out infinite;transition:border-color .2s}
.details-content .floating-product:hover{border-color:var(--accent)}
.details-content .floating-product>span{font-size:23px;line-height:1.2;letter-spacing:-.7px;font-weight:500}
.details-content .floating-product small{display:block;color:var(--muted);font-size:7px;letter-spacing:1px;margin-top:6px;max-width:175px;line-height:1.5}
.details-content .floating-product>b{font-size:18px;font-weight:400;color:var(--accent);margin-inline-start:auto}
.details-content .floating-neo{top:68px;left:9%;transform:rotate(-7deg)}
.details-content .floating-tunnel{top:230px;right:1%;transform:rotate(5deg);animation-delay:-3.3s}
.details-content .orbit-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:2.4px;white-space:nowrap;color:var(--muted);opacity:.6}
.details-content .products{padding-block:30px 55px}
.details-content .section-top{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:28px}
.details-content .section-top h2{margin-top:10px}
.details-content h2{font-size:33px;font-weight:500;line-height:1.25;letter-spacing:-1.2px}
.details-content .section-top>p{font-size:12px;max-width:330px}
.details-content .product-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.details-content .product-card{padding:30px 30px 0;border:1px solid #758cd42b;border-radius:18px;background:radial-gradient(ellipse at 100% 0,#6266fa13,transparent 55%),#10182a;overflow:hidden;color:#f1f4ff}
.details-content .product-card.tunnel{background:radial-gradient(ellipse at 100% 0,#61d9e315,transparent 55%),#0b1c25;border-color:#75d2e52b}
.details-content .product-heading{display:flex;gap:15px;align-items:center}
.details-content .product-heading .eyebrow{font-size:8px;color:#899cc8;letter-spacing:1.4px}
.details-content .tunnel .product-heading .eyebrow{color:#7bb5c6}
.details-content .product-heading h3{font-size:33px;letter-spacing:-1px;line-height:1.2;margin-top:4px;font-weight:500}
.details-content .card-number{margin-inline-start:auto;align-self:flex-start;color:#6f81a2;font-size:10px;letter-spacing:1.5px}
.details-content .product-card h4{font-size:18px;line-height:1.4;letter-spacing:-.35px;font-weight:500;margin-top:24px}
.details-content .product-body{font-size:12px;line-height:1.9;margin-top:12px;color:#97a9c7;min-height:69px;max-width:475px}
.details-content .chips{display:flex;flex-wrap:wrap;gap:7px;margin-block:18px 22px}
.details-content .chips span{font-size:9px;color:#9badd2;border:1px solid #6478ba30;background:#6676b50b;border-radius:5px;padding:4px 9px}
.details-content .tunnel .chips span{color:#85bbc9;border-color:#639da330}
.details-content .card-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:27px}
.details-content .product-cta{background:#5f69df;color:#fff;border:1px solid #8b98ff45;min-height:42px;padding:10px 17px;font-size:11px;gap:16px}
.details-content .product-cta:hover{background:#7580f0}
.details-content .tunnel .product-cta{background:#123b48;border-color:#88e2e15c;color:#a2ecf3}
.details-content .tunnel .product-cta:hover{background:#1d5260}
.details-content .text-button{display:inline-flex;align-items:center;gap:10px;color:var(--muted);background:none;font-size:10px;padding:8px 0;line-height:1.5}
.details-content .product-card .text-button{color:#99abd0}
.details-content .tunnel .text-button{color:#8db6c5}
.details-content .text-button:hover{color:var(--bright)}
.details-content .screenshot{position:relative;display:block;width:100%;padding:0;border-radius:10px 10px 0 0;overflow:hidden;height:175px;background:#07111f;border:1px solid #758cd426;border-bottom:0;transition:transform .3s}
.details-content .screenshot:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#0a112e80);pointer-events:none}
.details-content .screenshot:hover{transform:translateY(-3px)}
.details-content .screenshot img{display:block;width:100%;height:auto;object-position:top;filter:brightness(.9)}
.details-content .family{text-align:center;padding-block:55px 65px}
.details-content .family-art{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:25px}
.details-content .family-art img{border-radius:13px}
.details-content .family-line{width:90px;height:1px;background:var(--line);position:relative}
.details-content .family-line:before{content:'';position:absolute;top:-2px;left:0;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent);animation:travel 5s linear infinite}
.details-content .family p{font-size:13px;line-height:1.9;max-width:670px;margin:18px auto 20px}
.details-content .identity{display:inline-block;font-size:9px;letter-spacing:1px;border:1px solid var(--line);padding:6px 13px;border-radius:20px;color:var(--accent)}
.details-content .studio{border:1px solid #dc729a30;border-radius:17px;background:radial-gradient(ellipse at 0 50%,#ff4c8312,transparent 60%),#18151f;padding:36px 40px;display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:30px;margin-bottom:65px}
.details-content .studio-symbol{position:relative}
.details-content .studio-symbol>img{position:relative;z-index:1;filter:drop-shadow(0 0 25px #e65c9330)}
.details-content .studio-orbit{position:absolute;inset:5px -8px;border:1px solid #d95d9633;border-radius:50%;transform:rotate(-30deg)}
.details-content .studio .eyebrow{color:#c28aa8;font-size:8px}
.details-content .studio h2{font-size:28px;color:#f9ebf2;margin-top:10px}
.details-content .studio p:not(.eyebrow){font-size:12px;line-height:1.8;margin-top:12px;max-width:590px;color:#af9bae}
.details-content .studio-cta{border:1px solid #dc729a55;color:#f5acc8;background:#b34b6a15;font-size:11px;padding:12px 17px;gap:17px}
.details-content .studio-cta:hover{background:#b34b6a30}
.details-content .footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;align-items:center;padding-block:25px 35px}
.details-content .footer>a{font-size:10px;color:var(--muted)}
.details-content .experience{display:flex;gap:25px;align-items:center}
.details-content .sound{display:flex;gap:13px;align-items:center}
.details-content .sound input{width:65px;height:3px;accent-color:var(--accent);cursor:pointer}
.details-content .sound .text-button{white-space:nowrap}
.details-content .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.details-content .skip{position:fixed;top:-100px;left:15px;z-index:99;background:#6275da;padding:12px}
.details-content .skip:focus{top:12px}
.details-content dialog{padding:22px;background:#111b2c;border:1px solid #6c84b35c;border-radius:16px;color:#ecf2ff;max-width:min(1200px,94vw);width:94vw;max-height:92dvh;overflow:auto;box-shadow:0 30px 100px #0008}
.details-content dialog::backdrop{background:#020510d9;backdrop-filter:blur(8px)}
.details-content .dialog-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.details-content .dialog-top h2{font-size:23px}
.details-content .close-dialog{background:#7389c619;border:1px solid #6c84b344;border-radius:8px;width:38px;height:38px;font-size:24px;line-height:1}
.details-content .close-dialog:hover{background:#7389c640}
.details-content dialog>img{display:block;width:100%;height:auto;border-radius:8px}
.details-content dialog>p{font-size:10px;text-align:center;margin-top:13px;color:#8fa3c3}
.details-content .paused *{animation-play-state:paused!important}
[dir=rtl] .details-content h1,[dir=rtl] .details-content h2,[dir=rtl] .details-content h3,[dir=rtl] .details-content h4{letter-spacing:0}
[dir=rtl] .details-content .eyebrow{letter-spacing:.7px}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes travel{from{left:0}to{left:100%}}
@media(max-width:1100px){.details-content .wrap{width:calc(100% - 64px)}
.details-content .header nav{gap:20px}
.details-content .header-tools{gap:18px}
.details-content .hero{grid-template-columns:1.1fr 1fr;gap:20px}
.details-content .hero h1{font-size:48px;letter-spacing:-2.5px}
.details-content .floating-product{min-width:180px;padding:12px}
.details-content .floating-product small{font-size:6px;max-width:130px}
.details-content .floating-neo{left:0;top:75px}
.details-content .floating-tunnel{right:-10px}
.details-content .product-card{padding:25px 25px 0}
.details-content .card-actions{gap:10px}
.details-content .studio{padding:30px;grid-template-columns:90px 1fr;gap:25px}
.details-content .studio-cta{grid-column:2;justify-self:start;margin-top:-8px}
.details-content .product-body{min-height:92px}
.details-content .section-top{gap:35px}}
@media(max-width:800px){.details-content .wrap{width:calc(100% - 40px)}
.details-content .preview-notice{padding-inline:20px;font-size:8px;letter-spacing:1px}
.details-content .header{height:76px;gap:20px}
.details-content .brand{font-size:21px}
.details-content .header nav{display:none}
.details-content .header-tools{gap:17px}
.details-content .palette button{font-size:9px;padding:6px 9px}
.details-content .hero{grid-template-columns:1fr;padding-top:45px;padding-bottom:20px;gap:15px}
.details-content .hero-copy{max-width:600px}
.details-content .hero h1{font-size:60px;letter-spacing:-2.8px}
.details-content .intro{font-size:15px}
.details-content .universe{width:min(100%,480px);height:350px;margin:auto}
.details-content .floating-neo{left:5%;top:55px}
.details-content .floating-tunnel{right:0;top:208px}
.details-content .products{padding-top:20px}
.details-content .section-top{display:block;margin-bottom:25px}
.details-content .section-top>p{margin-top:15px;max-width:550px}
.details-content .product-grid{grid-template-columns:1fr;gap:22px}
.details-content .product-body{min-height:0;max-width:100%}
.details-content .screenshot{height:205px}
.details-content .product-card{padding:27px 27px 0}
.details-content .card-actions{margin-top:0;margin-bottom:25px}
.details-content .family{padding-block:35px 50px}
.details-content .family h2{font-size:29px}
.details-content .studio{grid-template-columns:72px 1fr;gap:22px;padding:27px;margin-bottom:45px}
.details-content .studio-symbol img{width:70px}
.details-content .studio h2{font-size:25px}
.details-content .studio-cta{grid-column:2}
.details-content .footer{flex-wrap:wrap;gap:20px}
.details-content .experience{gap:25px;justify-content:space-between;width:100%}
.details-content .section-top h2{font-size:31px}}
@media(max-width:420px){.details-content .wrap{width:calc(100% - 36px)}
.details-content .preview-notice{font-size:7px;padding-inline:18px;letter-spacing:.7px}
.details-content .preview-notice a{max-width:90px;overflow:hidden;text-overflow:ellipsis}
.details-content .header{gap:10px;height:70px}
.details-content .brand{font-size:19px;gap:7px}
.details-content .brand img{width:30px;height:30px}
.details-content .header-tools{gap:12px}
.details-content .palette{padding:3px;gap:2px}
.details-content .palette button{padding:6px 7px;gap:4px;font-size:8px}
.details-content .language{font-size:10px}
.details-content .hero{padding-top:34px;gap:0}
.details-content .hero h1{font-size:47px;letter-spacing:-2.5px;margin-top:20px}
.details-content .hero .eyebrow{font-size:8px;letter-spacing:1.4px}
.details-content .intro{font-size:13px;line-height:1.85}
.details-content .primary{margin-top:23px}
.details-content .universe{height:320px;margin-top:12px}
.details-content .floating-product{min-width:170px}
.details-content .floating-neo{top:44px;left:0}
.details-content .floating-tunnel{top:190px;right:0}
.details-content .orbit-caption{font-size:7px;letter-spacing:1.7px}
.details-content .product-card{padding:23px 22px 0}
.details-content .product-heading>img{width:52px;height:52px}
.details-content .product-heading h3{font-size:30px}
.details-content .product-heading .eyebrow{font-size:7px;letter-spacing:1px}
.details-content .card-number{font-size:8px}
.details-content .product-card h4{font-size:18px;margin-top:22px}
.details-content .product-body{font-size:12px}
.details-content .card-actions{gap:10px;align-items:center}
.details-content .product-cta{padding:11px 14px;font-size:10px;gap:12px}
.details-content .text-button{font-size:9px}
.details-content .card-actions .text-button{max-width:120px;text-align:start;gap:6px}
.details-content .screenshot{height:150px}
.details-content .family-art{gap:12px}
.details-content .family-line{width:45px}
.details-content .family h2{font-size:28px}
.details-content .family p{font-size:12px}
.details-content .studio{padding:25px;grid-template-columns:1fr;gap:20px}
.details-content .studio-symbol{width:70px}
.details-content .studio-copy .eyebrow{font-size:7px}
.details-content .studio h2{font-size:26px}
.details-content .studio-cta{grid-column:1;justify-self:start;margin-top:0}
.details-content .sound{gap:12px}
.details-content .sound input{width:55px}
.details-content .experience{gap:15px}
.details-content .footer .text-button{font-size:9px}
.details-content .footer>a{font-size:9px}
.details-content .section-top h2{font-size:29px}
.details-content dialog{padding:15px}
.details-content .dialog-top{margin-bottom:13px}}
@media(prefers-reduced-motion:reduce){.details-content{scroll-behavior:auto}
.details-content *,.details-content *::before,.details-content *::after{animation:none!important;transition:none!important}}