/* $YPENG Whitepaper Monochrome Theme */
:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f5;
  --text: #111111;
  --text-soft: #555555;
  --border: #d6d6d6;
  --muted: #888888;
  --accent: #000000;
  --focus: #000000;
  --code-bg: #f0f0f0;
  --radius-sm: 4px;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04);
  --font-stack: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

html.invert {
  --bg: #000000;
  --bg-alt: #111111;
  --text: #ffffff;
  --text-soft: #d0d0d0;
  --border: #2a2a2a;
  --muted: #999999;
  --accent: #ffffff;
  --focus: #ffffff;
  --code-bg: #1d1d1d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: var(--font-stack); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; }

.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:8px; top:8px; width:auto; height:auto; padding:8px 12px; background:var(--accent); color:var(--bg); border-radius:var(--radius-sm); }

.site-header { position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--border); z-index:40; }
.site-header .inner { max-width:1200px; margin:0 auto; padding:12px 20px; }
.logo { font-size:1.1rem; margin:0; font-weight:600; letter-spacing:.5px; display:flex; align-items:center; gap:8px; }
.logo-mark { width:28px; height:28px; display:inline-block; }

.flex { display:flex; }
.between { justify-content:space-between; }
.center-y { align-items:center; }

.layout { display:flex; max-width:1600px; margin:0 auto; }
.sidebar { width:270px; border-right:1px solid var(--border); min-height:100vh; position:sticky; top:0; background:var(--bg-alt); }
.sidebar-inner { padding:18px 18px 40px; position:sticky; top:60px; max-height:calc(100vh - 60px); overflow:auto; }
.sidebar-title { font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:10px; color:var(--muted); }

.main { flex:1; padding:32px clamp(20px,5vw,60px) 80px; }

@media (max-width:1100px){
  .layout { flex-direction:column; }
  .sidebar { position:relative; top:auto; width:100%; min-height:auto; border-right:none; border-bottom:1px solid var(--border); }
  .sidebar-inner { top:auto; max-height:none; }
  .sidebar:not(.open) { display:none; }
  .main { padding:28px 20px 64px; }
}

h1,h2,h3,h4 { font-weight:600; line-height:1.2; letter-spacing:.5px; }
h2 { margin-top:64px; margin-bottom:18px; font-size:1.9rem; }
h3 { margin-top:36px; margin-bottom:12px; font-size:1.25rem; }

.paper-meta { margin-bottom:50px; }
.tagline { font-size:1.05rem; max-width:900px; }
.meta-list { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:14px 32px; font-size:.9rem; }
.meta-list li { white-space:nowrap; }

p { max-width:1000px; }

ul,ol { padding-left:22px; }
ul { list-style:disc; }
ol { list-style:decimal; }

.note { font-size:.8rem; color:var(--text-soft); margin-top:10px; }
.disclaimer { font-size:.8rem; color:var(--text-soft); margin-top:18px; }

.data-table { width:100%; border-collapse:collapse; margin:10px 0 20px; font-size:.9rem; }
.data-table th, .data-table td { border:1px solid var(--border); padding:8px 10px; text-align:left; }
.data-table thead th { background:var(--bg-alt); font-weight:600; }
.data-table tbody tr:nth-child(even) { background:var(--bg-alt); }

.grid { display:grid; }
.cols-3 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.gap-sm { gap:14px; }

.card { background:var(--bg-alt); border:1px solid var(--border); padding:16px 18px; border-radius:var(--radius); box-shadow:var(--shadow); }
.card.flat { box-shadow:none; }

.timeline { display:grid; gap:28px; margin:4px 0 14px; }
.milestone h3 { margin:0 0 6px; font-size:1rem; letter-spacing:.5px; }
.milestone p { margin:0; font-size:.9rem; }

.toc-list { list-style:none; margin:0; padding:0; font-size:.85rem; display:grid; gap:6px; }
.toc-list a { color:var(--text-soft); text-decoration:none; display:block; padding:4px 2px; border-radius:4px; }
.toc-list a:hover,.toc-list a.active { color:var(--text); background:var(--bg); }

.btn { font:inherit; cursor:pointer; border:1px solid var(--border); background:var(--bg); color:var(--text); padding:6px 14px; border-radius:var(--radius-sm); line-height:1.2; }
.btn.ghost { background:var(--bg-alt); }
.btn.small { font-size:.75rem; padding:5px 12px; }
.btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; font-size:.85rem; }
pre { background:var(--code-bg); padding:14px 16px; border-radius:var(--radius); overflow:auto; border:1px solid var(--border); }
code { background:var(--code-bg); padding:2px 5px; border-radius:4px; }

.site-footer { margin-top:100px; font-size:.75rem; padding:40px 0 80px; color:var(--text-soft); }
.site-footer p { max-width:none; }

/* Accessibility */
a { color:var(--accent); }
a:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }

/* Invert adjustments */
html.invert .card { background:var(--bg-alt); }
html.invert .data-table thead th { background:#141414; }

/* Print Styles */
@media print {
  body { background:#ffffff; color:#000; }
  .site-header, #tocToggle, #modeToggle, .sidebar { display:none !important; }
  .main { padding:0 0 0; }
  h2 { page-break-before:always; }
  h2:first-of-type { page-break-before:auto; }
  a { color:#000; text-decoration:underline; }
  .site-footer { margin-top:40px; padding:0; }
}

/* Focus visible polyfill safety */
:focus { outline:none; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }