:root{
    --bg:#0F2439;            --bg-panel:#15304A;
    --grid-line:rgba(220,234,244,0.055);   --grid-line-major:rgba(220,234,244,0.10);
    --line:#DCEAF4;          --line-dim:#7C9BB6;
    --gold:#C9A227;          --gold-soft:#E7C765;
    --white:#F5F9FC;         --rule:rgba(220,234,244,0.16);
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0; padding:0;
    background-color:var(--bg);
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
      linear-gradient(var(--grid-line-major) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
    color:var(--line);
    font-family:'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{ max-width:840px; margin:0 auto; padding:56px 24px 80px; }

  .sheet{
    position:relative;
    background:var(--bg-panel);
    border:1px solid var(--rule);
    padding:48px 52px 44px;
  }
  .sheet::before, .sheet::after{
    content:""; position:absolute; width:22px; height:22px;
    border-color:var(--gold); border-style:solid;
  }
  .sheet::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
  .sheet::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-soft); margin:0 0 18px;
  }

  h1{
    font-family:'Fraunces', serif; font-style:italic; font-weight:600;
    font-size:44px; line-height:1.12; color:var(--white); margin:0 0 10px;
  }

  .subtitle{ font-size:16px; color:var(--line-dim); margin:0 0 34px; max-width:54ch; }

  .icon-row{ display:flex; justify-content:flex-start; margin-bottom:36px; }

  .lede p{ font-size:16.5px; line-height:1.72; color:var(--line); margin:0 0 20px; }
  .lede em{ font-style:italic; color:var(--white); }

  h2{
    font-family:'Fraunces', serif; font-weight:600; font-style:normal;
    font-size:22px; color:var(--white); margin:44px 0 14px;
  }

  .lessons{
    list-style:none; margin:0; padding:0;
    display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  }
  .lessons li{ background:var(--bg-panel); }
  .lesson-row{
    display:grid; grid-template-columns:56px 1fr 20px;
    align-items:start; gap:16px; padding:16px 14px;
    text-decoration:none; color:inherit;
  }
  .lesson-row:hover{ background:rgba(201,162,39,0.06); }
  .lesson-row:hover .lesson-arrow{ transform:translateX(3px); }
  .lesson-row:hover .lesson-name{ color:var(--gold-soft); }
  .lesson-num{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--gold); padding-top:2px; }
  .lesson-name{
    font-family:'Fraunces', serif; font-weight:600; font-size:17px;
    color:var(--white); margin:0 0 4px; transition:color .15s ease;
  }
  .lesson-desc{ font-size:13.5px; line-height:1.55; color:var(--line-dim); margin:0; }
  .lesson-arrow{ color:var(--gold); font-size:16px; padding-top:4px; transition:transform .15s ease; }

  .review-box{
    margin:24px 0 8px; padding:18px 20px;
    border:1px dashed var(--gold);
    display:flex; align-items:flex-start; gap:14px;
  }
  .review-box .review-label{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--gold-soft); white-space:nowrap; padding-top:2px;
  }
  .review-box p{ margin:0; font-size:14.5px; color:var(--line-dim); line-height:1.6; }

  .nav-row{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:44px; padding-top:20px; border-top:1px solid var(--rule);
    font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  }
  .nav-row a{ color:var(--line-dim); text-decoration:none; }
  .nav-row a:hover{ color:var(--gold-soft); }

  footer{
    margin-top:44px; padding-top:20px; border-top:1px solid var(--rule);
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--line-dim);
  }

  @media (max-width:600px){
    .sheet{ padding:36px 22px 32px; }
    h1{ font-size:32px; }
    .lesson-row{ grid-template-columns:40px 1fr 16px; gap:12px; padding:14px 12px; }
  }