:root{
  --ink:#0f1218;
  --panel:#1a1e27;
  --panel-2:#20252f;
  --line:#2c313d;
  --text:#e7e5e0;
  --muted:#8b93a1;
  --orange:#f14e32;
  --blue:#5b9dee;
  --green:#59c48f;
  --amber:#e3b341;
  --font-head: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(241,78,50,0.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(91,157,238,0.07), transparent 55%),
    var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
}
a{color:var(--blue);}
.wrap{max-width:880px; margin:0 auto; padding:0 24px;}

/* HERO */
header.hero{
  padding:96px 0 64px;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.back-link{
  display:inline-block;
  color:var(--muted);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:0.85rem;
  margin-bottom:32px;
  transition:color 0.2s ease;
}
.back-link:hover{color:var(--orange);}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.eyebrow{
  color:var(--orange);
  font-family:var(--font-mono);
  font-size:0.85rem;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--orange);
  border-radius:50%;
  display:inline-block;
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1; transform:scale(1);}
  50%{opacity:0.4; transform:scale(0.75);}
}
h1.title{
  font-family:var(--font-head);
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  line-height:1.05;
  font-weight:600;
  letter-spacing:-0.01em;
}
.subtitle{
  margin-top:20px;
  max-width:46ch;
  color:var(--muted);
  font-size:1.08rem;
}

/* commit graph image */
.graph-frame{
  background:#fff;
  border-radius:10px;
  padding:18px;
  border:1px solid var(--line);
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.5);
  opacity:0;
  transform:translateY(10px) scale(0.98);
  animation:frame-in 0.6s ease forwards;
  animation-delay:.15s;
}
.graph-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:4px;
}
@keyframes frame-in{
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* SECTIONS */
section{padding:64px 0; border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
h2{
  font-family:var(--font-head);
  font-size:1.9rem;
  margin-bottom:24px;
  font-weight:600;
}
h2 .num{
  color:var(--orange);
  font-family:var(--font-mono);
  font-size:1rem;
  display:block;
  margin-bottom:8px;
  font-weight:400;
}
p{max-width:68ch; margin-bottom:16px; color:var(--text);}
p.lead{color:var(--muted); font-size:1.02rem;}

.cards{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:28px;
}
.card{
  background:var(--panel);
  padding:26px;
  transition:background 0.25s ease, transform 0.25s ease;
}
.card:hover{
  background:var(--panel-2);
  transform:translateY(-2px);
}
.card h3{
  font-size:1.02rem;
  margin-bottom:8px;
  color:var(--text);
}
.card p{color:var(--muted); font-size:0.95rem; margin:0;}
.card .mark{color:var(--green); font-family:var(--font-mono); font-size:0.85rem; display:block; margin-bottom:10px;}

/* TERMINAL */
.terminal{
  margin-top:28px;
  background:#0c0e13;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.terminal .bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.terminal .dot{width:10px; height:10px; border-radius:50%;}
.terminal .dot.r{background:#ef5350;}
.terminal .dot.y{background:var(--amber);}
.terminal .dot.g{background:var(--green);}
.terminal .label{
  margin-left:8px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:0.78rem;
}
.terminal pre{
  padding:20px;
  font-family:var(--font-mono);
  font-size:0.88rem;
  color:var(--text);
  overflow-x:auto;
}
.terminal .prompt{color:var(--green);}
.terminal .flag{color:var(--amber);}
.terminal .str{color:var(--blue);}
.terminal .comment{color:var(--muted);}

/* COMMANDS */
.cmd-list{margin-top:28px; border-top:1px solid var(--line);}
.cmd{
  display:grid;
  grid-template-columns:32px 1fr 1.4fr;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
  transition:padding-left 0.2s ease;
}
.cmd:hover{padding-left:6px;}
.cmd .idx{color:var(--muted); font-family:var(--font-mono); font-size:0.85rem;}
.cmd code{
  font-family:var(--font-mono);
  color:var(--orange);
  background:var(--panel-2);
  padding:4px 8px;
  border-radius:3px;
  font-size:0.92rem;
  white-space:nowrap;
}
.cmd .desc{color:var(--muted); font-size:0.95rem;}

/* CERTIFICATE */
.cert-frame{
  margin-top:28px;
  border:1px dashed var(--line);
  background:var(--panel);
  padding:40px;
  text-align:center;
  border-radius:8px;
}
.cert-frame img{max-width:100%; display:block; margin:0 auto 16px; border-radius:4px;}
.cert-frame .hint{color:var(--muted); font-size:0.9rem; font-family:var(--font-mono);}
.cert-frame .hint code{background:var(--panel-2); color:var(--orange); padding:2px 6px; border-radius:3px;}

/* SOURCES */
ul.sources{margin-top:24px; list-style:none;}
ul.sources li{
  padding:16px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  transition:padding-left 0.2s ease;
}
ul.sources li:hover{padding-left:6px;}
ul.sources li a{font-weight:600; text-decoration:none;}
ul.sources li a:hover{text-decoration:underline;}
ul.sources li span{color:var(--muted); font-size:0.9rem; font-family:var(--font-mono);}

footer{
  padding:40px 0 60px;
  color:var(--muted);
  font-size:0.9rem;
  font-family:var(--font-mono);
}

/* HOME PAGE */
.home-hero{
  padding:110px 0 80px;
  border-bottom:1px solid var(--line);
}
.home-hero .eyebrow{margin-bottom:18px;}
h1.home-title{
  font-family:var(--font-head);
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  line-height:1.1;
  font-weight:600;
  letter-spacing:-0.01em;
  max-width:18ch;
}
.home-hero .subtitle{
  margin-top:20px;
  max-width:50ch;
  color:var(--muted);
  font-size:1.05rem;
}

.topics{
  padding:64px 0 96px;
}
.topics .section-label{
  color:var(--orange);
  font-family:var(--font-mono);
  font-size:0.85rem;
  margin-bottom:28px;
}
.topics-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.topic-card{
  background:var(--panel);
  padding:32px;
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  color:var(--text);
  transition:background 0.25s ease, transform 0.25s ease;
  position:relative;
}
.topic-card:hover{
  background:var(--panel-2);
  transform:translateY(-2px);
}
.topic-card .idx{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--muted);
}
.topic-card h3{
  font-family:var(--font-head);
  font-size:1.35rem;
  margin-top:14px;
  font-weight:600;
}
.topic-card p{
  color:var(--muted);
  font-size:0.92rem;
  margin-top:8px;
  max-width:36ch;
}
.topic-card .arrow{
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--orange);
}
.topic-card.disabled{
  cursor:default;
  color:var(--muted);
}
.topic-card.disabled h3{color:var(--muted);}
.topic-card.disabled:hover{
  background:var(--panel);
  transform:none;
}
.topic-card.disabled .status{
  margin-top:20px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--muted);
  border:1px dashed var(--line);
  display:inline-block;
  padding:4px 10px;
  border-radius:4px;
  width:fit-content;
}

@media (max-width:720px){
  .topics-grid{grid-template-columns:1fr;}
}

@media (max-width:720px){
  .hero-inner{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .cmd{grid-template-columns:24px 1fr; }
  .cmd .desc{grid-column:1 / -1;}
}

@media (prefers-reduced-motion: reduce){
  .graph-frame, .eyebrow::before{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}