@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#172337;--muted:#748094;--line:#e7ebf2;--paper:#f6f8fb;--white:#fff;--radius:22px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.shell{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:34px 0 28px}
.topbar,.brand,.header-meta,.intro,.updated,.card-top,.card-bottom,.bitcoin-heading,.bitcoin-price-row,.btc-footer{display:flex;align-items:center}
.topbar,.intro,.card-bottom,.bitcoin-price-row,.btc-footer{justify-content:space-between}
.brand{gap:13px}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#172337;color:#fff;font:800 17px Manrope,sans-serif;letter-spacing:-1px}
h1,h2,p{margin:0}.brand h1{font:800 23px Manrope,sans-serif;letter-spacing:-.8px}.eyebrow{font-size:10px;letter-spacing:1.65px;font-weight:700;color:#8994a5}.brand .eyebrow{margin-bottom:3px;font-size:9px}
.header-meta{gap:9px;font-size:12px;color:#627086;background:#fff;border:1px solid var(--line);border-radius:99px;padding:10px 14px}.status-dot{width:7px;height:7px;border-radius:50%;background:#c8a55d}.status-dot.ok{background:#2da875}.status-dot.error{background:#d65c5c}
.intro{align-items:flex-end;margin:54px 0 25px;gap:24px}.intro h2{font:800 clamp(30px,4vw,44px) Manrope,sans-serif;letter-spacing:-1.8px;margin:8px 0}.subhead{color:var(--muted);font-size:14px;line-height:1.6}.updated{align-items:flex-end;flex-direction:column;gap:5px;padding-bottom:3px;white-space:nowrap}.updated-label{color:var(--muted);font-size:11px}.updated strong{font-size:13px;font-weight:700}
.rate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rate-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:23px 24px 19px;min-width:0;box-shadow:0 6px 24px rgba(28,44,71,.025);position:relative;overflow:hidden}
.rate-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.usd{--accent:#4e83e6;--tint:#eaf1ff}.eur{--accent:#31a56f;--tint:#e8f7ef}.jpy{--accent:#db8b43;--tint:#fff2e5}.cny{--accent:#8764d7;--tint:#f1ecff}
.card-top{gap:11px}.currency-symbol{display:grid;place-items:center;width:37px;height:37px;background:var(--tint);color:var(--accent);border-radius:12px;font:700 20px Manrope,sans-serif}.pair{font-weight:800;font-size:14px;letter-spacing:.1px}.pair span{font-weight:500;color:#8b95a4}.flag{margin-left:auto;font-size:23px}.currency-name{font-size:12px;color:var(--muted);margin:17px 0 6px}.price{font:800 clamp(25px,3.1vw,35px) Manrope,sans-serif;letter-spacing:-1.2px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.card-bottom{margin-top:19px;gap:8px;flex-wrap:wrap}.change,.quote-time{font-size:11px;color:var(--muted)}.change.up{color:#16845a}.change.down{color:#c14d4d}
.bitcoin-card{margin-top:17px;padding:25px 27px 19px;border-radius:var(--radius);background:#fff;border:1px solid #e8e1f7;box-shadow:0 8px 28px rgba(70,45,120,.045);position:relative;overflow:hidden}.bitcoin-card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#8c6bd5}.bitcoin-heading{gap:13px}.bitcoin-icon{width:46px;height:46px;border-radius:15px;background:#fff0df;color:#dc8a27;display:grid;place-items:center;font:800 28px Manrope,sans-serif}.bitcoin-heading h2{font:800 20px Manrope,sans-serif;letter-spacing:-.5px;margin:3px 0}.bitcoin-heading h2 span{font-size:12px;font-weight:600;color:#8d83a4;letter-spacing:0}.bitcoin-caption{color:#8d83a4;font-size:11px;line-height:1.5;margin-top:4px}.market-pill{margin-left:auto;border-radius:99px;padding:8px 11px;background:#f4efff;color:#7354b7;font-size:10px;font-weight:700;white-space:nowrap}.bitcoin-price-row{margin:24px 0 20px;gap:16px}.bitcoin-price{font-size:clamp(32px,4.4vw,48px);color:#392866}.btc-change{font-size:12px;color:#8d83a4}.btc-footer{border-top:1px solid #eee9f7;padding-top:14px;gap:10px;flex-wrap:wrap;color:#8d83a4;font-size:10px}.page-footer{padding:22px 2px 0;color:#8a94a4;font-size:10px;line-height:1.7;display:grid;gap:4px}.noscript{padding:12px;background:#fff2e5;border-radius:12px;color:#7e4b14}
@media(min-width:900px){.rate-card{min-height:210px;display:flex;flex-direction:column}.card-bottom{margin-top:auto;padding-top:18px}}
@media(max-width:620px){.shell{width:min(100% - 28px,520px);padding-top:20px}.brand-mark{width:40px;height:40px;border-radius:13px}.brand h1{font-size:20px}.header-meta{font-size:10px;padding:8px 10px}.intro{margin:38px 0 19px;display:block}.intro h2{font-size:34px}.subhead{max-width:340px;font-size:13px}.updated{align-items:flex-start;margin-top:17px;gap:3px}.rate-grid{grid-template-columns:1fr;gap:12px}.rate-card{padding:20px}.price{font-size:31px}.card-bottom{margin-top:14px}.bitcoin-card{margin-top:12px;padding:21px 20px 17px}.bitcoin-heading{align-items:flex-start}.bitcoin-icon{width:41px;height:41px}.bitcoin-heading h2{font-size:18px}.market-pill{font-size:9px;padding:7px 8px}.bitcoin-price-row{align-items:flex-start;flex-direction:column;margin:22px 0 17px;gap:8px}.bitcoin-price{font-size:34px}.btc-footer{align-items:flex-start;flex-direction:column;gap:5px}}
@media(prefers-reduced-motion:no-preference){.rate-card,.bitcoin-card{transition:box-shadow .2s ease,transform .2s ease}.rate-card:hover,.bitcoin-card:hover{box-shadow:0 12px 32px rgba(28,44,71,.07);transform:translateY(-1px)}}