/* Cellwise Fix (/excel-formula-helper/). Uses the site tokens from site.css; every colour pair meets WCAG AA in both themes. */
:root { --r0: #1D5FD0; --r1: #C2333A; --r2: #7B3FC4; --r3: #0B7A3B; --r4: #8A5A00; --r5: #0A7A85; --okbg: color-mix(in srgb, var(--green) 12%, var(--card)); --warnbg: color-mix(in srgb, #D98E04 14%, var(--card)); --badbg: color-mix(in srgb, var(--bad) 10%, var(--card)); --warn: #7A4E00; --infobg: color-mix(in srgb, var(--blue) 8%, var(--card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --r0: #8DB8FF; --r1: #FF8E93; --r2: #C9A2FF; --r3: #5FDC97; --r4: #F2C14E; --r5: #5FD6E0; --warn: #F2C14E; } }
:root[data-theme="dark"] { --r0: #8DB8FF; --r1: #FF8E93; --r2: #C9A2FF; --r3: #5FDC97; --r4: #F2C14E; --r5: #5FD6E0; --warn: #F2C14E; }

.fx-hero { padding-top: 6px; }
.fx-hero h1 { font-size: clamp(1.5rem, 4.6vw, 2.6rem); max-width: 22em; margin-bottom: .2em; }
.fx-hero .lede { margin-bottom: .9em; }
.fx { margin: 0 0 8px; }
.fx [hidden] { display: none !important; }
.fx button.btn { border: 0; font-family: inherit; cursor: pointer; }
.fx .btn.small { min-height: 44px; }
.fx .btn svg { width: 18px; height: 18px; flex: none; }
.btn.text { background: none; box-shadow: none; color: var(--link); padding-left: .6em; padding-right: .6em; }
.btn.text:hover { text-decoration: underline; filter: none; }
button.link { appearance: none; border: 0; background: none; padding: 10px 4px; min-height: 44px; color: var(--link); font: inherit; font-weight: 650; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: .2em; cursor: pointer; }
.fx kbd { font: 600 .8125em var(--mono); padding: .05em .35em; border-radius: 6px; border: 1px solid var(--hair); background: var(--card); }

/* the three steps */
.fx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "s1 s2" "s1 s3"; gap: 12px 16px; align-items: start; }
#fxS1 { grid-area: s1; } #fxS2 { grid-area: s2; } #fxS3 { grid-area: s3; }
.fx-step { padding: 16px 18px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.fx-step > * { margin: 0; min-width: 0; }
.fx-sh { display: flex; align-items: center; gap: 10px; }
.fx-sh h2 { font: 700 1.125rem var(--round); margin: 0; flex: 1; }
.fx-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 750 .9375rem var(--round); color: var(--on-green, #fff); background: var(--btn, var(--green)); }
.fx-step.done .fx-num { background: var(--okbg); color: var(--green2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 55%, transparent); }
.fx-ok { color: var(--green2); display: inline-flex; } .fx-ok svg { width: 22px; height: 22px; }
#fxS3 .fx-sh { display: none; }
#fxS3 { padding: 14px 18px; gap: 8px; }

/* step 1 */
.fx-hint { font-weight: 600; color: var(--ink); line-height: 1.45; }
.fx-paste { display: block; width: 100%; min-height: 128px; border: 2px dashed color-mix(in srgb, var(--green) 50%, var(--hair)); border-radius: 14px; padding: 14px 16px; background: var(--tint); color: var(--ink); font: 1rem var(--sans); resize: vertical; }
.fx-paste::placeholder { color: var(--ink2); font-weight: 600; }
.fx-paste:hover { border-color: var(--green); }
#fxEmpty { display: grid; gap: 10px; }
.fx-alts { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-file { position: relative; cursor: pointer; }
.fx-file:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.fx-skip { margin: 0; }
#fxHave { display: grid; gap: 8px; }
.fx-got { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 1rem; line-height: 1.45; }
.fx-got > svg { flex: none; width: 22px; height: 22px; color: var(--green2); margin-top: 1px; }
.fx-tag { display: inline-block; font-weight: 650; font-size: .875rem; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); border-radius: 999px; padding: 0 .6em; }
.fx-dmore { margin: -2px 0 0; }
.fx-hrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
.fx-msg { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: .9375rem; line-height: 1.45; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-msg.warn { background: var(--warnbg); } .fx-msg.info { background: var(--infobg); }
.fx-opt summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--link); font-weight: 600; font-size: .9375rem; }
.fx-opt summary::marker { color: var(--ink2); }
.fx-optb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 2px 0 6px; }
.fx-optb label { font-size: .9375rem; color: var(--ink); }
.fx-optb p { flex-basis: 100%; margin: 0; }
.fx-optb input { width: 6em; min-height: 44px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--hair); background: var(--cell); color: var(--ink); font: 600 1rem var(--mono); text-transform: uppercase; }

