/* AerialQuote — 8 Oct 2026: tracing field, two-step coach, phone results,
   detail pop-ups, the Change screen, pro pricing. Pairs with aq-quick.js. */

/* ---------- "What are you tracing?" (all widths) ---------- */
.jobField{position:relative; flex:1 1 240px; min-width:200px}
.jobField label::after{content:' \2022 required'; color:var(--amber); letter-spacing:.06em}
.jobQRow{display:flex; gap:6px; align-items:center}
.jobQRow .fld{flex:1 1 auto; min-width:0; border-color:var(--blue)}
.jobQRow .fld.set{border-color:var(--mint)}
.jobField.need .jobQRow .fld{border-color:var(--rose); box-shadow:0 0 0 3px rgba(255,90,110,.18)}
.jobBrowse{flex:none; background:none; border:0; color:var(--blue-lit); font:700 13px/1 Figtree,sans-serif;
  padding:10px 4px; cursor:pointer; white-space:nowrap}
.jobNeed{font-size:13px; line-height:1.35; color:#FFC2CB; margin-top:2px}
html[data-mode="light"] .jobNeed{color:#B4233A}
.jobNeed[hidden]{display:none}
#jobQList{position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:90}
#jobQList[hidden]{display:none}
#jobQList .jfAll{display:block; width:100%; text-align:center; padding:12px; border:0; cursor:pointer;
  background:transparent; color:var(--blue-lit); font:700 14px/1 Figtree,sans-serif; border-top:1px solid var(--line)}

@media(max-width:900px){
  body.toolPage .searchBar{flex-wrap:wrap}
  body.toolPage .searchBar .sField.jobField{order:5; flex:1 1 100%; min-width:0}
  body.toolPage .searchBar .sField.narrow{order:6}
  body.toolPage .searchBar #latlon{order:7}
  body.toolPage .jobQRow .fld{font-size:16px}
}

/* ---------- the two-step coach ---------- */
.aqCoach{position:fixed; z-index:58; display:flex; align-items:center; gap:11px;
  padding:10px 12px 10px 10px; border-radius:15px; background:#FFB020; color:#1A1203;
  box-shadow:0 12px 28px rgba(0,0,0,.45); font-family:Figtree,sans-serif; max-width:min(420px, calc(100vw - 16px))}
.aqCoach[hidden], .aqCoachArrow[hidden]{display:none !important}
.aqCoach.s2{max-width:none}
.aqCT{display:flex; flex-direction:column; min-width:0}
.aqCT small{font:800 10.5px/1.2 Figtree,sans-serif; letter-spacing:.1em; opacity:.72}
.aqCT b{font:800 17px/1.15 Outfit,sans-serif; letter-spacing:-.01em}
.aqCT em{font-style:normal; font-weight:600; font-size:13.5px; line-height:1.3; margin-top:2px}
.aqCT em.aqFirst b{font:800 13.5px/1 Figtree,sans-serif}
.aqHand{flex:none; width:38px; height:38px; border-radius:10px; background:rgba(26,18,3,.12);
  display:grid; place-items:center}
.aqHand svg{width:24px; height:24px; fill:none; stroke:#1A1203; stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round; animation:aqDrag 1.6s ease-in-out infinite}
.aqEx{flex:none; width:92px; height:60px; border-radius:10px; background:#47652F; overflow:hidden}
.aqEx svg{width:92px; height:60px; display:block}
.aqDraw{stroke-dasharray:260; animation:aqDrawK 2.6s ease-in-out infinite}
.aqDot{animation:aqDotK 1.3s ease-in-out infinite}
.aqCX{flex:none; align-self:flex-start; width:32px; height:32px; margin-left:auto; border-radius:9px;
  border:0; background:rgba(26,18,3,.12); color:#1A1203; font-size:14px; font-weight:800; cursor:pointer}
.aqCoachArrow{position:fixed; z-index:58; width:26px; height:26px; pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.aqCoachArrow svg{width:26px; height:26px; fill:none; stroke:#FFB020; stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round}
.aqCoachArrow.down svg{animation:aqBob 1s ease-in-out infinite}
.aqCoachArrow.up svg{transform:rotate(180deg); animation:aqBobUpR 1s ease-in-out infinite}
#tools .tool.aqGlow{animation:aqGlowK 1.4s ease-out infinite; border-color:#FFB020 !important}
@keyframes aqBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes aqBobUpR{0%,100%{transform:rotate(180deg) translateY(0)}50%{transform:rotate(180deg) translateY(5px)}}
@keyframes aqGlowK{0%,100%{box-shadow:0 0 0 0 rgba(255,176,32,.8)}60%{box-shadow:0 0 0 8px rgba(255,176,32,0)}}
@keyframes aqDrawK{0%{stroke-dashoffset:260}70%,100%{stroke-dashoffset:0}}
@keyframes aqDotK{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes aqDrag{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-3px)}}
@media (prefers-reduced-motion:reduce){
  .aqHand svg,.aqDraw,.aqDot,.aqCoachArrow svg,#tools .tool.aqGlow,.aqCue i,.panel .moreBelow .mbA{animation:none !important}
}

/* ---------- the MEASURING chip carries the option too ---------- */
.jobChip .jcOpt{flex:none; font-size:13px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.jobChip .jcOpt:empty{display:none}

/* ---------- phone: the short answer replaces the long results ---------- */
.qr[hidden]{display:none}
@media(max-width:1000px){
  body.toolPage.qrOn #out,
  body.toolPage.qrOn #prosBox,
  body.toolPage.qrOn #yardBox,
  body.toolPage.qrOn .askBar,
  body.toolPage.qrOn .panel > #proSec{display:none !important}
}
.qr{display:flex; flex-direction:column; gap:12px; margin:4px 0 12px}
.qrEmpty{border:1px dashed var(--line-2); border-radius:16px; padding:18px 16px; text-align:center;
  color:var(--ink-2); font-size:15px; line-height:1.45}
.qrEmpty b{color:var(--ink)}
.qrCard{border-radius:18px; padding:16px; border:1px solid var(--line-2);
  background:linear-gradient(180deg, var(--panel-2), var(--card))}
html[data-mode="light"] .qrCard{background:#fff}
.qrBig{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.qrBig b{font:600 40px/1 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:-.02em; color:var(--ink)}
.qrBig span{font:700 19px/1.2 Outfit,sans-serif; color:var(--blue-lit)}
html[data-mode="light"] .qrBig span{color:var(--blue)}
.qrSub{margin-top:6px; font-size:14px; color:var(--ink-2)}
.qrTiles{display:grid; gap:8px; margin-top:14px; grid-template-columns:repeat(2, minmax(0,1fr))}
.qrTiles.n1{grid-template-columns:minmax(0,1fr)}
.qrTile{display:flex; flex-direction:column; border-radius:12px; padding:9px 9px 9px 11px;
  border:1px solid var(--line-2); background:rgba(110,156,255,.08); min-width:0}
.qrTile.mint{background:rgba(18,226,154,.08); border-color:rgba(18,226,154,.3)}
.qrTile.amber{background:rgba(255,176,32,.07); border-color:rgba(255,176,32,.38)}
.qrTl{font:700 10.5px/1.2 Figtree,sans-serif; letter-spacing:.1em; color:var(--ink-2)}
.qrTile.mint .qrTl{color:#3FD9A2}
.qrTile.amber .qrTl{color:#E5A321}
.qrTv{font:600 15px/1.3 "IBM Plex Mono",ui-monospace,monospace; margin-top:3px; color:var(--ink);
  overflow-wrap:anywhere}
.qrTs{font-size:11.5px; color:var(--ink-3); margin-top:2px; line-height:1.3}
.qrTb{margin-top:auto; min-height:40px; width:100%; border-radius:10px; cursor:pointer;
  font:700 14px/1 Figtree,sans-serif; border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink);
  margin-top:9px}
html[data-mode="light"] .qrTb{background:#F2F6FD}
.qrTb.gloss, html[data-mode="light"] .qrTb.gloss{border:0; color:#fff; background:linear-gradient(180deg,#6E9CFF 0%,#2F6BFF 44%,#1741C4 100%)}
/* 16 Oct 2026: the light-mode .qrTb rule above outranked .qrTb.gloss, so "Find a pro"
   turned white-on-white in light mode. Listing the light selector here keeps it blue. */
.qrLeft{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px;
  border-radius:12px; padding:10px 12px; background:rgba(18,226,154,.1); border:1px solid rgba(18,226,154,.4)}
.qrLeft > div{display:flex; flex-direction:column}
.qrLeft b{font:600 22px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--mint)}
html[data-mode="light"] .qrLeft b{color:#0B8F61}
.qrHead{font:700 11px/1 Figtree,sans-serif; letter-spacing:.14em; color:var(--ink-3); padding:2px 4px 0}
.qrRows{border-radius:16px; border:1px solid var(--line); overflow:hidden; background:var(--card)}
.qrRow{width:100%; min-height:54px; display:flex; align-items:center; gap:12px; padding:0 12px 0 14px;
  background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--ink);
  text-align:left; cursor:pointer; font-family:Figtree,sans-serif}
.qrRow:last-child{border-bottom:0}
.qrRow svg{flex:none; width:22px; height:22px; fill:none; stroke:var(--blue-lit); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.qrRow svg.qrChev{width:16px; height:16px; stroke:var(--ink-3); stroke-width:2.2}
.qrRt{flex:1; font-size:15px; font-weight:600; min-width:0}
.qrRv{font:500 13.5px/1.2 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-2); text-align:right;
  max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* the results sheet's own cue: an amber pill that bobs, easy to see */
@media(max-width:1000px){
  body.toolPage .panel #moreBelow{display:flex; align-items:center; justify-content:center; gap:6px;
    width:-moz-fit-content; width:fit-content; margin:8px auto 0; bottom:10px; padding:11px 18px;
    border:1.5px solid #FFB020; border-radius:99px; background:rgba(8,13,26,.94); color:#FFB020;
    font:800 14px/1 Figtree,sans-serif; box-shadow:0 8px 22px rgba(0,0,0,.5)}
  html[data-mode="light"] body.toolPage .panel #moreBelow{background:#fff; color:#B87800; border-color:#E5A321}
  body.toolPage .panel #moreBelow[hidden],
  body.toolPage .panel.collapsed #moreBelow{display:none !important}
  body.toolPage .panel #moreBelow .mbA{animation:aqBob 1s ease-in-out infinite}
  body.toolPage .panel #moreBelow[data-dir="up"] .mbA{animation-name:aqBobUpS}
}
@keyframes aqBobUpS{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- pop-ups and the Change screen ---------- */
.aqPop, .aqChg{position:fixed; inset:0; z-index:130; display:flex; flex-direction:column; justify-content:flex-end}
.aqChg{z-index:125; background:rgba(3,5,12,.6)}
.aqPop[hidden], .aqChg[hidden]{display:none !important}
.aqPopBack{flex:1; background:rgba(3,5,12,.62); cursor:pointer}
.aqPopCard, .aqChgCard{position:relative; display:flex; flex-direction:column; max-height:82vh; max-height:82svh;
  background:var(--card); color:var(--ink); border-top:1px solid var(--line-2); border-radius:22px 22px 0 0;
  box-shadow:0 -20px 50px rgba(0,0,0,.55); padding-bottom:env(safe-area-inset-bottom)}
.aqChgCard{height:92vh; height:92svh; max-height:none}
html[data-mode="dark"] .aqPopCard, html[data-mode="dark"] .aqChgCard{background:#0B1222}
@media(min-width:1001px){
  .aqPop{justify-content:center; align-items:center; padding:24px}
  .aqPopBack{position:absolute; inset:0}
  .aqPopCard{width:min(520px, 100%); border-radius:20px; border:1px solid var(--line-2); max-height:80vh}
}
.aqGrab{width:42px; height:5px; border-radius:3px; background:var(--line-2); margin:8px auto 0; flex:none}
.aqPopHead{flex:none; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:10px 12px 10px 18px}
.aqPopTx{min-width:0}
.aqPopHead h3{margin:0; font:800 21px/1.2 Outfit,sans-serif; letter-spacing:-.02em; color:var(--ink)}
.aqPopSub{margin:3px 0 0; font-size:13.5px; color:var(--ink-3); line-height:1.35}
.aqPopSub[hidden]{display:none}
.aqMono{font:600 15px/1.3 "IBM Plex Mono",ui-monospace,monospace; color:var(--blue-lit)}
.aqX{flex:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--ink); font-size:17px; font-weight:700; cursor:pointer}
html[data-mode="light"] .aqX{background:#F2F6FD}
.aqPopBody, .aqChgBody{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:0 16px 64px}
.aqChgBody .sec{margin-bottom:14px}
.aqPopFoot{flex:none; padding:10px 16px 16px; border-top:1px solid var(--line)}
.aqDone{width:100%; min-height:50px; border-radius:14px; border:1px solid var(--line-2); cursor:pointer;
  background:var(--panel-2); color:var(--ink); font:700 17px/1 Outfit,sans-serif}
html[data-mode="light"] .aqDone{background:#F2F6FD}
.aqDone.aqGo{border:0; color:#fff; background:linear-gradient(180deg,#6E9CFF 0%,#2F6BFF 44%,#1741C4 100%)}
.aqCue{position:absolute; left:50%; transform:translateX(-50%); bottom:84px; z-index:3;
  display:flex; align-items:center; gap:6px; height:40px; padding:0 18px; border-radius:99px; cursor:pointer;
  border:1.5px solid #FFB020; background:rgba(8,13,26,.94); color:#FFB020;
  font:800 14px/1 Figtree,sans-serif; box-shadow:0 8px 22px rgba(0,0,0,.55); white-space:nowrap}
html[data-mode="light"] .aqCue{background:#fff; color:#B87800; border-color:#E5A321}
.aqCue[hidden]{display:none}
.aqCue i{font-style:normal; display:inline-block; animation:aqBob 1s ease-in-out infinite}
.aqCue[data-dir="up"] i{animation-name:aqBobUpS}
.aqList{border-radius:14px; border:1px solid var(--line); overflow:hidden; background:var(--panel)}
html[data-mode="light"] .aqList{background:#F7F9FE}
.aqLine{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px;
  padding:8px 14px; border-bottom:1px solid var(--line)}
.aqLine:last-child{border-bottom:0}
.aqLine > span{font-size:15px; color:var(--ink-2); line-height:1.3}
.aqLine > b{font:600 15px/1.3 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink); text-align:right}
.aqNote{font-size:13.5px; line-height:1.5; color:var(--ink-2); margin:12px 2px 4px}
.aqNote a{color:var(--blue-lit)}
.aqNeed{font-size:14px; color:var(--ink-2); padding:9px 11px; border-radius:10px; margin:0 0 10px;
  background:rgba(18,226,154,.08); border:1px solid rgba(18,226,154,.25)}
.aqCards{display:flex; flex-direction:column}
.aqCards .proCard{padding:12px 0; border-top:1px solid var(--line)}
.aqCards .proCard:first-child{border-top:0}
.aqBig{background:linear-gradient(180deg,#6E9CFF 0%,#2F6BFF 44%,#1741C4 100%); width:100%; min-height:50px; margin-top:14px; border-radius:14px; border:0; color:#fff; cursor:pointer;
  font:700 17px/1 Outfit,sans-serif}
.aqContrib{display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:13.5px; line-height:1.45;
  color:var(--ink-2)}
.aqContrib input{margin-top:3px; width:20px; height:20px; flex:none}
.aqContrib b{display:block; color:var(--ink)}
.aqYards{display:flex; flex-direction:column; gap:9px}
.aqYard{border-radius:14px; border:1px solid var(--line); background:var(--panel); padding:12px 13px}
html[data-mode="light"] .aqYard{background:#F7F9FE}
.aqYTop{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.aqYTop b{font-size:16px; color:var(--ink)}
.aqYTop span{font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-2); white-space:nowrap}
.aqYMeta{font-size:13px; color:var(--ink-3); margin-top:3px}
.aqYPrice{display:flex; align-items:center; gap:7px; margin-top:10px}
.aqYPre{font:600 16px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-2)}
.aqYPrice input{flex:1; min-width:0; height:44px; border-radius:10px; border:1.5px solid #FFB020;
  background:var(--card); color:var(--ink); font:600 16px "IBM Plex Mono",ui-monospace,monospace; padding:0 10px}
.aqYPrice input.bad{border-color:var(--rose)}
.aqYUnit{font-size:13px; color:var(--ink-2); white-space:nowrap}
.aqYSave{height:44px; padding:0 14px; border-radius:10px; border:0; background:#12A874; color:#fff;
  font:800 14px/1 Figtree,sans-serif; cursor:pointer}
.aqYSave.ok{background:#0B8F61}
.aqMint{color:var(--mint)}
html[data-mode="light"] .aqMint{color:#0B8F61}
.proCostCard .aqYardBtn{margin-top:10px; width:100%}
.proCostCard[hidden]{display:none}
.aqPopBody #proSec{display:block !important; margin:0}
.aqPopBody #proSec > label{display:none}
body.aqPopOpen, body.aqChgOpen{overflow:hidden}

/* Google address suggestions under the street box (reuses the recent-addresses list look) */
.acList .acRow{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left}
.acList .acRow b{font-weight:700; color:var(--ink)}
.acList .acRow i{font-style:normal; font-size:12.5px; color:var(--ink-3)}
.acList .acRow.on{background:rgba(47,107,255,.16)}
.acList .acBy{font-size:11px; color:var(--ink-3); text-align:right; padding:6px 12px 8px}

/* Your snow year (9 Oct 2026) */
.qrSnow{display:flex; align-items:center; gap:10px; width:100%; margin-top:10px; padding:11px 12px; border-radius:12px;
  border:1px solid rgba(125,211,252,.45); background:linear-gradient(135deg, rgba(56,189,248,.16), rgba(167,139,250,.12));
  color:var(--ink); text-align:left; cursor:pointer; font-family:Figtree,sans-serif}
.qrSnow svg{flex:none; width:26px; height:26px; fill:none; stroke:#7DD3FC; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.qrSnow span{flex:1; font-size:14px; line-height:1.3; color:var(--ink-2)}
.qrSnow span b{display:block; font:800 17px/1.2 Outfit,sans-serif; color:var(--ink)}
.qrSnow i{flex:none; font-style:normal; font-size:12.5px; font-weight:700; color:#7DD3FC}
html[data-mode="light"] .qrSnow svg{stroke:#0284C7}
html[data-mode="light"] .qrSnow i{color:#0284C7}
.aqTrig{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:4px 0 12px}
.aqTrig span{font-size:13px; color:var(--ink-2); margin-right:4px}
.aqTrig button{min-height:36px; padding:0 12px; border-radius:99px; border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--ink); font:700 13px/1 Figtree,sans-serif; cursor:pointer}
.aqTrig button.on{background:#2F6BFF; border-color:#2F6BFF; color:#fff}
.snowCard[hidden]{display:none}
.snowCard .aqTrig{margin-top:10px}

.snowCard .snowGap{height:1px; background:currentColor; opacity:.14; margin:14px 0}
.snowPitch{margin:12px 0; padding:11px 13px; border-radius:12px; font-size:15px; line-height:1.4;
  background:rgba(120,190,255,.10); border:1px solid rgba(120,190,255,.35)}
.snowPitch b{color:#7CC4FF}
[data-mode="light"] .snowPitch{background:rgba(30,110,220,.07); border-color:rgba(30,110,220,.3)}
[data-mode="light"] .snowPitch b{color:#1558B8}

/* ---------- 11 Oct 2026: the short answer on every width ---------- */
.qrQ{font:600 13.5px/1.3 Figtree,sans-serif; color:var(--ink-3); margin-bottom:6px}
.qrPick{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; width:100%; margin-top:10px;
  padding:9px 11px; border-radius:11px; cursor:pointer; text-align:left; font:500 13.5px/1.3 Figtree,sans-serif;
  color:var(--ink-2); background:rgba(255,176,32,.06); border:1px dashed rgba(255,176,32,.6)}
.qrPick b{color:var(--ink)}
.qrPick u{text-decoration:none; margin-left:auto; font-weight:700; color:#FFB020}
html[data-mode="light"] .qrPick u{color:#A96C00}
#jobAllSec[hidden]{display:none !important}
/* the price under each answer to the roof and driveway questions */
.duo button [data-price]{font:600 12.5px/1.3 "IBM Plex Mono",ui-monospace,monospace; opacity:1;
  color:#3FD9A2; margin-top:5px}
.duo button [data-price]:empty{display:none}
.duo button.on [data-price]{color:#fff}
html[data-mode="light"] .duo button:not(.on) [data-price]{color:#0B8F61}

@media(min-width:1001px){
  /* the answer replaces the long cards; the cards stay in the page (the
     pop-ups and the saved quotes read them) but are not shown */
  body.toolPage.qrOn #out,
  body.toolPage.qrOn #prosBox,
  body.toolPage.qrOn #yardBox,
  body.toolPage.qrOn .askBar,
  body.toolPage.qrOn .panel > .sec:has(#modes),
  body.toolPage.qrOn #jobSec{display:none !important}
  body.toolPage .qr{margin:2px 0 16px}
  body.toolPage .qrBig b{font-size:46px; color:var(--blue-lit)}
  html[data-mode="light"] body.toolPage .qrBig b{color:var(--blue)}
  body.toolPage .qrBig span{color:var(--ink); font-size:18px}
  html[data-mode="light"] body.toolPage .qrBig span{color:var(--ink)}
  body.toolPage .qrCard{border-color:rgba(110,156,255,.38); box-shadow:0 0 40px -18px rgba(47,107,255,.6)}
  body.toolPage .qrTv{font-size:17px}
  body.toolPage .qrRow:hover{background:rgba(47,107,255,.08)}
  body.toolPage .qrHead{font-size:0}
  body.toolPage .qrHead::after{content:'MORE DETAIL — CLICK TO OPEN'; font-size:11px}
}
.sec.aqFlash{animation:aqFlashK 1.6s ease-out 1; border-radius:12px}
@keyframes aqFlashK{0%{box-shadow:0 0 0 3px rgba(255,176,32,.9)}100%{box-shadow:0 0 0 14px rgba(255,176,32,0)}}

/* ---------- 11 Oct 2026: gate counters on the fence job ---------- */
.gateRow{display:grid; gap:8px}
.gateStep{display:grid; grid-template-columns:minmax(0,1fr) 44px 34px 44px; align-items:center; gap:6px;
  padding:10px 10px 10px 13px; border-radius:12px; border:1px solid var(--line-2); background:rgba(5,9,18,.55)}
html[data-mode="light"] .gateStep{background:#fff; border-color:var(--edge)}
.gateStep > span{display:flex; flex-direction:column; min-width:0}
.gateStep b{font:700 15px/1.25 Figtree,sans-serif; color:var(--ink)}
.gateStep i{font-style:normal; font-size:12.5px; color:var(--ink-3)}
.gateStep em{font-style:normal; font:600 12.5px/1.3 "IBM Plex Mono",ui-monospace,monospace; color:#3FD9A2; margin-top:3px}
html[data-mode="light"] .gateStep em{color:#0B8F61}
.gateStep em:empty{display:none}
.gateStep button{width:44px; height:44px; border-radius:11px; cursor:pointer; font:700 20px/1 Figtree,sans-serif;
  color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2)}
.gateStep button:hover{border-color:var(--blue)}
.gateStep output{text-align:center; font:600 20px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--ink)}