@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap");

:root { --bg:#07090d; --panel:#0d1016; --panel-2:#121620; --line:#202632; --muted:#6e788b; --text:#e7eaf0; --blue:#4e7cf6; --amber:#f2a03c; --accent:var(--blue); --shell:min(1480px,calc(100vw - 56px)); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { min-height:100vh; margin:0; overflow-x:hidden; background:radial-gradient(circle at 72% 18%,rgba(51,78,147,.13),transparent 32%),linear-gradient(180deg,#090b10,#05070a 70%); color:var(--text); font-family:Inter,system-ui,sans-serif; }
body::before { position:fixed; inset:0; z-index:-1; content:""; opacity:.16; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }
.shell { width:var(--shell); margin-inline:auto; }
.site-header { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; }
.brand img { display:block; width:118px; max-width:32vw; height:58px; object-fit:contain; object-position:center; }
.header-status,.connection-state { display:flex; align-items:center; gap:9px; color:#758096; font:500 9px DM Mono,monospace; letter-spacing:.13em; }
.header-status span,.connection-state i,.card-state i { width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 9px var(--blue); }
.hero { min-height:550px; padding:96px 0 80px; position:relative; }
.hero::after { position:absolute; width:48%; height:70%; right:0; top:68px; content:""; opacity:.34; background:linear-gradient(135deg,transparent 40%,rgba(78,124,246,.18)),repeating-linear-gradient(90deg,transparent 0 42px,rgba(78,124,246,.08) 43px),repeating-linear-gradient(0deg,transparent 0 42px,rgba(78,124,246,.07) 43px); clip-path:polygon(20% 0,100% 0,100% 100%,0 100%); mask-image:linear-gradient(135deg,transparent,black); }
.eyebrow { display:flex; gap:24px; color:#7080a0; font:500 10px DM Mono,monospace; letter-spacing:.16em; }
.eyebrow span:first-child { color:#9eb5f1; }
.hero h1 { max-width:820px; margin:30px 0 25px; font-size:clamp(58px,7vw,105px); line-height:.88; letter-spacing:-.065em; }
.hero h1 em { color:#7288c7; font-style:normal; font-weight:400; }
.hero>p { max-width:590px; color:#8993a5; font-size:16px; line-height:1.75; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:38px; }
.primary-button { display:inline-flex; min-height:48px; align-items:center; justify-content:space-between; gap:28px; padding:0 18px; border:1px solid #3d61bd; background:linear-gradient(180deg,#183271,#0d1d45); color:#d5e0ff; box-shadow:inset 0 1px rgba(255,255,255,.09),0 12px 28px #0007; font:600 10px DM Mono,monospace; letter-spacing:.12em; transition:.2s ease; }
.primary-button:hover { transform:translateY(-2px); border-color:#6b91f5; box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 24px rgba(78,124,246,.18),0 16px 34px #0008; }
.text-link { color:#687489; font:500 9px DM Mono,monospace; letter-spacing:.12em; }
.text-link:hover { color:#b6c7f5; }
.family-section { padding:80px 0 110px; border-top:1px solid rgba(255,255,255,.07); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:42px; }
.section-heading h2 { margin:10px 0 0; font-size:42px; letter-spacing:-.045em; }
.section-heading p { max-width:470px; margin:0; color:#717d91; font-size:13px; line-height:1.7; }
.kicker { color:#6f85c2; font:500 9px DM Mono,monospace; letter-spacing:.18em; }
.plugin-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.plugin-card { grid-column:span 6; position:relative; overflow:hidden; border:1px solid #1d2330; background:linear-gradient(145deg,#10141c,#090c11); box-shadow:0 20px 60px #0005; transition:transform .25s ease,border-color .25s ease; }
.plugin-card:nth-child(3),.plugin-card:nth-child(4),.plugin-card:nth-child(5) { grid-column:span 4; }
.plugin-card:hover { transform:translateY(-5px); border-color:#3d527f; }.plugin-card.amber:hover { border-color:#715333; }
.card-visual { position:relative; aspect-ratio:16/8.4; overflow:hidden; border-bottom:1px solid #202632; background:#05070a; }
.card-visual::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 50%,rgba(5,7,10,.76)); pointer-events:none; }
.card-visual img { width:100%; height:100%; object-fit:cover; opacity:.72; filter:saturate(.8) contrast(1.08); transition:transform .55s ease,opacity .3s; }
.plugin-card:hover img { transform:scale(1.025); opacity:.94; }
.card-number { position:absolute; z-index:1; top:14px; left:16px; color:#8a99bd; font:500 9px DM Mono,monospace; }
.card-state { position:absolute; z-index:1; right:14px; bottom:12px; display:flex; align-items:center; gap:7px; padding:6px 8px; border:1px solid #2b3039; background:#080a0edb; color:#6c7585; font:500 7px DM Mono,monospace; letter-spacing:.1em; }
.card-state i { display:block; width:5px; height:5px; border-radius:50%; background:#6d502f; }.card-state.online i { background:#4e7cf6; box-shadow:0 0 7px #4e7cf6; }
.card-body { padding:22px 24px 20px; }.card-category { color:#65728b; font:500 8px DM Mono,monospace; letter-spacing:.14em; }.plugin-card.amber .card-category { color:#9c7446; }
.card-body h3 { margin:10px 0 9px; font-size:25px; letter-spacing:-.035em; }.card-body p { min-height:64px; margin:0; color:#707b8d; font-size:12px; line-height:1.65; }
.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding-top:15px; border-top:1px solid #1b202a; color:#586275; font:500 7px DM Mono,monospace; letter-spacing:.09em; }.card-footer strong { color:#91a9e8; }.plugin-card.amber .card-footer strong { color:#d39a5c; }.card-footer i { font-style:normal; margin-left:7px; }
.system-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #1b212c; background:#090c11; }
.system-strip>div { min-height:118px; padding:24px; border-right:1px solid #1b212c; }.system-strip>div:last-child { border:0; }.system-strip span,.system-strip strong,.system-strip small { display:block; }.system-strip span { color:#526184; font:500 8px DM Mono,monospace; }.system-strip strong { margin:14px 0 6px; font-size:11px; letter-spacing:.12em; }.system-strip small { color:#667184; font-size:10px; }
.site-footer { min-height:120px; display:flex; align-items:center; justify-content:space-between; color:#495366; font:500 7px DM Mono,monospace; letter-spacing:.12em; }

.guide-hero { padding:76px 0 58px; border-bottom:1px solid rgba(255,255,255,.07); }
.guide-hero h1 { max-width:850px; margin:20px 0; font-size:clamp(48px,6vw,84px); line-height:.95; letter-spacing:-.06em; }
.guide-hero p { max-width:720px; color:#8993a5; font-size:15px; line-height:1.75; }
.guide-list { padding:56px 0 100px; }
.guide-card { display:grid; grid-template-columns:180px 1fr; gap:42px; padding:42px 0; border-bottom:1px solid #1d2430; }
.guide-card:first-child { border-top:1px solid #1d2430; }
.guide-index { color:#7188c9; font:500 11px DM Mono,monospace; letter-spacing:.16em; }
.guide-card.amber .guide-index { color:#c68b49; }
.guide-copy h2 { margin:0 0 8px; font-size:34px; letter-spacing:-.04em; }
.guide-copy>p { max-width:780px; margin:0 0 28px; color:#7d889a; font-size:13px; line-height:1.75; }
.guide-specs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.guide-specs div { padding:18px; border:1px solid #1e2633; background:#0a0d12; }
.guide-specs span,.guide-specs strong,.guide-specs p { display:block; }
.guide-specs span { color:#5e6d89; font:500 7px DM Mono,monospace; letter-spacing:.14em; }
.guide-specs strong { margin:10px 0 8px; font-size:11px; letter-spacing:.06em; }
.guide-specs p { margin:0; color:#687488; font-size:10px; line-height:1.6; }
.guide-note { margin-top:38px; padding:24px; border-left:2px solid #4e7cf6; background:#0b0f17; color:#8490a4; font-size:12px; line-height:1.7; }

html[data-accent="amber"] { --accent:var(--amber); }
.preview-header { height:66px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 22px; border-bottom:1px solid #222936; background:linear-gradient(#11151d,#090c11); box-shadow:0 8px 30px #0009; }
.back-link { color:#748098; font:500 8px DM Mono,monospace; letter-spacing:.11em; }.back-link span { margin-right:10px; color:var(--accent); }
.preview-title { display:flex; align-items:center; gap:12px; }.preview-title>span { color:var(--accent); font:500 9px DM Mono,monospace; }.preview-title strong,.preview-title small { display:block; }.preview-title strong { font-size:13px; letter-spacing:.03em; }.preview-title small { margin-top:3px; color:#596476; font:500 6px DM Mono,monospace; letter-spacing:.12em; }
.preview-actions { display:flex; justify-content:flex-end; align-items:center; gap:20px; }.connection-state { font-size:7px; }.connection-state i { background:#8a6a35; box-shadow:0 0 7px #8a6a35; }.connection-state.online i { background:#4ecb8c; box-shadow:0 0 8px #4ecb8c; }.connection-state.offline i { background:#d26c60; box-shadow:0 0 7px #d26c60; }.fullscreen-link { padding:9px 11px; border:1px solid #283142; color:#8fa3d5; font:500 7px DM Mono,monospace; letter-spacing:.1em; }
.preview-stage { height:calc(100vh - 112px); min-height:500px; padding:14px; background:radial-gradient(circle at 50% 20%,rgba(78,124,246,.1),transparent 45%),#05070a; }
.preview-frame-wrap { position:relative; width:100%; height:100%; overflow:hidden; border:1px solid #252d3a; border-radius:5px; background:#06080c; box-shadow:0 0 0 6px #0b0e14,0 0 0 7px #252b36,0 28px 70px #000; }
.frame-light { position:absolute; z-index:2; top:0; left:12%; width:76%; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.65; pointer-events:none; }
.preview-frame-wrap iframe { width:100%; height:100%; border:0; background:#07090d; }
.offline-panel { height:100%; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr); }
.offline-art { position:relative; overflow:hidden; border-right:1px solid #1f2632; }.offline-art::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,transparent 40%,#080b10),linear-gradient(0deg,#080b10aa,transparent 45%); }.offline-art img { width:100%; height:100%; object-fit:cover; opacity:.58; filter:saturate(.55) contrast(1.15); }
.offline-copy { display:flex; flex-direction:column; justify-content:center; padding:50px; }.offline-copy h1 { margin:14px 0; font-size:38px; line-height:1.02; letter-spacing:-.045em; }.offline-copy>p { color:#758196; font-size:12px; line-height:1.7; }.offline-steps { margin:24px 0 30px; border-top:1px solid #202633; }.offline-steps>span,.offline-steps>p { display:inline-block; vertical-align:top; padding:12px 0; border-bottom:1px solid #202633; }.offline-steps>span { width:32px; color:var(--accent); font:500 8px DM Mono,monospace; }.offline-steps>p { width:calc(100% - 36px); margin:0; color:#687488; font-size:10px; }
.preview-footer { height:46px; display:flex; align-items:center; gap:38px; padding:0 22px; border-top:1px solid #202632; background:#0a0d12; }.preview-footer>div { display:flex; gap:9px; font:500 7px DM Mono,monospace; }.preview-footer span { color:#4f5a6d; }.preview-footer strong { color:#8491aa; }.preview-footer p { margin-left:auto; color:#465165; font:500 6px DM Mono,monospace; }

@media (max-width:900px) { :root{--shell:calc(100vw - 28px)} .hero{padding-top:70px}.hero::after{display:none}.section-heading{align-items:start;flex-direction:column}.plugin-card,.plugin-card:nth-child(n){grid-column:span 12}.system-strip{grid-template-columns:1fr 1fr}.system-strip>div:nth-child(2){border-right:0}.guide-card{grid-template-columns:1fr;gap:14px}.guide-specs{grid-template-columns:1fr}.preview-header{grid-template-columns:auto 1fr}.preview-title{justify-self:center}.preview-actions{display:none}.offline-panel{grid-template-columns:1fr}.offline-art{height:38%;border:0;border-bottom:1px solid #1f2632}.offline-copy{padding:28px}.preview-footer{gap:16px}.preview-footer p{display:none} }
@media (max-width:560px) { .site-header{height:76px}.header-status{display:none}.hero{min-height:480px;padding-top:58px}.hero h1{font-size:52px}.hero-actions{align-items:flex-start;flex-direction:column}.system-strip{grid-template-columns:1fr}.system-strip>div{border-right:0;border-bottom:1px solid #1b212c}.site-footer{align-items:flex-start;flex-direction:column;justify-content:center;gap:8px}.preview-title small{display:none}.preview-stage{padding:8px}.preview-footer>div:nth-child(2){display:none} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.plugin-card,.card-visual img,.primary-button{transition:none} }