/* grids */
.fx-grid { margin: 0; overflow: auto; border-radius: 10px; }
.fx-grid .xl { font-size: .875rem; }
.fx-grid .xl thead th { position: sticky; top: 0; z-index: 2; }
.fx-grid .xl thead th:first-child { z-index: 3; }
.fx-grid .xl td { height: 30px; padding: 4px 9px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pgrid { max-height: 300px; }
.fx-grid .xl td.spill { background: color-mix(in srgb, var(--green) 8%, var(--cell)); color: var(--green2); }
.fx-grid .xl td.tgt { background: color-mix(in srgb, var(--green) 16%, var(--cell)); box-shadow: inset 0 0 0 2px var(--green); font-weight: 700; }
.fx-grid .xl td.rf { box-shadow: inset 0 0 0 1.5px var(--rc); background: color-mix(in srgb, var(--rc) 7%, var(--cell)); }
.rf0 { --rc: var(--r0); } .rf1 { --rc: var(--r1); } .rf2 { --rc: var(--r2); } .rf3 { --rc: var(--r3); } .rf4 { --rc: var(--r4); } .rf5 { --rc: var(--r5); }
@media (max-width: 600px) { .fx-grid .xl td:not(.n) { max-width: 140px; } }

/* step 2 */
.fx-q { display: block; width: 100%; min-height: 112px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--hair); background: var(--cell); color: var(--ink); font: 1.0625rem/1.45 var(--sans); resize: vertical; }
.fx-q::placeholder { color: var(--ink2); }
.fx-q:focus, .fx-paste:focus, .fx-optb input:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.fx-modeline { font-size: .9375rem; color: var(--ink2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-top: -4px !important; }
.fx-modeline button.link { padding: 10px 6px; }
.fx-modes-pick { border: 1px solid var(--hair); border-radius: 12px; padding: 6px 12px 8px; display: grid; gap: 0; }
.fx-modes-pick legend { font-weight: 650; font-size: .9375rem; padding: 0 4px; }
.fx-modes-pick label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 1rem; }
.fx-modes-pick input { width: 20px; height: 20px; accent-color: var(--green); flex: none; }
.fx-errs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fx-errs > span { flex-basis: 100%; }
.fx-errs button { appearance: none; border: 1px solid var(--hair); background: var(--card); color: var(--bad); font: 650 .875rem var(--mono); border-radius: 999px; padding: 4px 12px; min-height: 44px; cursor: pointer; }
.fx-errs button.txt { color: var(--ink2); font-family: var(--sans); }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-chips > span { flex-basis: 100%; font-weight: 600; color: var(--ink2); font-size: .875rem; }
.fx-chips button { appearance: none; border: 1px solid color-mix(in srgb, var(--green) 30%, var(--hair)); background: var(--tint); color: var(--ink); font: 600 .9375rem var(--sans); border-radius: 999px; padding: 8px 14px; min-height: 44px; cursor: pointer; }
.fx-chips button:hover { border-color: var(--green); }
.fx-histbtn { margin-left: auto; }

/* step 3 */
.fx-go { width: 100%; min-height: 56px; font-size: 1.125rem; }
.fx-go[aria-disabled="true"]:not([aria-busy="true"]) { background: color-mix(in srgb, var(--ink) 12%, var(--card)); color: var(--ink2); box-shadow: none; filter: none; cursor: default; }
.fx-go[aria-busy="true"] { cursor: progress; }
.fx-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: fxSpin .8s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
.fx-whynot { margin: 0; text-align: center; font-size: .9375rem; color: var(--ink2); }
.fx-whynot.nudge { animation: fxNudge .45s ease; color: var(--ink); font-weight: 600; }
@keyframes fxNudge { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.fx-allow { margin: 0; text-align: center; }
.fx-kbd { border: 0 !important; background: none !important; font: inherit !important; color: var(--ink3, var(--ink2)); padding: 0 !important; }
.fx-kbd::before { content: "· "; }
.fx-off { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--warnbg); color: var(--ink); font-size: .875rem; }

