:root{--on-accent:#FDFCDC;--accent-fg:#FDFCDC;--surface:#fffef7;--tint-teal:#eaf8f7;--tint-peach:#fff6ee;--tint-soft:#f5fbfa;
  --warn-bg:#fff0e3;--tip-bg:#e4f5f4;--line-teal:#a9dde0;--line-peach:#f4d3b6;
  --code-fg:#0e5a63;--code-bg:#15333b;--code-txt:#fdfcdc;--code-cm:#8fb3ae;
  --pill-teal-bg:#d3f0ef;--pill-coral-bg:#ffe0dc;--pill-peach-bg:#FED9B7;--pill-peach-fg:#744b32;--pill-coral-fg:#96382f;
  --ok:#2d785a;--bad:#b0463c;--warnfg:#905f28;--blue-hover:#005b73;
  --shadow:rgba(21,51,59,.045);--blob-a:var(--peach);--blob-b:rgba(0,175,185,.20);
  --blue:#006C87;--teal:#00AFB9;--cream:#FDFCDC;--peach:#FED9B7;--coral:#F07167;--ink:#15333b;--muted:#4a626b;--white:#fffef7;--line:#cfe3e4}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;
  background-color:var(--cream);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 900px 620px at 8% 2%,rgba(0,175,185,.10),transparent 62%),
    radial-gradient(ellipse 760px 540px at 95% 14%,rgba(254,217,183,.26),transparent 64%),
    radial-gradient(ellipse 820px 600px at 78% 62%,rgba(240,113,103,.08),transparent 62%),
    radial-gradient(ellipse 900px 640px at 15% 88%,rgba(0,108,135,.07),transparent 62%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:220px 220px,auto,auto,auto,auto;
  background-attachment:fixed;background-blend-mode:soft-light,normal,normal,normal,normal}
