:root{
      color-scheme:dark;
      --gold:#FFE082;
      --pale-green:#1DE9B6;
      --pink:#FF80AB;
      --danger:#D50000;
      --ink:#e5e7eb;
      --muted:#9aa1ab;
      --card:#0b0b0f;
      --bg:#000000;
      --grid:#1f2937;
      --panel:#0f172a;
      --header:#111827;
      --shadow:0 10px 24px rgba(0,0,0,.35);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html{background:var(--bg)}
    body{
      margin:0;
      background:var(--bg);
      color:var(--ink);
      font-family:'DejaVu Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
      font-size:16px;
      line-height:1.5;
    }
    body.modal-open{overflow:hidden}
    a{color:#93c5fd;text-decoration-thickness:.08em;text-underline-offset:.18em}
    button,select{font:inherit}
    .site-header{
      background:linear-gradient(180deg,rgba(17,24,39,1) 0%, rgba(17,24,39,.96) 100%);
      border-bottom:1px solid var(--grid);
    }
    .header-inner{
      max-width:72rem;
      margin:0 auto;
      padding:1rem;
      display:grid;
      gap:1rem;
    }
    .header-top{
      display:grid;
      gap:.875rem;
    }
    .brand-block{
      display:grid;
      gap:.375rem;
      min-width:0;
    }
    .brand-block h1{
      margin:0;
      font-size:clamp(1.55rem, 4.1vw, 2.15rem);
      line-height:1.08;
      letter-spacing:-.02em;
      text-wrap:balance;
    }
    .header-methods{
      margin:0;
      color:#cbd5e1;
      font-size:1rem;
    }
    .header-intro{
      margin:0;
      color:#e2e8f0;
      font-size:1rem;
    }
    .lang-switch{
      display:grid;
      gap:.375rem;
      width:100%;
    }
    .lang-switch select{
      width:100%;
      min-height:3rem;
    }
    .page-shell{
      max-width:72rem;
      margin:0 auto;
      padding:1rem;
      display:grid;
      gap:1rem;
    }
    .card{
      background:var(--card);
      border:1px solid var(--grid);
      border-radius:var(--radius);
      padding:1rem;
      box-shadow:var(--shadow);
    }
    .controls{
      display:grid;
      gap:.875rem;
    }
    .control-field{
      display:grid;
      gap:.375rem;
    }
    .action-field{
      align-self:end;
    }
    label{
      display:block;
      color:var(--muted);
      font-size:.95rem;
    }
    select,button,.nav-chip,.info-chip,.badge{
      border:1px solid var(--grid);
      border-radius:14px;
    }
    select,button{
      appearance:none;
      background:var(--panel);
      color:var(--ink);
      padding:.8rem .95rem;
      min-height:3rem;
      width:100%;
    }
    button{
      background:#1f2937;
      cursor:pointer;
      font-weight:700;
    }
    button:hover,.nav-chip:hover,.info-chip:hover,.btn:hover{filter:brightness(1.08)}
    .due-summary{
      margin-top:.875rem;
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
    }
    .badge{
      display:flex;
      justify-content:center;
      align-items:center;
      width:100%;
      min-height:3rem;
      padding:.75rem 1rem;
      background:var(--panel);
      text-align:center;
      font-size:1rem;
    }
    .jump-links,.info-links{
      margin-top:.875rem;
      display:grid;
      gap:.75rem;
    }
    .nav-chip,.info-chip{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:2.85rem;
      padding:.75rem 1rem;
      background:var(--panel);
      color:var(--ink);
      text-decoration:none;
      font-weight:700;
      text-align:center;
    }
    .legend{
      margin-top:1rem;
      display:grid;
      gap:.75rem;
    }
    .legend .item{
      display:flex;
      align-items:center;
      gap:.75rem;
      padding:.8rem .9rem;
      background:var(--panel);
      border:1px solid var(--grid);
      border-radius:14px;
      color:var(--muted);
      font-size:.95rem;
    }
    .legend .swatch{
      flex:0 0 auto;
      width:1rem;
      height:1rem;
      border-radius:4px;
      border:1px solid #374151;
    }
    .methods{
      display:grid;
      gap:1rem;
    }
    .method{
      scroll-margin-top:1rem;
    }
    .method-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.75rem;
      margin-bottom:.875rem;
    }
    .method h2{
      margin:0;
      font-size:1.25rem;
      line-height:1.2;
    }
    .months{
      display:grid;
      gap:.875rem;
    }
    .month-panel{
      background:#09090c;
      border:1px solid var(--grid);
      border-radius:16px;
      padding:.75rem;
      overflow-x:auto;
    }
    .month-title{
      margin:0 0 .5rem 0;
      font-size:1.08rem;
      font-weight:700;
    }
    .dow{
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:.25rem;
      margin-bottom:.25rem;
      text-align:center;
      font-size:.78rem;
      color:var(--muted);
    }
    .grid{
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:.25rem;
    }
    .cell{
      position:relative;
      min-height:3rem;
      padding:.35rem;
      border:1px solid var(--grid);
      border-radius:12px;
      background:#000;
    }
    .cell-empty{
      background:#000;
      border-color:rgba(31,41,55,.35);
    }
    .num{
      display:inline-block;
      font-weight:700;
      font-size:.9rem;
      color:#ffffff;
    }
    .num.hide{visibility:hidden}
    .due{
      background:var(--gold);
      border-color:#eab308;
    }
    .due .num{color:#111827}
    .early{background:var(--pale-green)}
    .early .num{color:#064e3b}
    .late{background:var(--pink)}
    .late .num{color:#831843}
    .skull{
      background:var(--danger);
      border-color:var(--danger);
    }
    .skull .num{color:#ffffff}
    .skull .x{
      position:absolute;
      inset-inline-end:.35rem;
      inset-block-end:.18rem;
      font-size:1rem;
      line-height:1;
      color:#ffffff;
    }
    .disclaimer{
      background:#1f2937;
      color:#fecaca;
      padding:.85rem 1rem;
      font-size:.95rem;
      border-radius:14px;
      border:1px solid #334155;
    }
    .rationales{
      color:var(--muted);
    }
    .rationales p:first-child{
      margin-top:0;
    }
    .rationales ul{
      margin:.5rem 0 0 1.1rem;
      padding:0;
      display:grid;
      gap:.5rem;
    }
    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:flex-end;
      justify-content:center;
      padding:1rem;
      background:rgba(0,0,0,.72);
      z-index:1000;
    }
    .modal.open{display:flex}
    .modal-dialog{
      width:min(100%, 42rem);
      max-height:min(90vh, 48rem);
      overflow:auto;
      background:var(--card);
      border:1px solid var(--grid);
      border-radius:18px;
      box-shadow:0 18px 48px rgba(0,0,0,.55);
    }
    .modal-header,.modal-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      padding:.9rem 1rem;
      border-bottom:1px solid var(--grid);
    }
    .modal-footer{
      justify-content:flex-end;
      border-bottom:none;
      border-top:1px solid var(--grid);
    }
    .modal-title{
      font-size:1.1rem;
      font-weight:700;
    }
    .modal-body{
      padding:1rem;
      line-height:1.55;
    }
    .btn{
      appearance:none;
      border:1px solid var(--grid);
      background:#111827;
      color:var(--ink);
      padding:.7rem 1rem;
      border-radius:12px;
      min-height:2.75rem;
      cursor:pointer;
    }
    .rationale-skull{font-size:1.1em;font-weight:700}
    .visually-hidden{
      position:absolute!important;
      clip:rect(1px,1px,1px,1px);
      width:1px!important;
      height:1px!important;
      padding:0!important;
      border:0!important;
      overflow:hidden;
      white-space:nowrap;
    }
    .bg-early{background:var(--pale-green)}
    .bg-gold{background:var(--gold)}
    .bg-pink{background:var(--pink)}
    .bg-skull{background:var(--danger);border-color:var(--danger)}
    :lang(ar){font-family:"Noto Naskh Arabic","Noto Sans Arabic","Amiri","Segoe UI","DejaVu Sans",sans-serif}
    :lang(th){font-family:"Noto Sans Thai","Sarabun","Leelawadee UI",Tahoma,"DejaVu Sans",sans-serif}
    :lang(km){font-family:"Noto Sans Khmer","Khmer OS","Battambang","DejaVu Sans",sans-serif}
    :lang(my){font-family:"Noto Sans Myanmar","Myanmar Text","Padauk","DejaVu Sans",sans-serif}
    :lang(lo){font-family:"Noto Sans Lao","Lao UI","Saysettha OT","DejaVu Sans",sans-serif}
    :lang(zh){font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif}
    :lang(ja){font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
    :lang(ru){font-family:system-ui,Segoe UI,Roboto,Arial,"DejaVu Sans",sans-serif}
    @media (min-width: 40rem){
      .header-top{
        grid-template-columns:minmax(0,1fr) minmax(14rem,16rem);
        align-items:start;
      }
      .controls{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .action-field{
        grid-column:1 / -1;
      }
      .jump-links,.info-links{
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
      .legend{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .months{
        grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
      }
      .cell{
        min-height:3.5rem;
      }
      .modal{
        align-items:center;
      }
    }
    @media (min-width: 72rem){
      .brand-block h1{
        white-space:nowrap;
        text-wrap:nowrap;
      }
    }
    @media (min-width: 60rem){
      .page-shell,.header-inner{
        padding:1.25rem;
      }
      .controls{
        grid-template-columns:repeat(4,minmax(0,1fr));
        align-items:end;
      }
      .action-field{
        grid-column:auto;
      }
      .badge{
        width:auto;
      }
      .methods{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    @media (min-width: 75rem){
      .methods{
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
    }