:root {
  color-scheme: dark;
  --bg: #0c0c0e;
  --surface: #131316;
  --line: #29292e;
  --text: #f2efe8;
  --muted: #89888d;
  --acid: #dcff47;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  min-height: 100vh;
}

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  opacity: .025;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

button, textarea { font: inherit; }
button { cursor: pointer; }
.onboarding { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(5,5,7,.92); backdrop-filter:blur(12px); }
.onboarding-card { width:min(680px,100%); max-height:92vh; overflow:auto; background:#101012; border:1px solid #34343a; padding:clamp(26px,5vw,52px); box-shadow:0 30px 100px #000; }
.onboarding-step { color:var(--acid); font-size:9px; letter-spacing:2px; }
.onboarding-card h1 { font:400 clamp(29px,5vw,48px)/1.15 "Unbounded"; letter-spacing:-2px; margin:20px 0; }
.onboarding-card > p { color:#aaa9ae; line-height:1.7; max-width:570px; }
.onboarding-rules { border-top:1px solid var(--line); margin:30px 0 24px; }
.onboarding-rules article { display:grid; grid-template-columns:34px 1fr; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); }
.onboarding-rules b { color:var(--acid); font-size:10px; }
.onboarding-rules span { font-size:12px; line-height:1.5; }
.rules-check { display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:11px; line-height:1.5; }
.rules-check input { accent-color:var(--acid); margin-top:2px; }
.rules-check a { color:var(--text); }
.onboarding-card > button { width:100%; margin-top:22px; border:0; background:var(--acid); color:#111; padding:16px; font-size:10px; font-weight:700; letter-spacing:1px; }
.onboarding-card > button:disabled { background:#29292d; color:#666; cursor:not-allowed; }

.topbar {
  height: 74px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 5vw, 72px);
}

.brand {
  color: var(--text);
  text-decoration: none;
  font: 500 15px "Unbounded", sans-serif;
  letter-spacing: -.5px;
}
.brand span { color: var(--acid); margin-left: 7px; }
.world-state { display:flex; align-items:center; gap:24px; color: var(--muted); font-size: 10px; letter-spacing: 2px; }
.world-state i { display: inline-block; width: 6px; height: 6px; background: var(--acid); border-radius: 50%; margin-right: 7px; box-shadow: 0 0 12px var(--acid); }
.world-state a { color:var(--text); text-decoration:none; }
.world-state a:hover { color:var(--acid); }

.identity {
  justify-self: end;
  display: flex;
  gap: 9px;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
}
.identity > span:first-child, .post-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #3a3a40;
  border-radius: 50%;
  color: var(--acid);
}

.hero {
  text-align: center;
  padding: clamp(66px, 10vw, 126px) 20px 76px;
  border-bottom: 1px solid var(--line);
}
.eyebrow { color: var(--muted); font-size: 10px; letter-spacing: 3px; margin: 0 0 22px; }
.countdown { display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 2.5vw, 31px); }
.countdown div { width: clamp(75px, 15vw, 178px); }
.countdown strong {
  display: block;
  font: 400 clamp(54px, 11vw, 130px)/.9 "Unbounded", sans-serif;
  letter-spacing: clamp(-6px, -.5vw, -2px);
}
.countdown span { display: block; margin-top: 14px; color: #5d5c62; font-size: 9px; letter-spacing: 2px; }
.timezone-note { color:#55545a; font-size:8px; letter-spacing:1.8px; margin:18px 0 0; }
.countdown b { color: var(--acid); font: 400 clamp(38px, 7vw, 86px)/.8 "Unbounded"; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: .15; } }

.manifesto { font: 400 clamp(17px, 2vw, 25px)/1.55 "Unbounded"; letter-spacing: -.8px; margin: 52px 0 40px; }
.day-stats { display: flex; justify-content: center; gap: 32px; color: var(--muted); font-size: 11px; }
.day-stats b { color: var(--text); font-weight: 500; }
.final-gate { margin-top:28px; border:1px solid var(--line); background:transparent; color:#65646a; padding:12px 17px; font-size:9px; letter-spacing:1.5px; }
.final-gate.open { border-color:var(--acid); color:var(--acid); }

.final-room { max-width:900px; margin:50px auto; border:1px solid #51342e; background:#120f10; padding:clamp(22px,4vw,42px); }
.final-room-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; border-bottom:1px solid #3c2926; padding-bottom:22px; }
.final-room-head span { color:#ff704c; font-size:9px; letter-spacing:2px; }
.final-room-head h2 { margin:9px 0 0; font:400 25px "Unbounded"; }
.final-room-head i { color:#7f6a66; font-size:10px; }
.final-messages { max-height:320px; overflow:auto; padding:13px 0; }
.final-message { display:flex; gap:12px; padding:11px 0; font-size:12px; }
.final-message b { color:#ff8a6d; white-space:nowrap; }
.final-message time { color:#574a48; font-size:9px; margin-left:auto; }
.final-form { display:flex; border-top:1px solid #3c2926; padding-top:18px; }
.final-form input { flex:1; min-width:0; background:#1b1516; border:1px solid #382829; color:var(--text); padding:14px; outline:0; }
.final-form button { border:0; background:#ff704c; color:#170d0a; padding:0 20px; font-size:10px; font-weight:700; }

.feed-wrap { max-width: 780px; margin: 0 auto; padding: 58px 20px 100px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.section-head span { font: 500 12px "Unbounded"; letter-spacing: .7px; }
.section-head p { color: var(--muted); font-size: 11px; margin: 7px 0 0; }
.compose-trigger, .composer button {
  border: 1px solid var(--acid);
  background: var(--acid);
  color: #11120c;
  padding: 13px 17px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  transition: .2s ease;
}
.actions { display: flex; align-items: center; gap: 9px; }
.quiet-action { min-height:44px; border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 12px 14px; font-size: 9px; letter-spacing: 1px; }
.quiet-action:hover { color: var(--text); }
.quiet-action span { color:var(--acid); margin-right:4px; }
.compose-trigger span { font-size:14px; margin-right:4px; }
.compose-trigger:hover, .composer button:hover { background: transparent; color: var(--acid); }

.composer { background: var(--surface); border: 1px solid var(--line); padding: 18px; margin-bottom: 16px; }
.composer.hidden { display: none; }
.composer textarea { width: 100%; min-height: 100px; resize: vertical; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 15px; line-height: 1.6; }
.composer-bottom { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 10px; }
.composer-bottom button { padding: 10px 14px; }
.letter-composer > p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 0 0 10px; }
.tomorrow-letter { border: 1px solid #3d3d31; background: linear-gradient(135deg, rgba(220,255,71,.06), transparent); padding: 24px; margin: 0 0 20px; }
.tomorrow-letter > span { color: var(--acid); font-size: 9px; letter-spacing: 2px; }
.tomorrow-letter blockquote { margin: 18px 0 11px; font: 400 17px/1.6 "Unbounded"; }
.tomorrow-letter small { color: var(--muted); }
.notice { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 340px; background: var(--acid); color: #111; padding: 14px 18px; font-size: 11px; box-shadow: 0 12px 50px #000; }
.notice[data-kind="error"] { background: #ff684c; color: white; }
.hidden { display: none !important; }

.feed { border-top: 1px solid var(--line); }
.post { padding: 26px 5px 22px; border-bottom: 1px solid var(--line); animation: arrive .4s ease both; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }
.post-meta { display: flex; gap: 11px; align-items: center; }
.post-avatar { font-size: 12px; }
.post-meta strong { display: block; font-size: 12px; font-weight: 600; }
.post-meta time { display: block; color: #67666c; font-size: 9px; margin-top: 2px; }
.post-text { margin: 18px 0 16px 39px; max-width: 630px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; }
.echo { margin-left: 39px; border: 0; background: transparent; color: #6e6d73; padding: 0; font-size: 11px; }
.echo:hover, .echo.active { color: var(--acid); }
.report { float: right; border: 0; background: transparent; color: #55545a; padding: 0 8px; letter-spacing: 2px; }
.report:hover { color: #ff684c; }
.empty { color: var(--muted); text-align: center; padding: 70px 20px; font-size: 13px; line-height: 1.8; }

footer { border-top: 1px solid var(--line); text-align: center; padding: 58px 20px; }
.epitaph { max-width:680px; margin:0 auto 70px; padding-bottom:45px; border-bottom:1px solid var(--line); }
.epitaph span { color:var(--acid); font-size:9px; letter-spacing:2px; }
.epitaph blockquote { font:400 18px/1.6 "Unbounded"; margin:22px 0 14px; }
.epitaph small { color:var(--muted); }
footer p { font: 400 clamp(16px, 2vw, 24px) "Unbounded"; margin: 0 0 12px; }
footer span { color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.footer-links { display:flex; justify-content:center; gap:18px; margin-top:22px; }
.footer-links a,.footer-links button { color:#67666c; background:none; border:0; padding:0; font-size:10px; text-decoration:none; }
.footer-links a:hover,.footer-links button:hover { color:var(--text); }

body.final-hour { --acid: #ff6b3d; }
body.final-hour .hero { background: radial-gradient(circle at 50% 100%, rgba(255, 60, 30, .09), transparent 48%); }
body.final-ten { animation: dying-flicker 7s infinite; }
body.final-ten .noise { opacity:.075; }
body.final-ten .post:nth-child(3n) { opacity:.55; transform:translateX(2px); }
body.final-ten .brand, body.final-ten footer p { text-shadow:2px 0 #6e1d14,-2px 0 #16425c; }
body.final-minute .post:nth-child(even) { opacity:.25; }
body.final-minute .topbar { transform:skewX(-.15deg); }
@keyframes dying-flicker { 0%,96%,100%{filter:none} 97%{filter:contrast(1.35) brightness(.8)} 98%{filter:none} 99%{filter:brightness(.65)} }

@media (max-width: 620px) {
  .topbar { grid-template-columns: 1fr 1fr; height: 64px; }
  .world-state { display: none; }
  .identityName { display: none; }
  .hero { padding-top: 70px; }
  .countdown { gap: 4px; }
  .countdown div { width: 29vw; }
  .countdown b { margin-top: 3px; }
  .manifesto br { display: none; }
  .feed-wrap { padding-left:16px; padding-right:16px; }
  .section-head { align-items: stretch; flex-direction:column; gap: 18px; }
  .actions { display:grid; grid-template-columns:1fr 1.25fr; gap:8px; width:100%; }
  .quiet-action, .compose-trigger { min-height:48px; width:100%; line-height:1.3; padding:10px 8px; font-size:8px; }
  .day-stats { gap: 16px; }
  .final-gate { min-height:46px; max-width:290px; line-height:1.5; }
  .final-room { margin:20px 12px; }
  .final-room-head { align-items:flex-start; flex-direction:column; }
  .final-form { flex-direction:column; }
  .final-form button { height:42px; }
}