a{color:var(--blue);text-decoration:none}a:hover{color:var(--coral);text-decoration:underline}
.wrap{max-width:1160px;margin:auto;padding:0 24px}
nav{height:82px;display:flex;align-items:center;justify-content:space-between;position:relative}
.brand{font-weight:700;font-size:18px;letter-spacing:-.04em;color:var(--ink)}.brand span{color:var(--coral)}
.navlinks{display:flex;gap:20px;color:var(--muted);font-size:14px}.navlinks a{color:var(--muted)}.navlinks a:hover{color:var(--blue)}
.navbtn{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 11px;cursor:pointer;font:inherit;color:var(--ink);line-height:1}
.navbtn span{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px;margin:3px 0;transition:.2s}
h1,h2,h3{font-family:Fraunces,serif;letter-spacing:-.045em;line-height:1.05}
.hero{padding:74px 0 50px;position:relative;overflow:hidden;--hero2:rgba(0,175,185,.20)}
.hero:after{content:"";position:absolute;width:250px;height:168px;background:var(--peach);border-radius:54% 46% 60% 40%;right:-66px;top:34px;transform:rotate(-8deg);z-index:-1}
.hero:before{content:"";position:absolute;width:210px;height:210px;border-radius:52% 48% 44% 56%;background:var(--hero2);right:130px;top:-40px;z-index:-2}
.kicker{text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:700;color:var(--blue)}
h1{font-size:clamp(44px,7vw,72px);max-width:840px;margin:18px 0}
.hero p{font-size:19px;line-height:1.7;color:var(--muted);max-width:700px}
p,li{color:var(--muted);line-height:1.75}ul,ol{padding-left:22px}li{margin-bottom:5px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.87em;background:var(--tint-teal);padding:2px 6px;border-radius:6px;color:var(--code-fg);word-break:break-word}
pre{background:#15333b;color:#fdfcdc;padding:17px;border-radius:14px;overflow:auto;line-height:1.7;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin:14px 0}
pre .cm{color:#8fb3ae}pre .hl{color:var(--peach)}
.layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:50px;padding:8px 0 90px}
.toc{position:sticky;top:22px;height:max-content;max-height:calc(100vh - 44px);overflow:auto}
.toc strong{display:block;margin-bottom:11px;font-size:14px;color:var(--ink)}
.toc a{display:block;padding:5px 0;color:var(--muted);font-size:13.5px;line-height:1.4}
.toc a:hover{color:var(--blue)}.toc a.on{color:var(--blue);font-weight:700}
.toc hr{border:0;border-top:1px solid var(--line);margin:12px 0}
section{scroll-margin-top:22px;margin-bottom:58px}
h2{font-size:36px;margin:8px 0 14px}h3{font-size:23px;margin:32px 0 10px}
h4{font-family:"DM Sans";font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:22px 0 7px}
.lead{font-size:16.5px;color:var(--muted);line-height:1.75;max-width:690px;margin-bottom:20px}
.card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:22px;margin:18px 0;box-shadow:0 1px 2px rgba(21,51,59,.04),0 6px 18px rgba(21,51,59,.045)}
.card.teal{background:var(--tint-teal);border-color:var(--line-teal)}.card.peach{background:var(--tint-peach);border-color:var(--line-peach)}
.card strong{color:var(--ink)}
.warning{border-left:5px solid var(--coral);background:var(--warn-bg);padding:15px 17px;border-radius:0 14px 14px 0;margin:16px 0;font-size:14.5px;line-height:1.7}
.tip{border-left:5px solid var(--teal);background:var(--tip-bg);padding:15px 17px;border-radius:0 14px 14px 0;margin:16px 0;font-size:14.5px;line-height:1.7}
.warning strong,.tip strong{color:var(--ink)}
.tbl{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:16px 0;box-shadow:0 1px 2px rgba(21,51,59,.04)}
.tbl table{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;padding:12px 15px;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);background:var(--tint-teal);font-weight:700}
.tbl td{padding:11px 15px;border-top:1px solid var(--line);color:var(--muted);vertical-align:top}
.tbl td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.yes{color:var(--ok);font-weight:700}.no{color:var(--bad);font-weight:700}.part{color:var(--warnfg);font-weight:700}
details.app{background:var(--white);border:1px solid var(--line);border-radius:18px;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 2px rgba(21,51,59,.04),0 6px 18px rgba(21,51,59,.04)}
details.app[open]{border-color:var(--line-teal)}
details.app summary{cursor:pointer;padding:17px 46px 17px 20px;list-style:none;position:relative;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
details.app summary::-webkit-details-marker{display:none}
details.app summary:after{content:"";position:absolute;right:20px;top:23px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:.2s}
details.app[open] summary:after{transform:rotate(-135deg);top:26px}
details.app summary b{font-size:17px;letter-spacing:-.02em;color:var(--ink)}
details.app summary .d{font-size:13.5px;color:var(--muted);flex:1;min-width:170px}
.pill{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.pill.first{background:var(--pill-teal-bg);color:var(--code-fg)}.pill.after{background:var(--pill-peach-bg);color:var(--pill-peach-fg)}
.abody{padding:0 20px 20px;border-top:1px solid var(--line);padding-top:16px}
.abody p,.abody li{font-size:14.5px}
.steps{counter-reset:st;list-style:none;padding:0;margin:14px 0}
.steps>li{counter-increment:st;position:relative;padding:0 0 14px 36px;font-size:14.5px;line-height:1.7}
.steps>li:before{content:counter(st);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--tint-teal);border:1px solid var(--line-teal);color:var(--blue);font-size:12px;font-weight:700;display:grid;place-items:center}
.steps ul{margin:7px 0 0}
.fields{background:var(--tint-soft);border:1px solid var(--line);border-radius:13px;padding:5px 16px;margin:12px 0}
.fields dl{margin:0;display:grid;grid-template-columns:minmax(130px,auto) 1fr;gap:0 14px}
.fields dt{font-weight:700;color:var(--ink);font-size:13.5px;padding:8px 0;border-bottom:1px solid #e2eeed}
.fields dd{margin:0;font-size:13.5px;color:var(--muted);padding:8px 0;border-bottom:1px solid #e2eeed}
.fields dl>dt:last-of-type,.fields dl>dd:last-of-type{border-bottom:0}
.btn{display:inline-block;border-radius:999px;padding:12px 20px;font-weight:700;font-size:14.5px;background:var(--blue);color:#fff}
.btn:hover{background:var(--blue-hover);color:#fff;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--teal);color:var(--blue);background:transparent}
footer{border-top:1px solid var(--line);padding:25px 0;color:var(--muted);font-size:13px}
@media(max-width:900px){
.navbtn{display:block}
.navlinks{display:none;position:absolute;top:66px;right:0;left:0;background:var(--white);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:0;padding:8px;z-index:60;box-shadow:0 10px 30px rgba(21,51,59,.09)}
.navopen .navlinks{display:flex}
.navlinks a{padding:11px 13px;border-radius:10px;font-size:15px}
.layout{grid-template-columns:1fr;gap:0}.toc{position:static;max-height:none;margin-bottom:32px}
h2{font-size:29px}.hero:before{display:none}
.fields dl{grid-template-columns:1fr}
.fields dt{border-bottom:0;padding-bottom:0}
}
@media(max-width:520px){.tbl{overflow-x:auto}}
@media print{body{background-image:none}}

/* ── dark theme ─────────────────────────────────────────────────────
   Same hues, inverted. Every pairing here clears WCAG AA.            */
html[data-theme="dark"]{
  --cream:#0d1a1f;--ink:#eef7f5;--muted:#c3d6d9;--white:#132a31;--surface:#132a31;
  --line:#23434c;--blue:#6ec9d6;--blue-hover:#8fdae5;--teal:#00AFB9;--accent-fg:#07222a;
  --tint-teal:#12313a;--tint-peach:#2e2118;--tint-soft:#102a31;
  --warn-bg:#33201c;--tip-bg:#12313a;--line-teal:#2c5560;--line-peach:#4a3526;
  --code-fg:#8fdae5;--code-bg:#08151a;--code-txt:#dfeef0;--code-cm:#7fa8a4;
  --pill-teal-bg:#164048;--pill-coral-bg:#43231f;--pill-peach-bg:#4a3526;--pill-peach-fg:#e8c09a;--pill-coral-fg:#f6a89f;
  --ok:#6cc79b;--bad:#f2857a;--warnfg:#e0b06a;
  --shadow:rgba(0,0,0,.30);--blob-a:rgba(254,217,183,.13);--blob-b:rgba(0,175,185,.10);
  color-scheme:dark;
}
html[data-theme="dark"] body{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.32'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 900px 620px at 8% 2%,rgba(0,175,185,.09),transparent 62%),
    radial-gradient(ellipse 760px 540px at 95% 14%,rgba(254,217,183,.07),transparent 64%),
    radial-gradient(ellipse 820px 600px at 78% 62%,rgba(240,113,103,.06),transparent 62%),
    radial-gradient(ellipse 900px 640px at 15% 88%,rgba(110,201,214,.06),transparent 62%);
  background-blend-mode:overlay,normal,normal,normal,normal;
}
html[data-theme="dark"] .hero:after{background:var(--blob-a)}
html[data-theme="dark"] .hero:before{background:var(--blob-b)}
html[data-theme="dark"] .generator{background:#0f2830}
html[data-theme="dark"] .btn{background:var(--blue);color:#08151a}
html[data-theme="dark"] .btn:hover{background:var(--blue-hover);color:#08151a}
html[data-theme="dark"] .generator .btn{background:var(--blue);color:#08151a}
html[data-theme="dark"] pre{border:1px solid var(--line)}
html[data-theme="dark"] img{opacity:.92}

/* ── shared chrome ──────────────────────────────────────────────────── */
.navlinks a[aria-current="page"]{color:var(--blue);font-weight:700;position:relative}
.navlinks a[aria-current="page"]:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue);border-radius:2px}
.navtools{display:flex;align-items:center;gap:10px}
.themebtn{background:none;border:1px solid var(--line);border-radius:999px;width:34px;height:34px;
  cursor:pointer;color:var(--muted);display:grid;place-items:center;padding:0;flex-shrink:0;transition:.15s}
.themebtn:hover{border-color:var(--teal);color:var(--blue)}
.themebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
html[data-theme="dark"] .themebtn .i-sun{display:block}
html[data-theme="dark"] .themebtn .i-moon{display:none}
.themebtn .i-sun{display:none}
.themebtn .i-moon{display:block}

/* next / previous pager */
.pager{display:grid;gap:12px;margin:56px 0 10px;padding-top:30px;border-top:1px solid var(--line)}
@media(min-width:760px){.pager{grid-template-columns:1fr 1fr}}
.pager a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:17px 20px;text-decoration:none;transition:.15s}
.pager a:hover{border-color:var(--teal);transform:translateY(-1px);text-decoration:none}
.pager .dir{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:5px}
.pager .ttl{font-family:Fraunces,serif;font-size:19px;letter-spacing:-.03em;color:var(--blue);display:block;margin-bottom:3px}
.pager .sub{font-size:13.5px;color:var(--muted);line-height:1.5}
.pager .prev{text-align:left}
@media(min-width:760px){.pager .next{text-align:right}}

/* site footer */
.sitefoot{border-top:1px solid var(--line);margin-top:20px;padding:38px 0 30px}
.footgrid{display:grid;gap:26px;margin-bottom:26px}
@media(min-width:720px){.footgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footbrand .fb{font-family:Fraunces,serif;font-size:20px;letter-spacing:-.03em;color:var(--ink)}
.footbrand p{font-size:13.5px;margin:8px 0 0;max-width:270px;line-height:1.6}
.footcol b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.footcol a{display:block;font-size:14px;padding:4px 0;color:var(--muted)}
.footcol a:hover{color:var(--blue)}
.footbase{border-top:1px solid var(--line);padding-top:20px;font-size:12.5px;color:var(--muted);line-height:1.7}

/* The theme toggle now sits beside the menu button, so the dropdown must
   clear both and the tools row must stay visible on small screens. */
@media(max-width:900px){
  .navtools{gap:8px}
  .navlinks{top:70px}
  .navlinks a[aria-current="page"]:after{display:none}
  .navlinks a[aria-current="page"]{background:var(--tint-teal)}
}

/* surfaces that were still hardcoded light */
html[data-theme="dark"] details.qa[open]{background:#16333b}
html[data-theme="dark"] .tbl tr:nth-child(even) td{background:rgba(255,255,255,.022)}
html[data-theme="dark"] pre{background:var(--code-bg)}
html[data-theme="dark"] .sbox:before{border-color:var(--muted)}
html[data-theme="dark"] .sbox:after{background:var(--muted)}
html[data-theme="dark"] .genout{background:#08151a}
html[data-theme="dark"] .outwrap,html[data-theme="dark"] .outbar{background:#08151a}
html[data-theme="dark"] .outbar{border-bottom:1px solid var(--line)}
html[data-theme="dark"] .qs-step pre,html[data-theme="dark"] .dcard pre,
html[data-theme="dark"] .stp pre{background:var(--code-bg)}
html[data-theme="dark"] .chip.on,html[data-theme="dark"] .stepbtn.on,
html[data-theme="dark"] .pbtn.on{color:#08151a}
html[data-theme="dark"] .qs-step:before,html[data-theme="dark"] .stp:before{color:#08151a}
html[data-theme="dark"] .steps>li:before{background:var(--tint-teal);color:var(--blue);border-color:var(--line-teal)}
html[data-theme="dark"] .dbadge{color:#08151a}
html[data-theme="dark"] .secretval{background:var(--tint-teal);color:var(--ink)}
html[data-theme="dark"] .util,html[data-theme="dark"] .mod,html[data-theme="dark"] .opt,
html[data-theme="dark"] .pick,html[data-theme="dark"] .price,html[data-theme="dark"] .prov,
html[data-theme="dark"] .aidcard,html[data-theme="dark"] .mini,html[data-theme="dark"] .dcard,
html[data-theme="dark"] details.app,html[data-theme="dark"] details.m,
html[data-theme="dark"] .side,html[data-theme="dark"] .qs-done,
html[data-theme="dark"] .qs-need,html[data-theme="dark"] .spec div,
html[data-theme="dark"] .fields,html[data-theme="dark"] .flow span,
html[data-theme="dark"] .stacklist li{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .mod.on,html[data-theme="dark"] .tg.on,
html[data-theme="dark"] .qs-next a,html[data-theme="dark"] .aidcard.teal,
html[data-theme="dark"] .dcard-lead{background:var(--tint-teal);border-color:var(--line-teal)}
html[data-theme="dark"] .mod.auto,html[data-theme="dark"] .dcard:nth-child(3){background:var(--tint-peach);border-color:var(--line-peach)}
html[data-theme="dark"] .cyc>.card:nth-of-type(3n+2){background:var(--tint-teal);border-color:var(--line-teal)}
html[data-theme="dark"] .cyc>.card:nth-of-type(3n){background:var(--tint-peach);border-color:var(--line-peach)}
html[data-theme="dark"] .genfacts div{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
html[data-theme="dark"] .head{background:var(--tint-teal);border-color:var(--line-teal)}

/* Pills keep a fixed light background, so their dark-mode surface must be
   set explicitly or the label becomes invisible against it. */
html[data-theme="dark"] .tag,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .pill.mod,
html[data-theme="dark"] .pill.after,
html[data-theme="dark"] .v-ok,
html[data-theme="dark"] .vi.warn,
html[data-theme="dark"] .mod .flag.auto,
html[data-theme="dark"] .hw-badge{
  background:#4a3526;color:#f0cfa8;border-color:#5d452f}
html[data-theme="dark"] .pill.easy,
html[data-theme="dark"] .pill.first,
html[data-theme="dark"] .pill.teal,
html[data-theme="dark"] .v-best,
html[data-theme="dark"] .t-cyan{background:#164048;color:#9fe0e6}
html[data-theme="dark"] .pill.adv,
html[data-theme="dark"] .pill.w,
html[data-theme="dark"] .v-meh,
html[data-theme="dark"] .mod .flag,
html[data-theme="dark"] .tag.w{background:#43231f;color:#f8b4ab}
html[data-theme="dark"] .stepbtn .n{background:#164048;color:#9fe0e6}
html[data-theme="dark"] .stepbtn.on .n{background:rgba(0,0,0,.28);color:#08151a}
html[data-theme="dark"] .dsteps li:before{background:var(--surface);color:var(--blue);border-color:var(--line-teal)}

/* ── keyboard and motion ────────────────────────────────────────────
   Visible focus everywhere: the generator, the collapsible steps and
   the FAQ search are all keyboard-operable and were previously
   impossible to navigate by sight.                                    */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,details:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
html[data-theme="dark"] :focus-visible{outline-color:var(--blue)}
/* Older browsers without :focus-visible still get something */
a:focus,button:focus,summary:focus{outline:2px solid var(--blue);outline-offset:2px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none}

.skiplink{position:absolute;left:-9999px;top:0;z-index:999;background:var(--blue);color:#fff;
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:700;font-size:15px}
.skiplink:focus{left:0;text-decoration:none;color:#fff}
html[data-theme="dark"] .skiplink{color:#08151a}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .pager a:hover,.util:hover,.qs-next a:hover{transform:none}
}

/* ── large displays ─────────────────────────────────────────────────
   The 1160px cap uses only 30% of a 4K screen. Widen in steps and lift
   the base size a little, so the page fills the space without prose
   lines growing past a comfortable reading measure.                   */
@media(min-width:1500px){
  .wrap{max-width:1320px}
  html{font-size:17px}
}
@media(min-width:2000px){
  .wrap{max-width:1680px}
  html{font-size:18px}
  .hero{padding-top:96px;padding-bottom:74px}
}
@media(min-width:2800px){
  .wrap{max-width:2040px}
  html{font-size:20px}
}
/* Prose stays readable even as the container grows — long measures are
   harder to read, so text blocks keep their own ceiling. */
@media(min-width:1500px){
  .lead,.hero p,.pd,.qs-step p,.abody p,.mbody p{max-width:78ch}
  .toc{width:230px}
}
/* Wider containers can afford more columns. */
@media(min-width:1900px){
  .mods{grid-template-columns:repeat(3,1fr)}
  .util-grid{grid-template-columns:repeat(4,1fr)}
  .prices{grid-template-columns:repeat(3,1fr)}
  .chelp-grid{grid-template-columns:repeat(4,1fr)}
  .qs-next{grid-template-columns:repeat(3,1fr)}
}

/* ---------- compose generator ---------- */
.gen-presets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0}
.gen-lab{font-size:12.5px;color:var(--muted)}
.gen-btn{font:inherit;font-size:13px;font-weight:500;padding:7px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer}
.gen-btn:hover{border-color:var(--blue);color:var(--blue)}
.gen-primary{background:var(--blue);color:var(--accent-fg);border-color:var(--blue)}
.gen-primary:hover{background:var(--blue-hover);color:var(--accent-fg);border-color:var(--blue-hover)}
.gen-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 20px}
@media(min-width:760px){.gen-grid{grid-template-columns:1fr 1fr}}
.gen-mod,.gen-opt{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line);
  border-radius:14px;background:var(--white);cursor:pointer;margin:0 0 10px}
.gen-mod.on,.gen-opt.on{border-color:var(--blue);background:var(--tint-teal)}
.gen-mod input,.gen-opt input{margin-top:3px;flex:none}
.gen-modbody,.gen-opt>div{min-width:0}
.gen-modhead{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.gen-mod p,.gen-opt p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.gen-field{margin:0 0 13px}
.gen-field label{display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:var(--ink)}
.gen-field input{font:inherit;font-size:14px;width:100%;max-width:440px;padding:9px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink)}
.gen-field input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.gen-note{font-size:13px;color:var(--muted);margin:8px 0}
.gen-secret{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:10px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--white);margin:0 0 8px}
.gen-skey{font-size:12.5px;color:var(--muted);flex:1 1 220px;min-width:0}
.gen-sval{font-size:12.5px;word-break:break-all;flex:1 1 200px}
.gen-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.gen-tab{font:inherit;font-size:12.5px;padding:6px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--white);color:var(--muted);cursor:pointer}
.gen-tab.on{background:var(--tint-teal);border-color:var(--blue);color:var(--code-fg);font-weight:500}