.stage { position:relative; height:500px; margin:0 }
.importer { position:absolute; z-index:3; top:140px; left:0; right:0; margin-inline:auto; width:580px; padding:10px; border-radius:var(--r-ring); background:var(--ring); color:var(--text); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px var(--ring-line),0 2px 6px var(--shadow-mid),0 26px 52px -18px var(--shadow-deep),0 70px 130px -40px var(--shadow-violet); transform:perspective(1600px) rotateX(-2deg); transform-origin:50% 100% }
.importer-card { border-radius:var(--r-card); background:var(--bg); color:var(--text); padding:26px 22px 20px 30px; box-shadow:inset 0 0 0 1px var(--border),0 1px 2px var(--shadow-soft) }
.prompt { margin:0; min-height:96px; font-size:17.5px; line-height:1.6; color:var(--text-faint) }
.prompt code { font-family:var(--font-mono); font-size:.88em; color:var(--text-muted) }
.caret { display:inline-block; width:2px; height:1.15em; margin-right:6px; vertical-align:-.2em; border-radius:var(--r-hair); background:var(--accent); animation:caret-blink 1.1s steps(1) infinite }
@keyframes caret-blink { 0%,55% { opacity:1 } 56%,100% { opacity:0 } }
.dock { display:flex; align-items:center; gap:4px; margin-top:10px }
.dock svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.dock-plus { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; margin-right:10px; border-radius:var(--r-round); background:var(--bg-panel2); color:var(--accent) }
.dock-act { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border-radius:var(--r-pill); color:var(--text); font-size:15px; font-weight:650; white-space:nowrap }
.dock-act svg { color:var(--accent) }
.dock-go { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-left:auto; padding:0 18px 0 22px; border-radius:var(--r-pill); background:var(--c-lilac); color:var(--on-dark); font-size:15px; font-weight:700 }
.ghost { position:absolute; z-index:1; padding:1em 1.15em 1.1em; border-radius:var(--r-ghost); background:linear-gradient(160deg,var(--ghost-bg-hi) 0%,var(--ghost-bg) 70%); border:1px solid var(--ghost-line); color:var(--ghost-text); box-shadow:0 24px 48px -24px var(--shadow-deep); filter:blur(8px); opacity:.5 }
.ghost--near { filter:blur(6px); opacity:.6; font-size:14px }
.ghost--mid { filter:blur(8px); opacity:.5; font-size:12.5px }
.ghost--far { filter:blur(10px); opacity:.4; font-size:11px }
.ghost-bar { display:flex; align-items:center; gap:5px; margin-bottom:.95em; font-family:var(--font-mono); font-size:.76em; color:var(--ghost-muted) }
.ghost-bar i { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-round) }
.ghost-bar i:nth-child(1),.chrome-dots i:nth-child(1) { background:var(--error) }
.ghost-bar i:nth-child(2),.chrome-dots i:nth-child(2) { background:var(--warn) }
.ghost-bar i:nth-child(3),.chrome-dots i:nth-child(3) { background:var(--success) }
.ghost-bar span { margin-left:8px }
.ghost-title { margin:0 0 .6em; font-weight:800; font-size:1.05em; letter-spacing:-.01em }
.ghost-kv { display:flex; justify-content:space-between; margin-top:.4em; padding:.45em .75em; border-radius:var(--r-row); background:var(--ghost-row); color:var(--ghost-text); font-family:var(--font-mono); font-size:.9em }
.ghost-kv b { font-weight:600 }
.ghost-chip { display:inline-block; padding:.35em .85em; border-radius:var(--r-pill); background:var(--ghost-row); color:var(--ghost-text); border:1px solid var(--ghost-line); font-family:var(--font-mono); font-size:.92em }
.ghost-line { display:flex; align-items:center; justify-content:space-between; gap:1em }
.ghost-toggle { position:relative; flex-shrink:0; width:2.7em; height:1.5em; border-radius:var(--r-pill); background:var(--accent) }
.ghost-toggle::after { content:""; position:absolute; top:.2em; right:.2em; width:1.1em; height:1.1em; border-radius:var(--r-round); background:var(--on-dark) }
.ghost-radio { display:flex; align-items:center; gap:.6em; font-size:.95em }
.ghost-radio::before { content:""; flex-shrink:0; width:.9em; height:.9em; border-radius:var(--r-round); border:.28em solid var(--c-lilac); background:var(--on-dark) }
.ghost-seg { display:flex; padding:.25em; border-radius:var(--r-pill); background:var(--ghost-row); color:var(--ghost-text); font-family:var(--font-mono); font-size:.92em }
.ghost-seg span { flex:1; padding:.35em .6em; text-align:center; border-radius:var(--r-pill); color:var(--ghost-muted) }
.ghost-seg .on { background:var(--accent); color:var(--on-dark) }
.ghost-rule { display:flex; flex-wrap:wrap; align-items:center; gap:.5em; padding:.55em .75em; border-radius:var(--r-row); background:var(--ghost-row); color:var(--ghost-text); font-family:var(--font-mono); font-size:.88em }
.ghost-rule em { font-style:normal; color:var(--c-lilac) }
.ghost--ports { left:-8px; top:24px; width:236px }
.ghost--dns { left:270px; top:-8px; width:176px }
.ghost--tun { right:-4px; top:40px; width:166px }
.ghost--proxy { right:-56px; top:200px; width:210px }
.ghost--route { right:12px; top:394px; width:262px }
.ghost--core { left:-28px; top:334px; width:214px }
.tabs { min-width:0 }
.tablist,[role="tablist"] { display:flex; gap:8px; max-width:100%; overflow-x:auto; padding:4px; scrollbar-width:thin }
[role="tab"] { display:inline-flex; align-items:center; justify-content:center; gap:12px; flex-shrink:0; min-height:46px; padding:10px 22px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--bg); color:var(--text-muted); font-size:16px; font-weight:700; line-height:1.5; text-decoration:none; cursor:pointer }
[role="tab"][aria-selected="true"] { background:var(--bg-panel2); color:var(--accent-dark); border-color:var(--c-lilac) }
[role="tab"] svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
[role="tabpanel"] { min-width:0; padding-top:28px }
.feature-switch { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:start }
.feature-switch [role="tablist"] { flex-direction:column; overflow:visible; gap:4px; padding:0; margin-top:32px }
.feature-switch [role="tab"] { position:relative; justify-content:flex-start; min-height:62px; border:0; border-radius:0; padding:12px 20px; background:var(--bg); color:var(--text-muted); font-size:22px; text-align:left }
.feature-switch [role="tab"][aria-selected="true"] { background:var(--bg); color:var(--accent-dark) }
.feature-switch [role="tab"][aria-selected="true"]::before { content:""; position:absolute; inset:12px auto 12px 0; width:3px; border-radius:var(--r-pill); background:var(--accent) }
.feature-switch [role="tabpanel"] { padding-top:0 }
.feature-stage { position:relative; isolation:isolate; min-height:420px; padding:64px 36px 76px; border-radius:var(--r-stage); background:var(--grad-stage); color:var(--text) }
.feature-stage::before { content:""; position:absolute; z-index:-1; inset:32px 22px; border:1.5px dashed var(--ring-line); border-radius:var(--r-card); pointer-events:none }
.client-window { position:relative; border-radius:var(--r-ghost); background:var(--bg); color:var(--text); box-shadow:var(--shadow-window) }
.window-chrome { display:flex; align-items:center; gap:16px; min-height:44px; padding:12px 18px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:12px; color:var(--text-muted) }
.chrome-dots { display:flex; gap:5px; flex-shrink:0 }
.chrome-dots i { width:8px; height:8px; border-radius:var(--r-round) }
.window-body { padding:24px; font-size:14px }
.setting-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; padding-block:12px; border-bottom:1px solid var(--border) }
.setting-row:last-child { border-bottom:0 }
.setting-row code { color:var(--accent-dark) }
.stage-note { position:absolute; right:16px; bottom:-18px; max-width:70%; padding:18px 22px; border-radius:var(--r-ghost); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card); font-size:14px; line-height:1.6 }
.feature-detail { margin-top:48px; color:var(--text-muted); line-height:1.9 }
.toc { position:sticky; top:16px; z-index:10; display:flex; flex-wrap:wrap; gap:8px; padding:12px; border-radius:var(--r-ghost); background:var(--bg-panel); color:var(--text); margin-bottom:36px }
.toc a { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:var(--r-pill); color:var(--text-muted); text-decoration:none; font-size:14px }
.toc a:hover,.toc a[aria-current] { background:var(--bg); color:var(--accent-dark) }
.faq-item { padding:0 28px; margin-bottom:12px; border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.faq-item summary { position:relative; padding:24px 32px 24px 0; cursor:pointer; font-size:17px; font-weight:700; list-style:none }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:22px; font:24px/1.4 var(--font-mono); color:var(--accent-dark) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px; color:var(--text-muted) }
.faq-answer p:last-child { margin-bottom:0 }
.term-card { padding:32px; border-radius:var(--r-card); background:var(--bg-panel); color:var(--text); scroll-margin-top:28px }
.term-card h3 { margin-bottom:8px }
.term-name { display:block; margin-bottom:18px; font:13px/1.6 var(--font-mono); color:var(--accent-dark) }
.term-card p { color:var(--text-muted) }
.client-card { padding:36px; border-radius:var(--r-stage); background:var(--bg-panel); color:var(--text) }
.client-card-header { display:flex; align-items:center; flex-wrap:wrap; gap:18px; margin-bottom:24px }
.app-logo { width:56px; height:56px; flex-shrink:0 }
.client-card-header h3 { margin:0 0 4px }
.client-card-header p { margin:0; color:var(--text-muted); font-size:14px }
.client-card .actions { margin-top:22px }
.client-card .actions .btn { min-height:48px }
.client-notes { margin-top:20px; font-size:14px; color:var(--text-muted) }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.tag,.status-badge { display:inline-block; max-width:100%; overflow:hidden; overflow-wrap:anywhere; vertical-align:middle; padding:5px 12px; border-radius:var(--r-pill); background:var(--bg-panel2); color:var(--text-muted); font-size:12px; font-weight:700; line-height:1.6 }
.status-badge--first { background:var(--accent-dark); color:var(--on-dark) }
.status-badge--recommended { background:var(--bg-panel2); color:var(--accent-dark); border:1px solid var(--c-lilac) }
.status-badge--retired { background:var(--bg-panel2); color:var(--text-muted); border:1px dashed var(--text-muted) }
.article-card { display:flex; flex-direction:column; gap:18px; padding:32px; border-radius:var(--r-card); background:var(--bg-panel); color:var(--text) }
.article-card h3 { margin:0; font-size:22px }
.article-card h3 a { color:var(--text); text-decoration:none }
.article-card h3 a:hover { color:var(--accent-dark) }
.article-card p { margin:0; color:var(--text-muted) }
.article-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:var(--text-muted); font-size:13px }
.article-card .textlink { margin-top:auto }
.callout { margin:28px 0; padding:24px 28px; border-left:3px solid var(--accent); border-radius:0 var(--r-ghost) var(--r-ghost) 0; background:var(--bg-panel); color:var(--text) }
.callout strong { color:var(--accent-dark) }
.callout p:last-child { margin-bottom:0 }
.callout--warn { border-left-color:var(--warn); background:var(--bg-panel); color:var(--text) }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-block:24px; border:1px solid var(--border); border-radius:var(--r-ghost) }
.data-table { width:100%; border-collapse:collapse; background:var(--bg); color:var(--text); text-align:left; font-size:14px }
.data-table th,.data-table td,.prose table th,.prose table td,.article-body table th,.article-body table td { min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border); vertical-align:top; overflow-wrap:normal; word-break:normal }
.data-table th,.prose table th,.article-body table th { background:var(--bg-panel); color:var(--text); font-weight:700 }
.data-table td,.prose table td,.article-body table td { background:var(--bg); color:var(--text) }
.prose table,.article-body table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; min-width:0; border-collapse:collapse; font-size:14px }
.prose table code,.article-body table code,.data-table code { overflow-wrap:anywhere; word-break:normal; white-space:normal }
.end-download { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding:32px; border-radius:var(--r-stage); background:var(--bg-panel); color:var(--text); margin-top:56px }
.end-download h2 { font-size:24px; margin-bottom:8px }
.end-download p { color:var(--text-muted); margin:0 }
.dl-fab { position:fixed; right:28px; bottom:28px; z-index:60; display:inline-flex; align-items:center; gap:10px; min-height:52px; max-width:calc(100% - 32px); padding:0 22px 0 11px; border-radius:var(--r-pill); background:var(--text); color:var(--on-dark); font-size:15px; font-weight:700; text-decoration:none; box-shadow:0 2px 6px var(--shadow-mid),0 18px 40px -14px var(--shadow-deep); transition:transform var(--ease) }
.dl-fab:hover { transform:translateY(-2px) }
.dl-fab-icon { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:var(--r-round); background:var(--accent); color:var(--on-dark) }
.dl-fab svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.palette-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:20px }
.swatch { margin:0; border:1px solid var(--border); border-radius:var(--r-ghost); overflow:hidden; background:var(--bg); color:var(--text) }
.swatch-sample { display:block; height:88px; background:var(--bg); color:var(--text) }
.swatch figcaption { padding:12px; font:12px/1.7 var(--font-mono); overflow-wrap:anywhere }
.swatch--night { background:var(--c-ink-night); color:var(--on-dark) }
.swatch--cobalt { background:var(--c-cobalt); color:var(--on-dark) }
.swatch--violet { background:var(--c-violet); color:var(--on-dark) }
.swatch--lilac { background:var(--c-lilac); color:var(--text) }
.swatch--lavender { background:var(--c-lavender); color:var(--text) }
.swatch--high { background:var(--c-lavender-hi); color:var(--text) }
.swatch--lime { background:var(--c-lime); color:var(--text) }
.swatch--panel { background:var(--bg-panel); color:var(--text) }
.swatch--panel2 { background:var(--bg-panel2); color:var(--text) }
.swatch--border { background:var(--border); color:var(--text) }
.swatch--text { background:var(--text); color:var(--on-dark) }
.swatch--muted { background:var(--text-muted); color:var(--on-dark) }
.swatch--faint { background:var(--text-faint); color:var(--text) }
.swatch--success { background:var(--success); color:var(--text) }
.swatch--warn { background:var(--warn); color:var(--text) }
.swatch--error { background:var(--error); color:var(--text) }
.swatch--glass { background:linear-gradient(var(--glass-1),var(--glass-2)),var(--c-ink-night); color:var(--on-dark) }
.swatch--ring { background:linear-gradient(var(--ring),var(--ring)),var(--c-cobalt); color:var(--on-dark) }
.swatch--ghost { background:linear-gradient(var(--ghost-bg-hi),var(--ghost-bg)); color:var(--text) }
.swatch--halo { background:linear-gradient(var(--halo),var(--halo-2)),var(--bg); color:var(--text) }
.swatch--shadow { background:linear-gradient(var(--shadow-deep),var(--shadow-soft)),var(--bg); color:var(--text) }
.swatch--lime-light { background:linear-gradient(var(--lime-glow),var(--lime-halo)),var(--bg); color:var(--text) }
.preview-dark { padding:32px; border-radius:var(--r-stage); background:var(--c-ink-night); color:var(--on-dark) }
.preview-section-title { margin-bottom:40px }
.preview-mobile { display:none }
@media (max-width:1240px) {
  .importer { width:520px }
  .ghost--proxy { right:-24px }
  .feature-switch { gap:40px }
}
@media (max-width:980px) {
  .stage { height:auto }
  .ghost { display:none }
  .importer { position:relative; top:auto; width:100%; transform:none }
  .feature-switch { grid-template-columns:minmax(0,1fr); gap:32px }
  .feature-switch [role="tablist"] { flex-direction:row; overflow-x:auto; padding:4px; gap:8px }
  .feature-switch [role="tab"] { min-height:46px; padding:10px 18px; font-size:16px; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text-muted) }
  .feature-switch [role="tab"][aria-selected="true"] { background:var(--bg-panel2); color:var(--accent-dark) }
  .feature-switch [role="tab"][aria-selected="true"]::before { display:none }
}
@media (max-width:640px) {
  .importer { padding:8px; border-radius:var(--r-stage); transform:none }
  .importer-card { padding:20px 16px 16px 20px; border-radius:var(--r-card) }
  .prompt { font-size:15.5px; min-height:84px }
  .dock { flex-wrap:wrap; row-gap:10px }
  .dock-plus { width:38px; height:38px; margin-right:4px }
  .dock-act { padding:0 8px; font-size:14px; white-space:normal }
  .dock-go { color:var(--text) }
  .feature-stage { min-height:360px; padding:44px 20px 76px }
  .window-body { padding:16px }
  .window-chrome { gap:10px; padding-inline:14px }
  .stage-note { right:8px; max-width:85%; padding:16px }
  .term-card,.article-card,.client-card { padding:24px }
  .faq-item { padding-inline:22px }
  .dl-fab { right:16px; bottom:max(16px,env(safe-area-inset-bottom)) }
  .toc { position:static; flex-wrap:nowrap; overflow-x:auto }
  .toc a { flex-shrink:0 }
  .end-download { padding:24px }
}
@media (max-width:1180px) {
  .preview-mobile { display:block; margin-left:auto; position:static }
  .preview-mobile > summary { min-width:44px; min-height:44px; display:grid; place-items:center; list-style:none; cursor:pointer; border:1px solid var(--glass-line); border-radius:var(--r-pill); background:var(--glass-1); color:var(--on-dark) }
  .preview-mobile > summary::-webkit-details-marker { display:none }
  .preview-mobile nav { position:absolute; top:100%; left:var(--gutter); right:var(--gutter); max-height:calc(100dvh - var(--bar-h)); overflow-y:auto; padding:16px; border-radius:var(--r-ghost); background:var(--bg); color:var(--text); box-shadow:var(--shadow-card) }
  .preview-mobile nav a { display:flex; align-items:center; min-height:48px; padding:12px 16px; color:var(--text); text-decoration:none }
}
@media (prefers-reduced-motion:reduce) {
  .caret { animation:none }
}