* { box-sizing: border-box; }
      html, body { min-height: 100%; }
      body { margin: 0; background: #000; color: #f4f4f4; }
      main { width: min(1040px, 100%); margin: 0 auto; padding: clamp(22px, 5vw, 56px); }
      nav { display: flex; justify-content: space-between; gap: 18px; margin-bottom: clamp(44px, 8vw, 86px); }
      a { color: #aaa; text-decoration: none; }
      a:hover, a:focus-visible { color: #fff; outline: none; }
      h1 { margin: 0 0 22px; overflow-wrap: normal; font-size: clamp(2rem, 6.4vw, 4.6rem); line-height: .98; letter-spacing: -0.025em; white-space: nowrap; }
      .summary { max-width: 760px; margin: 0 0 clamp(42px, 8vw, 72px); color: #aaa; font-size: clamp(1rem, 2.2vw, 1.28rem); line-height: 1.65; }
      .code-list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
      .code-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; min-height: 92px; padding: 22px 0; }
      .file-name { display: block; color: #f4f4f4; font-size: clamp(1.25rem, 3.2vw, 2rem); line-height: 1.15; overflow-wrap: anywhere; }
      .file-note { display: block; margin-top: 8px; color: #777; font-size: clamp(.88rem, 1.7vw, 1rem); line-height: 1.5; overflow-wrap: anywhere; }
      .open { color: #777; font-size: clamp(1.1rem, 2.4vw, 1.6rem); }
      @media (max-width: 640px) { nav, .code-list a { grid-template-columns: 1fr; } h1 { white-space: normal; } .open { display: none; } }