:root{
      --bg: #ffffff;
      --text: #111111;
      --muted: #666666;
      --accent: #2b6cb0;
      --border: #e5e7eb;
      --code-bg: #b4f1ff;
      --maxw: 72ch; 
      --sidew: 240px; 
      --leading: 1.6;
    }
    *, *::before, *::after { box-sizing: border-box; }
	
	@font-face {
      font-family: 'Typewriter';
      src: url('/~sarun/notes/phc504/CourierPolski1941.ttf') format('truetype');
    }
	
    html { font-size: 16px; }
    body {
      margin: 0;
      color: var(--text);
      background: var(--bg);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      line-height: var(--leading);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }

    @media (min-width: 1024px) {
      .wrap {
        grid-template-columns: var(--sidew) 1fr;
      }
    }

    header {
      border-bottom: 1px solid var(--border);
      padding: 1rem;
      position: sticky; top: 0; background: var(--bg); z-index: 50;
    }
    .title {
      margin: 0;
      font-weight: 700;
      font-size: 1.125rem;
    }
    .meta {
      margin: 0.25rem 0 0;
      color: var(--muted);
      font-size: 0.875rem;
    }

    nav {
      border-right: 1px solid var(--border);
      padding: 1rem;
      display: none;
      height: calc(100dvh - 68px); 
      overflow: auto;
      position: sticky; top: 68px; 
    }
    @media (min-width: 1024px) {
      nav { display: block; }
    }
    .toc-title { font-weight: 600; margin: 0 0 0.5rem; }
    .toc {
      list-style: none; padding: 0; margin: 0;
    }
    .toc li { margin: 0.25rem 0; }
    .toc a { display: inline-block; padding: 0.125rem 0; font-family: sans-serif;font-size: 0.75em;}

    main {
      padding: 1rem;
      max-width: 100%;
    }
    .content {
      margin: 0 auto;
    }

    .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
      scroll-margin-top: 84px;
    }
    .content h1 { font-size: 2.00rem; margin: 1rem 0 0.5rem; color: blue;}
    .content h2 { font-size: 1.5rem; margin: 1.25rem 0 0.5rem; color: red; }
    .content h3 { font-size: 1.25rem; margin: 1rem 0 0.25rem; color: #b700a7; }
    .content h4, .content h5, .content h6 { font-size: 1rem; margin: 0.75rem 0 0.25rem; color: #333; }

    .content p { margin: 0.5rem 0; font-family: 'Typewriter'; font-size: 1.5em; text-align: justify; text-indent: 2em; }

    .content ul, .content ol { margin: 0.5rem 0 0.5rem 1.25rem; }
    .content li { margin: 0.25rem 0; font-family: 'Typewriter'; font-size: 1.25em; text-align: justify;}

    figure {
      margin: 1rem auto;              
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
      text-align: center;             
      max-width: 960px;               
    }
    figure img {
      display: block;
      margin: 0 auto;                 
      max-width: 100%;
      height: auto;
    }
    figcaption {
      font-size: 0.9rem;
      color: var(--muted);
      padding: 0.5rem 0.75rem;
      border-top: 1px solid var(--border);
      background: #fafafa;
      text-align: center;            
    }

    .table-wrap {
      margin: 1rem 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }
    .table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    table {
	  font-family: 'Typewriter';
	  font-size: 1.25em;
      border-collapse: collapse;
      width: fit-content;
      min-width: 520px; 
	  margin-left: auto; 
	  margin-right: auto;
    }
    thead {
      background: #f8fafc;
      position: sticky;
      top: 0;
      z-index: 1;
    }
    th, td {
      border-bottom: 1px solid var(--border);
      text-align: left;
      padding: 0.5rem 0.75rem;
      text-align: center; 
	  vertical-align: middle; 
    }
    caption {
      text-align: left;
      padding: 0.5rem 0.75rem;
      font-size: 0.9rem;
      color: var(--muted);
      caption-side: bottom;
      background: #fafafa;
      border-top: 1px solid var(--border);
    }

    .callout {
      border: 1px solid var(--border);
      border-left: 4px solid var(--accent);
      border-radius: 8px;
      padding: 0.75rem 0.75rem;
      margin: 1rem 0;
      background: #d9e5ff;
    }
    .callout-title { font-weight: 600; margin-bottom: 0.25rem; }
	
	.content .footer {font-size: 0.75em;}

    code { 
	  background: var(--code-bg); 
	  padding: 0.125rem 0.25rem; 
	  border-radius: 4px; 
	}
	
    pre {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.75rem;
      overflow: auto;
      margin: 1rem 0;
    }
	
	strong {
      color: #ff3c3c;
    }
	
	em {
      color: #3a63ff;
    }

    .katex-display>.katex {color: red;}

    .footnotes {
      font-size: 0.9rem;
      color: var(--muted);
    }
    .footnotes ol { margin-left: 1.25rem; }
	
	
    .d2b {
      border-collapse: collapse;
      margin: 1rem auto; 
    }

    .d2b th,
    .d2b td {
      padding: 8px 12px;
      text-align: center;
    }

 
    .d2b th:first-child,
    .d2b td:first-child {
      border-right: 2px solid #000;
    }

    .d2b th:nth-child(2),
    .d2b td:nth-child(2) {
      border-bottom: 2px solid #000;
    }

    .d2b th:nth-child(3),
    .d2b td:nth-child(3) {
      color: red;
      border: none;
    }

    .d2b th:nth-child(5),
    .d2b td:nth-child(5) {
      color: blue;
      border: none;
    }

    @media print {
      header, nav { display: none !important; }
      body { color: #000; }
      .content { max-width: none; }
      a { color: #000; text-decoration: none; }
      figure, .table-wrap, .callout, pre { break-inside: avoid; }
      thead { position: static; }
    }