/* Centered REAL faucet. The request card follows the page theme (two-layer group in dark). */
@font-face { font-family:Geist; font-style:normal; font-weight:400 600; font-display:swap; src:url('/fonts/geist-latin.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/fonts/dm-sans-latin.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('/fonts/geist-mono-latin.woff2') format('woff2'); }
:root { color-scheme:light; --paper:#f5f5f5; --ink:#151619; --muted:#62646b; --line:#e0e0e4; --control:#e7e7ea; --accent:#2050f2; --logo-filter:brightness(0); --heading:Geist,system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif; --mono:'Geist Mono',monospace; }
:root[data-theme=dark] { color-scheme:dark; --paper:#000; --ink:#f5f5f5; --muted:#a2a3a9; --line:#48484d; --control:#222; --accent:#9caeff; --logo-filter:brightness(0) invert(1); }
@media(prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --paper:#000; --ink:#f5f5f5; --muted:#a2a3a9; --line:#48484d; --control:#222; --accent:#9caeff; --logo-filter:brightness(0) invert(1); } }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.6 var(--body); -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,summary { cursor:pointer; }
a { color:var(--accent); text-underline-offset:3px; }
:focus-visible { outline:3px solid #597bff; outline-offset:4px; }
.skip-link { position:absolute; top:-100px; left:24px; padding:12px 20px; background:var(--paper); z-index:3; border-radius:8px; }
.skip-link:focus { top:12px; }
.page { max-width:1440px; margin:0 auto; padding:28px 48px 48px; overflow:clip; }
.toolbar { display:flex; justify-content:flex-end; align-items:center; gap:8px; min-height:40px; }
.dispenser { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 8px; margin:0; border:1px solid #d9d9d9; border-radius:24px; background:#fff; color:#5c5c5c; font:400 12px/12px var(--mono); }
.dispenser span { color:var(--ink); }
:root[data-theme=dark] .dispenser { background:#1a1a1a; border-color:#2e2e2e; color:#9a9a9a; }
@media(prefers-color-scheme:dark) { :root:not([data-theme]) .dispenser { background:#1a1a1a; border-color:#2e2e2e; color:#9a9a9a; } }
/* Theme toggle: portal component. Light shows the moon, dark shows the sun. */
.theme-toggle { cursor:pointer; background:rgba(255,255,255,.07); border:.769px solid #d4d4d4; border-radius:50%; flex-shrink:0; justify-content:center; align-items:center; width:36px; height:36px; min-height:36px; padding:0; transition:background-color .18s; display:inline-flex; }
.theme-toggle:hover { background:#f5f5f5; }
.theme-toggle svg { flex:0 0 auto; width:18px; height:18px; }
.theme-icon-dark { display:none; }
@media(max-width:820px),(pointer:coarse) { .theme-toggle {width:44px;height:44px;min-height:44px;} }
.logo-dark { display:none; }
@media(prefers-color-scheme:dark) {
 :root:not([data-theme]) .logo-dark {display:block;}
 :root:not([data-theme]) .logo-light {display:none;}
 :root:not([data-theme]) .theme-icon-dark {display:block;}
 :root:not([data-theme]) .theme-icon-light {display:none;}
 :root:not([data-theme]) .theme-toggle {border-color:#525252;}
 :root:not([data-theme]) .theme-toggle:hover {background:#1a1a1a;}
}
:root[data-theme=dark] .logo-dark { display:block; }
:root[data-theme=dark] .logo-light { display:none; }
:root[data-theme=dark] .theme-icon-dark { display:block; }
:root[data-theme=dark] .theme-icon-light { display:none; }
:root[data-theme=dark] .theme-toggle { border-color:#525252; }
:root[data-theme=dark] .theme-toggle:hover { background:#1a1a1a; }
.chrome { display:flex; justify-content:center; align-items:center; gap:16px; margin:92px 0 72px; }
.wordmark { flex:none; }
.chrome-tag { border-left:1px solid var(--line); padding-left:16px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font:400 12px/1.5 var(--mono); }
.hero { text-align:center; }
.eyebrow { margin:0 0 24px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); font:400 11px/1.5 var(--mono); }
h1 { margin:0; font:400 clamp(32px,4vw,56px)/1.15 var(--heading); letter-spacing:-.045em; }
.lead { color:var(--muted); font-size:18px; line-height:1.7; margin:36px 0 0; }
/* Card colours are tokens: light defaults here, dark overrides below. In light the inner layer adds nothing. */
.card { --pad:32px; --card-bg:#fff; --card-line:#d9d9d9; --card-radius:24px; --card-pad:var(--pad); --inner-bg:transparent; --inner-border:0; --inner-pad:0; --card-ink:#16171a; --card-muted:#5e6370; --amount-label:#242424; --amount:#2050f2; --chip-bg:#f2f3f5; --chip-ink:#3a3d45; --chip-dot:#1f9d55; --field-bg:transparent; --field-line:#c9ccd3; --input-bg:#fff; --input-ink:#16171a; --placeholder:#8a8f9c; --paste-bg:#f2f3f5; --paste-ink:#16171a; --paste-mask:#f3f3f5; --panel-bg:#f4f5f7; --off-bg:#dadce1; --off-ink:#4f5461; --result-bg:#f5f5f7; --sec-ink:#2050f2; --sec-line:#dedfe3; }
.card { color-scheme:light; background:var(--card-bg); color:var(--card-ink); width:100%; max-width:440px; margin:96px auto 0; border:1px solid var(--card-line); border-radius:var(--card-radius); padding:var(--card-pad); --accent:#2050f2; font-family:var(--heading); }
.card-inner { background:var(--inner-bg); border:var(--inner-border); border-radius:20px; padding:var(--inner-pad); }
:root[data-theme=dark] .card { color-scheme:dark; --card-bg:#1a1a1a; --card-line:#2e2e2e; --card-radius:28px; --card-pad:8px; --inner-bg:#111; --inner-border:1px solid #242424; --inner-pad:var(--pad); --card-ink:#f5f5f5; --card-muted:#9a9a9a; --amount-label:#9a9a9a; --amount:#f5f5f5; --chip-bg:#242424; --chip-ink:#d4d4d4; --chip-dot:#708efc; --field-bg:#242424; --field-line:#2e2e2e; --input-bg:transparent; --input-ink:#f5f5f5; --placeholder:#6b6b6b; --paste-bg:#111; --paste-ink:#f5f5f5; --paste-mask:#111; --panel-bg:#242424; --off-bg:#2e2e2e; --off-ink:#8a8a8a; --result-bg:#1a1a1a; --sec-ink:#9caeff; --sec-line:#2e2e2e; }
@media(prefers-color-scheme:dark) { :root:not([data-theme]) .card { color-scheme:dark; --card-bg:#1a1a1a; --card-line:#2e2e2e; --card-radius:28px; --card-pad:8px; --inner-bg:#111; --inner-border:1px solid #242424; --inner-pad:var(--pad); --card-ink:#f5f5f5; --card-muted:#9a9a9a; --amount-label:#9a9a9a; --amount:#f5f5f5; --chip-bg:#242424; --chip-ink:#d4d4d4; --chip-dot:#708efc; --field-bg:#242424; --field-line:#2e2e2e; --input-bg:transparent; --input-ink:#f5f5f5; --placeholder:#6b6b6b; --paste-bg:#111; --paste-ink:#f5f5f5; --paste-mask:#111; --panel-bg:#242424; --off-bg:#2e2e2e; --off-ink:#8a8a8a; --result-bg:#1a1a1a; --sec-ink:#9caeff; --sec-line:#2e2e2e; } }
.network-info { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--card-muted); font:400 11px/14px var(--mono); text-transform:uppercase; letter-spacing:.44px; margin-bottom:20px; }
.network-name { background:var(--chip-bg); color:var(--chip-ink); border-radius:999px; padding:6px 10px; white-space:nowrap; }
.network-name::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--chip-dot); margin-right:8px; vertical-align:middle; }
h2 { font:500 24px/1.25 var(--heading); letter-spacing:-.035em; margin:0 0 10px; }
.card h2 { font-weight:600; letter-spacing:-.24px; margin-bottom:6px; }
.card-lead { color:var(--card-muted); font-size:14px; line-height:20px; margin:0 0 28px; }
.field-label { display:block; font-size:14px; font-weight:500; line-height:20px; margin-bottom:8px; }
.field-row { display:flex; align-items:center; background:var(--field-bg); border:1px solid var(--field-line); border-radius:12px; padding:0 6px 0 14px; gap:8px; height:48px; }
.field-row:focus-within { border-color:#2050f2; outline:2px solid #597bff; outline-offset:2px; }
.field-row input:focus-visible { outline:none; }
.field-row .paste-button:focus-visible { outline:2px solid #597bff; outline-offset:-2px; }
input { width:100%; min-width:0; height:46px; border:0; border-radius:5px; background:var(--input-bg); color:var(--input-ink); padding:8px 2px; font:400 14px/18px var(--mono); }
input::placeholder { color:var(--placeholder); }
.field-row:has(input[aria-invalid=true]) { border-color:#ab3029; outline-color:#ab3029; }
.paste-button { display:flex; align-items:center; gap:6px; height:36px; padding:7px 12px; background:var(--paste-bg); border:0; border-radius:8px; font-size:13px; color:var(--paste-ink); }
.paste-button::before { content:''; width:9px; height:12px; border:1px solid currentColor; border-radius:2px; box-shadow:-2px -2px 0 -1px var(--paste-mask),-2px -2px 0 0 currentColor; }
.field-hint { font-size:13px; line-height:18px; color:var(--card-muted); margin:8px 0 0; }
.field-hint[data-state=invalid] { color:#ab3029; }
.button-secondary { background:transparent; color:var(--sec-ink); border:1px solid var(--sec-line); border-radius:8px; padding:8px 12px; min-height:44px; margin-top:12px; font-size:13px; }
.challenge { margin-top:22px; min-height:65px; }
.cf-turnstile { width:100%; }
.claim-panel { margin-top:28px; padding:12px; background:var(--panel-bg); border-radius:16px; }
.amount { display:flex; justify-content:space-between; align-items:baseline; gap:12px; color:var(--amount-label); font-size:13px; padding:4px 4px 12px; }
.amount strong { color:var(--amount); font:600 18px/23px var(--heading); letter-spacing:-.18px; overflow-wrap:anywhere; }
.amount-lines span { display:block; text-align:right; }
.button-primary { width:100%; min-height:52px; border:0; border-radius:12px; background:#2050f2; color:#fff; font-size:15px; font-weight:500; padding:13px 16px; }
.button-primary:hover:not(:disabled) { background:#163ec9; }
button:disabled { opacity:.55; cursor:wait; }
.button-primary:disabled { opacity:1; background:var(--off-bg); color:var(--off-ink); cursor:not-allowed; }
form[aria-busy=true] .button-primary:disabled { cursor:wait; }
.quota { color:var(--card-muted); font-size:12px; line-height:16px; text-align:center; margin:12px 0 0; }
.quota::before { content:'◷'; margin-right:5px; }
.result:empty { display:none; }
.result { background:var(--result-bg); border-radius:8px; padding:14px; margin-top:20px; font-size:14px; overflow-wrap:anywhere; border-left:3px solid #2050f2; }
.result strong { display:block; font-weight:600; margin-bottom:4px; }
.result[data-state=ok] { border-color:#187746; }
.result[data-state=error] { border-color:#ab3029; }
.result[data-state=limited],.result[data-state=partial] { border-color:#956020; }
.result code { font:400 12px/1.6 var(--mono); }
.result a { display:block; margin-top:8px; }
.result .token-address { display:block; margin-top:8px; }
/* Decorative scene: never intercept the form or scrolling. */
/* Figma: 440px card, 322px from card bottom to FAQ, ~380px sphere.
   Keep the scene's transparent padding out of document flow so its top sits
   behind the card and its glow continues behind the FAQ border. */
.sphere-slot { --sphere-width:440px; height:322px; position:relative; pointer-events:none; isolation:isolate; }
.sphere-slot[data-ready=true]::after { content:''; position:absolute; width:var(--sphere-width); height:calc(var(--sphere-width) * .45); left:50%; top:calc(var(--sphere-width) * .49); transform:translateX(-50%); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); mask-image:linear-gradient(transparent,#000 65%); border-radius:0 0 50% 50%; }
#faucet-scene { position:absolute; width:1330px; height:740px; left:50%; top:-200px; transform:translateX(-50%); opacity:0; transition:opacity .3s; mask-image:radial-gradient(ellipse 15.2% 29% at center,#000 90%,transparent 100%); }
:root[data-theme=dark] #faucet-scene { mask-image:radial-gradient(ellipse 55% 55% at center,#000 40%,transparent 95%); }
.sphere-slot[data-ready=true] #faucet-scene { opacity:1; }
.card { position:relative; z-index:1; }
@media(prefers-reduced-motion:reduce) { #faucet-scene { transition:none; } }
.faq,.docs-panel { position:relative; max-width:1152px; margin:0 auto; border:1px solid #d9d9d9; border-radius:28px; padding:36px 32px; }
.faq { display:grid; grid-template-columns:1fr 1fr; gap:64px; min-height:318px; }
.faq h2 { font-size:28px; line-height:35px; letter-spacing:-.98px; color:#131313; }
.faq p { color:#5c5c5c; margin:0; font-size:16px; line-height:25.6px; }
.faq-items { min-width:0; }
details { border-bottom:1px solid #dedfe3; }
summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 0; list-style:none; font-size:16px; line-height:25.6px; min-height:60px; color:#5c5c5c; }
summary::-webkit-details-marker { display:none; }
summary::after { content:'+'; color:#62666f; font:400 22px/1 var(--heading); flex:0 0 16px; }
details[open] summary::after { content:'−'; }
.faq details p { font-size:14px; padding:0 10px 20px 0; }
.docs-panel { display:flex; align-items:flex-start; justify-content:space-between; gap:48px; margin-top:40px; padding:36px 32px; }
.docs-panel p { max-width:903px; margin:0; font:500 28px/35px var(--heading); letter-spacing:-.98px; color:#131313; }
.docs-panel { min-height:180px; gap:64px; }
.docs-link { flex:none; padding:12px 21px; border-radius:8px; background:#262626; color:#fff; text-decoration:none; font:500 16px/16px var(--heading); }
:root[data-theme=dark] .faq,:root[data-theme=dark] .docs-panel { border-color:#dedfe3; }
:root[data-theme=dark] .faq h2,:root[data-theme=dark] .docs-panel p,:root[data-theme=dark] summary { color:#f5f5f2; }
:root[data-theme=dark] .faq p { color:#62666f; }
.docs-link:hover { outline:1px solid var(--muted); }
.supporters { display:flex; justify-content:center; align-items:center; gap:36px; margin:66px auto 0; max-width:1152px; }
.supporters p { flex:none; padding-right:30px; border-right:1px solid var(--line); font:400 12px/2.5 var(--mono); color:var(--muted); margin:0; }
.supporters ul { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:40px; margin:0; padding:0; list-style:none; }
.supporters img { display:block; filter:var(--logo-filter); }
.footer { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font:400 10px/1.6 var(--mono); margin-top:140px; text-align:center; }
.footer span:first-child { text-transform:uppercase; letter-spacing:.06em; }
@media(max-width:1000px) { .page {padding:24px;} .supporters {flex-direction:column;gap:20px;} .supporters p {border:0;padding:0;} .supporters ul {gap:32px;} .faq {gap:32px;} .docs-panel p {font-size:22px;} }
@media(max-width:600px) {
 .page {padding:16px 16px 32px;}
 .toolbar {gap:8px;}
 .dispenser {font-size:11px;}
 .chrome {margin:56px 0 48px;}
 .eyebrow {font-size:10px;margin-bottom:20px;}
 h1 {font-size:36px;max-width:360px;margin:0 auto;}
 .lead {font-size:15px;margin-top:24px;}
 .card {margin-top:48px;--pad:24px;--card-radius:20px;}
 :root[data-theme=dark] .card {--card-radius:28px;}
 .network-info {font-size:9px;gap:6px;}
 .sphere-slot {--sphere-width:calc(100vw - 32px);height:calc((100vw - 32px) * .732);}
 #faucet-scene {width:calc((100vw - 32px) * 3.023);height:calc((100vw - 32px) * 1.682);top:calc((100vw - 32px) * -.455);}
 .faq {grid-template-columns:1fr;gap:18px;padding:24px;border-radius:20px;}
 .faq h2 {font-size:24px;}
 .docs-panel {flex-direction:column;gap:24px;margin-top:24px;padding:24px;border-radius:20px;}
 .docs-panel p {font-size:20px;}
 .docs-link {min-height:44px;}
 .supporters {margin-top:40px;}
 .supporters ul {gap:28px 32px;}
 .footer {margin-top:72px;}
}
@media(max-width:360px) { .card {--pad:18px;} .faq,.docs-panel {padding:20px;} }