.btn-secondary:hover,
.gh:hover {
    border-color: var(--text-faint);
}
.brand-pill,
.cmd,
.menu-pill {
    box-shadow: var(--shadow-sm);
}
.cmd .pr,
.mono {
    font-family: var(--mono);
}
.btn,
.cmd code {
    white-space: nowrap;
}
.bgfx,
.hero .glow {
    pointer-events: none;
}
.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;
}
.cmd .cp,
.iconbtn,
.logo,
.sico,
.wava {
    place-items: center;
}
#apps .appgrid,
#apps .wizline,
.cmd code {
    overflow-x: auto;
    scrollbar-width: none;
}
.btag,
.eyebrow,
.ptag,
.seyebrow,
.soon,
.wsample {
    text-transform: uppercase;
}
#how .admin-main,
#how .admin-preview,
#how .admin-side,
#how .domain-text,
#how .domain-text b,
#how .domain-text small,
#how .mini-page-head,
#how .mini-toolbar,
#how .panel-scroll,
#how .preview-card,
#how .preview-table td,
#how .user-cell strong,
.admin-main,
.pn-tx,
.smeta {
    min-width: 0;
}
.acc-h,
.btn,
.cmd .cp,
.iconbtn,
button.wnav {
    cursor: pointer;
}
@font-face {
    font-family: "Space Grotesk";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
    font-family: "Space Grotesk";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-400.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-500.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-600.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-600.woff2") format("woff2");
}
:root {
    --ink: #322c7a;
    --ink-light: #4a42a8;
    --ink-pale: #ecebf7;
    --speed: #0891b2;
    --speed-light: #06b6d4;
    --speed-pale: #e0f7fb;
    --bg: #f4f5f8;
    --surface: #fff;
    --surface-2: #fafafa;
    --surface-3: #f4f4f5;
    --text: #18181b;
    --text-soft: #52525b;
    --text-muted: #5f6470;
    --text-faint: #62636c;
    --accent-readable: #047d99;
    --border: rgba(228, 228, 231, 0.85);
    --line: #f1f1f4;
    --primary: #322c7a;
    --primary-hov: #4a42a8;
    --on-primary: #fff;
    --accent: #0891b2;
    --ok: #047857;
    --dot: rgba(50, 44, 122, 0.045);
    --glow: rgba(8, 145, 178, 0.1);
    --shadow: 0 14px 40px -16px rgba(24, 24, 27, 0.22);
    --shadow-sm: 0 2px 8px -2px rgba(24, 24, 27, 0.12);
    --head: "Space Grotesk", system-ui, sans-serif;
    --body: "Plus Jakarta Sans", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --preview-frame-max: 1040px;
    --preview-frame-height: 600px;
    --terminal-frame-offset: 40px;
}
[data-theme="dark"] {
    --ink: #9a95f0;
    --ink-light: #b3aff5;
    --ink-pale: rgba(124, 120, 230, 0.16);
    --speed: #22d3ee;
    --speed-light: #67e8f9;
    --speed-pale: rgba(34, 211, 238, 0.12);
    --bg: #0a0c12;
    --surface: #12141d;
    --surface-2: #171a25;
    --surface-3: #1d2130;
    --text: #e9eaf1;
    --text-soft: #bcc0cd;
    --text-muted: #9398a8;
    --text-faint: #8a91a3;
    --border: rgba(255, 255, 255, 0.09);
    --line: rgba(255, 255, 255, 0.06);
    --primary: #4f46e5;
    --primary-hov: #5d54ec;
    --on-primary: #fff;
    --accent: #22d3ee;
    --accent-readable: #22d3ee;
    --ok: #34d399;
    --dot: rgba(255, 255, 255, 0.028);
    --glow: rgba(80, 72, 229, 0.16);
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.65);
    --shadow-sm: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition:
        background 0.4s,
        color 0.4s;
}
.head {
    font-family: var(--head);
}
a {
    color: inherit;
    text-decoration: none;
}
.ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
    stroke: currentColor;
    fill: none;
}
::selection {
    background: var(--ink-pale);
    color: var(--ink);
}
.bgfx {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(var(--dot) 1px, transparent 1px);
    background-size: 34px 34px;
}
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px;
}
.eyebrow {
    font: 600 11px/1 var(--mono);
    letter-spacing: 0.16em;
    color: var(--accent);
}
.lead,
.nlinks a {
    color: var(--text-soft);
}
.lead {
    font-size: 18px;
    line-height: 1.65;
}
.section {
    padding: 96px 0;
}
.shead {
    max-width: 600px;
    margin-bottom: 42px;
}
.shead h2 {
    font: 700 clamp(28px, 3.6vw, 44px) / 1.1 var(--head);
    letter-spacing: -0.02em;
    margin-top: 13px;
}
.finale h2,
.hero h1 {
    letter-spacing: -0.03em;
}
.shead .lead {
    margin-top: 14px;
    font-size: 17px;
}
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 0;
    transition: padding 0.25s;
}
.fl,
.hero,
.hmark,
.logo,
.logo .ic {
    position: relative;
}
.cmd .cp,
.iconbtn,
.nlinks a {
    transition: 0.15s;
}
.nav.scrolled {
    padding: 9px 0;
}
.nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 16px/1 var(--head);
}
.logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--ink);
    color: #fff;
    display: grid;
    font-size: 18px;
    flex: none;
    transform: translateZ(0);
    isolation: isolate;
}
.brand-pill,
.cmd .cp:hover,
.foot-links a:hover,
.gh:hover,
.iconbtn:hover {
    color: var(--text);
}
.logo .ic {
    overflow: visible;
    transform-origin: center;
    z-index: 1;
}
.logo-mark-dot,
.logo-mark-triangle {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity, stroke-dashoffset, stroke-dasharray, filter;
}
.logo-mark-triangle {
    stroke-dasharray: 42;
    stroke-dashoffset: 0;
    opacity: 1;
}
.fcard:hover::before,
.logo-mark-dot,
.spot:hover::before,
.term .tl,
.term:hover::after {
    opacity: 1;
}
.brand-pill:hover .logo-mark-triangle,
.brand:hover .logo-mark-triangle {
    stroke-dasharray: 11 31;
    animation: 2.05s linear infinite logo-v2-snake;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.42));
}
.brand-pill:hover .logo-mark-dot,
.brand:hover .logo-mark-dot {
    animation: 1.05s ease-in-out infinite logo-v2-dot;
}
@keyframes logo-v2-snake {
    0% {
        opacity: 0.45;
        stroke-dashoffset: 42;
        transform: scale(1);
    }
    18%,
    64% {
        opacity: 1;
        transform: scale(1.035);
    }
    100% {
        opacity: 0.45;
        stroke-dashoffset: -42;
        transform: scale(1);
    }
}
@keyframes logo-v2-dot {
    0%,
    100% {
        opacity: 0.55;
        transform: translateY(0) scale(0.78);
    }
    38% {
        opacity: 1;
        transform: translateY(-1px) scale(1.28);
    }
    72% {
        opacity: 0.9;
        transform: translateY(1px) scale(0.95);
    }
}
[data-theme="dark"] .logo {
    background: linear-gradient(135deg, #5048e5, #322c7a);
}
.nlinks {
    display: flex;
    gap: 2px;
}
.nlinks a {
    padding: 9px 14px;
    border-radius: 999px;
    font: 500 14px/1 var(--body);
}
.nlinks a:hover,
button.wnav:hover {
    background: var(--surface-3);
    color: var(--text);
}
.brand-pill,
.menu-pill {
    display: flex;
    align-items: center;
    min-height: 50px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.btn,
.gh {
    align-items: center;
}
.brand-pill {
    gap: 10px;
    padding: 8px 18px 8px 9px;
    font: 700 16px/1 var(--head);
}
.menu-pill {
    gap: 5px;
    padding: 6px 8px;
}
.mp-sep {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 5px;
}
.gh,
.iconbtn {
    color: var(--text-soft);
    background: var(--surface);
}
.iconbtn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border);
    display: grid;
    font-size: 18px;
}
.theme-sun,
[data-theme="dark"] .theme-moon {
    display: none;
}
.btn,
.cmd,
.gh,
.pill {
    display: inline-flex;
}
[data-theme="dark"] .theme-sun {
    display: inline-block;
}
.gh {
    gap: 7px;
    font: 600 13px/1 var(--body);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 14px;
}
.btn {
    gap: 8px;
    font: 600 14px/1 var(--body);
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition:
        transform 0.14s,
        background 0.15s,
        border-color 0.15s;
}
.btn:active {
    transform: translateY(1px);
}
.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    will-change: transform;
}
.btn-secondary,
.cmd,
.pill,
.window {
    background: var(--surface);
}
.btn-primary:hover {
    background: var(--primary-hov);
    transform: translateY(-1px);
}
.btn-secondary {
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover {
    transform: translateY(-1px);
}
.btn-lg {
    padding: 14px 22px;
    font-size: 15px;
    border-radius: 11px;
}
.cmd {
    border: 1px solid var(--border);
}
.btn-primary:hover .ic-arrow {
    transform: translateX(2px);
}
.ic-arrow {
    transition: transform 0.2s;
}
.rv-lines .ln > span,
.window {
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmd {
    align-items: center;
    gap: 12px;
    border-radius: 11px;
    padding: 2px 3px 2px 16px;
}
.cmd .pr {
    color: var(--accent);
    font-weight: 600;
}
.cmd .cp,
.pill {
    color: var(--text-soft);
}
.cmd code {
    font: 600 13.5px/1 var(--mono);
    color: var(--text);
    -ms-overflow-style: none;
}
.cmd code::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.cmd .cp {
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 18px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: grid;
    flex: none;
}
.pill,
.wbar {
    align-items: center;
}
.cmd .cp.ok {
    color: var(--ok);
}
.hero {
    padding: 78px 0 0;
    overflow: hidden;
}
.hero .glow {
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 880px;
    height: 500px;
    max-width: 120vw;
    z-index: -1;
    background: radial-gradient(45% 50% at 50% 45%, var(--glow), transparent 72%);
    filter: blur(30px);
    opacity: 0.6;
}
.pl-dot,
.pl-split .stub {
    top: 0;
    position: absolute;
}
#apps .shead,
.hero-top {
    max-width: 760px;
}
.term,
.window {
    max-width: var(--preview-frame-max);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.pill {
    gap: 8px;
    font: 600 12.5px/1 var(--body);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 13px;
}
.hmark,
.wleg b {
    display: inline-block;
}
.hmark::after,
.hmark::before,
.wlive .lp::after {
    inset: 0;
    border-radius: 50%;
    position: absolute;
    content: "";
}
.pill b {
    color: var(--accent-readable);
    font-weight: 600;
}
.hmark {
    width: 8px;
    height: 8px;
}
.hmark::before {
    background: #34d399;
    opacity: 0.7;
    animation: 1.9s cubic-bezier(0, 0, 0.2, 1) infinite ping;
}
.hmark::after,
.wlive .lp::after {
    background: #10b981;
}
@keyframes ping {
    100%,
    75% {
        transform: scale(2.4);
        opacity: 0;
    }
}
.hero h1 {
    font: 700 clamp(42px, 6vw, 74px) / 1 var(--head);
    margin: 20px 0 0;
}
.step b,
.vps b,
.wnav.on {
    font-weight: 600;
}
#apps .appcard:hover .applogo,
.branch.hit .head .time,
.fnode.hit .ic,
.hero h1 .hl,
.iscard.is h3 .ic,
.kn.sp,
.mqchip:hover .bi,
.mqchip:hover .ic,
.pms.sp,
.side-item.active .ic,
.wct .ic,
.wnav.on .ic {
    color: var(--accent);
}
.hero .lead {
    margin-top: 20px;
    font-size: 19px;
    max-width: 48ch;
}
.hero-cta {
    margin-top: 28px;
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    align-items: center;
}
.stage {
    margin-top: 56px;
    perspective: 1800px;
}
.window,
.wurl {
    margin: 0 auto;
}
.window {
    border-radius: 14px;
    border: 1px solid var(--border);
    transform: rotateX(10deg) scale(0.99);
    transform-origin: 50% 0;
}
#apps .appcard,
.fcard,
.pnode {
    transition:
        transform 0.2s,
        border-color 0.2s;
}
.stage.in .window {
    transform: rotateX(2deg) scale(1);
}
.wbar {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, rgba(0, 0, 0, 0.08));
    background:
        linear-gradient(to bottom, color-mix(in srgb, var(--surface-2) 96%, #fff 4%), var(--surface-2));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}
.wbar::after {
    content: attr(data-title);
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: min(360px, calc(100% - 180px));
    transform: translate(-50%, -50%);
    color: var(--text-muted);
    font: 600 11px/1 var(--body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.wtop,
.wurl {
    align-items: center;
}
.wdots,
.wurl {
    gap: 8px;
    display: flex;
}
.wdots {
    align-items: center;
    height: 100%;
}
.tbar .d,
.wdots i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.35),
        0 1px 1px rgba(0, 0, 0, 0.12);
}
.tbar .d::after,
.wdots i::after {
    content: "";
    position: absolute;
    inset: 2px 2px auto;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}
.tbar .d:first-child,
.wdots i:first-child {
    background: #ff5f57;
}
.tbar .d:nth-child(2),
.wdots i:nth-child(2) {
    background: #febc2e;
}
.tbar .d:nth-child(3),
.wdots i:nth-child(3) {
    background: #28c840;
}
.wurl {
    font: 500 11.5px/1 var(--mono);
    color: var(--text-muted);
}
.sbadge,
.wright {
    margin-left: auto;
}
.fcard p,
.kn {
    margin-top: 9px;
}
.bento .small .fic,
.iscard h3,
.wtop {
    margin-bottom: 13px;
}
.wsample {
    font: 600 10px/1 var(--body);
    letter-spacing: 0.04em;
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 7px;
}
.wbody {
    padding: 16px;
    background: var(--bg);
}
.wtop {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.wnav,
.wright {
    align-items: center;
}
.wnav {
    display: inline-flex;
    gap: 6px;
    font: 500 12px/1 var(--body);
    color: var(--text-muted);
    padding: 7px 11px;
    border-radius: 8px;
}
.wip {
    border: 1px solid var(--border);
}
.wnav.on {
    background: var(--ink-pale);
    color: var(--ink);
}
.wright {
    display: flex;
    gap: 9px;
}
.kl,
.wip {
    align-items: center;
}
.wip {
    font: 600 11px/1 var(--mono);
    color: var(--text-soft);
    display: inline-flex;
    gap: 6px;
    background: var(--surface);
    border-radius: 8px;
    padding: 5px 9px;
}
.kpis,
.wava {
    display: grid;
}
.wava,
.wip .wdot {
    border-radius: 50%;
}
.wip .wdot {
    width: 6px;
    height: 6px;
    background: #10b981;
    flex: none;
}
.wava {
    width: 24px;
    height: 24px;
    background: var(--ink-pale);
    color: var(--ink);
    font: 700 11px/1 var(--head);
    flex: none;
}
.wtb {
    width: 28px;
    height: 28px;
    padding: 0;
    flex: none;
    display: inline-grid;
    place-items: center;
    border: 0;
    background: transparent;
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.wtb:hover {
    background: var(--surface-3);
}
.wtb:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.wtb .ic {
    width: 15px;
    height: 15px;
}
/* File manager mockup (static, non-functional) */
#fm-stage {
    position: relative;
    isolation: isolate;
}
#fm-stage .window {
    --fm-glow-x: 50%;
    --fm-glow-y: 44%;
    --fm-tilt-x: 0deg;
    --fm-tilt-y: 0deg;
    width: 100%;
    max-width: var(--preview-frame-max);
    height: var(--preview-frame-height);
    position: relative;
    transform-origin: 50% 50%;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}
#fm-stage .wbar {
    height: 38px;
}
#fm-stage .wbody {
    height: calc(var(--preview-frame-height) - 38px);
}
#fm-stage .fm {
    height: 100%;
}
#fm-stage .fm-body {
    height: calc(100% - 43px);
    min-height: 0;
    overflow: hidden;
}
#fm-stage.stage.in .window {
    transform: perspective(1000px) rotateX(var(--fm-tilt-x)) rotateY(var(--fm-tilt-y));
}
#fm-stage .window::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(280px circle at var(--fm-glow-x) var(--fm-glow-y), rgba(8, 145, 178, 0.22), transparent 58%),
        linear-gradient(135deg, rgba(8, 145, 178, 0.12), transparent 28%, transparent 72%, rgba(8, 145, 178, 0.08));
    opacity: 0;
    transition: opacity 0.22s ease;
}
#fm-stage .window:hover {
    box-shadow: var(--shadow);
}
#fm-stage .window:hover::after {
    opacity: 0.95;
}
[data-theme="dark"] #fm-stage .window::after {
    background:
        radial-gradient(280px circle at var(--fm-glow-x) var(--fm-glow-y), rgba(34, 211, 238, 0.13), transparent 58%),
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), transparent 28%, transparent 72%, rgba(34, 211, 238, 0.06));
}
[data-theme="dark"] #fm-stage .window:hover::after {
    opacity: 0.78;
}
.fm {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}
.fm-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.fm-left,
.fm-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.fm-right {
    gap: 5px;
}
.fm-ico {
    width: 26px;
    height: 26px;
    flex: none;
    display: inline-grid;
    place-items: center;
    color: var(--text-faint);
    border-radius: 6px;
}
.fm-ico.on {
    color: var(--ink);
}
.fm-seg {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 7px;
    overflow: hidden;
    flex: none;
}
.fm-seg .fm-ico {
    width: 24px;
    height: 22px;
    border-radius: 0;
    border-right: 1px solid var(--border);
}
.fm-seg .fm-ico:last-child {
    border-right: 0;
}
.fm-seg .fm-ico.on {
    background: var(--surface-3);
}
.fm-crumb {
    display: flex;
    align-items: center;
    gap: 5px;
    font: 500 12px/1 var(--body);
    color: var(--text-soft);
    min-width: 0;
    overflow: hidden;
}
.fm-crumb .sep {
    color: var(--text-faint);
}
.fm-crumb .here {
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    font: 600 11px/1 var(--body);
    background: var(--ink);
    color: var(--bg);
    padding: 5px 8px;
    border-radius: 6px;
}
.fm-right > .fm-ico {
    width: 22px;
    height: 22px;
    border-radius: 5px;
}
.fm-right .ic {
    width: 13px;
    height: 13px;
}
.fm-body {
    display: flex;
    min-height: 512px;
}
.fm-tree {
    width: 200px;
    flex: none;
    border-right: 1px solid var(--border);
    padding: 8px 6px;
    background: var(--surface-2);
    font: 500 12px/1.35 var(--body);
    color: var(--text-soft);
}
.fm-node {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 0;
}
.fm-node.d1 {
    padding-left: 22px;
}
.fm-node.d2 {
    padding-left: 38px;
}
.fm-node.d3 {
    padding-left: 54px;
}
.fm-node .chev {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--text-faint);
}
.fm-node .chev.r {
    transform: rotate(-90deg);
}
.fm-node .tn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.fm-node.sel {
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    color: var(--ink);
}
.fm-list {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.fm-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px 116px 86px 52px;
    gap: 8px;
    align-items: center;
    padding: 6px 14px;
    border-bottom: 1px solid var(--line);
    font: 500 12px/1 var(--body);
}
.fm-row:last-child {
    border-bottom: 0;
}
.fm-row.sel {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.fm-head {
    font: 600 9.5px/1 var(--body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.fm-c-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.fm-c-name .nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-c-size,
.fm-c-perm {
    color: var(--text-faint);
    font: 500 11px/1 var(--mono);
}
.fm-c-mod,
.fm-c-own {
    color: var(--text-soft);
    font: 500 11px/1 var(--mono);
}
.fm .ic.folder {
    color: #f59e0b;
}
.t-code .ic {
    color: #6366f1;
}
.t-cfg .ic {
    color: #0891b2;
}
.t-img .ic {
    color: #10b981;
}
.t-zip .ic {
    color: #f97316;
}
.t-file .ic {
    color: var(--text-faint);
}
@media (max-width: 820px) {
    .fm-tree {
        display: none;
    }
    .fm-body {
        min-height: 400px;
    }
    .fm-row {
        grid-template-columns: minmax(0, 1fr) 58px 108px 78px 48px;
        gap: 6px;
        padding-inline: 12px;
    }
}
@media (max-width: 640px) {
    .fm-bar {
        gap: 8px;
        padding-inline: 8px;
    }
    .fm-left {
        flex: 1;
    }
    .fm-right {
        flex: none;
    }
    .fm-row {
        grid-template-columns: minmax(0, 1fr) 58px;
        padding-inline: 10px;
    }
    .fm-c-mod,
    .fm-c-own,
    .fm-c-perm {
        display: none;
    }
    .fm-seg {
        display: none;
    }
    .fm-bar .fm-ico {
        display: none;
    }
    .fm-add {
        padding: 5px 7px;
    }
    .fm-body {
        min-height: 0;
    }
}
.kpis {
    background: var(--line);
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 12px;
}
.ktile {
    background: var(--surface);
    padding: 14px;
}
.ktile.hot,
.path.fast {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}
.kl {
    font: 600 10.5px/1 var(--body);
    color: var(--text-muted);
    display: flex;
    gap: 6px;
}
.foot-links .soonlink,
.kl .ic,
.scell .val .bi {
    font-size: 14px;
}
.kn {
    font: 700 22px/1 var(--mono);
    color: var(--text);
}
.khint,
.kn s {
    color: var(--text-faint);
}
.kn s {
    font-size: 13px;
    font-style: normal;
}
.khint {
    font: 500 10.5px/1.3 var(--body);
    margin-top: 20px;
    display: block;
}
.kspk {
    margin-top: 7px;
    height: 30px;
}
.kspk svg {
    display: block;
    width: 100%;
    height: 100%;
}
.wcols {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 12px;
}
.srow,
.wch,
.wleg {
    display: flex;
}
.preview-card,
.wcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
}
.wch {
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}
.scard-h .l,
.wct {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 600 12.5px/1 var(--head);
}
.wleg {
    gap: 11px;
    font: 500 10px/1 var(--body);
    color: var(--text-muted);
}
.wleg b {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: -1px;
}
.chart {
    padding: 8px 4px 0;
}
@supports (d: path("M0,0")) {
    #cFill,
    #cLine,
    #oLine {
        transition: d 0.8s;
    }
}
#donutArc {
    transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.srow {
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-top: 1px solid var(--line);
    font-size: 12px;
}
.preview-table tbody tr:first-child td,
.srow:first-child {
    border-top: 0;
}
.sico {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--ink-pale);
    color: var(--ink);
    display: grid;
    font-size: 13px;
    flex: none;
}
.sdom {
    font-weight: 500;
    color: var(--text);
}
.btag.hit,
.fic.sp,
.pnode.final .pn-ic,
.pnode.hero .pn-ic,
.ptag.f,
.sbadge,
.step .n {
    background: var(--speed-pale);
    color: var(--accent);
}
.sbadge {
    font: 600 11px/1 var(--mono);
    padding: 3px 8px;
    border-radius: 999px;
}
.install .shead {
    margin: 0 auto 30px;
    text-align: center;
}
.fl .ftag,
.sttl .soon {
    margin-left: auto;
}
.term {
    margin: 0 auto;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: #06080e;
    text-align: left;
}
#apps .appcard,
.finale,
.freecard,
.hero-center,
.mqlabel,
.sbox.core,
.snode {
    text-align: center;
}
.tbar {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: linear-gradient(to bottom, #121621, #0d1018);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.tbody {
    padding: 16px 19px;
    font: 500 12.5px/1.7 var(--mono);
    color: #c7ccd8;
    height: calc(var(--preview-frame-height) - var(--terminal-frame-offset));
    overflow: hidden;
}
.t-prompt,
.t-sec,
.t-url,
.t-warn {
    font-weight: 700;
}
.tl {
    display: block;
    white-space: pre-wrap;
}
/* loader (spinner) + wait marker — only visible during playback */
.tl.t-load {
    display: none;
}
.tl.t-wait {
    display: none !important;
}
.t-load .t-spin {
    color: #3ad9ee;
}
.t-load .t-ct {
    color: #6b7081;
}
.t-sec {
    color: #8b87f5;
}
.t-ok {
    color: #34d8a6;
}
.t-dim {
    color: #6b7081;
}
.t-url {
    color: #3ad9ee;
}
.motd-line,
.term-command {
    white-space: pre-wrap;
}
.t-prompt {
    color: #34d399;
}
.t-link {
    color: #7dd3fc;
}
.t-warn {
    color: #facc15;
}
.t-ip {
    color: #f472b6;
}
.t-cur {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: #3ad9ee;
    vertical-align: -2px;
    margin-left: 3px;
    animation: 1.1s steps(1) infinite tbl;
}
#apps .applogo,
.fic {
    width: 46px;
    height: 46px;
    place-items: center;
}
@keyframes tbl {
    50% {
        opacity: 0;
    }
}
.steps {
    max-width: 760px;
    margin: 22px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.step {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.fcard p,
.fl,
.step b,
.vps b {
    color: var(--text-soft);
}
.bento,
.fic,
.step .n {
    display: grid;
}
.step .n {
    font: 700 11px/1 var(--mono);
    width: 22px;
    height: 22px;
    border-radius: 7px;
    place-items: center;
    flex: none;
}
.bento {
    grid-template-columns: 1.45fr 1fr;
    gap: 16px;
    max-width: var(--preview-frame-max);
    margin: 0 auto;
}
.paths,
.pl-branches {
    grid-template-columns: 1fr 1fr;
}
.fic,
.path .ph {
    margin-bottom: 16px;
}
.fcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 28px;
}
#apps .appcard:hover,
.fcard:hover,
.pnode:hover {
    transform: translateY(-3px);
    border-color: var(--text-faint);
}
.fic {
    border-radius: 12px;
    font-size: 22px;
}
.fic.nk,
.mini-app-icon.ink,
.side-item.active {
    background: var(--ink-pale);
    color: var(--ink);
}
.fcard h3 {
    font: 600 20px/1.2 var(--head);
}
.fcard p {
    font-size: 14.5px;
    line-height: 1.6;
}
.fl .ftag,
.fnode b {
    color: var(--accent);
}
.flagship {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
}
.fl,
.path .ph {
    align-items: center;
}
.flayers {
    margin-top: auto;
    padding-top: 24px;
    display: grid;
    gap: 9px;
}
.fl {
    height: 42px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    padding: 0 14px;
    gap: 10px;
    font: 600 12.5px/1 var(--body);
    overflow: hidden;
}
.fl .fbar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--speed-pale), transparent);
    transition: transform 1s;
    z-index: 0;
    opacity: 0.7;
}
.fl .ftag,
.shield {
    position: relative;
}
.stage-f.in .fl .fbar {
    transform: scaleX(1);
}
.fl .ftag {
    font: 600 11px/1 var(--mono);
    z-index: 1;
}
.fcard::before,
.shield-svg {
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.fl > span:not(.fbar) {
    position: relative;
    z-index: 1;
    color: var(--text);
}
.bento .small p,
.btag.miss,
.fmini,
.fnode .ic,
.ptag.s {
    color: var(--text-muted);
}
.fmini {
    font-size: 13px;
    margin-top: 5px;
}
.fnode,
.pms {
    color: var(--text-soft);
}
.bento .small h3 {
    font-size: 16px;
}
.bento .small p {
    font-size: 13.5px;
}
.bento .small .fic {
    width: 40px;
    height: 40px;
    font-size: 19px;
}
.paths {
    display: grid;
    gap: 18px;
    margin-top: 8px;
}
.fnode,
.path .ph,
.pmeta,
.skiplane {
    display: flex;
}
.path {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    background: var(--surface);
}
.fnode,
.path.slow .fnode {
    background: var(--surface-2);
}
.path .ph {
    justify-content: space-between;
}
.path .pt {
    font: 600 15px/1 var(--head);
}
.fnode b,
.ssub.mono {
    font-family: var(--mono);
}
.ptag {
    font: 700 10px/1 var(--body);
    letter-spacing: 0.05em;
    padding: 5px 9px;
    border-radius: 999px;
}
.btag.miss,
.ptag.s {
    background: var(--surface-3);
}
.fnode {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 13px;
    font: 500 13px/1 var(--body);
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}
.fnode .ic {
    font-size: 16px;
}
.fnode.hit {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    color: var(--text);
    background: var(--speed-pale);
}
.pmeta {
    align-items: baseline;
    gap: 10px;
    margin: 2px 0 16px;
    flex-wrap: wrap;
}
.pms {
    font: 700 22px/1 var(--mono);
    white-space: nowrap;
}
.fnode.sm,
.pms small,
.psub {
    font-size: 12px;
}
.path.slow .fnode,
.psub {
    color: var(--text-muted);
}
.pms small {
    color: var(--text-faint);
    margin-left: 2px;
}
.psub {
    line-height: 1.4;
}
.psub i,
.seyebrow,
.skip,
.skip .ic,
.skip s,
.vps .ic {
    color: var(--text-faint);
}
.psub i {
    font-style: normal;
}
.path.slow {
    opacity: 0.92;
}
.fnode.sm {
    padding: 8px 12px;
    opacity: 0.8;
}
.fnode.big {
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.fnode.big .frow {
    display: flex;
    align-items: center;
    gap: 9px;
}
.fnode.hit.big {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
        0 14px 34px -14px color-mix(in srgb, var(--accent) 55%, transparent);
    animation: 3s ease-in-out infinite hitglow;
}
@keyframes hitglow {
    0%,
    100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
            0 14px 34px -14px color-mix(in srgb, var(--accent) 45%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
            0 16px 42px -12px color-mix(in srgb, var(--accent) 72%, transparent);
    }
}
.fnode.final {
    font-weight: 700;
}
.skiplane {
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed var(--border);
    border-top: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
}
.skip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 11.5px/1 var(--body);
}
.skip .ic,
.vps .ic {
    font-size: 13px;
}
.shield {
    max-width: 680px;
    margin: 0 auto;
    aspect-ratio: 1/0.86;
}
.shield-svg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.shield-svg .ring {
    stroke: var(--speed);
    stroke-opacity: 0.4;
    stroke-dasharray: 4 6;
}
.shield-svg .ray {
    stroke: var(--border);
}
.shield-svg .pulse {
    stroke: var(--speed);
    stroke-opacity: 0.18;
    animation: 4s ease-in-out infinite shieldpulse;
}
@keyframes shieldpulse {
    0%,
    100% {
        stroke-opacity: 0.1;
    }
    50% {
        stroke-opacity: 0.32;
    }
}
.snode {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.sbox {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 13px 15px;
    max-width: 188px;
    box-shadow: var(--shadow-sm);
}
.sbox.core {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),
        0 18px 44px -18px color-mix(in srgb, var(--accent) 45%, transparent);
    padding: 18px 20px;
}
.seyebrow {
    font: 700 9px/1 var(--mono);
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 7px;
}
.sttl {
    display: flex;
    align-items: center;
    gap: 7px;
    font: 600 13.5px/1.2 var(--head);
    color: var(--text);
}
.sttl .bi,
.sttl .ic {
    color: var(--accent);
    font-size: 16px;
    flex: none;
}
.ssub {
    font: 500 11.5px/1.45 var(--body);
    color: var(--text-muted);
    margin-top: 3px;
}
.ssub.mono {
    color: var(--text-soft);
}
#apps .wstep .ic,
.schip .ic,
.sring {
    color: var(--accent);
}
.sbox.core .sttl {
    justify-content: center;
    font-size: 15px;
}
.sring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--speed-pale);
    font-size: 21px;
    margin-bottom: 9px;
}
#apps .wstep,
.schip {
    color: var(--text-soft);
    border: 1px solid var(--border);
    background: var(--surface);
}
.schips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.schip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 12.5px/1 var(--body);
    border-radius: 999px;
    padding: 9px 14px;
}
.pl-dot,
.pl-split .stub {
    background: var(--speed);
}
.schip .ic {
    font-size: 15px;
}
@media (max-width: 820px) {
    .shield {
        aspect-ratio: auto;
        max-width: 440px;
        display: grid;
        gap: 12px;
    }
    .core .orbit,
    .shield-svg {
        display: none;
    }
    .snode {
        position: static;
        transform: none;
    }
    .sbox,
    .sbox.core {
        max-width: none;
    }
    .core {
        margin: 0 auto;
    }
}
#apps .wizline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 980px;
    margin: 0 auto 30px;
    overflow-y: hidden;
}
#apps .wizline::-webkit-scrollbar {
    display: none;
}
#apps .wstep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    font: 600 13px/1 var(--body);
    border-radius: 999px;
    padding: 9px 15px;
    flex: none;
}
#apps .wsep,
.head .time small,
.soon {
    color: var(--text-faint);
}
#apps .wstep .ic {
    font-size: 16px;
}
#apps .wsep {
    font-size: 15px;
    flex: none;
}
#apps .appgrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(155px, 1fr));
    gap: 14px;
    max-width: 1128px;
    margin: -6px auto 0;
    padding: 6px 0;
    overflow-y: hidden;
}
#how .panel-scroll,
#how .wnav.tab-hint,
.acc-b > div,
.marquee,
.path.fast,
.rv-lines .ln,
.scard {
    overflow: hidden;
}
#apps .appgrid::-webkit-scrollbar {
    display: none;
}
#apps .appcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 132px;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 16px;
}
#apps .applogo {
    border-radius: 12px;
    display: grid;
    background: var(--surface-2);
    color: var(--text-soft);
    font-size: 24px;
    transition: color 0.2s;
}
#apps .appcard .an {
    font: 600 14px/1.2 var(--head);
    color: var(--text);
}
#apps .appcard .at {
    font: 500 11px/1.2 var(--body);
    color: var(--text-muted);
}
.soon {
    font: 700 9px/1 var(--body);
    letter-spacing: 0.06em;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 6px;
}
.pn-ic,
.scard-h .l .ic {
    color: var(--ink);
}
.pipeline {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
}
.pnode,
.pnode.head,
.skipnote {
    max-width: 300px;
}
.pl-dot {
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 12px 3px color-mix(in srgb, var(--speed) 60%, transparent);
    offset-path: var(--flow);
    offset-rotate: 0deg;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}
