:root { --ink:#101828; --muted:#667085; --paper:#f3f7fb; --panel:#ffffff; --line:#c9d4df; --violet:#6d28d9; --cyan:#06b6d4; --pink:#db2777; --amber:#f59e0b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:.22em; }
.shell {
  min-height:92vh;
  color:#fff;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 24px 24px,
    #0b1020;
}
nav {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  padding:1rem clamp(1rem,4vw,3rem);
  flex-wrap:wrap;
  background:rgba(11,16,32,.88);
  border-bottom:1px solid rgba(255,255,255,.16);
  position:sticky;
  top:0;
  z-index:20;
}
nav a {
  border:1px solid rgba(255,255,255,.22);
  padding:.5rem .7rem;
  text-decoration:none;
  color:#e8eefc;
  font-size:.78rem;
}
nav .brand { margin-right:auto; background:#e8eefc; color:#0b1020; font-weight:900; }
.hero {
  display:grid;
  grid-template-columns:minmax(260px,430px) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4rem);
  align-items:center;
  min-height:calc(92vh - 60px);
  padding:clamp(1.2rem,5vw,4rem);
}
.eyebrow { margin:0 0 1rem; color:var(--cyan); text-transform:uppercase; letter-spacing:.14em; font-weight:900; font-size:.78rem; }
h1 {
  margin:0;
  max-width:13ch;
  font:900 clamp(2.7rem,6.6vw,6.6rem)/.92 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing:0;
}
.hero p { max-width:720px; color:#c9d7ee; line-height:1.75; font-size:1rem; }
.comp {
  position:relative;
  aspect-ratio:4/3;
  border:1px solid rgba(255,255,255,.25);
  background:#050816;
  overflow:hidden;
  box-shadow:0 0 0 12px rgba(255,255,255,.04);
}
.comp::before {
  content:"COMP_07 / keyframes visible";
  position:absolute;
  left:1rem;
  top:1rem;
  color:#fff;
  font-size:.72rem;
}
.layer { position:absolute; height:38px; border-radius:2px; left:9%; animation:slide 5s infinite alternate cubic-bezier(.2,.8,.2,1); }
.one { top:26%; width:72%; background:var(--cyan); }
.two { top:48%; width:50%; background:var(--pink); animation-delay:-1.3s; }
.three { top:70%; width:64%; background:var(--amber); animation-delay:-2.5s; }
.playhead { position:absolute; top:0; bottom:0; width:2px; background:#fff; left:20%; animation:scan 5s infinite alternate linear; }
@keyframes slide { to { transform:translateX(44px); } }
@keyframes scan { to { left:78%; } }
main { max-width:1200px; margin:0 auto; padding:4rem clamp(1rem,4vw,3rem); }
.grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1rem;
}
article {
  position:relative;
  grid-column:span 4;
  min-height:260px;
  background:var(--panel);
  border:1px solid var(--line);
  padding:1rem;
  box-shadow:6px 6px 0 #dbeafe;
}
article span { position:absolute; right:.75rem; top:.75rem; color:var(--violet); font-weight:900; background:#eef2ff; border:1px solid var(--line); padding:.3rem .45rem; }
article h2 { margin:.75rem 0 .5rem; font:900 1.22rem/1.08 Inter, sans-serif; letter-spacing:0; }
article h2 a { text-decoration:none; }
article h2 a:hover { text-decoration:underline; text-decoration-color:var(--pink); }
article p { color:var(--muted); line-height:1.65; margin:0; font-size:.95rem; }
article b { display:block; margin-top:.8rem; font-size:.82rem; color:var(--ink); }
.panel {
  margin-top:3rem;
  padding:1.3rem;
  border:1px solid var(--line);
  background:#fff;
}
.panel h2 { margin:0 0 .5rem; font:900 2rem/1 Inter, sans-serif; }
.panel p { color:var(--muted); line-height:1.7; }
code { background:#e8eef6; padding:.12rem .35rem; }
@media (max-width:860px){
  nav{position:static; justify-content:flex-start;}
  nav .brand{width:100%; margin-right:0;}
  nav a{flex:1 1 auto; text-align:center; min-width:min(100%,130px);}
  .hero{grid-template-columns:1fr; min-height:auto;}
  h1{font-size:clamp(2.7rem,14vw,3rem);}
  article{grid-column:1 / -1;}
}
@media (max-width:520px){ main{padding-inline:.85rem;} .comp{min-height:230px;} }