:root {
    --bg:#141215; --raise:#1c191d; --line:#2c282e; --text:#efeaf1; --muted:#9a929e;
    --accent:#e0529c; --r:4px; --w:1120px;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font:16px/1.6 Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:inherit; }
  img { image-rendering:pixelated; display:block; max-width:100%; }
  .wrap { max-width:var(--w); margin:auto; padding:0 24px; }
  h1, h2, h3 { font-family:Archivo,sans-serif; letter-spacing:-.01em; line-height:1.1; }

  header .wrap { display:flex; align-items:center; gap:32px; height:64px; border-bottom:1px solid var(--line); }
  header img { height:36px; }
  header nav { display:flex; gap:24px; font-size:14px; font-weight:500; color:var(--muted); }
  header nav a { text-decoration:none; }
  header nav a:hover { color:var(--text); }
  header .ip { margin-left:auto; }

  button.ip { background:none; border:1px solid var(--line); border-radius:var(--r); color:var(--text); font:500 14px Inter,sans-serif; padding:7px 12px; cursor:pointer; }
  button.ip:hover { border-color:var(--muted); }
  button.ip small { color:var(--muted); font-size:12px; margin-left:8px; }

  .intro { display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; padding-block:56px 48px; }
  .intro > img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r); image-rendering:auto; }
  .eyebrow { color:var(--accent); font-weight:600; font-size:14px; }
  .intro h1 { font-size:clamp(38px,5vw,60px); font-weight:800; margin:12px 0 18px; max-width:560px; }
  .intro p { color:var(--muted); font-size:17px; max-width:520px; }
  .actions { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
  .btn { background:var(--accent); color:#1a0d14; font-weight:600; font-size:15px; text-decoration:none; padding:11px 18px; border-radius:var(--r); border:0; cursor:pointer; }
  .btn:hover { background:#ea6aad; }
  .btn.ghost { background:none; color:var(--text); border:1px solid var(--line); }
  .btn.ghost:hover { border-color:var(--muted); }

  /* Feature sections: numbered, text column + media column, layouts vary per section. */
  .feat { border-top:1px solid var(--line); padding-block:56px; }
  .feat .wrap { display:grid; grid-template-columns:300px 1fr; gap:48px; }
  .num { font:600 13px Inter,sans-serif; color:var(--accent); }
  .feat h2 { font-size:32px; margin:8px 0 12px; }
  .feat .txt p { color:var(--muted); }
  .feat .txt ul { color:var(--muted); margin:16px 0 0 18px; display:grid; gap:4px; }
  .shot { width:100%; height:auto; border-radius:var(--r); image-rendering:auto; }

  .tiers { display:grid; gap:20px; }
  .tier { display:grid; grid-template-columns:90px 1fr; gap:16px; align-items:start; }
  .tier h3 { font:600 14px Inter,sans-serif; padding-top:10px; }
  .tier h3 small { display:block; color:var(--muted); font-weight:400; font-size:12px; }
  .sprites { display:flex; flex-wrap:wrap; gap:2px; }
  .sprites img { width:44px; height:44px; padding:4px; background:var(--raise); cursor:help; }
  .sprites img:hover { background:var(--line); }
  #fishname { color:var(--text); font-weight:600; min-height:1.6em; margin-top:16px; }

  .guis { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
  .guis figure:last-child { grid-column:1 / -1; }
  .guis img { width:100%; height:auto; border-radius:var(--r); }
  .guis figcaption { font-size:13px; color:var(--muted); margin-top:6px; }

  .vote .wrap { grid-template-columns:1fr 360px; }
  .vote img { width:100%; max-width:360px; height:auto; border-radius:var(--r); }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
  .row2 img, .wide img { width:100%; height:auto; border-radius:var(--r); }
  .wide { margin-top:16px; }
  figcaption { font-size:13px; color:var(--muted); margin-top:6px; }
  .facts { margin-top:20px; border-top:1px solid var(--line); font-size:14px; }
  .facts div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
  .facts dt { color:var(--muted); } .facts dd { font-weight:600; text-align:right; }
  .also { border-top:1px solid var(--line); padding-block:48px; }
  .also .wrap { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
  .also h2 { font-size:22px; margin:8px 0 10px; }
  .also p { color:var(--muted); }
  .also img { margin-top:16px; width:285px; max-width:100%; height:auto; }
  code { font:500 14px ui-monospace,Consolas,monospace; color:var(--text); background:var(--raise); padding:1px 5px; border-radius:3px; }
  .wiki { display:inline-block; margin-top:16px; font-size:14px; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
  .wiki:hover { color:var(--text); }
  .also .wiki { display:block; }
  .soon { border-top:1px solid var(--line); padding-block:40px 64px; color:var(--muted); }
  .soon b { color:var(--text); }

  footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }

  @media (max-width:800px) {
    header .wrap { flex-wrap:wrap; height:auto; gap:0 16px; padding-top:10px; }
    header nav { order:3; flex-basis:100%; overflow-x:auto; gap:20px; padding:10px 0; white-space:nowrap; scrollbar-width:none; }
    header nav::-webkit-scrollbar { display:none; }
    .feat { padding-block:40px; }
    .feat h2 { font-size:26px; }
    .intro p { font-size:16px; }
    .sprites img { width:40px; height:40px; }
    .intro, .feat .wrap, .vote .wrap { grid-template-columns:1fr; gap:24px; }
    .guis { grid-template-columns:1fr 1fr; }
    .also .wrap { grid-template-columns:1fr; gap:32px; }
    .tier { grid-template-columns:1fr; gap:6px; }
    .intro { padding-block:40px; }
  }

.soon p { max-width:680px; }
.soon p + p { margin-top:10px; color:var(--text); }
.soon a { color:var(--accent); }
.credit { margin-top:12px; font-size:14px; }
.credit b { color:var(--text); font-weight:600; }
.intro p + p { margin-top:12px; }