:root { --ink:#242032; --lavender:#bbb7ec; --paper:#fff0d1; --lime:#d9ff65; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--paper); font:16px/1.5 system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:3px solid #f18d38; outline-offset:4px; }
header,footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:17px 6%; }
.brand { font:950 24px/1 "Arial Black",system-ui,sans-serif; letter-spacing:-.06em; }
.brand span { margin-left:6px; color:var(--lime); font-size:16px; }
.link { font-size:13px; font-weight:800; }
.link:hover { color:var(--lime); }
.hero { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:6%; padding:clamp(30px,5vw,80px) 7%; background-color:var(--lavender); background-image:linear-gradient(#24203214 1px,transparent 1px),linear-gradient(90deg,#24203214 1px,transparent 1px); background-size:24px 24px; color:var(--ink); }
.ticker { display:inline-block; margin:0 0 20px; padding:4px 11px; border:2px solid var(--ink); background:var(--paper); font:800 15px monospace; box-shadow:3px 3px var(--ink); }
h1,h2 { margin:0; font:950 clamp(72px,10vw,150px)/.85 "Arial Black",Impact,system-ui,sans-serif; letter-spacing:-.085em; }
h1 em,h2 em { color:#473573; font-style:normal; }
.lead { max-width:360px; font-size:clamp(17px,2vw,25px); line-height:1.35; margin:24px 0; }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; background:var(--paper); color:var(--ink); border:2px solid var(--ink); padding:11px 14px; font:850 13px/1.3 system-ui,sans-serif; box-shadow:4px 4px var(--ink); cursor:pointer; }
.button:hover { transform:translate(2px,2px); box-shadow:2px 2px var(--ink); }
.lime { background:var(--lime); }
.status { min-height:1.5em; margin:14px 0 0; font:700 12px/1.5 monospace; }
.screen { position:relative; margin:0; border:5px solid var(--ink); background:var(--ink); box-shadow:9px 9px 0 #6a5e9c; }
.screen img { display:block; width:100%; height:auto; }
.screen::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(transparent 0 3px,#24203230 4px); }
.screen.ringing { animation:ring .38s ease-out; }
@keyframes ring { 25% { transform:rotate(-2deg); } 70% { transform:rotate(2deg); } }
.lore { padding:clamp(35px,6vw,90px) 7%; color:var(--ink); background:var(--lime); }
.lore-copy { display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:27px; }
h2 { font-size:clamp(39px,6.5vw,96px); line-height:.93; }
.lore img { width:100%; height:auto; display:block; border:3px solid var(--ink); }
footer>span { font:13px monospace; }
@media(max-width:630px) { .hero { grid-template-columns:minmax(0,1fr); gap:21px; padding:32px 6% 38px; } h1 { font-size:clamp(62px,16vw,98px); } .lead { margin:18px 0; } .status { margin-top:12px; } }
@media(prefers-reduced-motion:reduce) { .screen.ringing { animation:none; } }