:root{
    --bg:#F2F5FA;
    --card:#FFFFFF;
    --ink:#16202E;
    --muted:#586375;
    --accent:#1F5FE0;
    --accent-soft:#ECF2FE;
    --amber:#C8791B;
    --rule:#E5EAF2;
    --code-bg:#0d1117;
    --code-fg:#c9d1d9;
    --sans:'IBM Plex Sans','Noto Sans Telugu',system-ui,-apple-system,sans-serif;
    --display:'Space Grotesk','Noto Sans Telugu',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.7;
    background-color:var(--bg);
    /* signature: faint graph-paper ground, the worksheet floats above it */
    background-image:
      linear-gradient(rgba(31,95,224,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31,95,224,.045) 1px, transparent 1px);
    background-size:28px 28px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* ---------- sticky signpost bar (the plumbing) ---------- */
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; gap:18px;
    flex-wrap:wrap;
    padding:11px clamp(16px,4vw,40px);
    background:rgba(255,255,255,.82);
    backdrop-filter:saturate(140%) blur(8px);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    border-bottom:1px solid var(--rule);
  }
  .brand{
    font-family:var(--mono);
    font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); white-space:nowrap;
  }
  /* back to the index — first thing in the bar, kept on small screens */
  .back{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--mono);
    font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted); text-decoration:none; white-space:nowrap;
    padding:3px 9px; border:1px solid var(--rule); border-radius:6px;
    background:var(--card);
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  .back:hover,.back:focus-visible{
    color:var(--accent); background:var(--accent-soft); border-color:#D5E2FB;
  }
  .back .arw{font-size:.95rem; line-height:1;}
  .pipeline{
    display:flex; align-items:center; gap:6px;
    overflow-x:auto; padding-bottom:2px;
  }
  .pipeline::-webkit-scrollbar{height:0;}
  .stage{
    font-family:var(--mono); font-size:.82rem; font-weight:500;
    color:var(--accent);
    background:var(--accent-soft);
    border:1px solid #D5E2FB;
    padding:3px 9px; border-radius:6px; white-space:nowrap;
  }
  .stage--focus{
    color:#fff; background:var(--accent); border-color:var(--accent);
    box-shadow:0 1px 0 rgba(31,95,224,.35);
  }
  .arrow{color:#A9B6C9; font-family:var(--mono); font-size:.9rem; user-select:none;}

  /* ---------- the lab sheet ---------- */
  main{padding:clamp(20px,4vw,52px) 16px 96px;}
  .sheet{
    max-width:880px; margin:0 auto;
    background:var(--card);
    border:1px solid var(--rule);
    border-radius:14px;
    box-shadow:0 1px 2px rgba(22,32,46,.04), 0 18px 40px -28px rgba(22,32,46,.28);
    padding:clamp(24px,5vw,64px);
  }

  /* ---------- rendered markdown ---------- */
  .md{opacity:0;}
  body.ready .md{opacity:1;}
  @media (prefers-reduced-motion:no-preference){
    .md{transition:opacity .5s ease;}
  }

  .md > :first-child{margin-top:0;}

  /* hero title = first h1 */
  .md h1{
    font-family:var(--display); font-weight:700;
    line-height:1.18; letter-spacing:-.015em;
    color:var(--ink);
  }
  .md h1:first-of-type{
    font-size:clamp(1.9rem,4.2vw,2.7rem);
    margin:0 0 .2em;
  }
  /* every later h1 is a section divider */
  .md h1:not(:first-of-type){
    font-size:clamp(1.5rem,3.2vw,2rem);
    margin-top:2.6em; padding-top:1.4em;
    border-top:1px solid var(--rule);
    position:relative;
  }
  .md h1:not(:first-of-type)::before{
    content:""; position:absolute; top:-1px; left:0;
    width:54px; height:3px; background:var(--accent); border-radius:2px;
  }

  .md h2{
    font-family:var(--display); font-weight:600;
    font-size:1.32rem; letter-spacing:-.01em;
    margin:2.2em 0 .7em; padding-left:14px;
    border-left:4px solid var(--accent);
  }
  .md h3{
    font-family:var(--display); font-weight:600;
    font-size:1.06rem; color:#243246;
    margin:1.8em 0 .5em;
  }

  .md p{margin:.85em 0;}
  .md strong{font-weight:600; color:var(--ink);}
  .md em{font-style:italic;}

  .md a{color:var(--accent); text-decoration:none; border-bottom:1px solid #Bcd2f7;}
  .md a:hover{border-bottom-color:var(--accent);}

  .md ul,.md ol{margin:.7em 0; padding-left:1.4em;}
  .md li{margin:.38em 0;}
  .md li::marker{color:var(--accent);}

  /* inline code */
  .md :not(pre) > code{
    font-family:var(--mono); font-size:.86em;
    background:#F1F4F9; color:#1c3a66;
    padding:.12em .42em; border-radius:5px;
    border:1px solid #E4EAF3;
    word-break:break-word;
  }
  .md h1 :not(pre) > code,
  .md h2 :not(pre) > code,
  .md h3 :not(pre) > code{
    font-size:.78em; background:var(--accent-soft);
    color:var(--accent); border-color:#D5E2FB;
  }

  /* code blocks (dark) */
  .md pre{
    background:var(--code-bg);
    color:var(--code-fg);
    border-radius:10px;
    padding:16px 18px;
    overflow-x:auto;
    margin:1.1em 0;
    font-size:.86rem; line-height:1.6;
    border:1px solid #1c2533;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  }
  .md pre code{
    font-family:var(--mono);
    background:transparent; color:inherit;
    padding:0; border:0; font-size:inherit;
    white-space:pre;
  }

  /* tables */
  .md table{
    width:100%; border-collapse:collapse;
    margin:1.2em 0; font-size:.95rem;
    border:1px solid var(--rule); border-radius:10px; overflow:hidden;
  }
  .md thead th{
    background:var(--accent-soft); color:#1b3a73;
    font-family:var(--display); font-weight:600; text-align:left;
    font-size:.9rem; letter-spacing:.01em;
  }
  .md th,.md td{
    padding:10px 14px; border-bottom:1px solid var(--rule);
    vertical-align:top;
  }
  .md tbody tr:nth-child(even){background:#FAFBFD;}
  .md tbody tr:last-child td{border-bottom:0;}
  body[data-kind="worksheet"] .md td:first-child{white-space:nowrap;}
  /* the last column can hold long text — let it wrap */
  body[data-kind="worksheet"] .md td:last-child{white-space:normal;}

  /* horizontal rules between sections */
  .md hr{
    border:0; height:1px; background:var(--rule);
    margin:2.4em 0; position:relative;
  }
  .md hr::after{
    content:"›"; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    background:var(--card); color:#C2CDDC;
    font-family:var(--mono); padding:0 10px; font-size:.9rem;
  }
  body[data-kind="questions"] .md hr::after{content:"?";}
  body[data-kind="answers"] .md hr::after{content:"✓";}

  /* graph-paper output cells (```cells blocks) */
  .cells{margin:1.1em 0; overflow-x:auto; padding-bottom:4px;}
  .cellrow{display:flex; width:max-content; margin-top:8px;}
  .cellrow:first-child{margin-top:0;}
  .cell{
    flex:0 0 34px; width:34px; height:40px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:.95rem; color:var(--ink);
    background:#fff; border:1px solid #C9D6EA; border-left:0;
  }
  .cellrow .cell:first-child{border-left:1px solid #C9D6EA; border-radius:8px 0 0 8px;}
  .cellrow .cell:last-child{border-radius:0 8px 8px 0;}
  .cellrow .cell:only-child{border-radius:8px;}
  .cell--space{background:#F6F9FE; color:#B9C7DB;}
  .cell--enter{background:var(--accent-soft); color:var(--accent); font-size:.85rem;}

  /* SVG graph sheets (```graph blocks) */
  .graph{margin:1.2em 0; max-width:480px;}
  .graph svg{
    display:block; width:100%; height:auto;
    background:#fff; border:1px solid var(--rule); border-radius:12px;
    box-shadow:0 1px 2px rgba(22,32,46,.05);
  }

  /* phone-style SMS bubbles (```sms blocks) */
  .sms{margin:1.2em 0; max-width:560px;}
  .sms-label{
    font-family:var(--mono); font-size:.68rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); margin:0 0 6px 4px;
  }
  .sms-bubble{
    background:#EAF6EC; border:1px solid #CDE5D2;
    border-radius:14px 14px 14px 4px;
    padding:12px 16px;
    font-family:var(--mono); font-size:.88rem; line-height:1.7;
    color:var(--ink);
    white-space:pre-wrap; overflow-wrap:anywhere;
    box-shadow:0 1px 2px rgba(22,32,46,.05);
  }

  /* ---------- status / error ---------- */
  .status{
    max-width:880px; margin:0 auto;
    font-family:var(--mono); font-size:.9rem; color:var(--muted);
    padding:18px 4px;
  }
  .errbox{
    max-width:880px; margin:0 auto;
    background:var(--card); border:1px solid var(--rule);
    border-left:4px solid var(--amber);
    border-radius:12px; padding:24px 28px;
  }
  .errbox h2{
    font-family:var(--display); font-size:1.25rem; margin:0 0 .5em; color:var(--ink);
  }
  .errbox p{margin:.6em 0; color:var(--muted);}
  .errbox code{font-family:var(--mono); background:#F1F4F9; padding:.1em .4em; border-radius:5px; color:#1c3a66;}
  .errbox pre{
    background:var(--code-bg); color:var(--code-fg);
    font-family:var(--mono); font-size:.85rem;
    padding:14px 16px; border-radius:9px; overflow-x:auto; margin:.9em 0;
  }

  /* page-load motion for the signpost chips */
  @media (prefers-reduced-motion:no-preference){
    .stage{opacity:0; transform:translateY(-4px); animation:drop .5s ease forwards;}
    .stage:nth-child(1){animation-delay:.05s}
    .stage:nth-child(3){animation-delay:.11s}
    .stage:nth-child(5){animation-delay:.17s}
    .stage:nth-child(7){animation-delay:.23s}
    .stage:nth-child(9){animation-delay:.29s}
    .stage:nth-child(11){animation-delay:.35s}
    @keyframes drop{to{opacity:1; transform:translateY(0);}}
  }

  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}

  @media (max-width:560px){
    body{font-size:16px;}
    .brand{display:none;}
  }