.pl-dot.go {
    animation: 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite flowmove;
}
.is-paused,
.pl-dot.is-paused {
    animation-play-state: paused;
}
@keyframes flowmove {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }
    6%,
    93% {
        opacity: 1;
    }
    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}
.branch,
.pl-trunk {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pnode,
.wlive {
    align-items: center;
}
.pnode {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    gap: 11px;
}
.branch.hit .pnode.head:hover,
.pnode.final:hover,
.pnode.hero:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}
.pn-ic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ink-pale);
    display: grid;
    place-items: center;
    flex: none;
    font-size: 16px;
}
.pn-t {
    font: 600 13.5px/1.2 var(--body);
    color: var(--text);
}
.pn-s {
    font: 500 11px/1.35 var(--body);
    color: var(--text-muted);
    margin-top: 2px;
}
.acc-b p,
.foot-links,
.head .time {
    color: var(--text-soft);
}
.pnode.final {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.pconn {
    width: 2px;
    min-height: 22px;
    background: var(--border);
    flex: none;
}
.branch.hit .pconn,
.cache-pipeline > .pl-trunk:first-of-type .pconn,
.pconn.cy {
    background: var(--speed);
    opacity: 0.9;
}
.pconn.grow {
    flex: 1 1 auto;
}
.pl-merge,
.pl-split {
    position: relative;
    height: 30px;
}
.pl-split .stub {
    left: 50%;
    width: 2px;
    height: 15px;
    transform: translateX(-1px);
}
.pl-merge .rail,
.pl-split .rail {
    position: absolute;
    top: 15px;
    left: 25%;
    right: 25%;
    height: 2px;
    background: linear-gradient(to right, var(--speed) 0 50%, var(--border) 50% 100%);
}
.pl-merge .drop,
.pl-merge .stub,
.pl-split .drop {
    position: absolute;
    width: 2px;
    height: 15px;
    transform: translateX(-1px);
}
.pl-split .drop {
    top: 15px;
}
.pl-merge .drop.l,
.pl-split .drop.l {
    left: 25%;
    background: var(--speed);
}
.pl-merge .drop.r,
.pl-split .drop.r {
    left: 75%;
    background: var(--border);
}
.pl-merge .drop {
    top: 0;
}
.pl-merge .stub {
    top: 15px;
    left: 50%;
    background: var(--speed);
}
.js .rv-lines.in .ln > span,
.js .rv.in {
    transform: none;
}
.pl-branches {
    display: grid;
    gap: 0;
    align-items: stretch;
}
.branch.miss {
    opacity: 0.88;
}
.pnode.head {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
.btag {
    font: 700 10px/1 var(--body);
    letter-spacing: 0.07em;
    padding: 4px 8px;
    border-radius: 6px;
}
.head .time {
    font: 700 21px/1 var(--mono);
}
.acc-h .ic,
.finale .sub,
.head .sub {
    color: var(--text-muted);
}
.head .time small {
    font-size: 11px;
    margin-left: 1px;
}
.head .sub {
    font: 500 11px/1 var(--body);
}
.branch.hit .pnode.head {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
        0 14px 34px -16px color-mix(in srgb, var(--accent) 42%, transparent);
}
.skipnote {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 11px 13px;
    border: 1px dashed var(--border);
    border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 11px;
    background: 0 0;
    background: color-mix(in srgb, var(--speed) 6%, transparent);
}
.card,
.fl-in,
.mqchip {
    background: var(--surface);
}
.pconn.cy.grow {
    position: relative;
    overflow: visible;
}
@keyframes pktdrop {
    0% {
        top: 0;
        opacity: 0;
    }
    12%,
    86% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}
.faq {
    max-width: 740px;
    margin: 0 auto;
}
.acc {
    border-bottom: 1px solid var(--line);
}
.acc-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 4px;
    font: 600 16.5px/1.3 var(--head);
}
.acc-h .ic {
    transition: transform 0.3s;
    font-size: 20px;
    flex: none;
}
.acc.open .acc-h .ic {
    transform: rotate(180deg);
    color: var(--accent);
}
.acc-b {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s;
}
.acc.open .acc-b {
    grid-template-rows: 1fr;
}
.acc-b p {
    padding: 0 4px 22px;
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 64ch;
}
.finale h2 {
    font: 700 clamp(34px, 4.6vw, 58px) / 1.03 var(--head);
}
.preview-table th,
.scell .lab {
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.finale .lead {
    margin: 16px auto 0;
    max-width: 44ch;
}
.finale .cmd {
    margin: 28px auto 0;
}
.finale .sub {
    margin-top: 14px;
    font-size: 13px;
}
.foot {
    border-top: 1px solid var(--line);
    padding: 46px 0 36px;
}
.foot .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.foot-links {
    display: flex;
    gap: 22px;
}
.foot-bot {
    font-size: 12.5px;
    color: var(--text-muted);
}
.js .rv {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .rv.in {
    opacity: 1;
}
.d1 {
    transition-delay: 60ms;
}
.d2 {
    transition-delay: 0.12s;
}
.d3 {
    transition-delay: 0.18s;
}
.rv-lines .ln {
    display: block;
    padding-bottom: 0.06em;
}
.js .rv-lines .ln > span {
    display: inline-block;
    transform: translateY(112%);
}
.rv-lines .ln:nth-child(2) > span {
    transition-delay: 90ms;
}
.wlive {
    margin-left: auto;
    display: flex;
    gap: 6px;
    font: 600 10px/1 var(--body);
    color: var(--text-soft);
}
.wlive .lp {
    position: relative;
    width: 7px;
    height: 7px;
}
.wlive .lp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #34d399;
    opacity: 0.7;
    animation: 1.8s cubic-bezier(0, 0, 0.2, 1) infinite ping;
}
.marquee {
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: 38s linear infinite mq;
    will-change: transform;
}
.mqlabel {
    font: 600 11px/1 var(--body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 22px;
}
.mqchip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 600 13.5px/1 var(--body);
    color: var(--text-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 15px;
    white-space: nowrap;
    transition:
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.18s,
        color 0.18s,
        background 0.18s;
}
.bgfx,
.floaters {
    transition: transform 0.3s;
}
.mqchip .bi,
.mqchip .ic {
    font-size: 18px;
    color: var(--text-muted);
    transition: color 0.18s;
}
.fcard::before,
.spot::before,
.term::after {
    transition: opacity 0.3s;
    content: "";
}
.mqchip:hover {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    color: var(--text);
    background: var(--surface-2);
}
@keyframes mq {
    to {
        transform: translateX(-50%);
    }
}
.mobnav,
.navham,
.navham .ham-close,
.shield-svg-mobile,
.term.is-playing .tl {
    display: none;
}
.term.is-playing .tl.is-visible {
    display: block;
}
.fcard,
.spot {
    position: relative;
    isolation: isolate;
}
.fcard::before {
    position: absolute;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(
        190px circle at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--accent) 16%, transparent),
        transparent 62%
    );
}
.fcard > *,
.hero .wrap,
.spot > * {
    position: relative;
    z-index: 1;
}
.floaters,
.spot::before {
    z-index: 0;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero .glow {
    animation: 9s ease-in-out infinite breathe;
}
@keyframes breathe {
    0%,
    100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translateX(-50%) scale(1.06);
    }
}
@media (prefers-reduced-motion: reduce) {
    .brand-pill:hover .logo-mark-dot,
    .brand-pill:hover .logo-mark-triangle,
    .brand:hover .logo-mark-dot,
    .brand:hover .logo-mark-triangle {
        animation: none;
        opacity: 1;
        stroke-dasharray: 42;
        stroke-dashoffset: 0;
        transform: none;
        filter: none;
    }
    .core .orbit.o1,
    .fl-chip,
    .fnode.hit.big,
    .hero .glow,
    .hmark::before,
    .mq-track,
    .pl-dot,
    .shield-svg .pulse,
    .term.is-playing .tl,
    .wlive .lp::before {
        animation: none !important;
    }
    #cFill,
    #cLine,
    #donutArc,
    #oLine,
    .rv-lines .ln > span {
        transition: none !important;
    }
    .rv,
    .rv-lines,
    .rv-lines .ln > span,
    .term,
    .window {
        transform: none !important;
    }
    html {
        scroll-behavior: auto;
    }
    .rv,
    .rv-lines {
        opacity: 1 !important;
    }
    .term.is-playing .tl {
        display: block !important;
    }
    .pl-dot {
        opacity: 0 !important;
    }
    .fcard::before,
    .spot::before,
    .term::after {
        display: none !important;
    }
}
.hero-center {
    padding: 70px 0 0;
}
.hero-center .hero-top {
    max-width: 720px;
    margin: 0 auto;
}
.hero-center .pill {
    margin: 0 auto;
}
.hero-center h1 {
    font-size: clamp(40px, 5.4vw, 66px);
}
.hero-center .lead {
    margin-left: auto;
    margin-right: auto;
}
.hero-center .hero-cta,
.hero-center .rv-lines .ln > span {
    justify-content: center;
}
.hero-center .term {
    margin-top: 38px;
}
.bi {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
    fill: currentColor;
    stroke: none;
}
.card {
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
}
.spot::before {
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        color-mix(in srgb, var(--accent) 14%, transparent),
        transparent 62%
    );
}
.fl-in,
.term {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.fl-chip {
    position: absolute;
    animation: 7s ease-in-out infinite floaty;
}
.fl-in {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 11px/1 var(--mono);
    color: var(--text-faint);
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 11px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.smeta,
.ssub,
.vps {
    display: flex;
}
.foot-links,
.vps {
    flex-wrap: wrap;
}
.fl-in .ic {
    color: var(--accent);
    font-size: 14px;
}
@keyframes floaty {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}
.term {
    position: relative;
}
.packet,
.term::after {
    position: absolute;
    opacity: 0;
}
.term::after {
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(
        280px circle at var(--mx, 50%) var(--my, 50%),
        rgba(58, 217, 238, 0.13),
        transparent 60%
    );
}
.vps {
    gap: 5px 14px;
    align-items: center;
    margin-bottom: 12px;
    font: 500 11px/1.4 var(--mono);
    color: var(--text-muted);
}
.cstats div > span,
.vps span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.smeta {
    flex-direction: column;
    gap: 2px;
}
.ssub {
    font: 500 10px/1.2 var(--body);
    color: var(--text-faint);
    align-items: center;
    gap: 5px;
}
.ssub .ic {
    font-size: 12px;
    color: var(--ok);
}
.sreq {
    margin-left: auto;
    font: 600 11px/1 var(--mono);
    color: var(--text-soft);
}
.stile,
.stile small {
    color: var(--text-muted);
}
.stack-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 560px) {
    .stack-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 960px) {
    .stack-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}
.stile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 18px 8px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-2);
    transition:
        transform 0.18s,
        border-color 0.18s,
        color 0.18s;
}
.stile:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    color: var(--accent);
}
.stile .bi,
.stile .ic {
    font-size: 27px;
}
.stile small {
    font: 600 11px/1 var(--body);
}
.app-text,
.freelead,
.freelist li,
.stile:hover small {
    color: var(--text-soft);
}
.freecard {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 38px;
}
.freelead {
    font-size: 16px;
    max-width: 52ch;
    margin: 0 auto;
    line-height: 1.6;
}
.freelist {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 560px;
    margin: 26px auto 30px;
    text-align: left;
}
.dtitle,
.scard {
    margin-bottom: 12px;
}
.freelist li {
    display: flex;
    gap: 9px;
    font-size: 14px;
}
.freelist li .ic {
    color: var(--accent);
    flex: none;
    margin-top: 1px;
}
.freecta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.tlbl,
.tok {
    display: inline-block;
}
.path.fast {
    position: relative;
}
.packet {
    left: 38px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--speed);
    box-shadow: 0 0 12px 3px color-mix(in srgb, var(--speed) 55%, transparent);
    animation: 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite packet;
    z-index: 2;
}
@keyframes packet {
    0% {
        top: 70px;
        opacity: 0;
    }
    10%,
    88% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 26px);
        opacity: 0;
    }
}
.ckey {
    margin-top: 8px;
    font: 500 11px/1.5 var(--mono);
    color: var(--text-faint);
}
.tlbl {
    min-width: 120px;
    color: #8b87f5;
    font-weight: 700;
}
.tok {
    min-width: 30px;
    color: #34d8a6;
}
.scard-h,
.scard-h .r {
    display: flex;
    align-items: center;
}
.dtitle .panel-title {
    font: 700 15px/1 var(--head);
    color: var(--text);
}
.cstats div,
.scard-h .r,
.scell .lab {
    color: var(--text-muted);
}
.dtitle p:not(.panel-title) {
    font: 500 11px/1 var(--body);
    color: var(--text-muted);
    margin-top: 6px;
}
.scard {
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
}
.core,
.odot {
    border-radius: 50%;
}
.scard-h {
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
}
.scard-h .r {
    gap: 12px;
    font: 500 10.5px/1 var(--body);
}
.onl,
.scell .val {
    align-items: center;
    gap: 6px;
}
.onl {
    display: inline-flex;
    color: var(--ok);
    font-weight: 600;
}
.odot {
    width: 6px;
    height: 6px;
    background: var(--ok);
    display: inline-block;
}
.donut,
.donut svg {
    width: 92px;
    height: 92px;
}
.core,
.spill {
    background: var(--surface);
}
.sgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px 16px;
    padding: 14px;
}
.cperf,
.dval,
.scell .val {
    display: flex;
}
.scell .lab {
    font: 600 9px/1 var(--body);
}
.cstats .v,
.scell .val {
    color: var(--text-soft);
}
.scell .val {
    font: 600 12px/1.2 var(--body);
    margin-top: 6px;
}
.scell .val.mono {
    font-family: var(--mono);
    font-size: 11.5px;
}
.wsub {
    font: 500 10px/1 var(--body);
    color: var(--text-faint);
    margin-left: 4px;
}
.cperf {
    align-items: center;
    gap: 16px;
    padding: 18px 16px 20px;
}
.donut {
    position: relative;
    flex: none;
}
.dval {
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font: 700 18px/1 var(--mono);
    color: var(--accent);
    line-height: 1;
}
.dval small {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.65;
    align-self: center;
}
.cstats {
    flex: 1;
    display: grid;
    gap: 9px;
    font: 500 11.5px/1 var(--body);
}
.cstats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cstats b:not(.v) {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}
.cstats .ic {
    font-size: 13px;
}
.cstats .v {
    font-family: var(--mono);
    font-weight: 600;
}
.farrow {
    display: flex;
    justify-content: center;
    color: var(--text-faint);
    font-size: 14px;
    line-height: 1;
    padding: 4px 0;
}
.path.fast .farrow {
    color: color-mix(in srgb, var(--accent) 70%, var(--text-faint));
}
.shield {
    aspect-ratio: 1/0.84;
}
.shield-svg .ray {
    stroke: var(--border);
    stroke-opacity: 0.9;
}
.shield-svg .beam {
    stroke: var(--speed);
    stroke-opacity: 0.32;
    stroke-dasharray: 3 5;
}
.shield-svg .arc {
    stroke: var(--speed);
    stroke-opacity: 0.22;
}
.core {
    position: relative;
    width: 152px;
    height: 152px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0 18px;
    background: radial-gradient(
        circle at 50% 36%,
        color-mix(in srgb, var(--speed) 15%, var(--surface)),
        var(--surface) 70%
    );
    border: 1px solid var(--border);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
        0 0 64px -10px color-mix(in srgb, var(--accent) 48%, transparent);
}
.core .orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed transparent;
    border: 1px dashed color-mix(in srgb, var(--accent) 38%, transparent);
    pointer-events: none;
}
#how .wnav,
.nav .wrap {
    position: relative;
}
.core .orbit.o1 {
    inset: -13px;
    animation: 26s linear infinite orbitspin;
}
.core .orbit.o2 {
    inset: -26px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
@keyframes orbitspin {
    to {
        transform: rotate(360deg);
    }
}
.core .sring {
    margin-bottom: 7px;
}
.core .cttl {
    font: 600 13px/1.2 var(--head);
    color: var(--text);
}
.core .cs {
    font: 500 10.5px/1.35 var(--mono);
    color: var(--text-soft);
    margin-top: 3px;
}
.core .cs2,
.spill {
    color: var(--text-muted);
}
.core .cs2 {
    font: 500 10px/1.3 var(--body);
    margin-top: 1px;
}
.spill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 11.5px/1 var(--body);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 1px dashed var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    opacity: 0.82;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.spill .ic {
    color: var(--text-faint);
    font-size: 14px;
}
.card-mini-head .ic,
.iscard.notp h3 .ic,
.soonlink,
.soonlink .sb {
    color: var(--text-muted);
}
.spill:hover {
    opacity: 1;
    border-color: var(--text-faint);
}
.snub {
    max-width: 172px;
}
.snub.wide {
    max-width: 240px;
}
.snub .sttl {
    justify-content: center;
    white-space: nowrap;
}
.shield-svg .beam {
    stroke-dasharray: none;
    stroke-opacity: 0.4;
}
.isnot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 880px;
    margin: 0 auto;
}
.cmd,
.cmd code {
    max-width: 100%;
    min-width: 0;
}
.iscard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px;
}
.iscard.is {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.iscard h3 {
    font: 600 16px/1.2 var(--head);
    display: flex;
    align-items: center;
    gap: 9px;
}
.iscard p,
.isnot li {
    font-size: 14px;
    color: var(--text-soft);
}
.iscard p {
    line-height: 1.65;
}
.isnot ul {
    list-style: none;
    display: grid;
    gap: 11px;
}
.isnot li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.isnot li .ic {
    color: var(--text-faint);
    font-size: 16px;
    flex: none;
    margin-top: 1px;
}
.soonlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}
.soonlink .sb {
    font: 700 8px/1 var(--body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 5px;
}
.nlinks .soonlink {
    padding: 9px 12px;
    border-radius: 999px;
    font: 500 14px/1 var(--body);
}
.nlinks .soonlink,
.nlinks a {
    font-weight: 600;
}
.iconbtn {
    border: none;
    background: 0 0;
}
.iconbtn:hover {
    background: var(--surface-3);
}
@media (max-width: 920px) {
    .menu-pill .gh,
    .menu-pill .mp-sep,
    .menu-pill .nlinks,
    .nav.menuopen .navham .ham-open,
    .nlinks {
        display: none;
    }
    .bento,
    .chores,
    .kpis,
    .paths,
    .price,
    .steps,
    .wcols {
        grid-template-columns: 1fr;
    }
    .window {
        transform: none !important;
    }
    .flagship {
        grid-row: auto;
    }
    .mobnav-close,
    .navham {
        place-items: center;
        cursor: pointer;
    }
    .iconbtn {
        width: 44px;
        height: 44px;
    }
    .menu-pill {
        padding: 2px 4px;
    }
    .navham {
        display: grid;
        width: 44px;
        height: 44px;
        border: none;
        background: 0 0;
        color: var(--text);
    }
    .navham .ic {
        font-size: 21px;
    }
    .mobnav-close .ic,
    .mobnav-head .logo {
        font-size: 16px;
    }
    .nav.menuopen .navham .ham-close {
        display: inline-block;
    }
    .nav.menuopen::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(6, 8, 15, 0.56);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .mobnav {
        position: fixed;
        top: 50%;
        left: 50%;
        width: min(360px, calc(100vw - 34px));
        max-height: calc(100dvh - 48px);
        overflow: auto;
        transform: translate(-50%, -48%) scale(0.98);
        opacity: 0;
        background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--ink-pale)), var(--surface));
        border: 1px solid color-mix(in srgb, var(--border) 82%, var(--speed-light));
        border-radius: 14px;
        box-shadow:
            0 22px 72px rgba(0, 0, 0, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        padding: 10px;
        z-index: 60;
        flex-direction: column;
        gap: 4px;
        pointer-events: none;
        transition:
            opacity 0.18s,
            transform 0.18s;
    }
    .mobnav-head .logo {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }
    .mobnav-close {
        width: 44px;
        height: 44px;
        border-radius: 9px;
    }
    .nav.menuopen .mobnav {
        display: flex;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: auto;
    }
    .mobnav-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 8px 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--border);
    }
    .mobnav-title {
        display: grid;
        gap: 2px;
    }
    .mobnav-title b {
        font: 700 15px/1 var(--head);
        color: var(--text);
    }
    .mobnav-title span {
        font: 600 11px/1 var(--body);
        color: var(--text-muted);
    }
    .mobnav-close {
        margin-left: auto;
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface-3) 74%, transparent);
        color: var(--text-muted);
        display: grid;
    }
    .mobnav-close:hover {
        color: var(--text);
        border-color: color-mix(in srgb, var(--border) 70%, var(--speed-light));
        background: var(--surface-3);
    }
    .mobnav .soonlink,
    .mobnav a {
        display: flex;
        align-items: center;
        min-height: 44px;
        gap: 9px;
        padding: 12px 14px;
        border-radius: 10px;
        font: 600 15px/1 var(--body);
        color: var(--text-soft);
    }
    .mobnav a:hover {
        background: var(--surface-3);
        color: var(--text);
    }
    .mobnav .mobgh {
        justify-content: center;
        border: 1px solid var(--border);
        margin-top: 8px;
        color: var(--text);
        background: color-mix(in srgb, var(--surface-3) 72%, transparent);
    }
}
.side-item .ic,
.trust-tag .ic {
    font-size: 15px;
}
@media (max-width: 920px) and (prefers-reduced-motion: reduce) {
    .mobnav {
        transition: none;
    }
}
.acc-h {
    width: 100%;
    border: 0;
    background: 0 0;
    color: inherit;
    text-align: left;
}
:where(a, button):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.install-note {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
}
.install-note a {
    color: var(--text-soft);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
}
.install-note a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}
.trust-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}
.trust-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    font: 600 13px/1 var(--body);
}
.trust-tag-info {
    color: var(--accent);
    background: var(--speed-pale);
    border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.trust-tag-ok {
    color: var(--ok);
    background: 0 0;
    background: color-mix(in srgb, var(--ok) 13%, transparent);
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
.trust-tag-muted {
    color: var(--text-soft);
    background: var(--surface);
    border-color: var(--border);
}
#how .stage {
    margin-top: 32px;
}
#how .window {
    --panel-glow-x: 50%;
    --panel-glow-y: 44%;
    --panel-tilt-x: 0deg;
    --panel-tilt-y: 0deg;
    width: 100%;
    max-width: var(--preview-frame-max);
    height: var(--preview-frame-height);
    position: relative;
    transform-origin: 50% 50%;
    transform: none;
    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.22s ease;
}
#how .stage.in .window {
    transform: perspective(1000px) rotateX(var(--panel-tilt-x)) rotateY(var(--panel-tilt-y));
}
#how .window::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(280px circle at var(--panel-glow-x) var(--panel-glow-y), rgba(8, 145, 178, 0.22), transparent 58%),
        linear-gradient(135deg, rgba(8, 145, 178, 0.12), transparent 28%, transparent 72%, rgba(8, 145, 178, 0.08));
    opacity: 0;
    transition: opacity 0.22s ease;
}
#how .window:hover {
    box-shadow: var(--shadow);
}
#how .window:hover::after {
    opacity: 0.95;
}
[data-theme="dark"] #how .window::after {
    background:
        radial-gradient(280px circle at var(--panel-glow-x) var(--panel-glow-y), rgba(34, 211, 238, 0.13), transparent 58%),
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), transparent 28%, transparent 72%, rgba(34, 211, 238, 0.06));
}
[data-theme="dark"] #how .window:hover::after {
    opacity: 0.78;
}
#how .wbar {
    height: 38px;
}
#how .wbody {
    height: calc(var(--preview-frame-height) - 38px);
}
#how .panel-view {
    height: calc(100% - 50px);
}
#how .wcard .wch {
    padding: 8px 12px;
}
#how .chart {
    height: 112px;
}
#how .chart svg {
    display: block;
    height: 100%;
}
@media (max-width: 560px) {
    .wrap {
        padding: 0 18px;
    }
    .section {
        padding: 72px 0;
    }
    .cmd code {
        font-size: 12px;
    }
    .freelist {
        grid-template-columns: 1fr;
    }
    .sgrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .finale .cmd,
    .hero .cmd {
        display: flex;
        width: 100%;
    }
    .hero .cmd {
        border-radius: 10px;
    }
    .bgfx {
        transform: none !important;
    }
    .floaters {
        display: none;
    }
    .foot .wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    .foot-links {
        gap: 12px 18px;
    }
}
button.wnav {
    appearance: none;
    border: 0;
    background: 0 0;
    font: 500 12px/1 var(--body);
}
#how .wnav {
    overflow: visible;
    transform: translateZ(0);
}
#how .wnav.tab-hint {
    background: color-mix(in srgb, var(--surface-3) 42%, transparent);
}
#how .wnav.tab-hint-late::after {
    animation-delay: 0.28s;
}
#how .wnav.tab-hint::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ink) 82%, transparent);
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    transform: translate(-50%, -50%) scale(0.22);
    opacity: 0;
    pointer-events: none;
    animation: 1.75s ease-out infinite panel-tab-click-wave;
}
#how .wnav.tab-hint::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
    transform: translate(-50%, -50%) scale(0.72);
    opacity: 0;
    pointer-events: none;
    animation: 1.75s ease-out infinite panel-tab-click-dot;
}
@keyframes panel-tab-click-wave {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.22);
    }
    18% {
        opacity: 0.9;
    }
    100%,
    78% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4.2);
    }
}
@keyframes panel-tab-click-dot {
    0%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }
    16%,
    32% {
        opacity: 0.96;
        transform: translate(-50%, -50%) scale(1);
    }
    52% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.82);
    }
}
.panel-view {
    height: var(--panel-preview-height, auto);
    overflow: auto;
    overscroll-behavior: auto;
    scrollbar-width: thin;
}
.panel-view[hidden] {
    display: none !important;
}
.panel-view.active {
    display: block;
    animation: 0.22s both panelview-in;
}
@keyframes panelview-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.panel-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.mini-search,
.mini-toolbar {
    align-items: center;
    display: flex;
}
.mini-toolbar {
    gap: 12px;
    margin-bottom: 12px;
}
.mini-search {
    width: min(320px, 100%);
    gap: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    padding: 0 12px;
    height: 38px;
    color: var(--text-faint);
}
.mini-search input,
.mini-toolbar select {
    border: 0;
    outline: 0;
    background: 0 0;
    color: var(--text-soft);
    font: 500 12px/1 var(--body);
}
#how .domain-cell,
#how .user-cell,
.mini-search input {
    width: 100%;
    min-width: 0;
}
.mini-search input::placeholder {
    color: var(--text-faint);
}
.mini-toolbar select {
    height: 38px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    padding: 0 12px;
    cursor: pointer;
}
.card-mini-head,
.preview-table th {
    border-bottom: 1px solid var(--line);
}
.panel-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
}
.preview-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}
.preview-table th {
    text-align: left;
    padding: 11px 13px;
    color: var(--text-muted);
    font: 700 9.5px/1 var(--body);
}
.preview-table td {
    padding: 11px 13px;
    border-top: 1px solid var(--line);
    color: var(--text-soft);
    font: 500 12px/1.35 var(--body);
    vertical-align: middle;
}
.ta-right {
    text-align: right !important;
}
.domain-cell,
.user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.mini-app-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 14px;
}
.mini-app-icon.muted {
    background: var(--surface-3);
    color: var(--text-faint);
}
.domain-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.domain-text b {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}
.domain-text small {
    color: var(--text-faint);
    font: 500 10.5px/1.2 var(--body);
}
.status-icon {
    color: var(--ok);
    font-size: 13px;
}
.cache-icon {
    color: var(--accent);
    font-size: 13px;
}
.app-meta {
    color: var(--text-faint);
    font-size: 10.5px;
}
.mini-action {
    display: inline-flex;
    color: var(--ink);
    font: 700 12px/1 var(--body);
    border-radius: 7px;
    padding: 6px 9px;
}
.mini-action:hover {
    background: var(--ink-pale);
}
.admin-preview {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.admin-side {
    display: grid;
    gap: 4px;
}
.mini-page-head,
.side-item {
    display: flex;
    align-items: center;
}
.side-item {
    gap: 9px;
    border-radius: 9px;
    padding: 10px 11px;
    color: var(--text-soft);
    font: 600 12px/1 var(--body);
    white-space: nowrap;
}
.side-item .ic {
    color: var(--text-muted);
}
.mini-page-head {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.mini-page-head h4 {
    font: 700 17px/1 var(--head);
    color: var(--text);
}
.mini-page-head p {
    font: 500 11px/1.35 var(--body);
    color: var(--text-muted);
    margin-top: 6px;
}
.mini-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    border-radius: 9px;
    padding: 10px 13px;
    background: var(--primary);
    color: var(--on-primary);
    font: 700 12px/1 var(--body);
}
.card-mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    font: 700 12px/1 var(--head);
    color: var(--text);
}
.card-mini-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.avatar-mini,
.card-mini-head b {
    display: grid;
    place-items: center;
    background: var(--ink-pale);
    color: var(--ink);
}
.card-mini-head b {
    min-width: 26px;
    height: 20px;
    border-radius: 999px;
    font: 700 10px/1 var(--mono);
}
.users-table {
    min-width: 760px;
}
#panel-admin .panel-scroll {
    overflow-x: hidden;
}
#how .preview-table,
#panel-admin .users-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}
#panel-admin .users-table td,
#panel-admin .users-table th {
    padding-left: 9px;
    padding-right: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#how #panel-admin .users-table td:first-child,
