/* 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"); }
/* Full-width 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 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; }
.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;}
/* Density: the guide was drawn at a 1:1 scale for big screens. On a laptop next to the portal nav
   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 (z-index up to 7) stay under the page's sticky bar,
   and everything stays under the portal header and nav. */
.fg { position: relative; isolation: isolate; }

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(calc(14px * var(--k))); -webkit-backdrop-filter: saturate(1.6) blur(calc(14px * var(--k))); 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 - calc(32px * var(--k)));}
/* the portal's Ask AI button sits in the bottom-right corner on phones */
@media (max-width: 640px) { .fg .aud-note { bottom: calc(calc(80px * var(--k)) + env(safe-area-inset-bottom, 0px)); white-space: normal; font-size: calc(14px * var(--k)); } }
.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 .focus-ring { border-color: var(--blue) !important; box-shadow: 0 0 0 calc(3px * var(--k)) var(--blue-soft);}
.fg .sc-form.s1:not(.s2) #f-service { border-color: var(--blue); box-shadow: 0 0 0 calc(3px * var(--k)) var(--blue-soft);}
.fg .sc-form.s2 #f-service .swap .a { opacity: 0;}
.fg .sc-form.s2 #f-service .swap .b { opacity: 1; transform: none;}
.fg .sc-form.s2 .after-service { grid-template-rows: 1fr; opacity: 1;}
.fg .sc-form.s3:not(.s5) #f-tag { border-color: var(--blue); box-shadow: 0 0 0 calc(3px * var(--k)) var(--blue-soft);}
.fg .sc-form.s3:not(.s5) .dd { opacity: 1; transform: none;}
.fg .sc-form.s5 #f-tag .swap .a { opacity: 0;}
.fg .sc-form.s5 #f-tag .swap .b { opacity: 1; transform: none;}
.fg .sc-form.s5:not(.s6) #f-issue { border-color: var(--blue); box-shadow: 0 0 0 calc(3px * var(--k)) var(--blue-soft);}
.fg .sc-form.s5 .btn { background: var(--blue); color: #fff;}
.fg .sc-form.s5 .row-btn .swap .a { opacity: 0;}
.fg .sc-form.s5 .row-btn .swap .b { opacity: 1; transform: none;}
.fg .sc-form.s7 .msg { opacity: 1; transform: none;}
.fg #typed::after { content: ""; display: inline-block; width: 1px; height: calc(15px * var(--k)); background: var(--ink); margin-left: 1px; vertical-align: -2px; opacity: 0;}
.fg .sc-form.s5:not(.s6) #typed::after { opacity: 1; animation: fg-blink 900ms steps(1) infinite;}
@keyframes fg-blink { 50% { opacity: 0; } }
.fg .svc-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--k));}
.fg .svc-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: calc(12px * var(--k)); padding: calc(6px * var(--k)) calc(8px * var(--k)); border-bottom: 1.5px solid var(--line);}
.fg .svc-table td { padding: calc(7px * var(--k)) calc(8px * var(--k)); border-bottom: 1px solid var(--soft);}
.fg .svc-table td.t { font-family: var(--mono); font-size: calc(12px * var(--k));}
.fg .svc-table .lz { font-size: calc(11px * var(--k)); padding: 1px calc(6px * var(--k)); opacity: 0; transform: scale(.8); transition: opacity 200ms ease, transform 300ms var(--ease-out);}
.fg .sc-all.go .svc-table .lz { opacity: 1; transform: none;}
.fg .sc-all .btn { background: var(--orange); color: var(--ink);}
.fg .sc-all.press .btn { transform: scale(.95);}
.fg .sc-all .done-note { font-size: calc(13px * var(--k)); color: var(--muted); opacity: 0; transition: opacity 300ms ease 600ms;}
.fg .sc-all.go .done-note { opacity: 1;}
.fg .cf h4 { font-size: calc(19px * var(--k)); font-weight: 500; line-height: 1.3; margin-bottom: calc(8px * var(--k));}
.fg .cf .meta { font-size: calc(12px * var(--k)); color: var(--muted); margin-bottom: calc(14px * var(--k)); display: flex; gap: calc(10px * var(--k)); flex-wrap: wrap; align-items: center;}
.fg .att { display: inline-flex; gap: calc(6px * var(--k)); flex-wrap: wrap;}
.fg .att span { font: 500 calc(12px * var(--k)) var(--mono); padding: 2px calc(8px * var(--k)); border-radius: calc(4px * var(--k)); background: var(--soft); color: var(--ink); opacity: 0; transform: translateY(calc(6px * var(--k))); transition: opacity 260ms ease, transform 400ms var(--ease-out);}
.fg .sc-report.s5 .att span { opacity: 1; transform: none;}
.fg .sc-report.s5 .att span:nth-child(2) { transition-delay: 90ms;}
.fg .sc-report.s5 .att span:nth-child(3) { transition-delay: 180ms;}
.fg .sc-report .meta .lz { transition: transform 400ms var(--ease-out), background-color 300ms ease, color 300ms ease, border-color 300ms ease;}
.fg .sc-report:not(.s1) .meta .lz { background: var(--soft); color: var(--muted); border-color: var(--line);}
.fg .sc-report.s1:not(.s2) .meta .lz { transform: scale(1.08);}
.fg .counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8px * var(--k)); margin-bottom: calc(14px * var(--k));}
@media (max-width: 560px) {
  .fg .counts { grid-template-columns: repeat(2, minmax(0, 1fr));}
}
.fg .cnt { border-radius: var(--r-sm); padding: calc(10px * var(--k)) calc(12px * var(--k)); border: 1px solid;}
.fg .cnt small { display: block; font-size: calc(11px * var(--k)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;}
.fg .cnt b { font-size: calc(26px * var(--k)); font-weight: 500; font-variant-numeric: tabular-nums;}
.fg .cnt em { font-style: normal; font-size: calc(12px * var(--k)); margin-left: calc(4px * var(--k)); opacity: 0; transition: opacity 300ms ease;}
.fg .sc-report.s3 .cnt em { opacity: 1;}
.fg .cnt.c { background: var(--red-soft); color: var(--red); border-color: #e2b4b4;}
.fg .cnt.h { background: var(--orange-soft); color: var(--orange-ink); border-color: #f5c39c;}
.fg .cnt.m { background: #fbefd2; color: #6b4a00; border-color: #ecd193;}
.fg .cnt.l { background: var(--soft); color: var(--muted); border-color: var(--line);}
.fg .chg { border-left: calc(3px * var(--k)) solid var(--orange); background: var(--band-pm); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: calc(10px * var(--k)) calc(12px * var(--k)); margin-bottom: calc(14px * var(--k)); font-size: calc(13px * var(--k)); display: grid; gap: calc(4px * var(--k)); opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 280ms ease, transform 420ms var(--ease-out);}
.fg .chg b { font-weight: 500;}
.fg .sc-report.s3 .chg { opacity: 1; transform: none;}
.fg .vt-wrap { overflow-x: auto;}
.fg .vt { width: 100%; border-collapse: collapse; font-size: calc(12.5px * var(--k));}
.fg .vt th { text-align: left; font-weight: 500; color: var(--muted); font-size: calc(11.5px * var(--k)); padding: calc(6px * var(--k)); border-bottom: 1.5px solid var(--line);}
.fg .vt td { padding: calc(6px * var(--k)); border-bottom: 1px solid var(--soft); white-space: nowrap;}
.fg .vt td.id { font-family: var(--mono); font-size: calc(11.5px * var(--k));}
.fg .vt td.fx { color: var(--green); font-weight: 500;}
.fg .sev { font-size: calc(10.5px * var(--k)); font-weight: 700; letter-spacing: .05em; padding: 2px calc(6px * var(--k)); border-radius: calc(4px * var(--k)); text-transform: uppercase;}
.fg .sev.c { background: var(--red-soft); color: var(--red);}
.fg .sev.h { background: var(--orange-soft); color: var(--orange-ink);}
.fg .sev.m { background: #fbefd2; color: #6b4a00;}
.fg .sev.l { background: var(--soft); color: var(--muted);}
.fg .vt tbody tr { opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 280ms ease, transform 420ms var(--ease-out);}
.fg .sc-report.s4 .vt tbody tr { opacity: 1; transform: none;}
.fg .sc-report.s4 .vt tbody tr:nth-child(2) { transition-delay: 80ms;}
.fg .sc-report.s4 .vt tbody tr:nth-child(3) { transition-delay: 160ms;}
.fg .sc-report.s4 .vt tbody tr:nth-child(4) { transition-delay: 240ms;}
.fg .sc-report.s4 .vt tbody tr:nth-child(5) { transition-delay: 320ms;}
.fg .tree { font-size: calc(14px * var(--k)); display: grid; gap: calc(6px * var(--k));}
.fg .tn { display: flex; gap: calc(10px * var(--k)); align-items: center; padding: calc(9px * var(--k)) calc(12px * var(--k)); border-radius: var(--r-sm); background: #fff; border: 1.5px solid var(--line); opacity: 0; transform: translateX(-10px); transition: opacity 300ms ease, transform 450ms var(--ease-out);}
.fg .tn .pg { width: calc(18px * var(--k)); height: calc(22px * var(--k)); border-radius: calc(3px * var(--k)); border: 1.5px solid #8a8a90; flex: none; position: relative;}
.fg .tn .pg::after { content: ""; position: absolute; left: calc(3px * var(--k)); right: calc(3px * var(--k)); top: calc(5px * var(--k)); height: 1.5px; background: #8a8a90; box-shadow: 0 calc(4px * var(--k)) 0 #8a8a90, 0 calc(8px * var(--k)) 0 #8a8a90;}
.fg .tn .t { font-weight: 500;}
.fg .tn .d { color: var(--muted); font-size: calc(12.5px * var(--k)); margin-left: auto; text-align: right;}
.fg .tn.l1 { margin-left: calc(28px * var(--k));}
.fg .tn.l2 { margin-left: calc(56px * var(--k));}
.fg .tn.l3 { margin-left: calc(84px * var(--k));}
.fg .tn .new { font-size: calc(11px * var(--k)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--orange); padding: 2px calc(6px * var(--k)); border-radius: calc(4px * var(--k)); margin-left: auto;}
.fg .tn.fresh { border-color: var(--orange);}
.fg .sc-tree.s1 .tn:nth-child(1), .fg .sc-tree.s2 .tn:nth-child(2), .fg .sc-tree.s3 .tn:nth-child(3), .fg .sc-tree.s4 .tn:nth-child(4), .fg .sc-tree.s5 .tn:nth-child(5) { opacity: 1; transform: none;}
@media (max-width: 560px) {
  .fg .tn .d { display: none;}
  .fg .tn.l3 { margin-left: calc(42px * var(--k));}
  .fg .tn.l2 { margin-left: calc(28px * var(--k));}
  .fg .tn.l1 { margin-left: calc(14px * var(--k));}
}
.fg .tk-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(16px * var(--k));}
.fg .jw { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #172b4d; font-size: calc(14px * var(--k)); line-height: 1.45;}
.fg .jw .crumbs { display: flex; align-items: center; gap: calc(6px * var(--k)); padding: calc(12px * var(--k)) calc(20px * var(--k)) 0; font-size: calc(13px * var(--k)); color: #626f86; flex-wrap: wrap;}
.fg .jw .crumbs .bug { width: calc(16px * var(--k)); height: calc(16px * var(--k)); border-radius: calc(3px * var(--k)); background: #e2483d; display: inline-grid; place-items: center;}
.fg .jw .crumbs .bug::after { content: ""; width: calc(6px * var(--k)); height: calc(6px * var(--k)); border-radius: 50%; background: #fff;}
.fg .jw .crumbs a { color: #626f86; text-decoration: none;}
.fg .jw .crumbs b { color: #0c66e4; font-weight: 500;}
.fg .jw-grid { display: grid; grid-template-columns: minmax(0, 1fr) calc(270px * var(--k)); gap: calc(28px * var(--k)); padding: calc(10px * var(--k)) calc(20px * var(--k)) calc(22px * var(--k));}
@media (max-width: 900px) {
  .fg .jw-grid { grid-template-columns: minmax(0, 1fr);}
}
.fg .jw h4 { font-size: calc(22px * var(--k)); font-weight: 500; line-height: 1.3; color: #172b4d; margin: calc(4px * var(--k)) 0 calc(12px * var(--k)); letter-spacing: -0.005em;}
.fg .jw .acts { display: flex; gap: calc(6px * var(--k)); margin-bottom: calc(18px * var(--k));}
.fg .jw .acts span { font-size: calc(13px * var(--k)); font-weight: 500; color: #44546f; background: #f1f2f4; padding: calc(5px * var(--k)) calc(10px * var(--k)); border-radius: calc(3px * var(--k));}
.fg .jw .lbl-h { font-size: calc(14px * var(--k)); font-weight: 600; margin-bottom: calc(8px * var(--k));}
.fg .jw .desc h5 { font-size: calc(16px * var(--k)); font-weight: 600; margin: 0 0 calc(6px * var(--k));}
.fg .jw .desc .blk + .blk { margin-top: calc(18px * var(--k));}
.fg .jw .desc p, .fg .jw .desc li { font-size: calc(14px * var(--k));}
.fg .jw .desc ol, .fg .jw .desc ul { margin: 0; padding-left: calc(22px * var(--k)); display: grid; gap: calc(3px * var(--k));}
.fg .jw .desc a { color: #0c66e4; text-decoration: none;}
.fg .jw .desc em { color: #626f86;}
.fg .jw .desc .blk { opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 320ms ease, transform 450ms var(--ease-out);}
.fg .sc-ticket.s2 .desc .blk { opacity: 1; transform: none;}
.fg .sc-ticket.s2 .desc .blk:nth-child(2) { transition-delay: 150ms;}
.fg .sc-ticket.s2 .desc .blk:nth-child(3) { transition-delay: 450ms;}
.fg .sc-ticket.s2 .desc .blk:nth-child(4) { transition-delay: 650ms;}
.fg .sc-ticket.s2 .desc .blk:nth-child(5) { transition-delay: 800ms;}
.fg .jt-wrap { overflow-x: auto;}
.fg .jt { border-collapse: collapse; font-size: calc(13px * var(--k)); width: 100%;}
.fg .jt th { background: #f7f8f9; font-weight: 600; text-align: left; padding: calc(6px * var(--k)) calc(8px * var(--k)); border: 1px solid #dcdfe4; white-space: nowrap;}
.fg .jt td { padding: calc(6px * var(--k)) calc(8px * var(--k)); border: 1px solid #dcdfe4; vertical-align: top;}
.fg .jt td.n { text-align: center;}
.fg .jt td:first-child { font-weight: 600; white-space: nowrap;}
.fg .jt td.v { white-space: nowrap;}
.fg .jt a { color: #0c66e4;}
.fg .jt tbody tr { opacity: 0; transition: opacity 260ms ease;}
.fg .sc-ticket.s2 .jt tbody tr { opacity: 1;}
.fg .sc-ticket.s2 .jt tbody tr:nth-child(1) { transition-delay: 300ms;}
.fg .sc-ticket.s2 .jt tbody tr:nth-child(2) { transition-delay: 380ms;}
.fg .sc-ticket.s2 .jt tbody tr:nth-child(3) { transition-delay: 460ms;}
.fg .sc-ticket.s2 .jt tbody tr:nth-child(4) { transition-delay: 540ms;}
.fg .sc-ticket.s2 .jt tbody tr:nth-child(5) { transition-delay: 620ms;}
.fg .sc-ticket.s2 .jt tbody tr:nth-child(6) { transition-delay: 700ms;}
.fg .jw .activity { margin-top: calc(22px * var(--k));}
.fg .jw .tabs { display: flex; gap: calc(14px * var(--k)); font-size: calc(13px * var(--k)); color: #44546f; border-bottom: 2px solid #f1f2f4; margin-bottom: calc(12px * var(--k));}
.fg .jw .tabs span { padding-bottom: calc(6px * var(--k));}
.fg .jw .tabs span.on { color: #0c66e4; box-shadow: inset 0 -2px 0 #0c66e4;}
.fg .cmt { display: grid; grid-template-columns: calc(32px * var(--k)) 1fr; gap: calc(10px * var(--k)); font-size: calc(14px * var(--k)); opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 300ms ease, transform 450ms var(--ease-out);}
.fg .cmt .av { width: calc(32px * var(--k)); height: calc(32px * var(--k)); border-radius: 50%; background: #1d7afc; color: #fff; display: grid; place-items: center; font-size: calc(12px * var(--k)); font-weight: 600;}
.fg .cmt .who2 { font-weight: 600; margin-bottom: 2px;}
.fg .cmt .who2 span { font-weight: 400; color: #626f86; font-size: calc(13px * var(--k));}
.fg .cmt a { color: #0c66e4; text-decoration: none;}
.fg .cmt.first { opacity: 1; transform: none; color: #626f86; margin-bottom: calc(12px * var(--k));}
.fg .sc-ticket.s4 .cmt.rescan { opacity: 1; transform: none;}
.fg .side .stat { display: inline-flex; align-items: center; gap: calc(6px * var(--k)); font-size: calc(14px * var(--k)); font-weight: 500; background: #f1f2f4; color: #44546f; padding: calc(6px * var(--k)) calc(12px * var(--k)); border-radius: calc(3px * var(--k)); margin-bottom: calc(14px * var(--k));}
.fg .side .stat::after { content: ""; width: calc(6px * var(--k)); height: calc(6px * var(--k)); border-right: 2px solid #44546f; border-bottom: 2px solid #44546f; transform: rotate(45deg) translateY(-2px);}
.fg .side .det { border: 1px solid #dcdfe4; border-radius: calc(4px * var(--k));}
.fg .side .det-h { font-size: calc(14px * var(--k)); font-weight: 600; padding: calc(10px * var(--k)) calc(12px * var(--k)); border-bottom: 1px solid #dcdfe4;}
.fg .side dl { display: grid; grid-template-columns: calc(104px * var(--k)) 1fr; gap: calc(10px * var(--k)) calc(10px * var(--k)); margin: 0; padding: calc(12px * var(--k)); font-size: calc(13px * var(--k));}
.fg .side dt { color: #626f86; font-weight: 500;}
.fg .side dd { margin: 0; display: flex; gap: calc(4px * var(--k)); flex-wrap: wrap; align-items: center;}
.fg .side .u { display: inline-flex; align-items: center; gap: calc(6px * var(--k));}
.fg .side .u i { width: calc(22px * var(--k)); height: calc(22px * var(--k)); border-radius: 50%; background: var(--purple); color: #fff; font: 600 calc(10px * var(--k))/calc(22px * var(--k)) sans-serif; text-align: center; font-style: normal;}
.fg .side .u i.ci { background: #1d7afc;}
.fg .prio { color: #c9372c; font-weight: 500; display: inline-flex; align-items: center; gap: calc(4px * var(--k));}
.fg .prio::before { content: "⌃"; font-size: calc(15px * var(--k)); line-height: 1; transform: translateY(2px); text-shadow: 0 -4px 0 currentColor;}
.fg .jlbl { font-size: calc(12px * var(--k)); color: #0c66e4; background: #f1f2f4; padding: 1px calc(5px * var(--k)); border-radius: calc(3px * var(--k));}
.fg .none { color: #626f86;}
.fg .mail-row { display: flex; align-items: center; gap: calc(14px * var(--k)); padding: calc(14px * var(--k)) calc(18px * var(--k)); background: #fff; border: 1px solid var(--line); border-radius: calc(10px * var(--k));}
.fg .env { width: calc(40px * var(--k)); height: calc(30px * var(--k)); flex: none; border-radius: calc(5px * var(--k)); background: var(--orange); position: relative; z-index: 2;}
.fg .env::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(18px * var(--k)); background: linear-gradient(to bottom right, transparent 49%, rgba(43,43,43,.55) 50%, transparent 54%), linear-gradient(to bottom left, transparent 49%, rgba(43,43,43,.55) 50%, transparent 54%);}
.fg .sc-ticket.s3 .env { animation: fg-fly 1200ms var(--ease-in-out) forwards;}
@keyframes fg-fly { 0% { transform: none; } 15% { transform: translateY(-6px) scale(1.05); } 65% { opacity: 1; transform: translateX(var(--fly, 160px)) scale(.8); } 72% { opacity: 0; transform: translateX(var(--fly, 160px)) scale(.5); } 73% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
.fg .mail-row .sub2 { font-size: calc(13px * var(--k)); min-width: 0;}
.fg .mail-row .sub2 b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.fg .mail-row .sub2 span { color: var(--muted);}
.fg .people { margin-left: auto; display: flex; padding-right: calc(52px * var(--k));}
.fg .people i { width: calc(34px * var(--k)); height: calc(34px * var(--k)); border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; font: 700 calc(11px * var(--k)) "Roboto", sans-serif; color: #fff; margin-left: -8px; transition: transform 400ms var(--ease-out), box-shadow 300ms ease; font-style: normal;}
.fg .people i:nth-child(1) { background: var(--blue);}
.fg .people i:nth-child(2) { background: var(--purple);}
.fg .people i:nth-child(3) { background: var(--green);}
.fg .sc-ticket.s3b .people i { transform: translateY(-4px); box-shadow: 0 0 0 calc(3px * var(--k)) var(--orange-soft);}
.fg .sc-ticket.s3b .people i:nth-child(2) { transition-delay: 80ms;}
.fg .sc-ticket.s3b .people i:nth-child(3) { transition-delay: 160ms;}
.fg .sc-ticket .jira-win { opacity: 0; transform: translateY(calc(14px * var(--k))) scale(.99); transition: opacity 350ms ease, transform 550ms var(--ease-out);}
.fg .sc-ticket.s1 .jira-win { opacity: 1; transform: none;}
.fg .auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);}
@media (max-width: 860px) {
  .fg .auto-grid { grid-template-columns: 1fr;}
}
.fg .ev { border-radius: var(--r-md); background: #fff; padding: var(--s4); box-shadow: 0 1px 2px rgba(43,43,43,.06); border: 1.5px solid transparent; transition: border-color 300ms ease, box-shadow 400ms var(--ease-out), opacity 300ms ease; opacity: .55;}
.fg .ev.on { opacity: 1; border-color: var(--orange); box-shadow: 0 0 0 calc(4px * var(--k)) var(--orange-soft), var(--shadow);}
.fg .ev .when { font-size: calc(12px * var(--k)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2);}
.fg .ev h3 { font-size: calc(19px * var(--k)); margin-bottom: var(--s3);}
.fg .ev .jcard { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #172b4d; border: 1px solid #dcdfe4; border-radius: calc(6px * var(--k)); padding: calc(10px * var(--k)) calc(12px * var(--k)); font-size: calc(13px * var(--k)); display: flex; gap: calc(10px * var(--k)); align-items: center;}
.fg .ev .jcard .ty { width: calc(16px * var(--k)); height: calc(16px * var(--k)); border-radius: calc(3px * var(--k)); flex: none;}
.fg .ev .jcard b { font-weight: 600; white-space: nowrap;}
.fg .ev .jcard .k { color: #626f86;}
.fg .ev .jcard .lz { margin-left: auto; font-size: calc(11px * var(--k)); padding: 1px calc(6px * var(--k));}
.fg .ev p { font-size: calc(15px * var(--k)); color: var(--muted); margin-top: var(--s3);}
.fg .chips { display: flex; flex-wrap: wrap; gap: calc(6px * var(--k)); margin: var(--s4) 0 var(--s3);}
.fg .chip-s { font-size: calc(13px * var(--k)); padding: calc(4px * var(--k)) calc(10px * var(--k)) calc(4px * var(--k)) calc(8px * var(--k)); border-radius: calc(999px * var(--k)); background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; gap: calc(6px * var(--k)); color: var(--muted); transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;}
.fg .chip-s::before { content: ""; width: calc(8px * var(--k)); height: calc(8px * var(--k)); border-radius: 50%; background: #c9cacd; transition: background-color 250ms ease;}
.fg .chips.go .chip-s { background: #dff1cf; border-color: #b2dc90; color: #285c12;}
.fg .chips.go .chip-s::before { background: var(--green);}
.fg .auto-out { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; opacity: 0; transform: translateY(calc(8px * var(--k))); transition: opacity 300ms ease, transform 450ms var(--ease-out);}
.fg .auto-out.on { opacity: 1; transform: none;}
.fg .auto-out .o { display: inline-flex; gap: calc(8px * var(--k)); align-items: center; background: #fff; border-radius: var(--r-sm); padding: calc(8px * var(--k)) calc(12px * var(--k)); font-size: calc(14px * var(--k)); box-shadow: 0 1px 2px rgba(43,43,43,.08); min-width: 0;}
.fg .auto-out .o svg { color: var(--blue);}
.fg .auto-out .o.m svg { color: var(--orange);}
.fg .auto-out .o span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.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;}
}
.fg a.svc { color: inherit; text-decoration: none; transition: box-shadow 150ms ease; }
.fg a.svc:hover { box-shadow: 0 0 0 2px var(--blue-soft); }
.fg .svc .gh { font-size: calc(12px * var(--k)); color: var(--blue); margin-top: calc(4px * var(--k)); }