:root{
    --navy:#152A42; --navy-deep:#0D1B2C;
    --grid-line:rgba(255,255,255,0.055); --grid-line-strong:rgba(255,255,255,0.09);
    --paper:#F6F1E3; --paper-edge:#E7DEC8;
    --ink:#212B36; --ink-soft2:#5A6672;
    --amber:#DC9C3F; --amber-soft:#F1C989;
    --red:#B54A30; --white:#EFF3F6; --sky:#8FB6D9;
    --green:#6E9A6B;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background-color:var(--navy);
    background-image:
      repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(0deg, var(--grid-line-strong) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(90deg, var(--grid-line-strong) 0 1px, transparent 1px 40px);
    color:var(--white); font-family:'Inter','Zen Kaku Gothic New',sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  a:focus-visible, summary:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
  .wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }

  .topbar{ padding:22px 0 0; }
  .breadcrumb{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; color:var(--sky); text-transform:uppercase; }
  .breadcrumb a{ text-decoration:none; border-bottom:1px solid rgba(143,182,217,0.35); }
  .breadcrumb a:hover{ color:var(--amber); border-color:var(--amber); }
  .breadcrumb .sep{ margin:0 8px; color:rgba(255,255,255,0.3); }

  .hero{ padding:34px 0 26px; }
  .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-soft); margin:0 0 10px; }
  .title{ font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:clamp(30px,5.2vw,46px); margin:0 0 6px; letter-spacing:0.02em; }
  .title-en{ font-family:'Space Grotesk',sans-serif; font-size:15px; color:var(--sky); margin:0 0 16px; }
  .hero p{ max-width:66ch; color:rgba(239,243,246,0.86); font-size:15px; margin:0 0 16px; }
  .thesis{
    max-width:66ch; border-left:3px solid var(--amber); padding:10px 0 10px 16px;
    font-family:'Zen Kaku Gothic New',sans-serif; font-size:15.5px; font-weight:700; color:#fff;
  }
  .thesis small{ display:block; font-weight:400; font-size:13.5px; color:rgba(239,243,246,0.7); margin-top:6px; }

  .section{ padding:26px 0; }
  .section-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
  .section-head h2{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:21px; margin:0; }
  .section-num{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--amber-soft); border:1px solid rgba(241,201,137,0.4); border-radius:5px; padding:2px 8px; }
  .head-en{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--sky); text-transform:uppercase; letter-spacing:0.08em; }

  /* ---------- week flow diagram ---------- */
  .flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:26px; }
  @media (max-width:760px){ .flow{ grid-template-columns:1fr 1fr; } }
  .step{ position:relative; padding:14px 14px 14px 0; }
  .step:not(:last-child)::after{
    content:""; position:absolute; right:10px; top:26px; width:10px; height:10px;
    border-top:2px solid rgba(241,201,137,0.55); border-right:2px solid rgba(241,201,137,0.55);
    transform:rotate(45deg);
  }
  @media (max-width:760px){ .step:nth-child(2)::after{ display:none; } }
  .step .dow{
    display:inline-block; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:14px;
    width:26px; height:26px; line-height:24px; text-align:center; border-radius:50%;
    border:1.5px solid var(--amber-soft); color:var(--amber-soft); margin-bottom:8px;
  }
  .step .kind{ font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:14.5px; color:#fff; display:block; }
  .step .desc{ font-size:12.5px; color:rgba(239,243,246,0.62); display:block; margin-top:3px; }
  .step.cos .dow{ border-color:var(--sky); color:var(--sky); }

  /* ---------- kid panels ---------- */
  .kids{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:820px){ .kids{ grid-template-columns:1fr; } }
  .kid{ background:var(--paper); color:var(--ink); border:1px solid var(--paper-edge); box-shadow:0 16px 34px -18px rgba(0,0,0,0.6); display:flex; flex-direction:column; }
  .kid-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px dashed var(--paper-edge); }
  .kid-top .nm{ font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:17px; }
  .kid-top .gr{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-soft2); letter-spacing:0.05em; }
  .kid-stat{ padding:9px 16px; background:rgba(21,42,66,0.045); border-bottom:1px solid var(--paper-edge); font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--ink-soft2); }
  .kid-stat b{ color:var(--navy); font-size:13px; }
  .days{ list-style:none; margin:0; padding:0; flex:1; }
  .day{ padding:13px 16px; border-bottom:1px solid var(--paper-edge); display:flex; gap:12px; align-items:flex-start; }
  .day:last-child{ border-bottom:none; }
  .day .badge{
    flex:none; width:40px; text-align:center; font-family:'JetBrains Mono',monospace;
    border:1px solid rgba(21,42,66,0.22); border-radius:3px; padding:4px 0; background:rgba(255,255,255,0.5);
  }
  .day .badge .d{ display:block; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:15px; color:var(--navy); line-height:1.1; }
  .day .badge .n{ display:block; font-size:10px; color:var(--ink-soft2); }
  .day.cos .badge{ background:rgba(143,182,217,0.16); border-color:rgba(21,42,66,0.28); }
  .day-body{ flex:1; min-width:0; }
  .slot{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft2); display:block; margin-bottom:2px; }
  .topic{ font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:15px; margin:0 0 5px; line-height:1.4; }
  .cchip{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px; padding:1px 6px; border-radius:3px; background:rgba(21,42,66,0.08); border:1px solid rgba(21,42,66,0.2); margin-right:5px; vertical-align:1px; }
  .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-soft2); margin-bottom:7px; }
  .btns{ display:flex; flex-wrap:wrap; gap:6px; }
  .dl{
    display:inline-flex; align-items:center; gap:6px; text-decoration:none;
    font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:12.5px;
    color:var(--navy); background:var(--amber-soft); padding:6px 11px; border-radius:3px;
    transition:background .12s ease;
  }
  .dl:hover{ background:var(--amber); }
  /* .dl = OPEN THE WEB VIEW (an html page).  .pdf-mini = download the printable PDF.
     Keep these two visually distinct — they are different destinations. */
  .dl::before{
    content:""; width:11px; height:13px; flex:none; opacity:.55;
    border:1.4px solid currentColor; border-radius:1px;
    box-shadow:inset 0 3px 0 -1.6px currentColor;
  }
  .dl.alt{ background:rgba(21,42,66,0.09); border:1px solid rgba(21,42,66,0.22); }
  .dl.alt:hover{ background:rgba(21,42,66,0.16); }
  .pick{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:11.5px; font-weight:700; color:var(--red); display:block; margin-bottom:5px; }

  /* ---------- parent-only ---------- */
  .parent{ margin-top:20px; border:1px solid var(--grid-line-strong); border-left:3px solid var(--red); border-radius:2px; background:rgba(255,255,255,0.03); }
  .parent summary{ cursor:pointer; padding:13px 18px; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; font-size:14.5px; }
  .parent summary::marker{ color:var(--red); }
  .parent .pbody{ padding:0 18px 16px; font-size:14px; color:rgba(239,243,246,0.85); }
  .parent .pbody p{ margin:0 0 12px; max-width:72ch; }

  /* ---------- notes / archive ---------- */
  .specs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:640px){ .specs{ grid-template-columns:1fr; } }
  .spec-item{ background:rgba(255,255,255,0.03); border:1px solid var(--grid-line-strong); border-left:3px solid var(--amber); padding:16px 18px; border-radius:2px; }
  .spec-item .spec-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--amber-soft); letter-spacing:0.1em; text-transform:uppercase; display:block; margin-bottom:8px; }
  .spec-item .ja{ font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700; color:#fff; display:block; margin-bottom:4px; font-size:15.5px; }
  .spec-item p{ margin:0; color:rgba(239,243,246,0.88); font-size:14.5px; }

  .arch{ list-style:none; margin:0; padding:0; }
  .arch li{ display:flex; align-items:center; gap:14px; padding:12px 2px; border-bottom:1px solid var(--grid-line-strong); flex-wrap:wrap; }
  .arch .wk{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--amber-soft); border:1px solid rgba(241,201,137,0.35); border-radius:4px; padding:2px 8px; flex:none; }
  .arch .rng{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:rgba(239,243,246,0.7); flex:none; }
  .arch .tp{ font-size:14px; color:rgba(239,243,246,0.9); flex:1; min-width:200px; }
  .arch .now{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--navy); background:var(--amber-soft); padding:2px 7px; border-radius:3px; }

  footer{ padding:30px 0 50px; border-top:1px solid var(--grid-line-strong); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
  footer .fnote{ font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(239,243,246,0.55); }
  .hanko{ width:64px;height:64px; border-radius:50%; border:2.5px solid var(--red); color:var(--red); display:flex; align-items:center; justify-content:center; text-align:center; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:13px; line-height:1.15; transform:rotate(-6deg); flex:none; opacity:0.9; }

  /* ---------- additions for week pages / questions archive ---------- */
  .pdf-mini{
    display:inline-flex; align-items:center; gap:4px; text-decoration:none;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
    color:var(--ink-soft2); background:transparent; border:1px solid rgba(21,42,66,.28);
    padding:6px 9px; border-radius:3px;
  }
  .pdf-mini::after{ content:"↓"; font-size:11px; opacity:.7; }
  .pdf-mini:hover{ background:rgba(21,42,66,.08); color:var(--navy); border-color:rgba(21,42,66,.5); }
  /* the parent/answer-key block sits on the dark ground — invert the chip there */
  .parent .pdf-mini{ color:rgba(239,243,246,.85); border-color:var(--grid-line-strong); background:rgba(255,255,255,.04); }
  .parent .pdf-mini:hover{ color:var(--amber-soft); border-color:var(--amber-soft); background:rgba(220,156,63,.12); }
  .pdf-mini:hover{ background:rgba(21,42,66,.08); color:var(--navy); }
  .filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
  .filters button{
    font-family:'JetBrains Mono',monospace; font-size:12px; cursor:pointer;
    background:rgba(255,255,255,.05); color:rgba(239,243,246,.8);
    border:1px solid var(--grid-line-strong); border-radius:4px; padding:6px 12px;
  }
  .filters button:hover{ border-color:var(--amber); color:var(--amber-soft); }
  .filters button[aria-pressed="true"]{ background:var(--amber-soft); color:var(--navy); border-color:var(--amber-soft); font-weight:600; }
  .qgroup{ margin-bottom:26px; }
  .qgroup > h3{
    font-family:'Zen Kaku Gothic New',sans-serif; font-size:16px; margin:0 0 4px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .qgroup > h3 a{ color:var(--amber-soft); text-decoration:none; border-bottom:1px solid rgba(241,201,137,.35); }
  .qgroup > h3 a:hover{ color:var(--amber); }
  .qgroup .gmeta{ font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(239,243,246,.5); font-weight:400; }
  .qlist{ list-style:none; margin:8px 0 0; padding:0; border-left:2px solid var(--grid-line-strong); }
  .qlist li{ padding:7px 0 7px 14px; font-size:14px; color:rgba(239,243,246,.88); display:flex; gap:10px; }
  .qlist li + li{ border-top:1px solid rgba(255,255,255,.05); }
  .qlist .n{
    flex:none; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--navy);
    background:var(--sky); border-radius:2px; padding:1px 6px; height:19px; line-height:17px;
  }
  .qlist .om .n{ background:rgba(255,255,255,.18); color:rgba(239,243,246,.9); }
  .qlist .hint{ display:block; font-size:12.5px; color:rgba(239,243,246,.5); margin-top:3px; }
  .counter{ font-family:'JetBrains Mono',monospace; font-size:12px; color:rgba(239,243,246,.55); margin-bottom:14px; }