:root {
  --paper: #eeede6;
  --ink: #171717;
  --accent: #dbff00;
  --muted: #62625b;
  --line: #b8b8ae;
  --display: Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
:where(a, button, input, textarea):focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
header { max-width: 1320px; margin: auto; padding: 25px 48px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 2px solid var(--ink); }
.brand { font-size: 34px; font-weight: 900; letter-spacing: -2px; }
.brand span { display: inline-block; background: var(--ink); color: var(--accent); margin-left: 10px; padding: 0 5px; transform: rotate(-8deg); }
.pill { font: 700 10px/1.3 monospace; letter-spacing: 1px; border: 2px solid var(--ink); padding: 9px 12px; transform: rotate(2deg); }
.home { max-width: 1320px; margin: auto; display: grid; grid-template-columns: 1.15fr 1fr; min-height: 660px; }
.hero { padding: 76px 30px 65px 48px; }
.eyebrow { font: 700 11px/1.5 monospace; letter-spacing: 1.6px; margin-bottom: 25px; }
h1, h2 { font-family: var(--display); font-weight: 900; line-height: .98; letter-spacing: -1.5px; text-transform: uppercase; overflow-wrap: break-word; }
h1 { font-size: clamp(60px, 6.6vw, 88px); margin: 0 0 28px; }
em { font-weight: inherit; font-style: normal; }
.hero h1 em { color: var(--paper); background: var(--ink); box-shadow: 7px 0 var(--ink), -4px 0 var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
p { font-size: 16px; line-height: 1.65; color: #4c4c46; }
.hero p { max-width: 390px; margin: 30px 0; }
.button { border: 2px solid var(--ink); display: inline-flex; gap: 12px; align-items: center; justify-content: center; background: var(--accent); color: var(--ink); padding: 16px 23px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.tiny { font-size: 11px; line-height: 1.7; color: var(--muted); margin-top: 20px; }
.art { position: relative; isolation: isolate; margin: 35px 48px 35px 10px; background: var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 550px; border: 2px solid var(--ink); }
.art::before { content: ''; position: absolute; inset: 0; opacity: .2; background: repeating-linear-gradient(125deg, transparent 0 32px, #aaa 33px, transparent 34px 66px); }
.art::after { content: 'LOST?'; position: absolute; left: -8px; bottom: 30px; font: 160px/.9 var(--display); color: #363632; transform: rotate(-90deg); transform-origin: left top; z-index: -1; }
.keytag { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; background: var(--accent); width: 205px; height: 310px; border: 3px solid var(--ink); border-radius: 15px; transform: rotate(-12deg); box-shadow: 9px 10px 0 #000, 10px 11px 0 #777; padding: 38px 15px 14px; color: var(--ink); }
.keytag::before { content: ''; position: absolute; top: 15px; width: 38px; height: 7px; border-radius: 5px; background: var(--ink); }
.keytag span { font: 700 10px monospace; text-transform: uppercase; letter-spacing: 3px; }
.keytag strong { font: 900 65px/.84 var(--display); text-transform: uppercase; letter-spacing: -2px; margin-top: 16px; }
.keytag small { font: 700 7px monospace; letter-spacing: .4px; margin-top: 9px; color: var(--ink); }
.qr-art { font-size: 62px; line-height: 1; margin-top: 15px; }
.keyring { position: absolute; width: 100px; height: 100px; border: 8px solid #888; border-right-color: #ddd; border-top-color: #f5f5f0; border-radius: 50%; top: calc(50% - 232px); left: calc(50% - 80px); box-shadow: 3px 4px 0 #000; z-index: 3; }
.keyring:after { content: ''; position: absolute; top: 62px; left: 21px; width: 23px; height: 39px; border: 5px solid #ccc; border-radius: 30px; transform: rotate(20deg); }
.scribble { position: absolute; right: 19px; top: 48px; color: var(--paper); font: 900 21px/1.05 var(--display); text-transform: uppercase; transform: rotate(9deg); z-index: 4; }
.arrow-sticker { position: absolute; bottom: 67px; right: 24px; background: var(--paper); color: var(--ink); padding: 0 12px; font: 900 74px/1 Arial, sans-serif; transform: rotate(9deg); z-index: 3; }
.art-caption { position: absolute; bottom: 20px; color: var(--accent); font: 700 9px monospace; letter-spacing: 1.5px; }
.steps { max-width: 1224px; margin: 0 auto 20px; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 2px solid var(--ink); padding: 32px 0; }
.steps>div { padding: 0 28px; border-right: 1px solid var(--line); }
.steps>div:first-child { padding-left: 0; }
.steps>div:last-child { border: 0; }
.steps .step-icon { display: inline-block; background: var(--ink); color: var(--accent); padding: 3px 7px; font-size: 20px; margin-right: 12px; }
.steps span { font: 700 10px monospace; letter-spacing: 1px; }
.steps h3 { font: 900 29px/1.1 var(--display); text-transform: uppercase; margin: 20px 0 10px; }
.steps p { font-size: 13px; margin: 0; max-width: 300px; }
footer { max-width: 1320px; margin: auto; display: flex; justify-content: space-between; gap: 20px; padding: 24px 48px; font: 11px monospace; color: var(--muted); }
footer a:hover, .subtle:hover { text-decoration: underline; }
.setup { max-width: 1160px; margin: 55px auto 80px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 75px; padding: 0 35px; }
.setup h1 { font-size: 58px; }
.setup>section>p { margin-bottom: 30px; }
label { display: block; font-size: 12px; font-weight: 700; margin-top: 22px; }
input:not([type=checkbox]):not([type=file]), .contact-form textarea { width: 100%; background: #fafaf5; border: 2px solid var(--ink); border-radius: 0; padding: 14px; margin-top: 9px; color: var(--ink); }
small { display: block; font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--muted); margin-top: 7px; }
.domain-input span { font: 11px monospace; display: block; margin-top: 6px; color: var(--muted); }
.upload { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px; border: 2px dashed var(--ink); gap: 12px; background: #e4e4da; cursor: pointer; }
.upload span { font-size: 11px; font-weight: 400; }
.upload input { width: 100%; font-size: 12px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-size: 11px; line-height: 1.6; font-weight: 400; margin-bottom: 22px; }
.consent input { accent-color: var(--ink); margin-top: 3px; }
.preview-card { align-self: start; margin-top: 30px; position: sticky; top: 30px; border: 2px solid var(--ink); background: #e2e2d8; padding: 28px 24px; text-align: center; box-shadow: 8px 8px 0 var(--ink); }
.preview-card .eyebrow { font-size: 9px; }
.preview-image { height: 220px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.preview-image>span { font: 120px/1 var(--display); color: var(--ink); }
.preview-image img { width: 100%; height: 100%; object-fit: contain; }
.preview-card h2 { font-size: 39px; margin: 22px 0; }
.mock-button { display: inline-flex; padding: 13px 18px; background: var(--accent); border: 2px solid var(--ink); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.preview-card p { font: 11px monospace; overflow-wrap: anywhere; }
.progress { font-size: 12px; display: flex; gap: 8px; }
.error { padding: 14px; background: #ffe6dd; color: #8b250c; border: 2px solid #8b250c; font-size: 13px; }
.profile { text-align: center; max-width: 780px; margin: 45px auto 80px; padding: 0 24px; }
.profile h1 { font-size: clamp(46px, 6vw, 72px); margin: 28px 0 20px; }
.profile>p { margin: 18px 0 25px; }
.portrait-stage { width: 280px; height: 270px; margin: auto; position: relative; background: var(--accent); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.portrait { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.star { position: absolute; color: var(--ink); font: 900 48px/1 Arial, sans-serif; z-index: 2; }
.s1 { left: -20px; top: 22px; transform: rotate(-12deg); }
.s2 { right: -20px; bottom: 50px; }
.photo-label { position: absolute; bottom: 10px; right: -16px; background: var(--ink); color: var(--paper); padding: 9px 14px; transform: rotate(-6deg); font: 700 10px monospace; text-transform: uppercase; z-index: 3; }
.demo-face { font: 900 185px/1.4 var(--display); transform: rotate(-8deg); }
.subtle { font: 11px monospace; color: var(--muted); display: block; margin-top: 45px; }
.success { max-width: 650px; margin: 70px auto; text-align: center; padding: 0 24px; }
.success h1 { font-size: 58px; }
.success-icon { background: var(--accent); border: 2px solid var(--ink); padding: 20px; display: inline-flex; margin-bottom: 30px; }
.notice { margin-top: 40px; text-align: left; border: 2px solid var(--ink); padding: 22px; }
.notice p { font-size: 13px; }
.notice input { font-size: 12px!important; }
.secondary { background: transparent; border: 2px solid var(--ink); padding: 10px 14px; color: var(--ink); font-size: 12px; font-weight: 700; margin-top: 10px; }
.secondary:hover { background: var(--ink); color: var(--paper); }
.admin { max-width: 1100px; margin: 60px auto; padding: 0 30px; }
.admin h1 { font-size: 58px; }
.admin>p { max-width: 640px; }
.login { max-width: 480px; }
.login button { margin-top: 20px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 30px 0; }
.admin-actions .secondary { margin: 0; }
.key-row { display: flex; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.key-row>div { flex: 1; min-width: 0; }
.key-row a, .key-row button { font-size: 12px; }
.key-row .secondary { margin: 0; }
.key-list { margin-top: 28px; }
.status { min-height: 22px; }
.blank-error { max-width: 700px; margin: 80px auto; padding: 0 24px; text-align: center; }
@media(max-width: 1280px) { .steps { margin-inline: 48px; } }
@media(max-width: 800px) {
  header { padding: 20px 22px; }
  .brand { font-size: 29px; }
  .pill { font-size: 8px; padding: 8px; letter-spacing: .5px; }
  .home { grid-template-columns: 1fr; }
  .hero { padding: 46px 24px 24px; }
  h1 { font-size: clamp(52px, 11vw, 80px); }
  .hero p { font-size: 15px; }
  .art { margin: 20px 24px 35px; min-height: 460px; }
  .scribble { top: 30px; right: 14px; font-size: 18px; }
  .arrow-sticker { right: 15px; bottom: 55px; font-size: 60px; }
  .steps { margin: 0 24px; grid-template-columns: 1fr; padding: 0; }
  .steps>div, .steps>div:first-child { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps>div:last-child { border: 0; }
  .steps h3 { margin: 14px 0 10px; }
  .steps p { max-width: none; }
  footer { padding: 24px; }
  .setup { grid-template-columns: 1fr; gap: 35px; margin: 35px auto; padding: 0 24px; }
  .setup h1 { font-size: 48px; }
  .preview-card { position: static; margin-top: 0; padding: 28px 20px; }
  .preview-image { height: 190px; }
  .profile { margin-top: 35px; }
  .portrait-stage { width: 240px; height: 240px; }
  .demo-face { font-size: 165px; }
  .admin { margin: 40px auto; padding: 0 24px; }
  .admin h1, .success h1 { font-size: 46px; }
  .key-row { gap: 12px; flex-wrap: wrap; }
  .key-row>div { flex-basis: 100%; }
  .key-row button, .key-row a { margin: 0; }
}
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none!important; } }