:root { --ink:#090908; --paper:#f6e6d4; --muted:#ae9f91; --line:rgba(246,230,212,.22); --warm:#ffdab4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; min-width:320px; overflow-x:hidden; color:var(--paper); background:#090908; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.3; z-index:-1; background-image:linear-gradient(rgba(255,222,185,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,222,185,.02) 1px,transparent 1px); background-size:5px 5px; }
.noise { position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35; background:radial-gradient(circle at 8% 18%,rgba(216,203,189,.15) 0 1px,transparent 2px) 0 0/7px 7px,radial-gradient(ellipse at 50% 100%,rgba(122,107,96,.16),transparent 38%); mask-image:linear-gradient(to bottom,black,transparent 92%); }
.container { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.site-header { min-height:84px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.1em; }
.brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:11px; letter-spacing:.08em; }
.brand-dot { width:10px; height:10px; display:block; background:var(--warm); box-shadow:0 0 12px var(--warm); }
.header-links { display:flex; align-items:center; gap:18px; }
.header-link,.footer-links a { color:var(--paper); text-decoration:none; }
.header-link:hover,.footer-links a:hover { color:var(--warm); }
.hero { min-height:610px; padding:78px 0 58px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; }
.eyebrow,.card-kicker { margin:0 0 20px; color:var(--muted); font-size:10px; letter-spacing:.12em; }
h1 { margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight:900; font-size:clamp(34px,4.1vw,62px); line-height:1.12; letter-spacing:-.1em; text-shadow:0 0 25px rgba(255,214,175,.15); }
h1 em { font-style:normal; color:var(--warm); }
.intro { max-width:340px; margin:28px 0; color:#d1c1b1; font-size:16px; line-height:1.6; }
.actions { display:flex; flex-wrap:wrap; gap:10px; }
.button { min-height:48px; display:inline-flex; gap:22px; align-items:center; justify-content:center; padding:12px 15px; border:1px solid var(--line); color:var(--paper); font-size:11px; text-decoration:none; letter-spacing:.04em; transition:transform .15s,background .15s; }
.button:hover { transform:translate(-2px,-2px); background:rgba(246,230,212,.1); }
.button-primary { color:#15110f; background:var(--warm); border-color:var(--warm); box-shadow:5px 5px 0 #735943; }
.screen-wrap { position:relative; max-width:520px; justify-self:end; }
.main-art { display:block; width:100%; height:auto; border:1px solid rgba(246,230,212,.12); box-shadow:0 0 60px rgba(255,212,174,.12); image-rendering:auto; }
.screen-label { position:absolute; z-index:1; top:15px; left:15px; padding:7px 8px; color:#19120e; background:var(--warm); font-size:9px; letter-spacing:.08em; }
.scanline { position:absolute; width:13%; height:1px; background:var(--warm); opacity:.65; }
.scanline.one { right:-6%; top:34%; }.scanline.two { left:-6%; bottom:18%; }
.info { padding:58px 0 84px; border-top:1px solid var(--line); display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:start; }
.info-title > p:last-child { margin:0; font-size:clamp(18px,2vw,26px); line-height:1.42; letter-spacing:-.05em; }
.token-card { padding:24px; border:1px solid var(--line); background:rgba(246,230,212,.035); box-shadow:8px 8px 0 rgba(246,230,212,.06); }
.token-card strong { display:block; margin-bottom:30px; color:var(--warm); font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:18px; font-weight:900; line-height:1.5; letter-spacing:-.08em; }
.ca-row { display:flex; align-items:end; justify-content:space-between; gap:18px; border-top:1px solid var(--line); padding-top:18px; }.ca-row .card-kicker { display:block; margin-bottom:9px; }.ca-row code { color:var(--paper); font:14px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.copy-button { min-width:74px; min-height:34px; border:1px solid var(--warm); color:var(--warm); background:transparent; font:10px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing:.08em; cursor:pointer; }.copy-button:hover { background:var(--warm); color:var(--ink); }.copy-button:focus-visible,.button:focus-visible,a:focus-visible { outline:2px solid white; outline-offset:3px; }.copy-status { height:16px; margin:12px 0 0; color:var(--warm); font-size:10px; }
.site-footer { min-height:92px; padding:28px 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--muted); font-size:10px; letter-spacing:.07em; }.footer-signal { color:var(--warm); }.footer-links { display:flex; gap:17px; }
@media (max-width:768px) { .container { width:min(100% - 32px,600px); }.site-header { min-height:68px; }.header-link { font-size:9px; }.hero { min-height:0; padding:62px 0; grid-template-columns:1fr; gap:48px; }.screen-wrap { width:min(100%,460px); justify-self:center; }.info { grid-template-columns:1fr; gap:38px; padding:48px 0 62px; }.site-footer { align-items:flex-start; flex-wrap:wrap; }.footer-signal { order:3; width:100%; } }
@media (max-width:430px) { .brand { font-size:9px; }.header-link { font-size:8px; }.hero { padding-top:46px; } h1 { font-size:31px; }.button { width:100%; }.ca-row { align-items:flex-start; flex-direction:column; }.copy-button { width:100%; }.site-footer { font-size:9px; } }