.mod-lith{
    --bg:#04070c;
    --card:#070b12;
    --ink:#e9efec;
    --dim:#8a97a3;
    --explore:#7ce8c3;
    --shop:#e6b566;
    --learn:#b39ae0;
    --stories:#6fa8e8;
  }.mod-lith *{margin:0;padding:0;box-sizing:border-box}.mod-lith, .mod-lith{background:var(--bg)}.mod-lith{
    font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
    color:var(--ink);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }.mod-lith .wrap{max-width:1560px;margin:0 auto;padding:56px 40px 80px}.mod-lith /* ---------- header ---------- */
  header{margin-bottom:44px}.mod-lith .kicker{
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:13px;letter-spacing:.32em;text-transform:uppercase;
    color:rgba(233,239,236,.42);margin-bottom:18px;
  }.mod-lith h1{font-size:30px;font-weight:500;letter-spacing:-.01em}.mod-lith .sub{margin-top:12px;font-size:13.5px;color:var(--dim);max-width:52ch;line-height:1.6}.mod-lith .sub em{font-style:normal;color:rgba(233,239,236,.75)}.mod-lith /* ---------- card grid ---------- */
  .grid{
    display:grid;gap:18px;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  @media (max-width:1240px){.mod-lith .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:620px){.mod-lith .grid{grid-template-columns:1fr}.mod-lith .wrap{padding:36px 18px 64px}}.mod-lith /* ---------- card ---------- */
  .card{
    --accent:#7ce8c3;
    position:relative;
    min-height:360px;
    border-radius:18px;
    background:var(--card);
    border:1px solid rgba(124,232,195,.12);
    overflow:hidden;
    cursor:crosshair;
    transition:border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
    touch-action:pan-y;
  }.mod-lith .card:hover{
    transform:translateY(-4px);
  }.mod-lith .card canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.mod-lith /* CSS vignette + top sheen — zero-cost depth above the canvas */
  .card::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.028), transparent 55%),
      radial-gradient(140% 120% at 50% 55%, transparent 55%, rgba(0,0,0,.5) 100%);
  }.mod-lith /* ---------- UI layer (non-interactive, .mod-lith canvas gets all pointer events) ---------- */
  .ui{position:absolute;inset:0;pointer-events:none;padding:24px 24px 22px;display:flex;flex-direction:column}.mod-lith .ui .top{display:flex;justify-content:space-between;align-items:flex-start}.mod-lith .ui svg{width:26px;height:26px;stroke:var(--accent);opacity:.85}.mod-lith .tag{
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:13px;letter-spacing:.3em;text-transform:uppercase;
    color:var(--accent);opacity:.7;
    padding-top:6px;
  }.mod-lith .body{margin-top:auto}.mod-lith .name{
    font-size:25px;font-weight:500;letter-spacing:.01em;
    color:var(--accent);
    text-shadow:0 0 22px rgba(255,255,255,.06);
  }.mod-lith .desc{margin-top:9px;font-size:13px;line-height:1.55;color:var(--dim);max-width:26ch}.mod-lith .arrow{
    margin-top:18px;display:inline-block;
    color:var(--accent);font-size:17px;line-height:1;
    transition:transform .35s cubic-bezier(.2,.7,.2,1);
  }.mod-lith .card:hover .arrow{transform:translateX(6px)}.mod-lith .hint{
    position:absolute;right:20px;bottom:18px;
    font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(233,239,236,.28);
    transition:color .4s ease;
  }.mod-lith .card:hover .hint{color:var(--accent)}

  @media (prefers-reduced-motion:reduce){.mod-lith .card, .mod-lith .arrow, .mod-lith .hint{transition:none}
  }