/* result */
.fx-out { margin-top: 16px; scroll-margin-top: 84px; }
.fx-res, .fx-note, .fx-load { padding: 20px; }
.fx-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 820px; }
.fx-res > *, .fx-note > * { margin: 0; }
.fx-kick { font: 700 .8125rem var(--round); letter-spacing: .04em; text-transform: uppercase; color: var(--green2); margin-bottom: -8px !important; }
.fx-rh { font-size: 1.375rem; line-height: 1.3; margin: 0; outline: none; }
.fx-rh code { font-size: .9em; }
.fx-cause { font-size: 1.0625rem; }
.fx-answer { display: grid; gap: 10px; }
.fx-fbox { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--cell); border: 1.5px solid var(--cell-line); }
.fx-fbox .fxl { flex: none; margin-top: 4px; }
.fx-f { font: 650 1.25rem/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.fx-alt .fx-f, .fx-fixopt .fx-f { font-size: 1.0625rem; }
.fx-f .ff, .fx-stepf .ff { color: var(--ink); font-weight: 750; }
.fx-f .fq { color: var(--ink2); }
.fr0 { color: var(--r0); } .fr1 { color: var(--r1); } .fr2 { color: var(--r2); } .fr3 { color: var(--r3); } .fr4 { color: var(--r4); } .fr5 { color: var(--r5); }
.fx-copy.big { width: 100%; min-height: 56px; font-size: 1.125rem; }
.fx-copy svg { width: 20px; height: 20px; }
.fx-copy.done { background: var(--green2); }
.fx-put { padding: 14px 16px; border-radius: 14px; background: var(--tint); }
.fx-put h3, .fx-prev h3, .fx-res h3 { font-size: 1rem; margin: 0 0 6px; }
.fx-put ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; font-size: 1.0625rem; }
.fx-put .fx-mini { margin-top: 8px; }
.fx-cell { font: 750 1.0625rem var(--mono); color: var(--green2); }
.fx-badge { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; }
.fx-badge svg { flex: none; width: 24px; height: 24px; margin-top: 1px; }
.fx-badge b { display: block; font-family: var(--round); }
.fx-badge span { display: block; font-size: .9375rem; color: var(--ink2); }
.fx-badge.ok { background: var(--okbg); } .fx-badge.ok svg, .fx-badge.ok b { color: var(--green2); }
.fx-badge.warn { background: var(--warnbg); } .fx-badge.warn svg, .fx-badge.warn b { color: var(--warn); }
.fx-badge.bad { background: var(--badbg); } .fx-badge.bad svg, .fx-badge.bad b { color: var(--bad); }
.fx-prev { display: grid; gap: 8px; } .fx-prev > * { margin: 0; }
.fx-where { font-size: 1.0625rem; } .fx-v { font-variant-numeric: tabular-nums; color: var(--green2); }
.fx-diag { border-left: 3px solid var(--bad); padding: 2px 0 2px 12px; }
.fx-diag ul { margin: 4px 0 0; padding-left: 1.1em; } .fx-dh { margin: 0; }
.fx-mini { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; color: var(--ink2); margin: 0; }
.fx-mini svg { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.fx-mini.ok svg { color: var(--green2); } .fx-mini.warn svg { color: var(--warn); }
.fx-tools, .fx-acts, .fx-next { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-next { padding-top: 14px; border-top: 1px solid var(--hair); }
.fx-more { border: 1px solid var(--hair); border-radius: 14px; background: var(--card); }
.fx-more > summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 6px 16px; font-weight: 650; color: var(--ink); list-style: none; }
.fx-more > summary::-webkit-details-marker { display: none; }
.fx-more > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.fx-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.fx-more > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 14px; }
.fx-moreb { display: grid; gap: 16px; padding: 4px 16px 16px; }
.fx-moreb > * { margin: 0; }
.fx-plain ol, .fx-why ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.fx-plain code, .fx-why code, .fx-cause code, .fx-rh code, .fx-mini code, .fx-stepv code, .fx-note code { padding: .05em .3em; border-radius: 6px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.fx-why { padding: 12px 14px; border-radius: 12px; background: var(--tint); }
.fx-got { margin: 8px 0 0; }
.fx-why .fx-got { display: block; }
.fx-alt { display: grid; gap: 8px; } .fx-alt > * { margin: 0; }
.fx-fixopt { display: grid; gap: 6px; } .fx-fixopt p { margin: 0; }
.fx-sep { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); width: max-content; max-width: 100%; }
.fx-sep button { appearance: none; border: 0; background: transparent; color: var(--ink2); font: 600 .9375rem var(--sans); padding: 6px 14px; min-height: 44px; border-radius: 999px; cursor: pointer; }
.fx-sep button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.fx-tree, .fx-tree ol { list-style: none; margin: 0; padding: 0; }
.fx-tree ol { margin-left: 14px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--hd, var(--green)) 35%, transparent); display: grid; gap: 4px; margin-top: 4px; }
.fx-n { --hd: var(--r3); }
.fx-d1 { --hd: var(--r0); } .fx-d2 { --hd: var(--r2); } .fx-d3 { --hd: var(--r4); } .fx-d4 { --hd: var(--r5); }
.fx-nh { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 4px 0; }
.fx-arg { font-size: .75rem; font-weight: 650; color: var(--ink2); letter-spacing: .01em; }
.fx-arg::after { content: ":"; }
.fx-fn { font-weight: 750; color: var(--hd); }
.fx-desc { font-size: .875rem; color: var(--ink2); }
.fx-val { font: 600 .875rem var(--mono); color: var(--green2); overflow-wrap: anywhere; }
.fx-leaf code { color: var(--ink); }
.fx-stepper { display: grid; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--hair)); background: color-mix(in srgb, var(--blue) 5%, var(--card)); }
.fx-stepper > * { margin: 0; }
.fx-stepn { font-weight: 650; font-size: .875rem; color: var(--ink2); }
.fx-stepf code { font: 600 1rem/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-hit { background: color-mix(in srgb, var(--blue) 18%, transparent); color: inherit; border-radius: 6px; padding: 1px 2px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--blue) 55%, transparent); }
.fx-sv { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--okbg); color: var(--green2); font-weight: 700; }
.fx-stepv .muted { display: block; font-size: .875rem; }
.fx-stepbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-learns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.fx-learn { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); text-decoration: none; }
.fx-learn:hover { border-color: color-mix(in srgb, var(--green) 50%, var(--hair)); color: var(--ink); }
.fx-learn .kick { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--green2); }
.fx-learn .muted { font-size: .875rem; }
.fx-more-note { margin: 0; }
.fx-note { display: grid; gap: 12px; max-width: 720px; }
.fx-note .fx-next { border-top: 0; padding-top: 0; }

