:root { color-scheme: light; --bg:#f2f2f0; --ink:#101012; --muted:#68686b; --line:rgba(16,16,18,.12); --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.82); --shadow:0 24px 80px rgba(17,17,19,.10); --radius:28px; }
:root[data-theme="dark"] { color-scheme: dark; --bg:#0b0b0d; --ink:#f4f4f0; --muted:#a4a4a8; --line:rgba(255,255,255,.14); --glass:rgba(31,31,35,.70); --glass-strong:rgba(38,38,43,.88); --shadow:0 24px 80px rgba(0,0,0,.34); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif; line-height:1.55; transition:background .35s ease,color .35s ease; }
a { color:inherit; text-decoration:none; }
.page-noise { position:fixed; inset:0; pointer-events:none; opacity:.13; 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%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); z-index:-1; }
.shell { width:min(1160px,calc(100% - 48px)); margin:0 auto; }
.nav { min-height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; font-size:14px; font-weight:700; letter-spacing:-.02em; }
.nav-links { display:flex; align-items:center; gap:25px; color:var(--muted); font-size:12px; }
.nav-links a:hover,.text-link:hover { color:var(--ink); }
.icon-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--glass); color:var(--ink); cursor:pointer; font-size:16px; transition:transform .2s ease,background .2s ease; }
.icon-button:hover { transform:rotate(12deg); background:var(--glass-strong); }
.hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:90px; align-items:center; min-height:650px; padding:76px 0 100px; }
.eyebrow { margin:0 0 18px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.16em; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#3f9b6d; box-shadow:0 0 0 5px rgba(63,155,109,.12); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:720px; margin-bottom:25px; font-size:clamp(48px,7vw,86px); line-height:.98; letter-spacing:-.07em; font-weight:700; }
h1 em { color:var(--muted); font-style:normal; }
.hero-text { max-width:535px; margin-bottom:31px; color:var(--muted); font-size:16px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:48px; padding:0 19px; border:1px solid var(--ink); border-radius:14px; font-size:12px; font-weight:700; transition:transform .22s ease,box-shadow .22s ease,background .22s ease; }
.button:hover { transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.12); }
.button-dark { background:var(--ink); color:var(--bg); }
.button-light { background:var(--glass); border-color:var(--line); }
.microcopy { margin:14px 0 0; color:var(--muted); font-size:11px; }
.glass-card { border:1px solid var(--line); background:var(--glass); box-shadow:var(--shadow); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.hero-card { position:relative; min-height:470px; padding:24px; overflow:hidden; border-radius:var(--radius); }
.hero-card:before { content:""; position:absolute; width:280px; height:280px; right:-100px; top:-100px; border-radius:50%; background:rgba(128,128,128,.14); filter:blur(8px); }
.card-topline { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.12em; }
.card-live { color:#3f9b6d; }
.model-system { position:relative; height:398px; margin-top:4px; }
#ai-orbit-scene { display:block; width:100%; height:100%; outline:0; cursor:grab; touch-action:none; }
#ai-orbit-scene.dragging { cursor:grabbing; }
.webgl-status { position:absolute; inset:0; display:none; place-items:center; margin:0; color:var(--muted); font-size:11px; letter-spacing:.08em; text-align:center; }
.webgl-status span { display:none; }
#ai-orbit-scene[data-webgl-state="unsupported"] + .webgl-status,
#ai-orbit-scene[data-webgl-state="lost"] + .webgl-status,
#ai-orbit-scene[data-webgl-state="error"] + .webgl-status { display:grid; }
#ai-orbit-scene[data-webgl-state="unsupported"] + .webgl-status [data-state="unsupported"],
#ai-orbit-scene[data-webgl-state="lost"] + .webgl-status [data-state="lost"],
#ai-orbit-scene[data-webgl-state="error"] + .webgl-status [data-state="error"] { display:block; }
.section { padding:80px 0; }.section-heading { margin-bottom:38px; }.section-heading h2,.setup-panel h2 { margin:0; font-size:clamp(30px,4vw,50px); line-height:1.02; letter-spacing:-.06em; }.inline-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }.text-link { color:var(--muted); font-size:12px; white-space:nowrap; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.feature-card { min-height:260px; padding:23px; border-radius:22px; transition:transform .25s ease; }.feature-card:hover { transform:translateY(-6px); }.feature-index { color:var(--muted); font:12px Georgia,serif; }.feature-card h3 { margin:52px 0 10px; font-size:22px; letter-spacing:-.04em; }.feature-card p { min-height:74px; margin-bottom:20px; color:var(--muted); font-size:13px; }.feature-tag { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.12em; }
.preview-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; align-items:start; }.preview-card { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--glass); }.preview-card-large { grid-row:span 2; }.preview-card img { display:block; width:100%; height:auto; aspect-ratio:1.55; object-fit:cover; background:#dededb; }.preview-card-large img { aspect-ratio:1.23; object-fit:contain; }.preview-card figcaption { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; }.preview-card figcaption span { color:var(--muted); font-size:9px; letter-spacing:.12em; }.preview-card figcaption strong { font-size:12px; }
.seo-section { padding-top:48px; }.seo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.seo-card { padding:24px; border-radius:22px; }.seo-card h3 { margin:0 0 14px; font-size:18px; letter-spacing:-.04em; }.seo-card p { margin:0; color:var(--muted); font-size:13px; }
.setup-section { padding-top:45px; }.setup-panel { display:grid; grid-template-columns:.65fr 1fr auto; gap:30px; align-items:center; padding:28px; border-radius:var(--radius); }.setup-panel .eyebrow { margin-bottom:10px; }.steps { display:grid; gap:9px; }.step { display:flex; align-items:center; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }.step b { color:var(--muted); font:12px Georgia,serif; }.footer { display:flex; justify-content:space-between; gap:18px; padding:32px 0 42px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }.footer a:hover { color:var(--ink); }
@media (prefers-reduced-motion:no-preference) {
  .motion-ready [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .65s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),transform .65s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms); }
  .motion-ready [data-reveal].is-visible { opacity:1; transform:translateY(0); }
  .motion-ready .hero-copy { transition-delay:70ms; }
  .motion-ready .hero-card { transform:translateY(20px) scale(.985); transition-delay:170ms; }
  .motion-ready .hero-card.is-visible { transform:translateY(0) scale(1); }
  .status-dot { animation:ready-pulse 2.7s ease-in-out infinite; }
  .preview-card img { transition:transform .65s cubic-bezier(.22,1,.36,1); }
  .preview-card:hover img { transform:scale(1.025); }
}
@keyframes ready-pulse { 50% { box-shadow:0 0 0 8px rgba(63,155,109,0); } }
@media (max-width:800px) { .shell { width:min(100% - 30px,600px); }.nav { min-height:72px; }.nav-links { gap:12px; }.nav-links a:nth-child(-n+2) { display:none; }.hero { grid-template-columns:1fr; gap:30px; min-height:auto; padding:75px 0 55px; }.hero-card { min-height:350px; }.feature-grid,.seo-grid,.setup-panel { grid-template-columns:1fr; }.setup-panel .button { width:100%; }.preview-grid { grid-template-columns:1fr; }.preview-card-large { grid-row:auto; }.preview-card-large img { aspect-ratio:1.55; }.inline-heading { align-items:start; flex-direction:column; }.footer { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }

.seo-links-section { padding-top:35px; }.seo-link-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.seo-link-card { display:block; min-height:170px; padding:22px; border-radius:22px; transition:transform .25s ease,background .25s ease; }.seo-link-card:hover { transform:translateY(-5px); background:var(--glass-strong); }.seo-link-card span { display:block; margin-bottom:30px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.14em; }.seo-link-card strong { display:block; margin-bottom:8px; font-size:17px; letter-spacing:-.04em; }.seo-link-card p { margin:0; color:var(--muted); font-size:12px; }
.article { padding:0 0 80px; }.breadcrumb { display:flex; gap:10px; padding-top:31px; color:var(--muted); font-size:11px; }.breadcrumb span { opacity:.55; }.breadcrumb a:hover { color:var(--ink); }.article-hero { max-width:820px; padding:72px 0 62px; }.article h1 { max-width:820px; margin-bottom:26px; font-size:clamp(45px,7vw,82px); }.article h1 em { color:var(--muted); font-style:normal; }.article-lede { max-width:690px; margin:0; color:var(--muted); font-size:17px; }.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:70px; align-items:start; }.article-content { min-width:0; }.article-section { position:relative; padding:34px 0 47px; border-top:1px solid var(--line); }.article-section h2 { margin:0 0 18px; font-size:clamp(25px,3vw,39px); line-height:1.08; letter-spacing:-.055em; }.article-section p { max-width:700px; color:var(--muted); font-size:14px; }.article-index { display:block; margin-bottom:14px; color:var(--muted); font:12px Georgia,serif; }.article-steps { max-width:680px; margin:22px 0; padding-left:24px; color:var(--muted); font-size:14px; }.article-steps li { margin:10px 0; padding-left:5px; }.article-note { max-width:680px; margin-top:25px; padding:17px 19px; border:1px solid var(--line); border-radius:16px; background:var(--glass); }.article-note strong { display:block; margin-bottom:5px; font-size:12px; }.article-note p { margin:0; font-size:12px; }.article-aside { position:sticky; top:24px; padding:22px; border-radius:22px; }.aside-link { display:flex; justify-content:space-between; gap:15px; padding:15px 0; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; }.aside-link span { color:var(--muted); }.aside-caption { margin:20px 0 0; color:var(--muted); font-size:11px; }.article-next { padding-bottom:0; }.article-link-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.article-link-grid a { display:block; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--glass); transition:transform .22s ease,background .22s ease; }.article-link-grid a:hover { transform:translateY(-4px); background:var(--glass-strong); }.article-link-grid span { display:block; margin-bottom:13px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.14em; }.article-link-grid strong { font-size:13px; }.feature-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-bottom:80px; }.detail-card { min-height:245px; padding:23px; border-radius:22px; }.detail-card h2 { margin:42px 0 10px; font-size:22px; letter-spacing:-.045em; }.detail-card p { min-height:78px; margin-bottom:20px; color:var(--muted); font-size:13px; }.workflow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--muted); font-size:13px; }.workflow span { padding:10px 13px; border:1px solid var(--line); border-radius:999px; background:var(--glass); }.workflow b { color:var(--ink); }.article-wide { max-width:900px; }.faq-list { max-width:850px; padding-bottom:80px; }.faq-list details { border-top:1px solid var(--line); }.faq-list details:last-child { border-bottom:1px solid var(--line); }.faq-list summary { display:flex; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:700; letter-spacing:-.03em; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary:after { content:"+"; color:var(--muted); font-weight:400; }.faq-list details[open] summary:after { content:"−"; }.faq-list details p { max-width:700px; margin:0 0 23px; color:var(--muted); font-size:14px; }.release-list { display:grid; gap:14px; padding-bottom:80px; }.release-item { padding:26px; border-radius:22px; }.release-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.1em; }.release-item h2 { margin:45px 0 17px; font-size:26px; letter-spacing:-.05em; }.release-item ul { max-width:760px; margin:0; padding-left:20px; color:var(--muted); font-size:14px; }.release-item li { margin:9px 0; }
@media (max-width:800px) { .seo-link-grid,.feature-detail-grid { grid-template-columns:1fr; }.article-layout { grid-template-columns:1fr; gap:28px; }.article-aside { position:static; }.article-hero { padding:55px 0 45px; }.article-lede { font-size:15px; }.article-link-grid { grid-template-columns:1fr; }.workflow { align-items:flex-start; flex-direction:column; }.workflow b { display:none; }.detail-card { min-height:0; }.detail-card h2 { margin-top:28px; }.release-item h2 { margin-top:32px; } }