:root{
    --ink:#0f172a;
    --muted:#475569;
    --accent:#10b981;
    --bg:#ffffff;
    --card:#f8fafc;
    --border:#e2e8f0;
    --shadow: 0 1px 0 rgba(15,23,42,0.03);
    /* Fluid type */
    --fs-body: clamp(13px, 3.2vw, 15px);
    --fs-small: clamp(11px, 2.4vw, 13px);
    --fs-h1: clamp(20px, 4.5vw, 26px);
    --fs-h2: clamp(16px, 3.6vw, 18px);
    --radius: 14px;
  }

  @media (prefers-color-scheme: dark){
    :root{
      --ink:#e5e7eb;
      --muted:#94a3b8;
      --accent:#34d399;
      --bg:#0b1220;
      --card:#0f172a;
      --border:#233044;
      --shadow: 0 1px 0 rgba(0,0,0,0.35);
    }
    body{ background: var(--bg); }
  }

  html, body{ height:100%; }
  body{
    margin:0;
    font: 400 var(--fs-body)/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    color:var(--ink);
    background:var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Header */
  header{
    padding: 14px 16px;
    background: linear-gradient(90deg, #10b98122, #06b6d422);
    border-bottom: 1px solid var(--border);
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
  h1{ font-size: var(--fs-h1); margin: 0 0 2px; }
  .subtitle{ color:var(--muted); font-size: var(--fs-small); }

  /* Container */
  /* .wrap{
    padding: 14px 12px 24px;
    max-width: 980px;
    margin: 0 auto;
  } */
  .sheet{
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
  }

  /* Layout */
  .grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  /* Sections */
  section{
    background: #fff;
    border:1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: var(--shadow);
  }
  h2{
    font-size: var(--fs-h2);
    margin: 0 0 8px;
    display:flex; align-items:center; gap:8px;
  }
  h2 .tag{
    font-size: 11px;
    padding:2px 6px;
    background: #10b98122;
    color:#065f46;
    border-radius: 999px;
  }

  p, li{ font-size: var(--fs-body); line-height: 1.5; margin:6px 0; }
  ul{ padding-left:18px; }
  code.k{ background:#ecfeff; border:1px solid #cffafe; padding:0 4px; border-radius:5px; }
  .badge{ font-size:11px; color:#0f766e; background:#ccfbf1; padding:2px 6px; border-radius:999px; }
  .tip{ background:#f0fdf4; border:1px solid #bbf7d0; padding:6px 8px; border-radius:8px; font-size:var(--fs-small); }
  .warn{ background:#fff7ed; border:1px solid #fed7aa; padding:6px 8px; border-radius:8px; font-size:var(--fs-small); }

  /* Equations & figures */
  .eq{
    background:#f8fafc; border:1px dashed #cbd5e1;
    padding:6px 8px; border-radius:8px; margin:6px 0;
    overflow-x: auto; /* allow horizontal scroll if needed */
    -webkit-overflow-scrolling: touch;
  }
  figure{ margin:6px 0; text-align:center; }
  figcaption{ font-size:var(--fs-small); color:var(--muted); }
  svg{ max-width:100%; height:auto; display:block; margin:0 auto; }

  /* MathJax container tweaks for small screens */
  .mjx-container{ overflow-x: auto; overflow-y: visible; }
  .mjx-container::-webkit-scrollbar{ height:8px; }
  .mjx-container::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; }

  /* Two-column helper */
  .two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }

  .footer{
    margin-top:8px; text-align:center; color:var(--muted); font-size:var(--fs-small);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  /* --------- Responsive breakpoints --------- */
  /* Tablets and down */
  @media (max-width: 1024px){
    .wrap{ padding: 12px 12px 20px; }
    .grid{ gap: 14px; }
    .sheet{ padding: 10px; }
  }

  /* Phones (stack columns, bump readability) */
  @media (max-width: 768px){
    .grid{ grid-template-columns: 1fr; }
    .two-col{ grid-template-columns: 1fr; }
    section{ padding: 10px; }
    h2{ margin-bottom: 6px; }
    ul{ padding-left:16px; }
    .eq{ padding:6px; }
  }

  /* Small phones */
  @media (max-width: 420px){
    header{ padding-top: 12px; padding-bottom: 12px; }
    .wrap{ padding-left: 10px; padding-right: 10px; }
    h2 .tag{ padding:2px 6px; }
    li, p{ line-height:1.55; }
  }

  /* Reduce motion users */
  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }

  /* Print: A4 target */
  @page{ size: A4; margin: 10mm; }
  @media print{
    header{ display:none; }
    body{ background:#fff; }
    .wrap{ padding:0; max-width: none; }
    .sheet{ border:none; padding:0; box-shadow:none; background:#fff; }
    section{ page-break-inside: avoid; }
    .grid{ grid-template-columns: 1fr 1fr; gap:12px; }
  }