/* =====================================================================
THE ROYAL FRONT DOOR · front-door.css
The intro screen only. Never link this on a deep page.
WHAT THIS FILE IS
Nothing here was invented. Every rule below is lifted verbatim from
royalai.ai/index.html - the file Bryan reviewed and approved without a
single change to the graphics or the branding. This file exists for two
reasons and only two:
1. THE PARTS royal-system.css DOES NOT HAVE
.bubbles / .bubble (the system calls its grid .coins/.cell)
.coin > .inner (the system calls it .coin-inner)
.answer (the system calls it .askout)
.nest / .nestrow (the tray behind the deep door)
.a2hs (the iPhone home-screen pill)
@keyframes rise
.prodmark (the portal product line)
.g8 .l2 .l3 .l4 .l5 (the five funnel grids, section 7a)
.nolabel (no-label ball mode, section 7b)
THE LEAVING NOTICE IS GONE (Bryan, 7/29/2026). Section 13 carried the
.rlv-* card for the external-link interstitial and it is deleted, along
with the script that opened it. Every Royal link is an ordinary same-tab
link now. Do not restore these rules. THIS IS THIS TREE'S OWN COPY and
it diverges on purpose from the shared master.
2. THE FIVE PLACES the front door and the shared system genuinely
disagree. Each one is marked == OVERRIDE == below with the reason.
This sheet MUST load second or those five silently lose.
LOAD ORDER, and it is load-bearing:
NEVER also link a per-site css/royal.css. It collides with
royal-system.css on 49 selectors including :root, body, .coin, .stage,
.searchbox and footer. One system per page, never both.
Royal Mortgage LLC · NMLS #2059962
===================================================================== */
/* ---------------------------------------------------------------------
0. THE FRONT-DOOR COLUMN
== OVERRIDE 1 == THE ONE WIDTH LAW.
royal-system.css widens --col to 680px at 768 and 720px at 1280. That is
correct for a marketing page and WRONG here: the front door is one room
at min(620px, 94-100vw) on every screen, and the mark, the ask bar, the
coin row, the answer panel and the tray all resolve to it. Let --col
through and the intro quietly grows on a laptop while the phone stays
put, and the five sites stop matching each other.
So the front door rides its own token and never reads --col.
--------------------------------------------------------------------- */
:root{
--fd-col:min(620px,100%); /* ask bar, coin row, answer, tray */
--fd-mark:min(620px,94vw); /* the wordmark, which may bleed 3vw wider */
}
/* ---------------------------------------------------------------------
1. THE PAGE
== OVERRIDE 2 == the front door is a full-height flex column so the
footer rests on the bottom edge of a phone with no scroll, and .stage
absorbs whatever is left over. royal-system.css leaves body in normal
flow because its pages are long. The font-family is restated with the
fallback INSIDE the var(): --royal-font is defined by royal-system.css,
but a bare var() with a missing token is invalid at computed-value time
and would drop the whole page to the UA serif if the sheet ever failed
to load. Belt and braces, one line.
--------------------------------------------------------------------- */
html,body{margin:0;height:100%}
body{
background:var(--paper,#FFFFFF);
color:var(--ink,#1B2140);
font-family:var(--royal-font,'Montserrat','Segoe UI','Avenir Next','Helvetica Neue',system-ui,sans-serif);
-webkit-font-smoothing:antialiased;
/* 100dvh with the 100vh fallback (7/31/2026): inside a phone webview
100vh includes the browser chrome and overshoots; dvh is the honest
viewport. Older engines skip the second line and keep vh. */
display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
overflow-x:hidden;
}
/* ---------------------------------------------------------------------
2. THE WORDMARK
Deliberately STATIC. Bryan's ruling 7/24: no motion on the home page
mark. Do not add a draw-on, a shimmer, or a hover.
--------------------------------------------------------------------- */
.markwrap{padding:clamp(28px,6vh,64px) 16px 0;display:flex;justify-content:center}
.mark{width:var(--fd-mark);overflow:visible;display:block}
/* VARIANT B, the castle + words sitemark. royal-system.css already styles
.sitemark, .castle and .words; it is centred here because the front door
has no brandbar to sit inside. */
.markwrap .sitemark{width:var(--fd-mark);justify-content:center;text-decoration:none}
/* The portal product line. The ONLY element allowed between the mark and
the anchor line, and only on a portal that must name its product. */
.prodmark{font-size:clamp(20px,3.6vw,30px);font-weight:800;color:var(--navy);
letter-spacing:.01em;line-height:1.1;margin:clamp(10px,2vh,18px) 0 10px;
text-align:center}
.prodmark em{font-style:italic;color:var(--gold-deep)}
/* ---------------------------------------------------------------------
3. CENTRE STAGE
== OVERRIDE 3 == royal-system.css gives .stage a var(--sec) bottom pad
(up to 84px) and a var(--gutter) side pad, both sized for a long page.
The front door has a fixed 40px floor and a 20px gutter so the coin row
and the footer stay in one viewport on a phone.
--------------------------------------------------------------------- */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;
justify-content:flex-start;padding:clamp(18px,4vh,44px) 20px 40px;width:100%}
/* ---------------------------------------------------------------------
4. THE ANCHOR LINE
== OVERRIDE 4 == royal-system.css sets .anchorline as a HEADLINE -
17px, weight 700, full --ink, capped at 36ch - because on a marketing
page it is the headline. On the front door it is a quiet line under a
large mark: 15.5px, weight 600, --muted, 56ch. Bryan approved the
quieter one. Restated here in full so a future edit to the system's
marketing anchor cannot reach into the intro screen.
--------------------------------------------------------------------- */
.anchorline{font-size:clamp(13px,1.9vw,15.5px);color:var(--muted);font-weight:600;
margin:0 0 18px;text-align:center;max-width:56ch;line-height:1.5}
/* ---------------------------------------------------------------------
5. THE ASK BAR
This bar IS the assistant (Bryan, 7/28/2026). There is no gold seat on
the left and no sleeping ball below - do not clone either from live
royalai.ai.
== OVERRIDE 5 == royal-system.css positions the send orb through a
.btns wrapper and puts the gold gradient on a .go class, because its bar
can carry a microphone as well. The front door's bar is one button,
absolutely positioned, and the gradient is on the button itself. Both
selector shapes are covered below so the branded-placeholder variant
(which does use .btns/.go) drops in without a second edit.
--------------------------------------------------------------------- */
.searchbox{width:var(--fd-col);position:relative;margin:0}
.searchbox input{width:100%;border:1.5px solid var(--line);border-radius:999px;
background:var(--card);padding:17px 58px 17px 26px;font-size:16.5px;font-family:inherit;
color:var(--ink);box-shadow:0 10px 30px rgba(21,43,107,.10);outline:none;
transition:box-shadow .2s,border-color .2s}
.searchbox input:focus{border-color:var(--gold);box-shadow:0 12px 34px rgba(202,162,95,.28)}
/* The plain front-door placeholder is a real one and must stay visible.
royal-system.css turns every .searchbox placeholder transparent for the
.phold overlay; put it back unless this page actually ships .phold. */
.searchbox input::placeholder{color:var(--muted);opacity:1}
.searchbox:has(.phold) input::placeholder{color:transparent}
/* THE GOLD SEND ORB. The gradient is the coin's own material - the same
light source, at orb scale. Never re-mix it. */
.searchbox button,
.searchbox .btns{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.searchbox .btns{display:flex;align-items:center;gap:6px}
.searchbox .btns button{position:static;transform:none}
.searchbox button,
.searchbox .go{width:40px;height:40px;min-height:40px;border-radius:50%;border:none;
cursor:pointer;padding:0;display:grid;place-items:center;flex:none;
background:radial-gradient(circle at 32% 26%,#fdf6e3 0%,#f0d9a6 22%,#d5b271 45%,#ab854a 70%,#7d6238 100%);
box-shadow:0 3px 8px rgba(21,27,60,.25)}
.searchbox button svg,
.searchbox .go svg{width:17px;height:17px;stroke:var(--navy-deep);stroke-width:2.4;fill:none}
/* Sending. The orb dims while the engine is streaming and comes back on
its own - no spinner, nothing new on screen. */
.searchbox button[aria-busy="true"]{opacity:.55;cursor:default}
/* ---------------------------------------------------------------------
6. THE ANSWER PANEL
The system's equivalent is .askout. The front door keeps the name
.answer because that is what shipped and what every clone already has.
--------------------------------------------------------------------- */
.answer{width:var(--fd-col);background:var(--card);border:1px solid var(--line);
border-radius:18px;margin-top:14px;padding:18px 22px;font-size:14.5px;line-height:1.6;
color:var(--ink);box-shadow:0 10px 30px rgba(21,43,107,.08);display:none;text-align:left}
.answer.show{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.answer .q{color:var(--muted);font-size:13px;margin:0 0 8px}
.answer .a{margin:0;white-space:pre-wrap}
.answer .hook{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);
font-size:11.5px;color:var(--muted)}
.answer .hook:empty{display:none}
/* The beat between the send and the first word of a streamed answer -
three gold dots, and only while .a is genuinely still empty. */
.answer.thinking .a:empty::after{content:"\25CF\00a0\25CF\00a0\25CF";color:var(--gold-deep);
letter-spacing:.2em;animation:fd-pulse 1.1s ease-in-out infinite}
@keyframes fd-pulse{0%,100%{opacity:.35}50%{opacity:1}}
/* ---------------------------------------------------------------------
7. THE GOLDEN CIRCLES
THE ONE COIN LAW. 108px max. .inner is 68% of the coin. The mark is
capped at 59% of .inner. 0.68 x 0.59 = 40.1% of the coin diameter -
Bryan's own correction after he caught the R sitting ~14% oversize.
These two numbers are the whole law.
THE CANON GRADIENT below is reproduced verbatim. Its 52% stop is
#c9a15f and it stays #c9a15f - that is the coin's own material, not a
brand token, and it is the one hex on this page that is NOT #CBA260.
The coin is FLUID here (width 100%, capped at 108) rather than the
system's rigid 108x108, because every grid below is a row that has to
hold its balls across a 375px phone without overflowing.
--------------------------------------------------------------------- */
.bubbles{display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(10px,2vw,20px);margin-top:clamp(26px,5vh,52px);width:var(--fd-col)}
.bubble{display:flex;flex-direction:column;align-items:center;gap:9px;
text-decoration:none;color:var(--ink);min-width:0;background:none;border:none;
padding:0;font-family:inherit;cursor:pointer}
.coin{width:100%;max-width:108px;height:auto;aspect-ratio:1;border-radius:50%;position:relative;
background:
radial-gradient(circle at 32% 24%, #fdf6e3 0%, #f5e2b4 16%, #e2c283 34%, #c9a15f 52%, #a5814a 70%, #7d6238 86%, #6a5330 100%);
box-shadow:
0 10px 24px rgba(21,27,60,.22),
inset 0 2px 6px rgba(255,255,255,.65),
inset 0 -6px 12px rgba(90,66,30,.45);
display:grid;place-items:center;flex:none;
transition:transform .18s ease, box-shadow .18s ease}
.coin::after{content:"";position:absolute;inset:0;border-radius:50%;
background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.28) 100%);
pointer-events:none}
.bubble:hover .coin,
.bubble:focus-visible .coin{transform:translateY(-4px) scale(1.04);
box-shadow:0 16px 32px rgba(21,27,60,.30),
inset 0 2px 6px rgba(255,255,255,.65),
inset 0 -6px 12px rgba(90,66,30,.45)}
/* THE SEATING LAW - the white medallion and its 59% cap. */
.coin .inner{width:68%;height:68%;border-radius:50%;background:rgba(255,255,255,.92);
display:grid;place-items:center;box-shadow:inset 0 1px 4px rgba(90,66,30,.35);overflow:hidden}
.coin .inner svg{width:72%;height:auto;display:block}
.coin .inner img{max-width:59%;max-height:59%;width:auto;height:auto;display:block}
.coin .inner img.r{max-width:59%;max-height:59%}
/* A coin whose face is set in type rather than art. */
.coin .brandtxt{font-weight:800;color:var(--navy);text-align:center;line-height:1.05;
letter-spacing:.02em;font-size:clamp(9px,1.7vw,12.5px)}
.coin .brandtxt small{display:block;font-weight:700;color:var(--gold-deep);
font-size:.72em;letter-spacing:.14em;margin-top:2px}
.bubble .label{font-size:clamp(12px,1.6vw,12.5px);font-weight:700;color:var(--muted);
text-align:center;letter-spacing:.04em;line-height:1.25}
.bubble .label b{color:var(--navy);font-weight:800}
.bubble .label em{font-style:italic;color:var(--gold-deep);font-weight:800}
.bubble:hover .label{color:var(--navy)}
/* AN AUDIENCE DOOR names who it is for and nothing else - no verb, no
dash. Navy caps so it reads as a title, not a caption. */
.bubble .label.aud{color:var(--navy);font-weight:800;text-transform:uppercase;
letter-spacing:.13em;font-size:clamp(11px,1.5vw,12px)}
/* ---------------------------------------------------------------------
7a. THE FIVE FUNNEL GRIDS - ONE NAMING SCHEME, AND ONLY ONE
.g8 L1 index.html 8 balls, 4 + 4
.l2 L2 start.html 6 balls, 3 + 3 intent
.l3 L3 stand.html 4 balls, 2 + 2 situation
.l4 L4 ready.html 2 balls readiness
.l5 L5 door.html 1 ball, centred apply
RETIRED, AND NOT COMING BACK: .g6 .g5 .g4 .g2 .g1. The layer math is
8-6-4-2-1 and a five-up row is not a shape in it. A hub whose markup
still says class="bubbles g6" predates this kit: its nav is REBUILT to
.g8, never restyled back. (royal-system.css keeps its own .coins.g3
and .coins.g5 for the SYSTEM's coin grid - different component,
different file, and not ours to touch.)
WHY THE LAYER GRIDS CAP THEIR TRACKS INSTEAD OF TAKING 1fr.
At the 620 column the home grid's track is (620 - 3x20) / 4 = 140px
carrying a 108px coin, so ball edge to ball edge reads 16 + 20 + 16 =
52px. Give .l2 three plain 1fr tracks and the same six-ball page reads
85px of air between balls - a different room on the same site.
minmax(0,140px) plus centring puts every layer on the flagship's exact
52px rhythm with no magic numbers, and below the cap the tracks shrink
together so the coin still lands on the same size the home grid paints.
NONE OF THESE ROWS EVER FOLDS. Four-up holds to 375px - that is the
shape Bryan signed off on - and three-up, two-up and one-up all have
more room than four-up has.
--------------------------------------------------------------------- */
.bubbles.g8{grid-template-columns:repeat(4,1fr);row-gap:clamp(16px,3.6vw,26px)}
.bubbles.l2{grid-template-columns:repeat(3,minmax(0,140px));justify-content:center;
row-gap:clamp(16px,3.6vw,26px)}
.bubbles.l3{grid-template-columns:repeat(2,minmax(0,140px));justify-content:center;
row-gap:clamp(16px,3.6vw,26px)}
.bubbles.l4{grid-template-columns:repeat(2,minmax(0,140px));justify-content:center}
/* THE TERMINAL BALL. One ball, centred, at the full canon 108px. The
nest's 84px cap is a TRAY rule (section 8) and it never reaches a
layer page - the last ball in the funnel is not a tray chip. */
.bubbles.l5{grid-template-columns:minmax(0,108px);justify-content:center}
/* ---------------------------------------------------------------------
7b. NO-LABEL BALL MODE - the sanctioned variant
THE RULING: no title text under any ball on a hub home or on any of
the four layer pages. The accessible name rides aria-label ON THE
ANCHOR and nowhere else, so a screen reader still gets a real name
while the screen stays clean.
THREE THINGS THIS MODE OWES THE VISITOR, and all three are below:
1. NO SLEEPING COIN. A funnel ball with no label under it and no
face in it is a blank gold disc - the exact thing Bryan killed on
7/25. Faces are readable from the FIRST PAINT here. Hub grids
write .coin-awake-default; the rule below also makes that class
work with this sheet's .inner as well as the system's
.coin-inner, and it refuses .coin-asleep outright inside a
.bubbles grid. Sleeping is a deep-page behaviour. Not here.
2. THE 44px TAP FLOOR. With the label gone the coin is the whole
target, so the cell keeps a 44px minimum height of its own even
if a coin ever paints smaller than that.
3. A FOCUS RING A KEYBOARD VISITOR CAN ACTUALLY SEE. The house ring
is gold, and gold on a gold ball is invisible - so on a bare
coin the ring is NAVY and it is drawn on the coin itself, where
border-radius makes it a true circle around the ball. That is an
accessibility requirement, not a design change.
The label rules in section 7 stay exactly as they are: the nest tray
and every non-funnel grid still label their coins. This mode is
markup - you leave the OUT. Nothing here hides a
label you left in, on purpose: a stray label must stay visible so the
publish check catches it instead of the sheet swallowing it.
--------------------------------------------------------------------- */
.bubbles.nolabel .bubble{gap:0;min-height:44px;justify-content:center}
/* the sanctioned awake class, honoured for both inner namings */
.coin.coin-awake-default .inner,
.coin.coin-awake-default .coin-inner{opacity:1;transform:none;transition:none}
/* NO SLEEPING COIN on a funnel grid, whatever the markup says */
.bubbles .coin.coin-asleep .inner,
.bubbles .coin.coin-asleep .coin-inner{opacity:1;transform:none;transition:none}
/* the ring, on the ball, in navy */
.bubbles.nolabel .bubble:focus-visible{outline:none}
.bubbles.nolabel .bubble:focus-visible .coin{outline:3px solid var(--navy);
outline-offset:4px}
/* ---------------------------------------------------------------------
8. THE NEST - bubbles inside a bubble.
The deep door's tray. CLOSED on load and only a touch opens it: nothing
on this page moves by itself.
--------------------------------------------------------------------- */
.nest{width:var(--fd-col);margin-top:clamp(14px,2.6vh,22px);
border:1.5px solid var(--line);border-radius:22px;background:var(--card);
box-shadow:0 10px 30px rgba(21,43,107,.08);padding:18px 18px 20px;display:none}
.nest.open{display:block;animation:rise .26s ease}
.nest .nesthead{font-size:11.5px;font-weight:800;letter-spacing:.2em;
text-transform:uppercase;color:var(--muted);text-align:center;margin:0 0 15px}
.nest .nesthead b{color:var(--navy)}
.nest .nesthead em{font-style:italic;color:var(--gold-deep)}
.nestrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2.4vw,20px)}
/* 84px, and it is a TRAY number. A tray chip sits inside a card inside
the room, so it steps down from the 108 canon. It has no business on a
layer page: .l5's single terminal ball is the full 108 (section 7a). */
.nestrow .coin{max-width:84px}
.nestrow .bubble .label{font-size:clamp(11px,1.5vw,12px)}
/* ---------------------------------------------------------------------
9. THE FOOTER
== OVERRIDE 5 == royal-system.css puts a border-top and a var(--sec)
margin above the footer, which is right at the end of a long page and
wrong here: on the front door the footer is the quiet last line of a
single-screen room, with no rule drawn across it.
This is the ENTIRE standard footer style. No state list, no licensing
block, no second disclaimer - RULING 14.
--------------------------------------------------------------------- */
footer{padding:22px 16px 26px;text-align:center;font-size:11.5px;
color:var(--muted);line-height:1.6;border-top:none;margin-top:0}
footer b{color:var(--ink)}
footer .brandword{color:var(--navy)}
footer .brandword em{font-style:italic;color:var(--gold-deep)}
footer a{color:var(--muted)}
footer a:hover{color:var(--navy)}
.ehl{width:13px;height:13px;vertical-align:-2px;fill:currentColor}
/* THE NUDGE MUST NOT SIT ON THE NMLS LINE. This page is exactly one
viewport tall on a phone, so the footer rests on the bottom edge - and
.a2hs is fixed 16px above that same edge. On the only device that ever
shows the pill, an iPhone in Safari, it landed squarely across
"#2059962 (nmlsconsumeraccess.org) · Equal Housing Lender". Reserve its
height ONLY while it is actually on screen: hidden - every other device,
and every visit after it is waved away - the footer is untouched. .stage
is flex:1 and absorbs the difference, so nothing new scrolls. */
body:has(.a2hs:not([hidden])) footer{padding-bottom:82px}
/* ---------------------------------------------------------------------
10. THE iPHONE HOME-SCREEN PILL - one sunny line.
Off-flow, hidden on every other device, and remembered once waved away.
--------------------------------------------------------------------- */
.a2hs{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;
display:flex;align-items:center;background:var(--card);border:1.5px solid var(--gold);
border-radius:99px;padding:7px 4px 7px 15px;box-shadow:0 12px 30px rgba(14,29,73,.20);
max-width:94vw;white-space:nowrap}
.a2hs[hidden]{display:none}
.a2hs .dot{width:18px;height:18px;border-radius:50%;flex:none;margin-right:9px;
background:radial-gradient(circle at 32% 26%,#fdf6e3 0%,#f0d9a6 25%,#d5b271 50%,#ab854a 78%,#7d6238 100%);
box-shadow:inset 0 1px 2px rgba(255,255,255,.6)}
.a2hs a{color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;
min-width:0;overflow:hidden;text-overflow:ellipsis}
.a2hs a b{color:var(--navy);font-weight:800}
.a2hs a b em{font-style:italic;color:var(--gold-deep)}
.a2hs .x{background:none;border:none;color:var(--muted);font-size:18px;font-weight:700;
cursor:pointer;padding:6px 12px;line-height:1;font-family:inherit}
.a2hs .x:hover{color:var(--navy)}
/* ---------------------------------------------------------------------
11. THE TOAST
royal-system.css already carries .toast and .toast.show at z-index 90.
Nothing to restate; front-door.js drives it. Every tap gets an answer,
never a dead click.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
12. NARROW PHONES
THE PHONE FLOOR, and it was missing. royal-system.css caps a coin at
72px from 390 down, but it writes that rule for .coin.coin-fluid and
a front-door coin does not carry that class - so the cap never reached
this sheet and a 375px phone painted a 78px ball where every other
Royal surface paints a 72px one. It is restated below for the front
door's own coin, which is what finally makes "the coin reads the same
size on every site at every width" true rather than nearly true.
THE OLD FIVE-AND-SIX-UP FOLD IS GONE, with .g5 and .g6. The layer math
is 8-6-4-2-1 and not one of those rows needs to fold: four-up holds to
375px (Bryan's signed-off shape), and three-up, two-up and one-up all
have more room than four-up. One rule fewer on every page.
MEASURED, at the two widths that matter, 16px gutter and 10px gap:
375 four-up track (375-32-30)/4 = 78.25 -> coin 72 no overflow
390 four-up track (390-32-30)/4 = 82.00 -> coin 72 no overflow
--------------------------------------------------------------------- */
@media (max-width:390px){
.stage{padding-left:16px;padding-right:16px}
.searchbox input{padding:15px 52px 15px 20px;font-size:16px}
/* the family-wide phone floor - the same 72 royal-system.css sets */
.bubbles .coin,.nestrow .coin{max-width:72px}
/* ...except the terminal ball. It is alone on the page, it is the one
coin the whole funnel exists to hand over, and there is nothing on a
375px screen for it to crowd. It keeps the full 108. FLAGGED: this
is the one place the layer grids and the 390 floor disagree, and it
is a deliberate call, not an oversight. */
.bubbles.l5 .coin{max-width:108px}
}
/* ---------------------------------------------------------------------
14. MOTION, FOCUS, PRINT
--------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.nest.open,.answer.show{animation:none}
.coin{transition:none}
.bubble:hover .coin,.bubble:focus-visible .coin{transform:none}
.answer.thinking .a:empty::after{animation:none}
}
/* A visible ring on every focusable thing. The coins are links and the
send orb is a button; a keyboard visitor must be able to see where they
are without a mouse. */
.bubble:focus-visible,
.searchbox input:focus-visible,
.searchbox button:focus-visible,
.a2hs a:focus-visible,
.a2hs .x:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
@media print{
.a2hs,.toast,.searchbox button{display:none}
body{display:block;min-height:0}
.coin{box-shadow:none}
}