:root { --ink:#171617; --paper:#e8e6e1; --acid:#e6ff00; --ash:#98979a; --line:rgba(232,230,225,.25); --display:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; --sans:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; }
body { margin:0; color:var(--paper); background:radial-gradient(circle at 82% 10%,#282629 0,transparent 23rem),var(--ink); font-family:var(--sans); }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.13; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.44'/%3E%3C/svg%3E"); z-index:10; }
a { color:inherit; }
.topbar { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:14px clamp(20px,4vw,64px); border-bottom:1px solid var(--line); position:relative; z-index:11; }
.brand, .eyebrow { font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.brand span { color:var(--acid); }
nav { display:flex; gap:20px; flex-wrap:wrap; } nav a { color:var(--ash); font-size:12px; font-weight:bold; text-decoration:none; text-transform:uppercase; letter-spacing:.07em; } nav a:hover,nav a.active { color:var(--acid); }
.shell { max-width:1440px; margin:auto; padding:clamp(30px,5vw,78px) clamp(20px,4vw,64px) 72px; }
.hero { display:grid; grid-template-columns:1.25fr .75fr; align-items:end; gap:32px; min-height:260px; border-bottom:1px solid var(--line); padding-bottom:36px; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:-.025em; line-height:.84; }
h1 { font-size:clamp(62px,10vw,154px); margin-bottom:24px; max-width:1000px; }
h2 { font-size:clamp(38px,5.2vw,76px); margin-bottom:18px; }
h3 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:9px; }
.highlight { background:var(--acid); color:var(--ink); padding:.06em .12em; }
.lead { font-size:clamp(17px,2vw,25px); line-height:1.23; max-width:680px; }
.aside-note { border:1px solid var(--acid); padding:17px; color:var(--acid); align-self:end; font-size:15px; line-height:1.25; }
.grid { display:grid; grid-template-columns:minmax(0,.96fr) minmax(340px,1.04fr); gap:clamp(28px,5vw,70px); margin-top:48px; }
.section-label { color:var(--acid); margin-bottom:15px; }
.prompt { border-top:1px solid var(--line); padding:22px 0 26px; }
.prompt p { max-width:660px; color:#d0ced0; line-height:1.45; }
label { display:block; color:var(--ash); text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:bold; margin:15px 0 7px; }
textarea,input { width:100%; border:1px solid #777477; border-radius:0; padding:13px; background:#232124; color:var(--paper); font:15px/1.4 var(--sans); outline:none; } textarea { min-height:120px; resize:vertical; } textarea:focus,input:focus { border-color:var(--acid); box-shadow:0 0 0 2px rgba(230,255,0,.16); }
.meta { display:grid; grid-template-columns:1fr 1.15fr; gap:10px; }
button { appearance:none; margin-top:17px; border:0; border-radius:0; padding:13px 17px; background:var(--acid); color:var(--ink); cursor:pointer; font-weight:900; font-size:12px; letter-spacing:.07em; text-transform:uppercase; } button:hover { background:#fff; } button:disabled { cursor:wait; opacity:.6; }
.message { min-height:20px; margin:10px 0 0; color:var(--acid); font-size:13px; }.message.error{ color:#ff8282; }
.wall { border:1px solid var(--line); min-height:600px; background:rgba(255,255,255,.025); }
.wall-head { padding:17px; display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }.wall-head span { color:var(--acid); font-size:10px; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; }.count { color:var(--ash)!important; }
.filter { display:flex; gap:0; border-bottom:1px solid var(--line); }.filter button { flex:1; margin:0; padding:12px 8px; background:transparent; color:var(--ash); border-right:1px solid var(--line); font-size:10px; }.filter button:last-child{border:0}.filter button.active{background:var(--acid); color:var(--ink)}
.responses { padding:12px; max-height:620px; overflow:auto; }.response { border-bottom:1px solid var(--line); padding:16px 5px 17px; animation:appear .35s ease both; }.response:last-child{border:0}.tag { color:var(--acid); font-size:10px; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; }.response p{margin:9px 0 11px; font-size:16px; line-height:1.34; }.signature{color:var(--ash);font-size:11px}.empty{ color:var(--ash); padding:46px 10px; text-align:center; font-size:14px; line-height:1.5; }@keyframes appear {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:48px; }.step { min-height:145px; padding:16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.step-number{color:var(--acid);font:28px var(--display)}.step p{color:var(--ash);font-size:14px;line-height:1.4;margin:8px 0 0}.page-footer{border-top:1px solid var(--line); padding:20px clamp(20px,4vw,64px); color:var(--ash); font-size:11px;display:flex;justify-content:space-between;gap:20px}.canvas{max-width:900px}.canvas .prompt{max-width:780px}.notice{padding:14px 16px;border-left:4px solid var(--acid);background:#232124;line-height:1.4;color:#d0ced0}.saved{color:var(--acid);font-size:12px;margin-left:12px}
@media(max-width:800px){.topbar{align-items:flex-start;flex-direction:column}.hero,.grid{grid-template-columns:1fr}.aside-note{max-width:400px}.steps{grid-template-columns:1fr 1fr}.wall{min-height:450px}.responses{max-height:450px}}@media(max-width:480px){.meta,.steps{grid-template-columns:1fr}h1{font-size:62px}nav{gap:12px}}