/* Roboto 300 and 700: the portal theme ships only 400 and 500. */
@font-face { font-family: "Roboto"; font-weight: 300; font-display: swap; src: url("fonts/roboto-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("fonts/roboto-latin-700-normal.woff2") format("woff2"); }
/* Environment Manager guide page for the FT docs portal (layout "guide" in docs-portal/ui/layouts/guide.hbs).
   Everything is scoped under .fg so the portal header, nav and footer keep their own styles. */
.fg { overflow-wrap: normal; word-wrap: normal; }
.fg h1, .fg h2, .fg h3, .fg h4, .fg h5 { font-family: inherit; color: inherit; }
/* Density: drawn at 1:1 for big screens; next to the portal nav on a laptop that is too large,
   so every length is multiplied by --k. Phones keep their own tuned sizes. */
.fg { --k: .9; }
@media (max-width: 2000px) { .fg { --k: .8; } }
@media (max-width: 1600px) { .fg { --k: .73; } }
@media (max-width: 1100px) { .fg { --k: .8; } }
@media (max-width: 760px) { .fg { --k: 1; } }
/* Own stacking context: scenes stay under the sticky bar, the page stays under the portal header. */
.fg { position: relative; isolation: isolate; }
.fg { --orange: #f37921;
    --orange-ink: #8a3d06;
    --orange-soft: #fde9da;
    --blue: #2b6eac;
    --blue-ink: #1d4f7e;
    --blue-soft: #e3edf7;
    --ink: #2b2b2b;
    --muted: #5a595f;
    --line: #dcdde0;
    --soft: #f0f0f0;
    --purple: #b02a95;
    --green: #2f7d1a;
    --red: #9b2226;
    --red-soft: #f6e3e3;
    --bg: #ffffff;
    
    --band-req: #f1f6fb;
    --band-pm: #fff5ee;
    --band-gray: #f6f6f7;

    --s1: calc(4px * var(--k)); --s2: calc(8px * var(--k)); --s3: calc(16px * var(--k)); --s4: calc(24px * var(--k)); --s5: calc(32px * var(--k)); --s6: calc(48px * var(--k)); --s7: calc(64px * var(--k)); --s8: calc(112px * var(--k));
    --r-sm: calc(6px * var(--k)); --r-md: calc(12px * var(--k)); --r-lg: calc(20px * var(--k));
    --shadow: 0 1px 2px rgba(43,43,43,.06), 0 calc(12px * var(--k)) calc(32px * var(--k)) rgba(43,43,43,.10);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --max: calc(1160px * var(--k));
    --mono: 'SFMono-Regular', Menlo, monospace;}
.fg, .fg * { box-sizing: border-box;}
html:has(.fg) { scroll-behavior: smooth; scroll-padding-top: 10.5rem;}
.fg { margin: 0; background: var(--bg); color: var(--ink); font: 400 calc(18px * var(--k))/1.55 "Roboto", system-ui, sans-serif; -webkit-font-smoothing: antialiased;}
.fg ::selection { background: var(--orange-soft); color: var(--ink);}
.fg img { display: block; max-width: 100%;}
.fg a { color: var(--blue); text-underline-offset: calc(3px * var(--k));}
.fg a:focus-visible, .fg button:focus-visible, .fg [tabindex]:focus-visible { outline: calc(3px * var(--k)) solid var(--orange); outline-offset: calc(3px * var(--k)); border-radius: calc(6px * var(--k));}
.fg .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--s4); position: relative;}
.fg h1, .fg h2, .fg h3, .fg h4 { margin: 0; font-weight: 500; text-wrap: balance;}
.fg h2 { font-size: clamp(calc(30px * var(--k)), 3.6vw, calc(46px * var(--k))); line-height: 1.12; letter-spacing: -0.015em;}
.fg h3 { font-size: calc(20px * var(--k)); line-height: 1.3;}
.fg p { margin: 0;}
.fg .lead { font-size: calc(20px * var(--k)); font-weight: 300; color: var(--muted); max-width: 60ch;}
.fg .role { font-weight: 700;}
.fg .role.req { color: var(--blue);}
.fg .role.pm { color: #a64806;}
.fg .mark { box-shadow: inset 0 -0.3em 0 var(--orange-soft);}
.fg .ui { font-weight: 500; color: var(--ink);}
.fg .nw { white-space: nowrap;}
.fg code, .fg .mono { font-family: var(--mono); font-size: .86em;}
.fg code { background: var(--soft); padding: 1px calc(6px * var(--k)); border-radius: calc(4px * var(--k));}
.fg svg.i { width: calc(20px * var(--k)); height: calc(20px * var(--k)); flex: none;}
.fg .bar { position: sticky; top: 6rem; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 rgba(43,43,43,.08);}
.fg .bar .wrap { display: flex; align-items: center; gap: var(--s4); height: calc(64px * var(--k));}
.fg .bar img { height: calc(30px * var(--k)); width: auto;}
.fg .bar nav { display: flex; gap: var(--s4); margin-left: auto; font-size: calc(15px * var(--k)); white-space: nowrap;}
.fg .bar nav a { color: var(--muted); text-decoration: none; padding: var(--s2) 0; transition: color 150ms ease;}
.fg .bar nav a:hover { color: var(--ink);}
@media (max-width: 1120px) {
  .fg .bar nav { display: none;}
}
@media (prefers-reduced-transparency: reduce) {
  .fg .bar { background: #fff; backdrop-filter: none;}
}
.fg .aud { display: inline-flex; padding: calc(3px * var(--k)); background: var(--soft); border-radius: calc(999px * var(--k)); margin-left: auto;}
@media (min-width: 1121px) {
  .fg .aud { margin-left: var(--s2);}
}
.fg .aud button { font: 500 calc(14px * var(--k)) "Roboto", sans-serif; color: var(--muted); border: 0; background: transparent; padding: var(--s2) var(--s3); min-height: calc(36px * var(--k)); border-radius: calc(999px * var(--k)); cursor: pointer; white-space: nowrap; transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--ease-out);}
.fg .aud button:hover { color: var(--ink);}
.fg .aud button:active { transform: scale(0.97);}
.fg .aud button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(43,43,43,.12), 0 2px calc(8px * var(--k)) rgba(43,43,43,.08);}
.fg .aud button[data-aud="req"][aria-pressed="true"] { color: var(--blue);}
.fg .aud button[data-aud="pm"][aria-pressed="true"] { color: #a64806;}
@media (max-width: 560px) {
  .fg .bar .wrap { gap: var(--s3); padding: 0 var(--s3);}
  .fg .bar img { height: calc(20px * var(--k));}
  .fg .aud button { padding: var(--s2) calc(8px * var(--k)); font-size: calc(13px * var(--k));}
}
@media (max-width: 400px) {
  .fg .bar img { height: calc(16px * var(--k));}
  .fg .aud button { padding: var(--s2) calc(6px * var(--k)); font-size: calc(12px * var(--k));}
}
.fg[data-aud="pm"] [data-for="req"], .fg[data-aud="req"] [data-for="pm"] { display: none;}
.fg .aud-note { position: fixed; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px)); z-index: 11; display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: calc(999px * var(--k)); background: var(--ink); color: #fff; font-size: calc(15px * var(--k)); box-shadow: 0 calc(8px * var(--k)) calc(28px * var(--k)) rgba(43,43,43,.28); transform: translate(-50%, 0); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); white-space: nowrap; max-width: calc(100vw - 32px);}
.fg .aud-note:not(.show) { opacity: 0; transform: translate(-50%, calc(12px * var(--k))); pointer-events: none; visibility: hidden; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s 200ms;}
.fg .aud-note button { font: 500 calc(14px * var(--k)) "Roboto", sans-serif; border: 0; border-radius: calc(999px * var(--k)); padding: var(--s2) var(--s3); min-height: calc(36px * var(--k)); background: var(--orange); color: var(--ink); cursor: pointer; transition: transform 120ms var(--ease-out);}
.fg .aud-note button:active { transform: scale(0.97);}
.fg section { padding: var(--s8) 0; position: relative; overflow: hidden;}
@media (max-width: 640px) {
  .fg section { padding: var(--s7) 0;}
}
.fg .band-req { background: var(--band-req);}
.fg .band-pm { background: var(--band-pm);}
.fg .band-gray { background: var(--band-gray);}
.fg .head { display: grid; gap: var(--s3); margin-bottom: var(--s6); max-width: calc(780px * var(--k));}
.fg .circle { position: absolute; border-radius: 50%; pointer-events: none;}
.fg .rv { opacity: 0; transform: translateY(calc(20px * var(--k))); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms);}
.fg .rv.in { opacity: 1; transform: none;}
.fg .player { position: relative; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: var(--shadow);}
.fg .vbtn { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 7; width: calc(44px * var(--k)); height: calc(44px * var(--k)); border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(43,43,43,.62); backdrop-filter: blur(calc(8px * var(--k))); -webkit-backdrop-filter: blur(calc(8px * var(--k))); cursor: pointer; opacity: 0; transform: scale(.94); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), background-color 150ms ease;}
.fg .player:hover .vbtn, .fg .vbtn:focus-visible, .fg .player.paused .vbtn { opacity: 1; transform: none;}
.fg .vbtn:hover { background: rgba(43,43,43,.8);}
.fg .vbtn:active { transform: scale(.94);}
.fg .vbtn svg { width: calc(18px * var(--k)); height: calc(18px * var(--k));}
@media (hover: none) {
  .fg .vbtn { opacity: 1; transform: none;}
}
.fg .cap { font-size: calc(14px * var(--k)); color: var(--muted); margin-top: var(--s3); display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap;}
.fg .tag { font-size: calc(12px * var(--k)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green);}
.fg .tag.illu { color: var(--purple);}
.fg .wide { max-width: calc(1060px * var(--k));}
.fg .hero { padding: var(--s7) 0 var(--s8);}
.fg .hero .g1 { width: calc(460px * var(--k)); height: calc(460px * var(--k)); right: -140px; top: -200px; background: #ebecec;}
.fg .hero .g2 { width: calc(260px * var(--k)); height: calc(260px * var(--k)); right: calc(260px * var(--k)); top: -150px; background: #ebecec;}
.fg .hero .g3 { width: calc(200px * var(--k)); height: calc(200px * var(--k)); right: calc(40px * var(--k)); top: calc(210px * var(--k)); background: #ebecec;}
@media (max-width: 700px) {
  .fg .hero .g2, .fg .hero .g3 { display: none;}
}
.fg .hero .c1 { width: calc(150px * var(--k)); height: calc(150px * var(--k)); left: -75px; top: calc(360px * var(--k)); background: var(--purple);}
.fg .hero .c2 { width: calc(210px * var(--k)); height: calc(210px * var(--k)); right: 7%; bottom: -130px; background: var(--orange);}
.fg .hero h1 { font-size: clamp(calc(42px * var(--k)), 6vw, calc(76px * var(--k))); line-height: 1.04; letter-spacing: -0.025em; max-width: 15ch; margin-bottom: var(--s4);}
.fg .hero .lead { margin-bottom: var(--s6);}
.fg .hero .player { max-width: calc(1060px * var(--k));}
.fg .pipe { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); padding: var(--s6) var(--s5) var(--s6);}
.fg .pipe-rail { position: absolute; left: 10%; right: 10%; top: calc(var(--s6) + calc(52px * var(--k))); height: 2px; background: #b9bcc2;}
.fg .pipe-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--blue); transition: width 900ms var(--ease-in-out);}
.fg .pipe-dot { position: absolute; top: 50%; left: 0; width: calc(12px * var(--k)); height: calc(12px * var(--k)); margin: -6px 0 0 -6px; border-radius: 50%; background: var(--orange); transition: left 900ms var(--ease-in-out), opacity 200ms;}
.fg .lbl-up { font-size: calc(13px * var(--k)); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; height: calc(18px * var(--k));}
.fg .node { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: calc(10px * var(--k));}
.fg .node .ic { width: calc(68px * var(--k)); height: calc(68px * var(--k)); border-radius: var(--r-md); background: #fff; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--muted); transition: border-color 300ms ease, color 300ms ease, transform 500ms var(--ease-out), box-shadow 300ms ease;}
.fg .node .ic svg { width: calc(30px * var(--k)); height: calc(30px * var(--k));}
.fg .node h4 { font-size: calc(16px * var(--k)); font-weight: 500;}
.fg .node p { font-size: calc(13px * var(--k)); color: var(--muted); line-height: 1.4; max-width: 19ch;}
.fg .node .out { font-size: calc(12px * var(--k)); font-weight: 700; letter-spacing: .05em; padding: calc(4px * var(--k)) calc(8px * var(--k)); border-radius: var(--r-sm); background: var(--blue-soft); color: var(--blue-ink); opacity: 0; transform: translateY(calc(6px * var(--k))); transition: opacity 300ms ease, transform 400ms var(--ease-out); white-space: nowrap;}
.fg .node.on .ic { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 calc(4px * var(--k)) var(--blue-soft);}
.fg .node.on .out { opacity: 1; transform: none;}
.fg .node.last.on .ic { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 0 calc(4px * var(--k)) var(--orange-soft);}
.fg .node.last .out { background: var(--orange); color: var(--ink);}
.fg .node .ok { position: absolute; top: calc(20px * var(--k)); left: calc(50% + calc(22px * var(--k))); width: calc(22px * var(--k)); height: calc(22px * var(--k)); border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 calc(3px * var(--k)) #fff; transform: scale(0); transition: transform 350ms var(--ease-out) 200ms;}
.fg .node .ok svg { width: calc(13px * var(--k)); height: calc(13px * var(--k));}
.fg .node.on .ok { transform: none;}
@media (max-width: 820px) {
  .fg .pipe { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5) var(--s4) var(--s7);}
  .fg .pipe-rail { display: none;}
  .fg .node { grid-template-columns: calc(64px * var(--k)) 1fr; justify-items: start; text-align: left; column-gap: var(--s3); row-gap: 2px;}
  .fg .node .ic { grid-row: span 3; width: calc(60px * var(--k)); height: calc(60px * var(--k));}
  .fg .node p { max-width: none;}
  .fg .node .ok { left: calc(46px * var(--k)); top: -6px;}
  .fg .lbl-up { display: none;}
}
.fg .vs { display: grid; grid-template-columns: 1fr calc(56px * var(--k)) 1.3fr; gap: var(--s3); align-items: center;}
@media (max-width: 860px) {
  .fg .vs { grid-template-columns: 1fr;}
  .fg .vs .arrow { justify-self: center;}
}
.fg .card { border-radius: var(--r-lg); padding: var(--s5);}
.fg .card h3 { margin-bottom: var(--s5); font-size: calc(22px * var(--k)); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;}
.fg .card h3 small { font-size: calc(15px * var(--k)); font-weight: 400; color: var(--muted);}
.fg .card.old { border: 1.5px dashed #c9cacd;}
.fg .card.old h3 { color: var(--muted);}
.fg .old ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4);}
.fg .old li { display: grid; grid-template-columns: calc(36px * var(--k)) 1fr; gap: var(--s3); align-items: center; color: var(--muted);}
.fg .old li .ic { width: calc(36px * var(--k)); height: calc(36px * var(--k)); border-radius: calc(10px * var(--k)); display: grid; place-items: center; background: #e9e9eb; color: #8a8a90;}
.fg .old .x { -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(#8a8a90, #8a8a90) no-repeat 0 55% / 0 2px; transition: background-size 450ms var(--ease-out); transition-delay: calc(300ms + var(--i) * 180ms);}
.fg .vs.in .old .x { background-size: 100% 2px;}
.fg .vs .arrow { width: calc(56px * var(--k)); height: calc(56px * var(--k)); border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--ink); box-shadow: 0 calc(6px * var(--k)) calc(18px * var(--k)) rgba(243,121,33,.35); opacity: 0; transform: scale(.9); transition: opacity 400ms var(--ease-out) 1100ms, transform 400ms var(--ease-out) 1100ms;}
.fg .vs.in .arrow { opacity: 1; transform: none;}
@media (max-width: 860px) {
  .fg .vs.in .arrow { transform: rotate(90deg);}
}
.fg .card.now { background: #fff; box-shadow: var(--shadow);}
.fg .moves { display: grid; grid-template-columns: 1fr calc(28px * var(--k)) 1fr; gap: var(--s3); align-items: start;}
.fg .mv { display: grid; gap: var(--s2); justify-items: start;}
.fg .mv p { font-size: calc(16px * var(--k)); color: var(--muted);}
.fg .mv p b { font-weight: 500; color: var(--ink);}
.fg .moves .chev { color: #b9bcc2; margin-top: calc(6px * var(--k));}
.fg .status { font-size: calc(13px * var(--k)); font-weight: 700; letter-spacing: .05em; padding: calc(7px * var(--k)) calc(12px * var(--k)); border-radius: var(--r-sm); white-space: nowrap;}
.fg .status.s-req { background: var(--blue-soft); color: var(--blue-ink);}
.fg .status.s-go { background: var(--orange); color: var(--ink);}
.fg .auto-label { margin: var(--s5) 0 var(--s3); padding-top: var(--s4); border-top: 1px solid var(--soft); font-size: calc(15px * var(--k)); font-weight: 500; color: var(--muted);}
.fg .auto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);}
.fg .auto li { display: flex; align-items: center; gap: var(--s2); font-size: calc(16px * var(--k)); opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(1400ms + var(--i) * 120ms);}
.fg .vs.in .auto li { opacity: 1; transform: none;}
.fg .ok-dot { width: calc(22px * var(--k)); height: calc(22px * var(--k)); border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; flex: none;}
.fg .ok-dot svg { width: calc(13px * var(--k)); height: calc(13px * var(--k));}
@media (max-width: 480px) {
  .fg .moves { grid-template-columns: 1fr;}
  .fg .moves .chev { transform: rotate(90deg); margin: 0;}
  .fg .auto { grid-template-columns: 1fr;}
}
.fg .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); position: relative;}
.fg .steps::before { content: ""; position: absolute; left: calc(14px * var(--k)); right: calc(14px * var(--k)); top: calc(13px * var(--k)); height: calc(3px * var(--k)); border-radius: 2px; background: linear-gradient(90deg, var(--blue) 0 20%, var(--ink) 20% 80%, var(--orange) 80%); transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--ease-in-out) 150ms;}
.fg .steps-wrap.in .steps::before { transform: scaleX(1);}
.fg .steps li { position: relative; display: grid; gap: var(--s2); align-content: start; padding-top: var(--s6);}
.fg .steps .n { position: absolute; top: 0; left: 0; width: calc(30px * var(--k)); height: calc(30px * var(--k)); border-radius: 50%; display: grid; place-items: center; font-size: calc(14px * var(--k)); font-weight: 700; color: #fff; background: var(--ink); box-shadow: 0 0 0 calc(5px * var(--k)) #fff;}
.fg .steps li.d .n { background: var(--blue);}
.fg .steps li.q .n { background: var(--orange); color: var(--ink);}
.fg .steps h3 { font-size: calc(19px * var(--k));}
.fg .steps p { font-size: calc(15px * var(--k)); color: var(--muted); line-height: 1.5;}
.fg .who { font-size: calc(13px * var(--k)); font-weight: 500;}
.fg .who.d { color: var(--blue);}
.fg .who.q { color: #a64806;}
.fg .who.a { color: var(--muted);}
@media (max-width: 900px) {
  .fg .steps { grid-template-columns: 1fr; gap: var(--s5);}
  .fg .steps::before { left: calc(13px * var(--k)); right: auto; top: calc(14px * var(--k)); bottom: calc(14px * var(--k)); width: calc(3px * var(--k)); height: auto; transform: none; background: linear-gradient(180deg, var(--blue) 0 20%, var(--ink) 20% 80%, var(--orange) 80%);}
  .fg .steps li { padding: 0 0 0 var(--s6);}
}
.fg .pts { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s6);}
.fg .pts.one { grid-template-columns: 1fr; margin-top: 0; gap: var(--s4);}
@media (max-width: 760px) {
  .fg .pts { grid-template-columns: 1fr;}
}
.fg .pts li { display: grid; grid-template-columns: calc(36px * var(--k)) 1fr; gap: var(--s3);}
.fg .pts .ic { width: calc(36px * var(--k)); height: calc(36px * var(--k)); border-radius: calc(10px * var(--k)); display: grid; place-items: center; background: #fff; color: var(--blue); box-shadow: 0 1px 2px rgba(43,43,43,.08);}
.fg .band-pm .pts .ic { color: #a64806;}
.fg .pts .h { font-weight: 500; display: block; margin-bottom: 2px;}
.fg .pts .t { color: var(--muted); font-size: calc(16px * var(--k));}
.fg .split { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s6); margin-top: var(--s6); align-items: start;}
@media (max-width: 900px) {
  .fg .split { grid-template-columns: 1fr;}
}
.fg .two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s6); align-items: start;}
@media (max-width: 900px) {
  .fg .two { grid-template-columns: minmax(0, 1fr);}
}
.fg .lz { display: inline-block; font-size: calc(13px * var(--k)); font-weight: 500; padding: calc(3px * var(--k)) calc(10px * var(--k)); border-radius: calc(4px * var(--k)); border: 1px solid; white-space: nowrap;}
.fg .lz.b { background: #dbe8fb; color: #163f73; border-color: #a9c6ee;}
.fg .lz.g { background: #dff1cf; color: #285c12; border-color: #b2dc90;}
.fg .lz.y { background: #fbefd2; color: #6b4a00; border-color: #ecd193;}
.fg .lz.r { background: var(--red-soft); color: var(--red); border-color: #e2b4b4;}
.fg .lz.o { background: var(--orange-soft); color: var(--orange-ink); border-color: #f5c39c;}
.fg .lz.n { background: var(--soft); color: var(--muted); border-color: var(--line);}
.fg dl.states { display: grid; grid-template-columns: max-content 1fr; gap: var(--s3) var(--s4); margin: 0; font-size: calc(16px * var(--k)); align-items: baseline;}
.fg dl.states dd { margin: 0; color: var(--muted);}
.fg .scene { padding: var(--s5); background: #fff;}
@media (max-width: 560px) {
  .fg .scene { padding: var(--s3);}
}
.fg .win { background: #fff; border-radius: calc(10px * var(--k)); border: 1px solid var(--line); overflow: hidden; position: relative;}
.fg .win-bar { display: flex; align-items: center; gap: calc(8px * var(--k)); padding: calc(9px * var(--k)) calc(14px * var(--k)); border-bottom: 1px solid var(--line); background: var(--band-gray); font-size: calc(13px * var(--k)); color: var(--muted);}
.fg .win-bar i { width: calc(10px * var(--k)); height: calc(10px * var(--k)); border-radius: 50%; background: #dcdde0; display: inline-block;}
.fg .win-bar .crumb { margin-left: calc(10px * var(--k));}
.fg .win-bar .crumb b { color: var(--ink); font-weight: 500;}
.fg .win-body { padding: calc(22px * var(--k)) calc(24px * var(--k)) calc(26px * var(--k)); font-size: calc(14px * var(--k)); position: relative;}
@media (max-width: 560px) {
  .fg .win-body { padding: calc(16px * var(--k));}
}
.fg .fp h4 { font-size: calc(20px * var(--k)); margin-bottom: calc(4px * var(--k));}
.fg .fp .sub { color: var(--muted); font-size: calc(13px * var(--k)); margin-bottom: calc(18px * var(--k));}
.fg .fld { margin-bottom: calc(14px * var(--k)); position: relative;}
.fg .fld label { display: block; font-size: calc(12px * var(--k)); font-weight: 500; color: var(--muted); margin-bottom: calc(5px * var(--k));}
.fg .inp { height: calc(38px * var(--k)); border: 1.5px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 0 calc(10px * var(--k)); display: flex; align-items: center; justify-content: space-between; color: #8a8a90; transition: border-color 200ms ease, box-shadow 200ms ease;}
.fg .inp .v { color: var(--ink);}
.fg .inp .caret { width: calc(8px * var(--k)); height: calc(8px * var(--k)); border-right: 2px solid #8a8a90; border-bottom: 2px solid #8a8a90; transform: rotate(45deg) translateY(-3px);}
.fg .swap { display: grid;}
.fg .swap > * { grid-area: 1 / 1; transition: opacity 200ms ease, transform 300ms var(--ease-out);}
.fg .swap .b { opacity: 0; transform: translateY(calc(4px * var(--k)));}
.fg .collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease-out), opacity 300ms ease; opacity: 0;}
.fg .collapse > div { overflow: hidden;}
.fg .dd { position: absolute; left: 0; right: 0; top: calc(62px * var(--k)); z-index: 3; background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow); border: 1px solid var(--line); padding: calc(4px * var(--k)) 0; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; pointer-events: none; transition: opacity 160ms ease, transform 220ms var(--ease-out);}
.fg .dd div { padding: calc(8px * var(--k)) calc(12px * var(--k)); font: calc(13px * var(--k)) var(--mono); display: flex; justify-content: space-between; color: var(--ink); transition: background-color 120ms ease;}
.fg .dd div span { color: var(--muted);}
.fg .dd div.hl { background: var(--blue-soft);}
.fg .row-btn { display: flex; align-items: center; gap: calc(12px * var(--k)); margin-top: calc(6px * var(--k)); flex-wrap: wrap;}
.fg .btn { height: calc(36px * var(--k)); padding: 0 calc(16px * var(--k)); border-radius: var(--r-sm); border: 0; font: 500 calc(14px * var(--k)) "Roboto", sans-serif; display: inline-flex; align-items: center; background: var(--soft); color: #a3a3a8; transition: background-color 200ms ease, color 200ms ease, transform 120ms var(--ease-out);}
.fg .btn.press { transform: scale(.95);}
.fg .row-btn .hint { font-size: calc(13px * var(--k)); color: var(--muted);}
.fg .row-btn .hint .mono { color: var(--ink);}
.fg .msg { margin-top: calc(16px * var(--k)); border-radius: var(--r-sm); padding: calc(12px * var(--k)) calc(14px * var(--k)); display: grid; gap: calc(4px * var(--k)); background: var(--blue-soft); border: 1px solid #a9c6ee; opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 260ms ease, transform 400ms var(--ease-out), background-color 300ms ease, border-color 300ms ease;}
.fg .msg b { font-weight: 500; font-size: calc(13px * var(--k));}
.fg .msg .line { display: flex; gap: calc(8px * var(--k)); align-items: center; font-size: calc(13px * var(--k));}
.fg .msg a { font-size: calc(13px * var(--k));}
.fg .spin { width: calc(14px * var(--k)); height: calc(14px * var(--k)); border-radius: 50%; border: 2px solid rgba(43,110,172,.25); border-top-color: var(--blue); animation: fg-spin 800ms linear infinite;}
@keyframes fg-spin { to { transform: rotate(360deg); } }
.fg .msg.ok { background: #dff1cf; border-color: #b2dc90;}
.fg .msg.ok .spin { display: none;}
.fg .tick { color: var(--green); font-weight: 700; display: none;}
.fg .msg.ok .tick { display: inline;}
.fg .cursor { position: absolute; z-index: 6; left: 0; top: 0; width: calc(22px * var(--k)); height: calc(22px * var(--k)); pointer-events: none; transition: transform 700ms var(--ease-in-out), opacity 200ms ease; filter: drop-shadow(0 2px calc(3px * var(--k)) rgba(0,0,0,.25));}
.fg .cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: calc(20px * var(--k)); height: calc(20px * var(--k)); border-radius: 50%; background: rgba(243,121,33,.4); transform: scale(0); opacity: 0;}
.fg .cursor.click::after { animation: fg-ripple 450ms var(--ease-out);}
@keyframes fg-ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.fg .em { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #2b2b2b; font-size: calc(13px * var(--k)); line-height: 1.45; background: #f1f4f8; border-radius: calc(12px * var(--k)); border: 1px solid #d3dbe4; overflow: hidden; position: relative;}
.fg .em .bar2 { display: flex; align-items: center; gap: calc(12px * var(--k)); background: #fff; border-bottom: 1px solid #d3dbe4; padding: calc(10px * var(--k)) calc(16px * var(--k));}
.fg .em .bar2 b { font-size: calc(15px * var(--k)); font-weight: 600;}
.fg .em .bar2 small { color: #666;}
.fg .em .bar2 .r { margin-left: auto; display: flex; gap: calc(8px * var(--k)); align-items: center; color: #555; font-size: calc(12px * var(--k));}
.fg .em .ob { border: 1px solid #c5ced8; border-radius: calc(6px * var(--k)); padding: calc(3px * var(--k)) calc(10px * var(--k)); background: #fff; font-size: calc(12px * var(--k)); color: #2b2b2b; white-space: nowrap;}
.fg .em .pb { border-radius: calc(6px * var(--k)); padding: calc(5px * var(--k)) calc(12px * var(--k)); background: #2b6eac; color: #fff; font-size: calc(12px * var(--k)); font-weight: 500; white-space: nowrap; transition: transform 120ms var(--ease-out), background-color 150ms ease;}
.fg .em .pb.press { transform: scale(.95); background: #1f5a90;}
.fg .em .pb.dis { background: #c9d3dd; color: #fff;}
.fg .em .tb2 { display: flex; background: #fff; border-bottom: 1px solid #d3dbe4;}
.fg .em .tb2 span { flex: 1; text-align: center; padding: calc(8px * var(--k)) 0; color: #555; font-size: calc(12.5px * var(--k));}
.fg .em .tb2 span.on { background: #d6e4f2; color: #1f4e7a; font-weight: 600; box-shadow: inset 0 -2px 0 #1f4e7a;}
.fg .em .pane { padding: calc(16px * var(--k));}
.fg .em .card2 { background: #fff; border: 1px solid #d3dbe4; border-radius: calc(12px * var(--k)); padding: calc(14px * var(--k)) calc(16px * var(--k));}
.fg .em h5 { margin: 0 0 calc(4px * var(--k)); font-size: calc(16px * var(--k)); font-weight: 600;}
.fg .em .mut { color: #666;}
.fg .em .mono2 { font-family: var(--mono); font-size: calc(12px * var(--k));}
.fg .em .inp2 { height: calc(34px * var(--k)); border-radius: calc(8px * var(--k)); background: #eef2f6; border: 1.5px solid transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(10px * var(--k)); color: #8a8a90; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;}
.fg .em .inp2 .v { color: #2b2b2b;}
.fg .em .inp2.f { border-color: #2b6eac; box-shadow: 0 0 0 calc(3px * var(--k)) #d6e4f2; background: #fff;}
.fg .em .lab { font-size: calc(11.5px * var(--k)); font-weight: 500; color: #555; margin: 0 0 calc(4px * var(--k));}
.fg .em .hint { font-size: calc(11px * var(--k)); color: #777; margin-top: calc(3px * var(--k));}
.fg .em .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--k)) calc(16px * var(--k));}
@media (max-width: 640px) {
  .fg .em .g2 { grid-template-columns: 1fr;}
}
.fg .em .caret2 { width: calc(7px * var(--k)); height: calc(7px * var(--k)); border-right: 1.5px solid #777; border-bottom: 1.5px solid #777; transform: rotate(45deg) translateY(-2px); flex: none;}
.fg .em table { width: 100%; border-collapse: collapse;}
.fg .em th { text-align: left; font-size: calc(10.5px * var(--k)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #666; padding: calc(8px * var(--k)) calc(10px * var(--k)); border-bottom: 1px solid #d3dbe4;}
.fg .em td { padding: calc(8px * var(--k)) calc(10px * var(--k)); border-bottom: 1px solid #e6ebf0; vertical-align: middle;}
.fg .em tr.grp td { font-size: calc(11.5px * var(--k)); font-weight: 600; color: #444; background: #fafbfc;}
.fg .em .seg { display: inline-flex; border: 1px solid #c5ced8; border-radius: calc(6px * var(--k)); overflow: hidden; font-size: calc(11.5px * var(--k)); background: #fff; white-space: nowrap;}
.fg .em .seg span { padding: calc(3px * var(--k)) calc(8px * var(--k)); border-left: 1px solid #c5ced8; color: #444; transition: background-color 200ms ease, color 200ms ease;}
.fg .em .seg span:first-child { border-left: 0;}
.fg .em .seg span.on { background: #d6e4f2; color: #1f4e7a; font-weight: 600;}
.fg .em .bdg { display: inline-flex; align-items: center; gap: calc(5px * var(--k)); font-size: calc(11px * var(--k)); font-weight: 600; padding: 2px calc(8px * var(--k)); border-radius: calc(999px * var(--k)); white-space: nowrap; transition: background-color 300ms ease, color 300ms ease;}
.fg .em .bdg::before { content: ""; width: calc(6px * var(--k)); height: calc(6px * var(--k)); border-radius: 50%; background: currentColor;}
.fg .bdg.ok { background: #e3f4ea; color: #1f7a47;}
.fg .bdg.st { background: #eef2f6; color: #666;}
.fg .bdg.pr { background: #dbe8fb; color: #1f4e7a;}
.fg .bdg.bad { background: #fde8e7; color: #b42318;}
.fg .bdg.oos { background: #fdf1d6; color: #8a5a00;}
.fg .em .menu { position: absolute; z-index: 4; background: #fff; border: 1px solid #d3dbe4; border-radius: calc(8px * var(--k)); box-shadow: var(--shadow); padding: calc(4px * var(--k)) 0; font-size: calc(12px * var(--k)); opacity: 0; transform: translateY(-4px); transition: opacity 160ms ease, transform 220ms var(--ease-out); pointer-events: none;}
.fg .em .menu div { padding: calc(6px * var(--k)) calc(12px * var(--k)); white-space: nowrap;}
.fg .em .menu div.hl { background: #eef2f6;}
.fg .em .toast { position: absolute; right: calc(14px * var(--k)); bottom: calc(14px * var(--k)); z-index: 5; background: #2b6eac; color: #fff; border-radius: calc(8px * var(--k)); padding: calc(8px * var(--k)) calc(14px * var(--k)); font-size: calc(12px * var(--k)); box-shadow: var(--shadow); opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 250ms ease, transform 350ms var(--ease-out);}
.fg .em .toast.on { opacity: 1; transform: none;}
.fg .em .toast.okc { background: #1f7a47;}
.fg .lg-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(340px * var(--k));}
@media (max-width: 760px) {
  .fg .lg-wrap { grid-template-columns: 1fr;}
  .fg .lg-left { display: none;}
}
.fg .lg-left { padding: calc(28px * var(--k)); background: linear-gradient(#dfe9f3 1px, transparent 1px) 0 0 / calc(24px * var(--k)) calc(24px * var(--k)), linear-gradient(90deg, #dfe9f3 1px, transparent 1px) 0 0 / calc(24px * var(--k)) calc(24px * var(--k)), #e8eff6; display: grid; align-content: center; gap: calc(10px * var(--k));}
.fg .lg-left b { font-size: calc(24px * var(--k)); line-height: 1.15; letter-spacing: -0.01em; color: #1d2b3a;}
.fg .lg-left p { color: #555; font-size: calc(12.5px * var(--k)); max-width: 34ch;}
.fg .lg-right { display: grid; place-items: center; padding: calc(24px * var(--k));}
.fg .lg-card { width: 100%; max-width: calc(320px * var(--k)); background: #fff; border: 1px solid #d3dbe4; border-radius: calc(14px * var(--k)); padding: calc(22px * var(--k)); box-shadow: var(--shadow); text-align: center; position: relative;}
.fg .lg-card .t1 { font-weight: 600; font-size: calc(14px * var(--k));}
.fg .lg-card .t2 { color: #666; font-size: calc(12px * var(--k)); margin: calc(4px * var(--k)) 0 calc(14px * var(--k));}
.fg .lg-card .pb { display: block; padding: calc(8px * var(--k)); margin-top: calc(12px * var(--k));}
.fg .lg-step { transition: opacity 250ms ease, transform 350ms var(--ease-out);}
.fg .lg-step.b { position: absolute; inset: calc(22px * var(--k)); opacity: 0; transform: translateX(calc(12px * var(--k))); pointer-events: none;}
.fg .sc-login.s3 .lg-step.a { opacity: 0; transform: translateX(-12px);}
.fg .sc-login.s3 .lg-step.b { opacity: 1; transform: none;}
.fg .otp { display: flex; gap: calc(6px * var(--k)); justify-content: center; margin: calc(10px * var(--k)) 0 calc(4px * var(--k));}
.fg .otp i { width: calc(30px * var(--k)); height: calc(36px * var(--k)); border-radius: calc(8px * var(--k)); background: #eef2f6; border: 1.5px solid transparent; display: grid; place-items: center; font: 600 calc(15px * var(--k)) var(--mono); font-style: normal; color: #2b2b2b; transition: border-color 150ms ease, background-color 150ms ease;}
.fg .otp i.f { border-color: #2b6eac; background: #fff;}
.fg .lg-ok { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.92); border-radius: calc(14px * var(--k)); opacity: 0; transition: opacity 300ms ease; font-weight: 600; color: #1f7a47; gap: calc(6px * var(--k)); align-content: center;}
.fg .sc-login.s6 .lg-ok { opacity: 1;}
.fg .cap-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12px * var(--k)); background: #eef2f6; border-radius: calc(10px * var(--k)); padding: calc(12px * var(--k)) calc(14px * var(--k)); margin-bottom: calc(12px * var(--k));}
@media (max-width: 640px) {
  .fg .cap-band { grid-template-columns: 1fr 1fr;}
}
.fg .cap-band div { font-size: calc(11.5px * var(--k)); color: #555;}
.fg .cap-band b { float: right; font-weight: 500; color: #2b2b2b;}
.fg .cap-band .bar3 { height: calc(4px * var(--k)); border-radius: calc(4px * var(--k)); background: #cfd8e2; margin: calc(6px * var(--k)) 0 calc(4px * var(--k)); overflow: hidden; display: flex;}
.fg .cap-band .bar3 i { display: block; height: 100%; width: 0; transition: width 900ms var(--ease-out);}
.fg .cap-band .bar3 i.y { background: #1f4e7a;}
.fg .cap-band .bar3 i.o { background: #8fb3d6;}
.fg .sc-list.s1 .bar3 i { width: var(--w);}
.fg .sc-list tbody tr { opacity: 0; transform: translateY(calc(6px * var(--k))); transition: opacity 300ms ease, transform 400ms var(--ease-out);}
.fg .sc-list.s2 tbody tr { opacity: 1; transform: none;}
.fg .sc-list.s2 tbody tr:nth-child(2) { transition-delay: 80ms;}
.fg .sc-list.s2 tbody tr:nth-child(3) { transition-delay: 160ms;}
.fg .sc-list.s2 tbody tr:nth-child(4) { transition-delay: 240ms;}
.fg .sc-list.s2 tbody tr:nth-child(5) { transition-delay: 320ms;}
.fg .sc-list.s2 tbody tr:nth-child(6) { transition-delay: 400ms;}
.fg .sc-list .nm { color: #1f4e7a; font-family: var(--mono); font-size: calc(12.5px * var(--k));}
.fg .sc-list .sub3 { display: block; font-size: calc(11px * var(--k)); color: #777;}
.fg .sc-list .rowb { display: inline-flex; gap: calc(6px * var(--k));}
.fg .sc-list tr.mine td { background: #f6f9fc;}
.fg .sc-list .swapb .b { display: none;}
.fg .sc-list.s3 .swapb .a { display: none;}
.fg .sc-list.s3 .swapb .b { display: inline-flex;}
.fg .tools { display: flex; gap: calc(8px * var(--k)); margin-bottom: calc(10px * var(--k)); flex-wrap: wrap; align-items: center;}
.fg .tools .inp2 { min-width: calc(200px * var(--k));}
.fg .tools .r { margin-left: auto; font-size: calc(11.5px * var(--k)); color: #666; display: flex; gap: calc(6px * var(--k)); align-items: center;}
.fg .sw { width: calc(28px * var(--k)); height: calc(16px * var(--k)); border-radius: calc(999px * var(--k)); background: #2b6eac; position: relative; display: inline-block;}
.fg .sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: calc(12px * var(--k)); height: calc(12px * var(--k)); border-radius: 50%; background: #fff;}
.fg .sw.off { background: #c9d3dd;}
.fg .sw.off::after { right: auto; left: 2px;}
.fg .sc-create .after-name { transition: opacity 300ms ease;}
.fg .row-acs td { transition: background-color 300ms ease;}
.fg .sc-create.s3 .row-acs td { background: #eaf2fa;}
.fg .sc-create .acs-ver .swap .b, .fg .sc-create .acs-build .b { opacity: 0;}
.fg .sc-create.s4 .acs-ver .swap .a { opacity: 0;}
.fg .sc-create.s4 .acs-ver .swap .b { opacity: 1; transform: none;}
.fg .sc-create.s4 .acs-build .b { opacity: 1;}
.fg .sc-create .acs-build .b { transition: opacity 300ms ease; color: #1f4e7a; font-size: calc(11.5px * var(--k));}
.fg .sumbar { display: flex; align-items: center; gap: calc(12px * var(--k)); justify-content: space-between; flex-wrap: wrap; background: #fff; border-top: 1px solid #d3dbe4; padding: calc(10px * var(--k)) calc(16px * var(--k)); font-size: calc(12px * var(--k));}
.fg .sumbar .swap { flex: 1; min-width: 0;}
.fg .sc-create.s3 .sumbar .swap .a { opacity: 0;}
.fg .sc-create.s3 .sumbar .swap .b { opacity: 1; transform: none;}
.fg .result { position: absolute; inset: 0; z-index: 3; background: rgba(241,244,248,.96); display: grid; place-items: center; padding: calc(16px * var(--k)); opacity: 0; pointer-events: none; transition: opacity 300ms ease;}
.fg .sc-create.s6 .result { opacity: 1;}
.fg .result .card2 { max-width: calc(460px * var(--k)); width: 100%; transform: translateY(calc(10px * var(--k))); transition: transform 450ms var(--ease-out);}
.fg .sc-create.s6 .result .card2 { transform: none;}
.fg .result .brow { display: flex; justify-content: space-between; align-items: center; gap: calc(10px * var(--k)); border-top: 1px solid #e6ebf0; margin-top: calc(10px * var(--k)); padding-top: calc(10px * var(--k)); font-size: calc(12px * var(--k));}
.fg .result .bst { display: inline-flex; align-items: center; gap: calc(6px * var(--k)); font-weight: 600; color: #1f4e7a;}
.fg .result .bst .spin { width: calc(12px * var(--k)); height: calc(12px * var(--k)); border-width: 2px;}
.fg .sc-create.s7 .result .bst { color: #1f7a47;}
.fg .sc-create.s7 .result .bst .spin { display: none;}
.fg .result .acts2 { display: flex; gap: calc(8px * var(--k)); margin-top: calc(12px * var(--k));}

.fg .mh { display: flex; align-items: flex-start; gap: calc(10px * var(--k)); padding: calc(14px * var(--k)) calc(16px * var(--k)) calc(10px * var(--k)); background: #fff; flex-wrap: wrap;}
.fg .mh .nm2 { font: 600 calc(16px * var(--k)) var(--mono);}
.fg .mh .meta2 { width: 100%; font-size: calc(11.5px * var(--k)); color: #666; margin-top: -4px;}
.fg .mh .meta2 a { color: #1f4e7a; font-weight: 600; text-decoration: underline;}
.fg .mh .r { margin-left: auto; display: flex; gap: calc(6px * var(--k));}
.fg .mpanels { position: relative; min-height: calc(290px * var(--k));}
.fg .mp { position: absolute; inset: 0; padding: calc(14px * var(--k)) calc(16px * var(--k)); opacity: 0; transform: translateY(calc(6px * var(--k))); transition: opacity 280ms ease, transform 380ms var(--ease-out); pointer-events: none; overflow: hidden;}
.fg .mp.on { opacity: 1; transform: none;}
.fg .url-row { display: grid; grid-template-columns: calc(110px * var(--k)) minmax(0, 1fr) auto auto; gap: calc(10px * var(--k)); align-items: center; padding: calc(8px * var(--k)) calc(10px * var(--k)); border-top: 1px solid #e6ebf0; font-size: calc(12px * var(--k));}
.fg .url-row:first-of-type { border-top: 0;}
.fg .url-row .lb { color: #1f4e7a; font-weight: 600;}
.fg .url-row .u { font-family: var(--mono); font-size: calc(11.5px * var(--k)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555;}
.fg .url-row .u b { color: #2b2b2b; font-weight: 600;}
.fg .cp { font-size: calc(11px * var(--k)); color: #555; white-space: nowrap; transition: color 200ms ease;}
.fg .cp::before { content: "⧉ ";}
.fg .cp.done { color: #1f7a47; font-weight: 600;}
.fg .cp.done::before { content: "✓ ";}
.fg .grp-h { font-size: calc(10.5px * var(--k)); font-weight: 600; letter-spacing: .06em; color: #666; padding: calc(6px * var(--k)) calc(10px * var(--k)) 0;}
.fg .ov { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(14px * var(--k));}
@media (max-width: 760px) {
  .fg .ov { grid-template-columns: 1fr;}
  .fg .ov .dbc { display: none;}
}
.fg .dbc .dbsel { display: flex; gap: calc(10px * var(--k)); align-items: center; justify-content: space-between; padding: calc(10px * var(--k)); flex-wrap: wrap;}
.fg .dbc .jd { border-top: 1px solid #e6ebf0; padding: calc(8px * var(--k)) calc(10px * var(--k)); font: calc(11px * var(--k)) var(--mono); color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.fg .pod-row td:last-child { text-align: right;}
.fg .restarts { color: #b42318; font-weight: 600;}
.fg .confirm { position: absolute; left: calc(16px * var(--k)); right: calc(16px * var(--k)); bottom: calc(14px * var(--k)); background: #fff; border: 1px solid #d3dbe4; border-radius: calc(10px * var(--k)); box-shadow: var(--shadow); padding: calc(12px * var(--k)) calc(14px * var(--k)); font-size: calc(12px * var(--k)); display: flex; gap: calc(12px * var(--k)); align-items: center; justify-content: space-between; flex-wrap: wrap; opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 250ms ease, transform 350ms var(--ease-out);}
.fg .confirm.on { opacity: 1; transform: none;}
.fg .logbox { background: #18191d; border-radius: calc(10px * var(--k)); padding: calc(10px * var(--k)) 0; font: calc(11.5px * var(--k))/1.7 var(--mono); color: #d6d6d9; margin-top: calc(10px * var(--k));}
.fg .logbox div { padding: 0 calc(12px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.fg .logbox .t { color: #777; margin-right: calc(10px * var(--k));}
.fg .logbox .er { background: rgba(180,35,24,.22); box-shadow: inset calc(3px * var(--k)) 0 0 #e5534b;}
.fg .logbox mark { background: #f37921; color: #18191d; border-radius: 2px;}
.fg .logbox .nw2 { opacity: 0; transition: opacity 300ms ease;}
.fg .logbox .nw2.on { opacity: 1;}
.fg .ltools { display: flex; gap: calc(8px * var(--k)); align-items: center; flex-wrap: wrap; font-size: calc(11.5px * var(--k)); color: #555;}
.fg .ltools .inp2 { height: calc(28px * var(--k));}
.fg .svc-foot { display: flex; gap: calc(12px * var(--k)); align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff; border-top: 1px solid #d3dbe4; padding: calc(10px * var(--k)) calc(16px * var(--k)); font-size: calc(12px * var(--k)); transform: translateY(100%); opacity: 0; transition: transform 400ms var(--ease-out), opacity 250ms ease;}
.fg .sc-svc.s3 .svc-foot { transform: none; opacity: 1;}
.fg .svc-foot .acts2 { display: flex; gap: calc(8px * var(--k));}
.fg .sc-svc .row-acs td { transition: background-color 300ms ease;}
.fg .sc-svc.s2 .row-acs td { background: #eaf2fa;}
.fg .sc-svc .acs-ver .swap .b { opacity: 0;}
.fg .sc-svc.s2 .acs-ver .swap .a { opacity: 0;}
.fg .sc-svc.s2 .acs-ver .swap .b { opacity: 1; transform: none;}
.fg .pill { font-size: calc(10.5px * var(--k)); font-weight: 600; padding: 1px calc(6px * var(--k)); border-radius: calc(4px * var(--k)); background: #dbe8fb; color: #1f4e7a; margin-left: calc(6px * var(--k)); opacity: 0; transition: opacity 250ms ease;}
.fg .sc-svc.s2 .pill { opacity: 1;}
.fg .sc-svc .run2 .swap .b { opacity: 0;}
.fg .sc-svc.s5 .run2 .swap .a { opacity: 0;}
.fg .sc-svc.s5 .run2 .swap .b { opacity: 1; transform: none;}
.fg .sc-svc.s5 .svc-foot { transform: translateY(100%); opacity: 0;}
.fg .sc-svc.s5 .pill { opacity: 0;}
.fg .tl { position: relative; padding: var(--s6) var(--s5) var(--s5);}
.fg .tl-rail { position: absolute; left: calc(var(--s5) + calc(14px * var(--k))); right: calc(var(--s5) + calc(14px * var(--k))); top: calc(var(--s6) + calc(13px * var(--k))); height: calc(3px * var(--k)); background: #dcdde0; border-radius: 2px;}
.fg .tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--blue); border-radius: 2px; transition: width 800ms var(--ease-in-out), height 800ms var(--ease-in-out);}
.fg .tl-fill.stop { background: repeating-linear-gradient(90deg, var(--blue) 0 calc(8px * var(--k)), #9fb9d3 calc(8px * var(--k)) calc(14px * var(--k)));}
.fg .tl-pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); position: relative;}
.fg .tl-pts li { display: grid; gap: calc(6px * var(--k)); align-content: start; padding-top: calc(44px * var(--k)); position: relative; opacity: .4; transition: opacity 300ms ease;}
.fg .tl-pts li.on { opacity: 1;}
.fg .tl-pts .d { position: absolute; top: 0; left: 0; width: calc(30px * var(--k)); height: calc(30px * var(--k)); border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #c9cacd; color: var(--muted); box-shadow: 0 0 0 calc(5px * var(--k)) #fff; transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;}
.fg .tl-pts .d svg { width: calc(14px * var(--k)); height: calc(14px * var(--k));}
.fg .tl-pts li.on .d { background: var(--blue); border-color: var(--blue); color: #fff;}
.fg .tl-pts li.warn.on .d { background: var(--orange); border-color: var(--orange); color: var(--ink);}
.fg .tl-pts li.fin.on .d { background: var(--ink); border-color: var(--ink); color: #fff;}
.fg .tl-pts h4 { font-size: calc(16px * var(--k));}
.fg .tl-pts p { font-size: calc(13.5px * var(--k)); color: var(--muted); line-height: 1.45;}
.fg .tl-pts .lz { justify-self: start; font-size: calc(12px * var(--k)); padding: 1px calc(8px * var(--k));}
@media (max-width: 900px) {
  .fg .tl-rail { left: calc(var(--s4) + calc(13px * var(--k))); right: auto; top: var(--s5); bottom: var(--s5); width: calc(3px * var(--k)); height: auto;}
  .fg .tl-fill { bottom: auto; width: 100%; height: var(--p, 0%);}
  .fg .tl { padding: var(--s5) var(--s4);}
  .fg .tl-pts { grid-template-columns: 1fr;}
  .fg .tl-pts li { padding: 0 0 0 calc(48px * var(--k)); min-height: calc(40px * var(--k));}
}
.fg .flags { display: grid; gap: var(--s3); align-content: start;}
.fg .flag { display: grid; grid-template-columns: calc(28px * var(--k)) 1fr; gap: var(--s3); align-items: start; padding: var(--s3); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateX(calc(24px * var(--k))); transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);}
.fg .flags.in .flag { opacity: 1; transform: none;}
.fg .flags.in .flag:nth-of-type(2) { transition-delay: 250ms;}
.fg .flags.in .flag:nth-of-type(3) { transition-delay: 500ms;}
.fg .flag .dot { width: calc(28px * var(--k)); height: calc(28px * var(--k)); border-radius: 50%; display: grid; place-items: center; color: #fff;}
.fg .flag .dot svg { width: calc(16px * var(--k)); height: calc(16px * var(--k));}
.fg .flag .h { font-weight: 500; display: block;}
.fg .flag .t { font-size: calc(14px * var(--k)); color: var(--muted);}
.fg .tbl { width: 100%; border-collapse: collapse; font-size: calc(16px * var(--k)); background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow);}
.fg .tbl th { text-align: left; font-size: calc(12px * var(--k)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: calc(14px * var(--k)) calc(18px * var(--k)); border-bottom: 1px solid var(--line);}
.fg .tbl td { padding: calc(14px * var(--k)) calc(18px * var(--k)); border-top: 1px solid var(--soft); vertical-align: top;}
.fg .tbl td:nth-child(2) { font-family: var(--mono); font-size: calc(14px * var(--k)); white-space: nowrap;}
.fg .tbl-wrap { overflow-x: auto;}
.fg .svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(230px * var(--k)), 1fr)); gap: var(--s2);}
.fg .svc { background: #fff; border-radius: var(--r-sm); padding: calc(12px * var(--k)) var(--s3); display: grid; gap: 2px;}
.fg .svc b { font-weight: 500; font-size: calc(16px * var(--k));}
.fg .svc code { background: none; padding: 0; color: var(--muted); font-size: calc(13px * var(--k));}
.fg .fail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6);}
@media (max-width: 900px) {
  .fg .fail { grid-template-columns: 1fr;}
}
.fg .fail h3 { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap;}
.fg .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); font-size: calc(17px * var(--k));}
.fg .checks li { display: grid; grid-template-columns: calc(22px * var(--k)) 1fr; gap: var(--s3); align-items: start;}
.fg .checks svg { width: calc(20px * var(--k)); height: calc(20px * var(--k)); margin-top: calc(3px * var(--k));}
.fg .checks .no { color: var(--red);}
.fg .checks .yes { color: var(--green);}
.fg .why { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s7);}
@media (max-width: 860px) {
  .fg .why { grid-template-columns: 1fr;}
}
.fg .why div { padding: var(--s4) 0; border-top: 1px solid var(--line);}
.fg .why .d { font-size: calc(19px * var(--k)); font-weight: 500; margin-bottom: var(--s2);}
.fg .why .b { color: var(--muted); font-size: calc(16px * var(--k));}
.fg .end { background: var(--ink); color: #fff;}
.fg .end .c1 { width: calc(280px * var(--k)); height: calc(280px * var(--k)); right: -90px; top: -100px; background: var(--orange);}
.fg .end .c2 { width: calc(130px * var(--k)); height: calc(130px * var(--k)); left: 5%; bottom: -70px; background: var(--purple);}
.fg .end h2 { font-size: clamp(calc(52px * var(--k)), 7.5vw, calc(96px * var(--k))); letter-spacing: -0.03em;}
.fg .end .lead { color: #d6d6d9; margin-top: var(--s4);}
.fg .asks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6);}
@media (max-width: 860px) {
  .fg .asks { grid-template-columns: 1fr;}
}
.fg .asks div { padding: var(--s4); border-radius: var(--r-md); background: rgba(255,255,255,.07);}
.fg .asks .h { display: block; font-size: calc(19px * var(--k)); font-weight: 500; margin-bottom: var(--s2);}
.fg .asks .t { color: #d6d6d9; font-size: calc(16px * var(--k));}
.fg .asks a { color: #fff;}
.fg .cta { margin-top: var(--s6); display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); min-height: calc(56px * var(--k)); border-radius: calc(999px * var(--k)); background: var(--orange); color: var(--ink); font-weight: 500; font-size: calc(18px * var(--k)); text-decoration: none; transition: transform 140ms var(--ease-out), background-color 150ms ease;}
.fg .cta:hover { background: #f68a3d;}
.fg .cta:active { transform: scale(0.97);}
.fg .end a:focus-visible { outline-color: #fff;}
.fg footer { padding: var(--s5) 0; color: var(--muted); font-size: calc(14px * var(--k));}
.fg footer .wrap { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;}
.fg footer img { height: calc(26px * var(--k)); width: auto;}
@media (prefers-reduced-motion: reduce) {
  html:has(.fg) { scroll-behavior: auto;}
  .fg, .fg *, .fg *::before, .fg *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important;}
  .fg .rv, .fg .flag { opacity: 1; transform: none;}
  .fg .cursor { display: none;}
}
@media (max-width: 640px) { .fg .aud-note { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); white-space: normal; font-size: 14px; } }

/* ---------- Type: Partial or Full ---------- */
.fg .pf2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 960px) { .fg .pf2 { grid-template-columns: 1fr; } }
.fg .opt { background: #fff; border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow); display: grid; gap: var(--s4); }
.fg .opt-h { display: grid; gap: var(--s2); justify-items: start; }
.fg .opt-h h4 { font-size: calc(22px * var(--k)); }
.fg .stack { display: grid; gap: 0; }
.fg .ns2 { border-radius: var(--r-md); padding: var(--s3); display: grid; gap: 6px; }
.fg .ns2 b.mono { font: 500 calc(16px * var(--k)) var(--mono); }
.fg .ns2 .tagline { font-size: calc(12px * var(--k)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fg .ns2.mine { background: var(--blue-soft); border: 1.5px solid #a9c6ee; }
.fg .ns2.par { background: var(--band-gray); border: 1.5px dashed #c9cacd; }
.fg .chips2 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fg .chips2 .c { font-size: calc(13px * var(--k)); padding: calc(3px * var(--k)) calc(9px * var(--k)); border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.fg .chips2 .c.own { border-color: #a9c6ee; color: var(--blue-ink); font-weight: 500; }
.fg .chips2 .c.need { border-style: dashed; }
.fg .chips2 .c.db { background: var(--orange-soft); border-color: #f5c39c; color: var(--orange-ink); }
.fg .arr2 { position: relative; height: calc(40px * var(--k)); display: grid; place-items: center; }
.fg .arr2::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--blue); }
.fg .arr2::after { content: ""; position: absolute; bottom: 2px; left: calc(50% - 5px); border: 6px solid transparent; border-top-color: var(--blue); border-bottom: 0; }
.fg .arr2 span { position: relative; background: #fff; padding: 0 8px; font-size: calc(12px * var(--k)); color: var(--blue-ink); }
.fg .opt .chips2 .c { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); }
.fg .opt.in .chips2 .c { opacity: 1; transform: none; }
.fg .opt.in .chips2 .c:nth-child(2) { transition-delay: 90ms; } .fg .opt.in .chips2 .c:nth-child(3) { transition-delay: 180ms; }
.fg .opt.in .chips2 .c:nth-child(4) { transition-delay: 270ms; } .fg .opt.in .chips2 .c:nth-child(5) { transition-delay: 360ms; }
.fg .opt.in .chips2 .c:nth-child(6) { transition-delay: 450ms; } .fg .opt.in .chips2 .c:nth-child(7) { transition-delay: 540ms; }
.fg .facts2 { display: grid; gap: var(--s3); margin: 0; }
.fg .facts2 dt { font-weight: 500; font-size: calc(16px * var(--k)); }
.fg .facts2 dd { margin: 2px 0 0; color: var(--muted); font-size: calc(15px * var(--k)); }
.fg .care { border-left: 3px solid var(--orange); background: var(--band-pm); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s3) var(--s4); font-size: calc(15px * var(--k)); }
.fg .care > b { display: block; margin-bottom: 6px; font-weight: 500; }
.fg .care ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--muted); }
.fg .care li b { color: var(--ink); font-weight: 500; }
.fg .pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
@media (max-width: 760px) { .fg .pick { grid-template-columns: 1fr; } }
.fg .pick > div { display: flex; gap: var(--s3); align-items: baseline; background: #fff; border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.fg .pick p { font-size: calc(15px * var(--k)); color: var(--muted); }

/* ---------- annotated tabs (Overview, Services) ---------- */
.fg .anat { position: relative; }
.fg .anat .em { box-shadow: var(--shadow); }
.fg .ov2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(16px * var(--k)); position: relative; }
@media (max-width: 760px) { .fg .ov2 { grid-template-columns: 1fr; } }
.fg .ov2 > div { position: relative; }
.fg .ports { padding: 0 !important; }
.fg .ports > div { display: grid; grid-template-columns: 1fr auto calc(60px * var(--k)); gap: 10px; align-items: center; padding: calc(7px * var(--k)) calc(10px * var(--k)); border-top: 1px solid #e6ebf0; font-size: calc(12.5px * var(--k)); }
.fg .ports > div:first-child { border-top: 0; }
.fg .ports b { font-family: var(--mono); font-weight: 600; }
.fg .ports em { font-style: normal; color: #777; font-family: var(--mono); font-size: calc(11.5px * var(--k)); }
.fg .pin { position: absolute; left: calc(-12px * var(--k)); margin-top: calc(-4px * var(--k)); z-index: 2; }
.fg .pin i, .fg .legend2 > li > i { width: calc(24px * var(--k)); height: calc(24px * var(--k)); border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--ink); font: 700 calc(12px * var(--k)) "Roboto", sans-serif; font-style: normal; box-shadow: 0 0 0 3px #fff; }
.fg .anat .pin { transform: scale(0); transition: transform 400ms var(--ease-out); transition-delay: calc(500ms + var(--i, 0) * 220ms); }
.fg .anat.in .pin { transform: none; }
.fg .pin.in { position: static; display: inline-grid; vertical-align: middle; margin: 0 0 0 4px; }
.fg .pin.in i { width: calc(18px * var(--k)); height: calc(18px * var(--k)); font-size: calc(10px * var(--k)); box-shadow: none; }
.fg .anat.in .pin.in { transform: none; }
.fg .svt td small { display: block; color: #777; font-size: calc(10.5px * var(--k)); }
.fg .svt tr.mine td { background: #eaf2fa; }
.fg .svt td { white-space: nowrap; }
.fg .legend2 { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s6); }
@media (max-width: 860px) { .fg .legend2 { grid-template-columns: 1fr; } }
.fg .legend2 > li { display: grid; grid-template-columns: calc(24px * var(--k)) 1fr; gap: var(--s3); align-items: start; }
.fg .legend2 b { font-weight: 500; }
.fg .legend2 > li > div > span:last-child { display: block; color: var(--muted); font-size: calc(16px * var(--k)); margin-top: 2px; }
.fg .howto { margin-top: var(--s5); background: var(--band-req); border-radius: var(--r-md); padding: var(--s4) var(--s5); display: grid; gap: var(--s2); font-size: calc(16px * var(--k)); }
.fg .howto > b { font-weight: 500; }
.fg .howto ol { margin: 0 0 var(--s2); padding-left: 1.3em; display: grid; gap: 4px; color: var(--muted); }
.fg .howto ol b { color: var(--ink); font-weight: 500; }
.fg .ov2 .pin { left: 0; }
.fg .ov2 .pin + .lab { padding-left: calc(30px * var(--k)); min-height: calc(22px * var(--k)); }
.fg #type { font-size: clamp(24px, 2.4vw, 32px); }