@font-face { font-family:'Workshop Display'; font-style:normal; font-weight:200 700; font-display:swap; src:url('/fonts/oswald-latin-wght-normal.woff2') format('woff2'); }
:root { --ink:#171617; --paper:#e8e6e1; --acid:#e6ff00; --ash:#98979a; --line:rgba(232,230,225,.25); --display:'Workshop Display','Arial Narrow',Arial,sans-serif; --sans:Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { min-height:100vh; 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; z-index:10; 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"); }
.page-nav { display:flex; gap:19px; align-items:center; min-height:52px; padding:13px clamp(20px,4vw,64px); border-bottom:1px solid var(--line); position:relative; z-index:11; }
.page-nav a { color:var(--ash); font-size:11px; font-weight:bold; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; }
.page-nav a:hover, .page-nav a.active { color:var(--acid); }
.participation-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.95fr); gap:clamp(28px,5vw,70px); max-width:1440px; margin:auto; padding:clamp(30px,5vw,78px) clamp(20px,4vw,64px); }
.reflection-form { min-width:0; }
.prompt { position:relative; border-top:1px solid var(--line); padding:22px 0 27px; }
.prompt-number { color:var(--acid); font:30px/.9 var(--display); letter-spacing:.01em; }
h1 { max-width:920px; margin:12px 0 20px; font-family:var(--display); font-size:clamp(39px,5.3vw,80px); font-weight:450; letter-spacing:-.02em; line-height:.94; text-transform:uppercase; }
label { display:block; color:var(--paper); font-family:var(--display); font-size:clamp(28px,4vw,55px); font-weight:400; letter-spacing:-.015em; line-height:.96; text-transform:uppercase; }
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:124px; margin-top:15px; resize:vertical; }
textarea:focus, input:focus { border-color:var(--acid); box-shadow:0 0 0 2px rgba(230,255,0,.16); }
textarea::placeholder { color:#8a888b; }
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:18px; margin:10px 0 0; color:var(--acid); font-size:13px; }.message.error { color:#ff8282; }
.wall { align-self:start; min-height:600px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.wall-head { display:flex; justify-content:space-between; gap:10px; padding:16px 17px; 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; }
.responses { max-height:calc(100vh - 145px); min-height:545px; padding:12px; overflow:auto; }
.response { border-bottom:1px solid var(--line); padding:16px 5px 17px; }.response:last-child { border-bottom:0; }
.response--new { animation:roll-in .5s cubic-bezier(.2,.7,.2,1) both; }
.tag { color:var(--acid); font-size:10px; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; }.response p { margin:9px 0 1px; font-size:16px; line-height:1.34; }
.empty { padding:46px 10px; color:var(--ash); text-align:center; font-size:14px; }
@keyframes roll-in { from { opacity:0; transform:translateY(-18px); background:rgba(230,255,0,.16); } 65% { background:rgba(230,255,0,.05); } to { opacity:1; transform:translateY(0); background:transparent; } }
.canvas-shell { max-width:900px; margin:auto; padding:clamp(30px,5vw,78px) clamp(20px,4vw,64px); }
.canvas-shell .prompt > label { margin-top:12px; }.canvas-shell textarea { margin-bottom:2px; }.email-send { border-top:1px solid var(--line); padding:25px 0 12px; }.email-label { font-size:clamp(25px,3.25vw,42px); }.optional { color:var(--ash); font:12px/1 var(--sans); letter-spacing:0; text-transform:none; vertical-align:middle; }.email-send input:not(.honeypot) { margin-top:15px; }.self-redesign { margin-top:24px; }.self-redesign[hidden] { display:none; }.stage-prompt h2 { max-width:760px; margin:12px 0 28px; color:var(--paper); font:400 clamp(30px,4vw,52px)/.96 var(--display); letter-spacing:-.015em; text-transform:uppercase; }.stage-field { padding:19px 0 21px; border-top:1px solid var(--line); }.stage-field label { font-size:clamp(23px,3vw,38px); }.stage-field p { margin:7px 0 0; color:var(--ash); font-size:14px; line-height:1.35; }.stage-field textarea { min-height:96px; }.success { max-width:510px; color:var(--acid); }.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media(max-width:850px) { .participation-shell { grid-template-columns:1fr; }.wall { min-height:450px; }.responses { min-height:360px; max-height:520px; } }
@media(max-width:480px) { h1 { font-size:42px; } label { font-size:30px; } }
@media print { body { background:#fff; color:#111; } body::before, .page-nav, button, .saved { display:none; }.canvas-shell { max-width:none; padding:0; }.prompt { border-color:#bbb; } label { font-family:Arial,sans-serif; font-size:20px; line-height:1.1; }.prompt-number { color:#333; }.canvas-shell textarea { min-height:75px; color:#111; border-color:#999; background:#fff; } }