:root{
  --bg:#08090B; --ink:#ECEDEF; --muted:#C4C8D0; --faint:#8A909C;
  --lime:#C6F432; --lime-hover:#D4FA5C; --mark:#13180B;
  --gap:18px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.page{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center}

/* ---------- clip wall ---------- */
.wall{position:absolute;top:-14%;bottom:-14%;left:-4%;width:66%;perspective:1800px}
.wall-inner{height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);transform:rotateY(14deg) rotateX(3deg);transform-origin:100% 50%}
.col{display:flex;flex-direction:column;will-change:transform}
.col-1{animation:wall-up 70s linear -10.5s infinite}
.col-2{animation:wall-down 84s linear -37.8s infinite}
.col-3{animation:wall-up 98s linear -73.5s infinite}
@keyframes wall-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
/* padding (not gap) between tiles keeps both halves exactly equal, so the loop has no jump */
.tile{flex:none;padding-bottom:var(--gap)}
.card{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#13161C;border:1px solid rgba(236,237,239,.06)}
.card.live{border-color:rgba(198,244,50,.35)}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card .pan{animation:pan 7s ease-in-out infinite alternate}
@keyframes pan{from{transform:scale(1.06) translateX(-2%)}to{transform:scale(1.14) translateX(2%)}}
.shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,7,10,.85),rgba(6,7,10,0) 55%)}
.tag{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;background:rgba(6,7,10,.75);font-size:11px;font-weight:700}
.dot{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.dur{position:absolute;right:12px;top:12px;padding:2px 7px;border-radius:6px;background:rgba(6,7,10,.75);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px}
.meta{position:absolute;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;gap:6px}
.title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.by{display:flex;align-items:center;gap:8px;font-size:12px;color:#A3A9B5}
.by i{width:18px;height:18px;border-radius:50%;flex:none}
.prog{height:3px;border-radius:2px;background:rgba(236,237,239,.2);overflow:hidden}
.prog span{display:block;height:3px;border-radius:2px;background:var(--lime);animation-name:fill;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes fill{from{width:0}to{width:100%}}

/* covers the wall so it reads as texture, then fades to solid on the right */
.cover{position:absolute;inset:0;background:
  radial-gradient(900px 700px at 0% 50%,rgba(8,9,11,.75),rgba(8,9,11,0)),
  linear-gradient(90deg,rgba(8,9,11,.8) 0%,rgba(8,9,11,.87) 40%,rgba(8,9,11,.95) 54%,var(--bg) 64%),
  linear-gradient(180deg,var(--bg) 0%,rgba(8,9,11,0) 18%,rgba(8,9,11,0) 82%,var(--bg) 100%)}

/* ---------- big self-drawing mark ---------- */
.mark{position:absolute;right:-6%;top:50%;width:92vh;height:92vh;min-width:760px;min-height:760px;transform:translateY(-50%) scale(1.3);overflow:visible;color:var(--mark)}
.mark .loop{stroke-dasharray:100;animation:draw 2.4s cubic-bezier(.65,0,.35,1) .2s both}
.mark .tip{animation:appear .6s ease 2.2s both}
@keyframes draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes appear{from{opacity:0}to{opacity:1}}

/* ---------- content ---------- */
.hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding:0 0 0 96px;max-width:760px}
.eyebrow{margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
h1{margin:0;width:640px;max-width:100%}
.wordmark{display:block;width:100%;height:auto}
.lede{margin:0;max-width:540px;font-size:20px;line-height:1.5;color:var(--muted)}
.actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta{height:52px;padding:0 22px 0 24px;border-radius:12px;background:var(--lime);color:#0E0F12;font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:14px;transition:background .15s}
.cta svg{transition:transform .15s}
.cta:hover{background:var(--lime-hover)}
.cta:hover svg{transform:translateX(3px)}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.note{font-size:14px;color:var(--faint)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .hero{padding-left:56px}
  .cover{background:radial-gradient(800px 600px at 0% 50%,rgba(8,9,11,.8),rgba(8,9,11,0)),linear-gradient(90deg,rgba(8,9,11,.86) 0%,rgba(8,9,11,.9) 45%,rgba(8,9,11,.95) 60%,var(--bg) 72%),linear-gradient(180deg,var(--bg) 0%,rgba(8,9,11,0) 18%,rgba(8,9,11,0) 82%,var(--bg) 100%)}
  .mark{right:-24%;opacity:.8}
}
/* ---------- mobile ---------- */
@media (max-width:760px){
  .page{align-items:flex-end}
  .wall{left:-10%;width:120%;top:-8%;bottom:-8%}
  .title,.by,.tag{display:none}
  .wall-inner{transform:rotateY(0) rotateX(8deg);transform-origin:50% 0%}
  .cover{background:linear-gradient(180deg,rgba(8,9,11,.8) 0%,rgba(8,9,11,.84) 35%,rgba(8,9,11,.95) 55%,var(--bg) 68%)}
  .mark{right:auto;left:50%;top:34%;width:120vw;height:120vw;min-width:0;min-height:0;transform:translate(-50%,-50%);opacity:.7}
  .hero{padding:0 24px calc(40px + env(safe-area-inset-bottom));gap:20px;max-width:none;width:100%}
  .eyebrow{font-size:12px}
  .lede{font-size:17px}
  .actions{flex-direction:column;align-items:stretch;gap:12px;width:100%}
  .cta{width:100%;height:54px}
  .note{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .mark .loop{stroke-dashoffset:0}
}