/* loading: calm, honest stages */
.fx-load { display: grid; gap: 10px; max-width: 560px; }
.fx-load > * { margin: 0; }
.fx-prog { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fx-prog li { display: flex; align-items: center; gap: 10px; color: var(--ink2); font-size: 1.0625rem; }
.fx-prog li.on { color: var(--ink); font-weight: 650; }
.fx-prog li.done { color: var(--ink2); }
.fx-pi { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--hair); position: relative; }
.fx-prog li.on .fx-pi { border-color: color-mix(in srgb, var(--green) 30%, transparent); border-top-color: var(--green); animation: fxSpin .9s linear infinite; }
.fx-prog li.done .fx-pi { border-color: var(--green); background: var(--green); }
.fx-prog li.done .fx-pi::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fx-res, .fx-note { animation: fxIn .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fxIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .fx-res, .fx-note, .fx-whynot.nudge { animation: none; } .fx-spin, .fx-prog li.on .fx-pi { animation-duration: 2.4s; } .fx-more > summary::after { transition: none; } }
.fx-toast { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); bottom: auto; transform: translateX(-50%); z-index: 30; max-width: min(92vw, 460px); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: .9375rem; box-shadow: var(--shadow-hover); }

/* history */
.fx-hist { margin-top: 18px; max-width: 820px; }
.fx-hh { font-size: 1.125rem; margin: 0 0 8px; outline: none; } .fx-hh .small { font-family: var(--sans); font-weight: 500; }
.fx-hist ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fx-hist li { min-width: 0; }
.fx-hist li button { appearance: none; width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 12px; min-height: 48px; border-radius: 12px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.fx-hist li button:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--hair)); }
.fx-hm { flex: none; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink2); }
.fx-hq { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-hv { flex: none; font: 600 .875rem var(--mono); color: var(--green2); max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* page content below the tool */
.fx-how .card h3 { margin: 0 0 .3em; font-size: 1.0625rem; }
.fx-how .card p { margin: 0; color: var(--ink2); }
.fx-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fx-modes .card > * { margin: 0 0 .4em; } .fx-modes code { font-size: .875rem; }
.fx-errlinks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-errlinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--card); font: 650 .9375rem var(--mono); color: var(--bad); text-decoration: none; }
.fx-errlinks a:hover { border-color: var(--bad); }
.fx-doc { max-width: 800px; }
.fx-doc > p { max-width: 44em; }

@media (max-width: 900px) { .fx-steps { grid-template-columns: minmax(0, 1fr); grid-template-areas: "s1" "s2" "s3"; } .fx-modes { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .fx-hero .lede { font-size: 1rem; margin-bottom: .6em; }
  .fx-step { padding: 14px; }
  .fx-res, .fx-note, .fx-load { padding: 16px; }
  .fx-rh { font-size: 1.25rem; }
  .fx-f { font-size: 1.0625rem; }
  .fx-next .btn { flex: 1 1 auto; }
}
@media print { .fx-steps, .fx-tools, .fx-acts, .fx-next, .fx-copy { display: none; } }
.fx-got:focus { outline: none; } .fx-got:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }