path: root/template.html

<title>Sesiones de Claude Code</title>
<style>
  :root {
    --ground:   #EDEEF2;
    --surface:  #FFFFFF;
    --raised:   #F6F7F9;
    --ink:      #14161C;
    --ink-soft: #3D4250;
    --muted:    #6A6F7E;
    --faint:    #9AA0AE;
    --line:     #DCDEE5;
    --line-soft:#E7E9EE;
    --amber:    #A85A16;
    --amber-lo: #C98A47;
    --amber-bg: rgba(168, 90, 22, 0.09);
    --scrim:    rgba(20, 22, 28, .38);
    --shadow:   0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px -12px rgba(20, 22, 28, .18);
    --shadow-lg:0 24px 70px -20px rgba(20, 22, 28, .45);
    --focus:    #2C6FD1;

    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground:   #0E1015;
      --surface:  #171A21;
      --raised:   #1D212A;
      --ink:      #DFE2EA;
      --ink-soft: #B4BAC7;
      --muted:    #878DA0;
      --faint:    #666C7D;
      --line:     #262A34;
      --line-soft:#1F232C;
      --amber:    #E29A4A;
      --amber-lo: #8A6435;
      --amber-bg: rgba(226, 154, 74, 0.11);
      --scrim:    rgba(0, 0, 0, .62);
      --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
      --shadow-lg:0 24px 70px -20px rgba(0,0,0,.85);
      --focus:    #6BA5F0;
    }
  }

  :root[data-theme="light"] {
    --ground:   #EDEEF2;
    --surface:  #FFFFFF;
    --raised:   #F6F7F9;
    --ink:      #14161C;
    --ink-soft: #3D4250;
    --muted:    #6A6F7E;
    --faint:    #9AA0AE;
    --line:     #DCDEE5;
    --line-soft:#E7E9EE;
    --amber:    #A85A16;
    --amber-lo: #C98A47;
    --amber-bg: rgba(168, 90, 22, 0.09);
    --scrim:    rgba(20, 22, 28, .38);
    --shadow:   0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px -12px rgba(20, 22, 28, .18);
    --shadow-lg:0 24px 70px -20px rgba(20, 22, 28, .45);
    --focus:    #2C6FD1;
  }

  :root[data-theme="dark"] {
    --ground:   #0E1015;
    --surface:  #171A21;
    --raised:   #1D212A;
    --ink:      #DFE2EA;
    --ink-soft: #B4BAC7;
    --muted:    #878DA0;
    --faint:    #666C7D;
    --line:     #262A34;
    --line-soft:#1F232C;
    --amber:    #E29A4A;
    --amber-lo: #8A6435;
    --amber-bg: rgba(226, 154, 74, 0.11);
    --scrim:    rgba(0, 0, 0, .62);
    --shadow:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:0 24px 70px -20px rgba(0,0,0,.85);
    --focus:    #6BA5F0;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  body.locked { overflow: hidden; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 40px 24px 96px; }

  /* ---------- masthead ---------- */

  .masthead { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }

  .eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
  }

  h1 {
    margin: 0;
    font-size: clamp(28px, 4.5vw, 40px);
    line-height: 1.1;
    letter-spacing: -.022em;
    font-weight: 620;
    text-wrap: balance;
  }

  .lede { margin: 0; max-width: 64ch; color: var(--muted); font-size: 15px; }
  .lede code, .foot code {
    font-family: var(--mono