#how #panel-admin .users-table th:first-child,
#panel-admin .users-table td:first-child,
#panel-admin .users-table td:nth-child(4),
#panel-admin .users-table th:first-child,
#panel-admin .users-table th:nth-child(4) {
    width: 17%;
}
#how #panel-admin .users-table td:nth-child(2),
#how #panel-admin .users-table th:nth-child(2),
#panel-admin .users-table td:nth-child(2),
#panel-admin .users-table td:nth-child(7),
#panel-admin .users-table th:nth-child(2),
#panel-admin .users-table th:nth-child(7) {
    width: 11%;
}
#how #panel-admin .users-table td:nth-child(3),
#how #panel-admin .users-table th:nth-child(3),
#panel-admin .users-table td:nth-child(3),
#panel-admin .users-table th:nth-child(3) {
    width: 20%;
}
#panel-admin .users-table td:nth-child(5),
#panel-admin .users-table th:nth-child(5) {
    width: 11%;
    white-space: normal;
}
#how #panel-admin .users-table td:nth-child(5),
#how #panel-admin .users-table th:nth-child(5),
#panel-admin .users-table td:nth-child(6),
#panel-admin .users-table th:nth-child(6) {
    width: 13%;
}
#panel-admin .user-cell {
    gap: 8px;
}
.avatar-mini {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    font: 700 10px/1 var(--head);
}
.user-cell strong {
    color: var(--text);
    font-weight: 700;
}
.badge-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    padding: 4px 9px;
    border-radius: 999px;
    font: 700 10.5px/1 var(--body);
}
.badge-mini i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.badge-mini.muted {
    color: var(--text-muted);
    background: var(--surface-3);
}
.badge-mini.warn {
    color: #eab308;
    background: color-mix(in srgb, #eab308 14%, transparent);
}
.badge-mini.info {
    color: var(--accent);
    background: var(--speed-pale);
}
.badge-mini.ok {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 15%, transparent);
}
.kebab {
    color: var(--ink);
    font-size: 19px;
    line-height: 1;
    letter-spacing: 1px;
}
@media (max-width: 1024px) {
    #top .term {
        max-width: min(var(--preview-frame-max), calc(100vw - 52px));
    }
    #fm-stage .window {
        max-width: min(var(--preview-frame-max), calc(100vw - 52px));
        height: 538px;
    }
    #how .window {
        max-width: min(var(--preview-frame-max), calc(100vw - 52px));
        height: 538px;
    }
    #fm-stage .wbody {
        height: 500px;
    }
    #how .wbody {
        height: 500px;
    }
    #top .tbody {
        height: min(calc(var(--preview-frame-height) - var(--terminal-frame-offset)), 500px);
        padding: 16px 18px 18px;
        font-size: 13px;
    }
    #apps .wizline {
        gap: 8px;
    }
    #apps .wstep {
        padding: 9px 13px;
        font-size: 12px;
    }
    #apps .wstep .ic,
    #how #panel-admin .kebab {
        font-size: 15px;
    }
    #apps .appgrid {
        grid-template-columns: repeat(6, minmax(140px, 1fr));
        gap: 12px;
    }
    #apps .appcard {
        min-height: 124px;
        padding: 22px 14px;
    }
    #apps .applogo {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
    #how .sgrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #how .kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #how .stage {
        overflow: hidden;
    }
    #how .window {
        transform: perspective(1000px) rotateX(var(--panel-tilt-x)) rotateY(var(--panel-tilt-y));
    }
    #how .wbar {
        height: 38px;
    }
    #how .wdots i {
        width: 11px;
        height: 11px;
    }
    #how .wbody {
        padding: 10px;
    }
    #how .wtop {
        flex-wrap: nowrap;
        gap: 4px;
        margin-bottom: 10px;
    }
    #how .wnav {
        padding: 6px 7px;
        font-size: 10px;
        gap: 4px;
        white-space: nowrap;
    }
    #how .wnav .ic {
        font-size: 12px;
    }
    #how .cstats div,
    #how .wright {
        gap: 5px;
    }
    #how .wip {
        padding: 4px 6px;
        font-size: 8.5px;
        gap: 4px;
    }
    #how .wava {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }
    #how .kl,
    #how .scell .val.mono {
        font-size: 8px;
    }
    #how .dtitle .panel-title {
        font-size: 17px;
    }
    #how .dtitle p:not(.panel-title) {
        font-size: 10.5px;
    }
    #how .scard,
    #how .wcard {
        border-radius: 9px;
    }
    #how .sgrid {
        gap: 8px 6px;
        padding: 10px;
    }
    #how .scell .lab {
        font-size: 7.5px;
    }
    #how .scell .val {
        font-size: 8.5px;
        gap: 3px;
        line-height: 1.15;
    }
    #how .kl .ic,
    #how .scell .val .bi {
        font-size: 10px;
    }
    #how .kpis {
        gap: 1px;
        margin-bottom: 8px;
    }
    #how .ktile {
        padding: 8px 6px;
    }
    #how .kl {
        gap: 3px;
        white-space: nowrap;
    }
    #how .kn {
        font-size: 14px;
        margin-top: 6px;
    }
    #how .cstats .ic,
    #how .kn s {
        font-size: 9px;
    }
    #how .khint {
        font-size: 8px;
        margin-top: 5px;
    }
    #how .wcols {
        grid-template-columns: 1.7fr 1fr;
        gap: 8px;
    }
    #how .wch {
        padding: 8px;
    }
    #how .wct {
        font-size: 9.5px;
        gap: 4px;
    }
    #how .wsub {
        display: none;
    }
    #how .wleg {
        gap: 6px;
        font-size: 7.5px;
    }
    #how .app-meta,
    #how .cstats,
    #how .cstats .v,
    #how .domain-text small {
        font-size: 8.5px;
    }
    #how .chart svg {
        height: 100%;
    }
    #how .cperf {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px 10px;
    }
    #how .donut,
    #how .donut svg {
        width: 64px;
        height: 64px;
    }
    #how .cstats {
        width: 100%;
        gap: 6px;
    }
    #how .cstats div > span {
        gap: 4px;
    }
    #how .cstats b:not(.v) {
        width: 6px;
        height: 6px;
        border-radius: 1.5px;
    }
    #how .mini-primary,
    #how .side-item {
        padding: 8px 9px;
        font-size: 10px;
    }
    #how .mini-page-head h4,
    #how .panel-view .dtitle .panel-title {
        font-size: 14px;
    }
    #how .mini-toolbar {
        gap: 8px;
        margin-bottom: 9px;
    }
    #how .mini-search,
    #how .mini-toolbar select {
        height: 32px;
        font-size: 10px;
    }
    #how .preview-table th {
        padding: 9px 10px;
        font-size: 8px;
    }
    #how .preview-table td {
        padding: 9px 10px;
        font-size: 10px;
    }
    #how .mini-app-icon {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 12px;
    }
    #how .admin-preview {
        grid-template-columns: 142px minmax(0, 1fr);
        gap: 10px;
    }
    #how .side-item {
        gap: 6px;
    }
    #how .side-item .ic {
        font-size: 13px;
    }
    #how .card-mini-head {
        padding: 10px;
        font-size: 10px;
    }
    #how #panel-admin .preview-table td,
    #how #panel-admin .preview-table th {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 9px;
    }
    #how #panel-admin .avatar-mini {
        width: 22px;
        height: 22px;
        font-size: 8.5px;
    }
    #how #panel-admin .badge-mini {
        padding: 3px 6px;
        font-size: 8.5px;
    }
}
@media (max-width: 720px) {
    #how .mini-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    #how .mini-search,
    #how .mini-toolbar select {
        width: 100%;
    }
    #how .admin-preview {
        grid-template-columns: 1fr;
    }
    #how .admin-side {
        display: flex;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    #how .mini-page-head {
        align-items: flex-start;
    }
}
@media (prefers-reduced-motion: reduce) {
    #how .wnav.tab-hint,
    #how .wnav.tab-hint::after,
    #how .wnav.tab-hint::before,
    .panel-view.active {
        animation: none;
    }
    #how .wnav.tab-hint::after,
    #how .wnav.tab-hint::before {
        display: none;
    }
}
#how .panel-view {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: auto;
}
#how .preview-table td,
#how .preview-table th,
#how .side-item {
    overflow: hidden;
    text-overflow: ellipsis;
}
#how .domain-text b,
#how .domain-text small,
#how .user-cell strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#how .sites-table td:first-child,
#how .sites-table th:first-child {
    width: 61%;
}
#how .sites-table td:nth-child(2),
#how .sites-table th:nth-child(2) {
    width: 25%;
}
#how #panel-admin .users-table td:nth-child(6),
#how #panel-admin .users-table th:nth-child(6),
#how .sites-table td:nth-child(3),
#how .sites-table th:nth-child(3) {
    width: 14%;
}
#how .admin-preview {
    grid-template-columns: clamp(92px, 18vw, 190px) minmax(0, 1fr);
}
#how .side-item .ic {
    flex: none;
}
#how #panel-admin .users-table {
    min-width: 0;
    table-layout: fixed;
}
#how #panel-admin .users-table td:nth-child(4),
#how #panel-admin .users-table th:nth-child(4) {
    width: 16%;
}
#how #panel-admin .users-table td:nth-child(7),
#how #panel-admin .users-table th:nth-child(7) {
    width: 9%;
}
@media (max-width: 912px) {
    #how .preview-table th {
        padding: 8px;
        font-size: 7.6px;
    }
    #how .preview-table td {
        padding: 8px;
        font-size: 9.2px;
    }
    #how .domain-cell {
        gap: 7px;
    }
    #how .app-meta,
    #how .domain-text small {
        font-size: 8px;
    }
    #how .mini-action {
        padding: 5px 7px;
        font-size: 9px;
    }
    #how .admin-preview {
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 9px;
    }
    #how .side-item {
        padding: 7px 8px;
        font-size: 9.4px;
        gap: 5px;
    }
    #how .side-item .ic {
        font-size: 12px;
    }
    #how .mini-page-head h4 {
        font-size: 13px;
    }
    #how .mini-page-head p {
        font-size: 9.5px;
    }
    #how .mini-primary {
        padding: 7px 8px;
        font-size: 9.5px;
    }
    #how .card-mini-head {
        padding: 9px;
        font-size: 9.5px;
    }
    #how #panel-admin .preview-table td,
    #how #panel-admin .preview-table th {
        padding-left: 5px;
        padding-right: 5px;
        font-size: 8.1px;
    }
    #how #panel-admin .avatar-mini {
        width: 19px;
        height: 19px;
        font-size: 7.5px;
    }
    #how #panel-admin .user-cell {
        gap: 5px;
    }
    #how #panel-admin .badge-mini {
        padding: 3px 5px;
        font-size: 7.5px;
    }
}
@media (max-width: 820px) {
    .shield {
        display: block;
        width: min(100%, 390px);
        max-width: 390px;
        aspect-ratio: 1/1.14;
    }
    .shield .core .orbit,
    .shield .seyebrow,
    .shield .ssub,
    .shield-svg-desktop {
        display: none;
    }
    .shield-svg-mobile {
        display: block;
    }
    .shield .snode {
        position: absolute;
        transform: translate(-50%, -50%);
    }
    .shield .snode:first-of-type {
        left: 50% !important;
        top: 50% !important;
    }
    .shield .snode:nth-of-type(2) {
        left: 50% !important;
        top: 9% !important;
    }
    .shield .snode:nth-of-type(3) {
        left: 14% !important;
        top: 28% !important;
    }
    .shield .snode:nth-of-type(4) {
        left: 86% !important;
        top: 28% !important;
    }
    .shield .snode:nth-of-type(5) {
        left: 14% !important;
        top: 76% !important;
    }
    .shield .snode:nth-of-type(6) {
        left: 86% !important;
        top: 76% !important;
    }
    .shield .snode:nth-of-type(7) {
        left: 50% !important;
        top: 93% !important;
    }
    .shield .core {
        width: 128px;
        height: 128px;
        margin: 0 auto;
        padding: 0 12px;
    }
    .shield .snub,
    .shield .snub.wide {
        width: 104px;
        max-width: 104px;
    }
    .shield .snub .sttl {
        justify-content: center;
        white-space: normal;
        font-size: 11.5px;
        line-height: 1.2;
        gap: 5px;
    }
    .shield .snub .sttl .ic {
        font-size: 14px;
    }
    .schips {
        margin-top: 18px;
    }
    #how .mini-toolbar {
        gap: 7px;
    }
    #how .mini-search {
        width: min(240px, 58%);
    }
    #how .mini-toolbar select {
        width: 112px;
        padding: 0 8px;
    }
    #how .preview-table th {
        padding: 7px;
        font-size: 7px;
    }
    #how .preview-table td {
        padding: 7px;
        font-size: 8.4px;
    }
    #how .mini-app-icon {
        width: 23px;
        height: 23px;
        border-radius: 6px;
        font-size: 10px;
    }
    #how .cache-icon,
    #how .status-icon {
        font-size: 10px;
    }
    #how .admin-preview {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 8px;
    }
    #how .side-item {
        padding: 7px;
        font-size: 8.6px;
        gap: 5px;
    }
    #how .mini-page-head {
        margin-bottom: 9px;
        gap: 8px;
    }
    #how .mini-page-head h4 {
        font-size: 12.2px;
    }
    #how .mini-page-head p {
        font-size: 8.8px;
        margin-top: 4px;
    }
    #how .mini-primary {
        padding: 7px 8px;
        font-size: 8.8px;
        gap: 4px;
    }
    #how #panel-admin .preview-table td,
    #how #panel-admin .preview-table th {
        padding: 6px 4px;
        font-size: 7.4px;
    }
    #how #panel-admin .avatar-mini {
        width: 17px;
        height: 17px;
        font-size: 6.8px;
    }
    #how #panel-admin .badge-mini {
        padding: 2.5px 4px;
        font-size: 6.8px;
        gap: 3px;
    }
    #how #panel-admin .badge-mini i {
        width: 4px;
        height: 4px;
    }
    #how #panel-admin .kebab {
        font-size: 13px;
    }
}
@media (max-width: 768px) {
    #top .term {
        max-width: min(var(--preview-frame-max), calc(100vw - 42px));
    }
    #fm-stage .window {
        max-width: min(var(--preview-frame-max), calc(100vw - 42px));
        height: 478px;
    }
    #how .window {
        max-width: min(var(--preview-frame-max), calc(100vw - 42px));
        height: 478px;
    }
    #fm-stage .wbody {
        height: 440px;
    }
    #how .wbody {
        height: 440px;
    }
    #top .tbody {
        height: min(calc(var(--preview-frame-height) - var(--terminal-frame-offset)), 440px);
        padding: 15px 16px 16px;
        font-size: 12px;
    }
    #apps .wizline {
        flex-wrap: nowrap;
        gap: 8px;
    }
    #apps .wstep {
        padding: 8px 12px;
        font-size: 11.5px;
    }
    #apps .appcard .an,
    #apps .wsep {
        font-size: 13px;
    }
    #apps .appgrid {
        grid-template-columns: repeat(6, minmax(112px, 1fr));
        gap: 10px;
    }
    #apps .appcard {
        min-height: 114px;
        padding: 18px 10px;
        border-radius: 14px;
    }
    #apps .applogo {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 20px;
    }
    #apps .appcard .at,
    #how .side-item .ic {
        font-size: 10px;
    }
    #how .mini-toolbar {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
    }
    #how .mini-search,
    #how .mini-toolbar select {
        height: 29px;
        font-size: 8.6px;
    }
    #how .mini-search {
        width: 60%;
        padding: 0 8px;
        gap: 5px;
    }
    #how .mini-toolbar select {
        width: 100px;
        padding: 0 6px;
    }
    #how .sites-table td:first-child,
    #how .sites-table th:first-child {
        width: 63%;
    }
    #how .sites-table td:nth-child(2),
    #how .sites-table th:nth-child(2) {
        width: 24%;
    }
    #how #panel-admin .users-table td:nth-child(5),
    #how #panel-admin .users-table th:nth-child(5),
    #how .sites-table td:nth-child(3),
    #how .sites-table th:nth-child(3) {
        width: 13%;
    }
    #how .domain-cell {
        gap: 5px;
    }
    #how .domain-text small {
        font-size: 7px;
    }
    #how .mini-action {
        padding: 4px 5px;
        font-size: 7.5px;
    }
    #how .admin-preview {
        grid-template-columns: 106px minmax(0, 1fr);
        gap: 7px;
    }
    #how .admin-side {
        display: grid;
        overflow: visible;
        padding-bottom: 0;
        gap: 3px;
    }
    #how .side-item {
        padding: 6px;
        font-size: 7.8px;
        gap: 4px;
        border-radius: 7px;
    }
    #how .mini-page-head {
        align-items: center;
    }
    #how .card-mini-head {
        padding: 8px;
        font-size: 8.2px;
    }
    #how .card-mini-head b {
        min-width: 20px;
        height: 16px;
        font-size: 7px;
    }
    #how #panel-admin .users-table td:first-child,
    #how #panel-admin .users-table th:first-child {
        width: 18%;
    }
    #how #panel-admin .users-table td:nth-child(2),
    #how #panel-admin .users-table th:nth-child(2) {
        width: 12%;
    }
    #how #panel-admin .users-table td:nth-child(3),
    #how #panel-admin .users-table th:nth-child(3) {
        width: 19%;
    }
    #how #panel-admin .users-table td:nth-child(4),
    #how #panel-admin .users-table td:nth-child(6),
    #how #panel-admin .users-table th:nth-child(4),
    #how #panel-admin .users-table th:nth-child(6) {
        width: 15%;
    }
    #how #panel-admin .users-table td:nth-child(7),
    #how #panel-admin .users-table th:nth-child(7) {
        width: 8%;
    }
}
@media (max-width: 540px) {
    #top .term {
        max-width: calc(100vw - 36px);
        border-radius: 12px;
    }
    #fm-stage .window {
        max-width: calc(100vw - 36px);
        height: 416px;
        border-radius: 12px;
    }
    #how .window {
        max-width: calc(100vw - 36px);
        height: 416px;
        border-radius: 12px;
    }
    #fm-stage .wbar {
        height: 36px;
    }
    #how .wbar {
        height: 36px;
    }
    #fm-stage .wbar::after,
    #how .wbar::after {
        max-width: min(220px, calc(100% - 120px));
        font-size: 10px;
    }
    #fm-stage .wbody {
        height: 380px;
    }
    #fm-stage .fm-bar {
        height: 38px;
    }
    #fm-stage .fm-body {
        height: calc(100% - 38px);
    }
    #how .wbody {
        height: 380px;
    }
    #how .chart {
        height: 78px;
    }
    #how .wtop {
        gap: 4px;
        margin-bottom: 7px;
    }
    #how .wnav {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 5px 6px;
        font-size: 8.5px;
        gap: 3px;
    }
    #how .wnav .ic {
        font-size: 10px;
    }
    #how .wip {
        display: none;
    }
    #how .wright {
        gap: 4px;
    }
    #how .wtb,
    #how .wava {
        width: 20px;
        height: 20px;
    }
    #top .tbody {
        height: min(calc(var(--preview-frame-height) - var(--terminal-frame-offset)), 380px);
        padding: 14px 14px 15px;
        font-size: 11px;
    }
    #top .tbar {
        height: 36px;
        padding: 0 12px;
    }
    #top .tbar .d {
        width: 10px;
        height: 10px;
    }
    #apps .wizline {
        gap: 8px;
        justify-content: flex-start;
        padding-bottom: 2px;
    }
    #apps .wstep {
        min-width: max-content;
    }
    #apps .appgrid {
        grid-template-columns: repeat(6, 112px);
        justify-content: flex-start;
        gap: 10px;
        padding: 6px 0;
    }
    #apps .appcard {
        min-height: 120px;
        padding: 20px 12px;
    }
    #how .panel-view {
        scrollbar-width: none;
    }
    #how .panel-view::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    #how .panel-headline {
        margin-bottom: 7px;
    }
    #how .mini-page-head,
    #how .mini-toolbar {
        gap: 5px;
        margin-bottom: 7px;
    }
    #how .mini-search,
    #how .mini-toolbar select {
        height: 25px;
        border-radius: 7px;
        font-size: 7px;
    }
    #how .mini-search {
        width: calc(100% - 80px);
        padding: 0 6px;
    }
    #how .mini-toolbar select {
        width: 74px;
        padding: 0 4px;
    }
    #how .preview-table th {
        padding: 5px 4px;
        font-size: 5.8px;
        letter-spacing: 0.045em;
    }
    #how .preview-table td {
        padding: 5px 4px;
        font-size: 6.8px;
        line-height: 1.18;
    }
    #how .domain-cell {
        gap: 3px;
    }
    #how .mini-app-icon {
        width: 17px;
        height: 17px;
        border-radius: 5px;
        font-size: 8px;
    }
    #how .domain-text {
        gap: 1px;
    }
    #how .app-meta,
    #how .domain-text small {
        font-size: 5.8px;
    }
    #how .cache-icon,
    #how .status-icon {
        font-size: 7px;
    }
    #how .mini-action {
        padding: 3px 4px;
        font-size: 6px;
        border-radius: 5px;
    }
    #how .admin-preview {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 5px;
    }
    #how .mini-primary,
    #how .side-item {
        font-size: 6.2px;
        gap: 3px;
        border-radius: 6px;
    }
    #how .side-item {
        padding: 5px 4px;
    }
    #how .mini-primary .ic,
    #how .side-item .ic {
        font-size: 8px;
    }
    #how .mini-page-head h4 {
        font-size: 9.2px;
    }
    #how .mini-page-head p {
        font-size: 6.3px;
        margin-top: 3px;
    }
    #how .mini-primary {
        padding: 5px;
    }
    #how .card-mini-head {
        padding: 6px 5px;
        font-size: 6.8px;
    }
    #how .card-mini-head b {
        min-width: 16px;
        height: 13px;
        font-size: 5.8px;
    }
    #how #panel-admin .preview-table td,
    #how #panel-admin .preview-table th {
        padding: 4px 2px;
        font-size: 5.8px;
    }
    #how #panel-admin .user-cell {
        gap: 2px;
    }
    #how #panel-admin .avatar-mini {
        width: 12px;
        height: 12px;
        font-size: 4.8px;
    }
    #how #panel-admin .badge-mini {
        padding: 2px 3px;
        font-size: 5.2px;
        gap: 2px;
    }
    #how #panel-admin .badge-mini i {
        width: 3px;
        height: 3px;
    }
    #how #panel-admin .kebab {
        font-size: 10px;
    }
}
@media (max-width: 430px) {
    #top .term {
        max-width: calc(100vw - 28px);
        border-radius: 11px;
    }
    #fm-stage .window {
        max-width: calc(100vw - 28px);
        height: 364px;
        border-radius: 11px;
    }
    #how .window {
        max-width: calc(100vw - 28px);
        height: 364px;
        border-radius: 11px;
    }
    #fm-stage .wbar {
        height: 34px;
    }
    #how .wbar {
        height: 34px;
    }
    #fm-stage .wbar::after,
    #how .wbar::after {
        display: none;
    }
    #fm-stage .wbody {
        height: 330px;
    }
    #fm-stage .fm-bar {
        height: 36px;
        padding-block: 6px;
    }
    #fm-stage .fm-body {
        height: calc(100% - 36px);
    }
    #fm-stage .fm-row {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 8px;
        font-size: 10.5px;
    }
    #fm-stage .fm-head .fm-c-size,
    #fm-stage .fm-c-size {
        display: none;
    }
    #fm-stage .fm-add {
        font-size: 0;
        gap: 3px;
    }
    #fm-stage .fm-add .ic {
        width: 12px;
        height: 12px;
    }
    #fm-stage .fm-add .ic:last-child {
        display: none;
    }
    #how .wbody {
        height: 330px;
    }
    #how .chart {
        height: 60px;
    }
    #how .wtop {
        gap: 3px;
    }
    #how .wnav {
        padding: 5px;
        font-size: 0;
    }
    #how .wnav .ic {
        font-size: 12px;
    }
    #how .wip {
        display: inline-flex;
        padding: 3px 5px;
        font-size: 6.8px;
        gap: 3px;
        border-radius: 6px;
    }
    #how .wip .wdot {
        width: 4px;
        height: 4px;
    }
    #how .wtb,
    #how .wava {
        width: 18px;
        height: 18px;
    }
    #how .wtb .ic {
        width: 12px;
        height: 12px;
    }
    #top .tbody {
        height: min(calc(var(--preview-frame-height) - var(--terminal-frame-offset)), 330px);
        padding: 13px 12px 14px;
        font-size: 10.5px;
    }
    #top .tbar {
        height: 34px;
        padding: 0 10px;
    }
    #top .tbar .d {
        width: 9px;
        height: 9px;
    }
    #apps .wizline {
        gap: 7px;
    }
    #apps .wstep {
        padding: 8px 10px;
        gap: 6px;
        font-size: 11px;
    }
    #apps .wstep .ic {
        font-size: 14px;
    }
    #apps .appgrid {
        grid-template-columns: repeat(6, 104px);
        gap: 9px;
        padding: 6px 0;
    }
    #apps .appcard {
        min-height: 112px;
        padding: 18px 10px;
        border-radius: 13px;
    }
    #apps .applogo {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
    #apps .appcard .an {
        font-size: 12.5px;
    }
    #apps .appcard .at {
        font-size: 9.5px;
        line-height: 1.25;
    }
    #how .admin-preview {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 4px;
    }
    #how .side-item {
        padding: 4px 3px;
        font-size: 5.4px;
        gap: 2px;
    }
    #how .side-item .ic {
        font-size: 7px;
    }
    #how .mini-page-head h4 {
        font-size: 8px;
    }
    #how .mini-page-head p {
        font-size: 5.6px;
    }
    #how .mini-primary {
        padding: 4px;
        font-size: 5.4px;
    }
    #how .card-mini-head {
        padding: 5px 4px;
        font-size: 6px;
    }
    #how #panel-admin .preview-table td,
    #how #panel-admin .preview-table th {
        padding: 3px 1.5px;
        font-size: 5.1px;
    }
    #how #panel-admin .avatar-mini {
        width: 10px;
        height: 10px;
        font-size: 4px;
    }
    #how #panel-admin .badge-mini {
        padding: 1.5px 2px;
        font-size: 4.7px;
    }
    #how .sites-table td:first-child,
    #how .sites-table th:first-child {
        width: 64%;
    }
    #how .sites-table td:nth-child(2),
    #how .sites-table th:nth-child(2) {
        width: 24%;
    }
    #how .sites-table td:nth-child(3),
    #how .sites-table th:nth-child(3) {
        width: 12%;
    }
}
.foot .wrap.foot-layout {
    align-items: flex-end;
    gap: 28px;
}
.foot-brand-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 220px;
}
.foot-brand {
    color: var(--text);
    cursor: default;
    user-select: none;
}
.foot-links {
    margin-left: auto;
    justify-content: flex-end;
    align-items: center;
    align-self: flex-end;
    text-align: right;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--text-muted);
}
.foot-links .soonlink {
    font-size: inherit;
}
.foot-bot {
    display: block;
    line-height: 1.2;
}
@media (max-width: 760px) {
    .pl-branches {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0;
    }
    .pl-branches .branch {
        min-width: 0;
    }
    .pl-branches .pnode,
    .pl-branches .pnode.head,
    .pl-branches .skipnote {
        width: calc(100% - 6px);
        max-width: none;
    }
    .pl-branches .pnode {
        padding: 10px 9px;
        gap: 7px;
        border-radius: 10px;
    }
    .pl-branches .pnode.head {
        padding: 10px;
        gap: 4px;
    }
    .pl-branches .pn-ic {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        font-size: 14px;
    }
    .pl-branches .pn-t {
        font-size: 11.5px;
    }
    .pl-branches .pn-s {
        font-size: 9.5px;
    }
    .pl-branches .btag {
        padding: 4px 6px;
        font-size: 8.5px;
    }
    .pl-branches .head .time {
        font-size: 17px;
    }
    .pl-branches .head .sub,
    .pl-branches .head .time small {
        font-size: 9px;
    }
    .pl-branches .skipnote {
        padding: 9px 8px;
        gap: 5px;
    }
    .pl-branches .skip {
        gap: 4px;
        font-size: 9px;
    }
    .pl-branches .skip .ic {
        font-size: 11px;
    }
    .isnot {
        grid-template-columns: 1fr;
    }
    .foot .wrap.foot-layout {
        flex-direction: column;
        align-items: flex-start;
    }
    .foot-links {
        margin-left: 0;
        justify-content: flex-start;
        align-self: flex-start;
        text-align: left;
    }
}
@media (hover: none), (pointer: coarse) {
    #fm-stage .window::after,
    #how .window::after {
        opacity: 0 !important;
    }
}