:root{
  --bg:#f4f1ee;
  --text:#2f2f2f;
  --muted:#6f6f6f;
  --line:#cfcfcf;

  /* BIG CARD: почти белая */
  --card:#fbfaf8;
  --card-border:#dcd7cf;

  --mini:#ffffff;
  --mini-border:#d6d3cd;
  --mini-shadow: 0 6px 18px rgba(0,0,0,.07);

  /* chips чуть светлее и чище */
  --chip:#f1eee9;
  --chip-border:#d8d2c9;

  /* плитки внутри — белые */
  --cell:#ffffff;
  --cell-border:#dfd9d0;
}

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:40px 18px 60px;
    }

    .wrap{ width:min(980px, 100%); text-align:center; }

    /* Top navs */
    .corner-nav{
      position: fixed;
      top: 20px;              /* ✅ 20px from top */
      left: 40px;
      z-index: 9999;
      font-size: 14px;
      letter-spacing: 0.04em;
      font-family: inherit;
      user-select: none;
    }
    .corner-nav.right{
      left:auto;
      right:40px;
      text-align:right;
    }
    .corner-nav a{
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid rgba(0,0,0,0.22);
      padding-bottom: 3px;
      transition: all 0.15s ease;
      opacity: 0.78;
      letter-spacing: 0.06em;
    }
    .corner-nav a:hover{
      border-bottom-color: rgba(0,0,0,0.45);
      opacity: 1;
    }
    .corner-nav .sep{
      padding: 0 10px;
      opacity: 0.35;
    }

    /* Title */
    .title{
      font-family:'Playfair Display', serif;
      font-weight:500;
      font-size:64px;
      letter-spacing:2px;
      margin:0;
    }
    .subtitle{
      font-family:'Playfair Display', serif;
      font-style:italic;
      font-weight:400;
      font-size:34px;
      margin:6px 0 0 0;
      color:var(--text);
    }
    .subtitle .dash{
      display:inline-block;
      margin-right:10px;
      transform:translateY(-2px);
      opacity:.75;
    }

    /* Search */
    .search-block{ width:min(720px, 100%); margin:32px auto 0; }
    .search{
      width:100%;
      height:54px;
      border:1px solid #d6d6d6;
      background:#ffffff;
      border-radius:3px;
      padding:0 16px;
      font-size:18px;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      outline:none;
      box-shadow:0 1px 0 rgba(0,0,0,.03);
    }
    .search::placeholder{color:#9a9a9a}
    .search:focus{
      border-color:#bcbcbc;
      box-shadow:0 0 0 3px rgba(0,0,0,.04);
    }

    .example{
      width:100%;
      margin:8px auto 0;
      text-align:center;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:14px;
      color:var(--muted);
      line-height:1.3;
    }
    .example em{ font-style:italic; color:#7a7a7a; }

    /* Divider */
    .divider{
      width:min(900px,100%);
      margin:48px auto 0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:22px;
    }
    .divider-text{
      font-family:'Playfair Display', serif;
      font-size:20px;
      font-style:italic;
      font-weight:400;
      color:var(--muted);
      letter-spacing:.3px;
      white-space:nowrap;
    }
    .divider .line{
      flex:1;
      height:1px;
      max-width:260px;
      background:linear-gradient(to right, transparent, var(--line) 35%, var(--line) 65%, transparent);
      opacity:.95;
    }

   /* Mini carousel */
.mini-wrap{
  width:min(900px,100%);
  margin:18px auto 0;
  display:grid;
  grid-template-columns: 56px 1fr 56px;   /* ✅ fixed arrows => symmetry */
  align-items:center;
  gap:14px;
}

/* ✅ ARROWS — заметнее на фоне + тень + hover */
.arrow{
  width:56px;
  height:56px;
  border-radius:999px;

  border:1px solid rgba(0,0,0,.14);              /* было .08 */
  background:rgba(255,255,255,.78);              /* было .25 */
  box-shadow:0 8px 18px rgba(0,0,0,.12);         /* добавили */
  backdrop-filter: blur(6px);                    /* мягко, можно убрать */

  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;                                 /* было 20 */
  color:rgba(0,0,0,.75);                          /* было .55 */
  user-select:none;

  transition: transform .08s ease, background .18s ease, box-shadow .18s ease, opacity .15s ease;
}
.arrow:hover{
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 26px rgba(0,0,0,.16);
  transform: translateY(-1px);
}
.arrow:active{ transform:translateY(1px); }
.arrow[disabled]{
  opacity:.25;
  cursor:not-allowed;
  box-shadow:none;
}

/* ✅ чтобы стрелки не “прилипали” к краю на узких экранах */
@media (max-width: 520px){
  .mini-wrap{ grid-template-columns: 48px 1fr 48px; gap:10px; }
  .arrow{ width:48px; height:48px; font-size:20px; }
}

.mini-row{
  display:flex;
  justify-content:center;
  gap:16px;
  overflow:hidden;
  padding:6px 0;
}

.mini{
  width:168px;
  background:var(--mini);
  border:1px solid var(--mini-border);
  border-radius:12px;
  padding:14px 14px 12px;
  text-align:left;
  box-shadow: var(--mini-shadow);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .15s ease;
}
.mini:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.mini.active{
  outline: 2px solid rgba(0,0,0,.18);
  transform: translateY(-2px);
}

.mini-code{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size:30px;
  line-height:1;
  margin:0;
  letter-spacing:.3px;
}
.mini-name{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:12px;
  color:rgba(0,0,0,.55);
  margin:4px 0 0;
}
.mini-formula{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:11px;
  color:rgba(0,0,0,.55);
  margin:10px 0 0;
}
.mini-chip{
  display:inline-block;
  margin-top:10px;
  border:1px solid var(--chip-border);
  background:var(--chip);
  border-radius:999px;
  padding:6px 10px;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:12px;
  color:#4a4a4a;
  white-space:nowrap;
}

    .hint{
      width:min(860px,100%);
      margin:12px auto 0;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:13px;
      color:var(--muted);
      text-align:center;
    }

    /* Big card (hidden until selected) */
    .card{
      width:min(860px,100%);
      margin:18px auto 0;
      background:var(--card);
      border:1px solid var(--card-border);
      border-radius:12px;
      text-align:left;
      box-shadow:0 10px 30px rgba(0,0,0,.06);
      overflow:hidden;
      display:none; /* ✅ hidden by default */
    }

    .card-top{
      padding:18px 18px 14px;
      display:flex;
      gap:14px;
      align-items:flex-start;
      justify-content:space-between;
    }
    .card-title{
      margin:0;
      font-family:'Playfair Display', serif;
      font-weight:600;
      font-size:34px;
      letter-spacing:.2px;
      line-height:1.05;
    }
    .card-sub{
      margin:6px 0 0;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:14px;
      color:var(--muted);
    }

    .quick{
      margin-left:auto;
      border:1px solid var(--chip-border);
      background:var(--chip);
      border-radius:999px;
      padding:8px 12px;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:12px;
      color:#4a4a4a;
      cursor:pointer;
      user-select:none;
      transition:transform .06s ease, box-shadow .15s ease;
      white-space:nowrap;
    }
    .quick:active{ transform:translateY(1px); }
    .quick:hover{ box-shadow:0 2px 8px rgba(0,0,0,.10); }

    .chips{
      padding:0 18px 14px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .chip{
      border:1px solid var(--chip-border);
      background:var(--chip);
      border-radius:999px;
      padding:6px 10px;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:12px;
      color:#4a4a4a;
      white-space:nowrap;
    }

.card-grid{
  border-top:1px solid var(--cell-border);
  display:grid;
  grid-template-columns:1fr 1fr;
  background: transparent;
}

    .cell{
      padding:16px 18px;
      border-right:1px solid var(--cell-border);
      border-bottom:1px solid var(--cell-border);
      background: var(--cell); /* ✅ lighter tiles */
      min-height:86px;
    }
    .cell:nth-child(2n){ border-right:none; }

    .h{
      margin:0 0 6px;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:12px;
      letter-spacing:1.1px;
      text-transform:uppercase;
      font-weight:650;
      color:#3a3a3a;
    }
    .p{
      margin:0;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:14px;
      line-height:1.45;
      color:#2f2f2f;
    }
    .aka{
      margin:0;
      padding-left:18px;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:14px;
      line-height:1.55;
      color:#2f2f2f;
    }
    .aka li{ margin:2px 0; }
    .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:13px;
      color:#333;
    }

    .card-bottom{
      padding:12px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      background: rgba(255,255,255,.10);
    }
    .note{
      margin:0;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:13px;
      color:#2f2f2f;
    }
    .sources{
      margin:0;
      font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
    }

    .divider-edu{
      margin: 18px auto 0 auto;
      gap: 16px;
    }
    .divider-edu .divider-text{
      font-size: 13px;
      opacity: .9;
    }
    .divider-edu .line{
      max-width: 260px;
      opacity: .7;
    }

    /* Responsive */
    @media (max-width:920px){
      .mini{ width:150px; }
      .title{font-size:54px}
      .subtitle{font-size:28px}
    }
    @media (max-width:820px){
      .card-title{font-size:28px}
      .card-grid{grid-template-columns:1fr}
      .cell{border-right:none}
      .mini-wrap{ grid-template-columns: 44px 1fr 44px; }
      .arrow{ width:44px; height:44px; }
    }
    @media (max-width:520px){
      .title{font-size:40px}
      .subtitle{font-size:22px}
      .divider{gap:14px}
      .divider .line{max-width:120px}
      .mini-row{ gap:10px; }
      .mini{ width:145px; }
    }