*{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme: light dark;
  --bg:#0d1117;
  --bg-alt:#161b22;
  --text:#e6edf3;
  --accent:#58a6ff;
  --accent-fade:rgba(88,166,255,.25);
  --danger:#ff6b6b;
  --muted:#8b949e;
  --border:#30363d;
  --focus:#c9d1d9;
  --code-font: 'SFMono-Regular', ui-monospace, 'Cascadia Mono', 'Liberation Mono', Menlo, monospace;
  --transition: 260ms cubic-bezier(.4,.1,.2,1);
  --section-height: 100vh;
  --output-content-width: 100ch;
}
body{
  background:linear-gradient(120deg,#0d1117,#111a23 35%,#0d1117);
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  line-height:1.4;
  height:100vh;
  overflow:hidden;
}
.layout{display:grid;grid-template-columns:calc(var(--output-content-width) + 3rem) 1fr;height:100%;font-family:var(--code-font);} /* Use monospace so 1ch matches output width */
.output-pane{position:relative;overflow-y:auto;padding:0 1.5rem 2rem;font-family:var(--code-font);white-space:pre;line-height:1.2;font-size:.82rem;background:var(--bg-alt);border-right:1px solid var(--border);scroll-behavior:smooth;}
.output-pane pre{margin-bottom:3rem;}
/* Hide scrollbars (requested) */
.output-pane::-webkit-scrollbar{display:none}
.explanation-pane::-webkit-scrollbar{display:none}
.output-pane{scrollbar-width:none}
.explanation-pane{scrollbar-width:none}
.explanation-pane{position:relative;overflow-y:auto;overflow-x:hidden;padding:3.8rem 2.5rem 4rem;display:flex;flex-direction:column;gap:2rem;scroll-behavior:smooth;font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;} /* Allow sticky header visibility */
.section-explanation{flex:0 0 var(--section-height);display:flex;flex-direction:column;justify-content:center;opacity:.25;filter:blur(2px);transform:scale(.98);transition:var(--transition);padding-right:1rem;max-width:60ch;position:relative;padding-bottom:2.2rem;}
.section-explanation.active{opacity:1;filter:none;transform:scale(1);}
.section-explanation h2{font-size:1.9rem;margin-bottom:1rem;letter-spacing:.5px;}
.section-explanation p{margin-bottom:1rem;font-size:1rem;}
.section-explanation code, .output-pane code{font-family:var(--code-font);background:rgba(255,255,255,.05);padding:.15em .35em;border-radius:4px;font-size:.9em}
.repo-badge{position:sticky;top:0;display:block;font-size:.65rem;letter-spacing:.15em;font-weight:600;text-transform:uppercase;margin:0 -1.5rem 1rem;background:var(--bg);padding:.55rem 1rem .6rem;border-bottom:1px solid var(--border);color:var(--muted);z-index:10;}
/* Hide legacy repo badge (replaced by large title on right) */
.repo-badge{display:none}
/* Ensure no gap above sticky badge */
.output-pane > :first-child{margin-top:0}
.nav-hint{position:fixed;bottom:.5rem;left:50%;transform:translateX(-50%);font-size:.75rem;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:#111a23bb;padding:.4rem .75rem;border:1px solid var(--border);backdrop-filter:blur(6px);border-radius:8px;pointer-events:none;}
.nav-hint{opacity:1;transition:opacity .6s var(--transition), transform .6s var(--transition);}/* reuse timing curve */
.nav-hint.is-hidden{opacity:0;transform:translate(-50%,10px);}
.highlight-mask{position:absolute;left:0;right:0;pointer-events:none;top:0;bottom:0;mix-blend-mode:normal;}
.masked-line{transition:opacity var(--transition), filter var(--transition);}
.dimmed .masked-line{opacity:.15;filter:blur(1px);}
.dimmed .masked-line.focus-range{opacity:1;filter:none;}
.section-anchor{display:block;position:relative;padding-top:4rem;margin-top:-4rem;}
.focus-outline{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
.keyboard-hint{color:var(--accent);}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px;mask:linear-gradient(to bottom,transparent,rgba(0,0,0,.6) 15%,rgba(0,0,0,.6) 85%,transparent);pointer-events:none;}
.anchor-links{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem;}
.anchor-links a{font-size:.65rem;letter-spacing:.5px;text-decoration:none;padding:.3rem .5rem;border:1px solid var(--border);border-radius:4px;color:var(--muted);transition:var(--transition);}
.anchor-links a.active, .anchor-links a:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-fade);}
/* Git command display (added) */
.git-command-display{position:absolute;bottom:6rem;left:.6rem;display:flex;flex-direction:column;gap:.45rem;font-family:var(--code-font);font-size:.9rem;letter-spacing:.45px;color:var(--muted);max-width:82%;pointer-events:none;line-height:1.3;}
.git-command-display code{background:rgba(255,255,255,.07);padding:.3em .7em;border-radius:6px;display:inline-block;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 0 0 1px rgba(255,255,255,.08);}
.output-title{font-size:2.8rem;font-weight:700;letter-spacing:.5px;margin:0 0 1.25rem 0;line-height:1.05;position:sticky;top:0;z-index:30;padding:.35rem 0 1rem;background:linear-gradient(var(--bg-alt),rgba(13,17,23,0.6) 70%,rgba(13,17,23,0));backdrop-filter:blur(4px);color:rgba(230,237,243,.58);text-shadow:0 1px 2px rgba(0,0,0,.4);} 
/* Slight separation under title */
.anchor-links{margin-top:-.5rem;padding-top:.25rem;}
@media (max-width:1100px){.output-title{font-size:2rem;margin-top:.5rem;}}
.git-command-display .git-command-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:.05rem;opacity:.9;}
@media (max-width:1100px){
  .layout{grid-template-columns:1fr;}
  .output-pane{height:40vh;}
  .explanation-pane{height:60vh;overflow-y:auto;}
  body{overflow:auto;}
  .section-explanation{flex:unset;min-height:60vh;}
}