:root{
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --border: #E4E7F0;
    --border-strong: #CDD2E2;
    --text: #1B1E2B;
    --text-dim: #5B6072;
    --text-faint: #9AA0B4;
    --primary: #362FD9;
    --green: #12A585;
    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  body{
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }

  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; }
  :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:2px; }

  .wrap{ max-width:760px; margin:0 auto; padding:0 28px; }

  /* ---------- hero ---------- */
  .hero{ padding:56px 0 40px; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em;
    color:var(--green); margin-bottom:18px;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); }

  .hero h1{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(28px, 4.6vw, 38px); letter-spacing:-0.01em;
    margin-bottom:12px;
  }
  .hero p{ color:var(--text-dim); font-size:15px; max-width:480px; }

  /* ---------- list ---------- */
  .file-list{
    display:flex; flex-direction:column;
    border:1px solid var(--border); border-radius:16px;
    overflow:hidden; margin-bottom:64px;
  }

  .file-row{
    display:flex; align-items:center; gap:16px;
    padding:20px 22px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    transition: background .15s;
  }
  .file-row:last-child{ border-bottom:none; }
  .file-row:hover{ background: #FBFBFE; }

  .file-icon{
    width:38px; height:38px; border-radius:10px;
    background: var(--bg);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color: var(--text-dim);
    flex-shrink:0;
  }

  .file-info{ flex:1; min-width:0; }
  .file-info .fname{ font-size:15px; font-weight:500; color:var(--text); margin-bottom:3px; }
  .file-info .fmeta{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-faint); }

  .dl-btn{
    display:flex; align-items:center; gap:7px;
    font-size:13px; font-weight:500; color:#fff;
    background: var(--primary);
    border:none; border-radius:9px;
    padding:9px 16px;
    flex-shrink:0;
    transition: background .15s;
  }
  .dl-btn:hover{ background:#000000; }
  .dl-btn svg{ transition: transform .15s; }
  .dl-btn:hover svg{ transform: translateY(2px); }

  /* ---------- footer ---------- */
  footer{ border-top:1px solid var(--border); padding:32px 0 56px; }
  .footer-text{ color:var(--text-dim); font-size:13.5px; }
  .footer-text a{ color:var(--primary); font-weight:500; }

  @media (max-width:560px){
    .wrap{ padding:0 18px; }
    .file-row{ padding:16px; gap:12px; }
    .dl-btn span{ display:none; }
    .dl-btn{ padding:9px 11px; }
  }