:root { color-scheme: light; font-family: Montserrat, Arial, sans-serif; color: #141414; background: #f6f6f2; }
* { box-sizing: border-box; }
body { margin: 0; }
.canvas { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; background: #f6f6f2; }
.tree { position: absolute; margin: 0; color: rgba(35,38,44,.09); font: 500 clamp(15px,1.45vw,22px)/1.95 "JetBrains Mono", monospace; white-space: pre; user-select: none; pointer-events: none; }
.tree-left { top: 8%; left: -1%; }
.tree-right { right: -2%; bottom: 5%; }
.content { position: relative; z-index: 1; width: min(100%, 1180px); margin: auto; padding: 48px 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; background: #ffdd3c; font: 800 24px/1 Montserrat, sans-serif; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-top: clamp(72px,12vh,130px); font: 500 11px/1.4 "JetBrains Mono", monospace; letter-spacing: .16em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #1fa855; }
h1 { margin: 24px 0 20px; font-size: clamp(48px,6.3vw,90px); font-weight: 900; line-height: 1.02; letter-spacing: -.075em; }
h1 span:not(.period) { background: linear-gradient(transparent 73%, #ffdd3c 73%); }
.period { color: #e8392f; }
.lead { margin: 0 0 14px; font-size: clamp(20px,2.1vw,28px); font-weight: 800; letter-spacing: -.04em; }
.description { max-width: 560px; margin: 0; color: #555960; font-size: 16px; line-height: 1.75; font-weight: 500; }
.coming-soon { display: inline-block; margin-top: 36px; padding: 16px 20px; border: 1px solid #d8d8d1; background: rgba(255,255,255,.65); font: 500 14px/1.4 "JetBrains Mono", monospace; }
.prompt { color: #1fa855; margin-right: 10px; }
.cursor { animation: blink 1s steps(1) infinite; }
.scribble { margin: 6px 0 0 235px; color: #e8392f; font: 700 26px/1 Caveat, cursive; transform: rotate(-5deg); }
.footer { margin-top: clamp(50px,9vh,110px); color: #8a8f98; font-size: 12px; font-weight: 600; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
@media (max-width: 700px) {
  .canvas { align-items: flex-start; }
  .content { padding: 28px 20px 48px; }
  .eyebrow { margin-top: 94px; }
  h1 { font-size: clamp(42px,10.8vw,66px); }
  .description { font-size: 15px; }
  .tree-left { left: auto; right: -90px; top: 12%; }
  .tree-right { right: -90px; bottom: 0; }
  .coming-soon { max-width: 100%; font-size: 12px; padding: 14px; }
  .scribble { margin-left: 150px; font-size: 24px; }
  .footer { margin-top: 78px; }
}