/* Hide native scrollbars project-wide — content still scrolls,
   the chrome strip doesn't ruin mobile/desktop look. */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

  * { box-sizing: border-box; }
  html, body {
    margin: 0; padding: 0;
    background: #07080d;
    color: var(--mlc-cream);
    font-family: var(--mlc-font-sans);
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }

  /* ---------- Atmosphere ---------- */
  .atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .atmosphere::before {
    content:''; position:absolute;
    top:-30%; left:50%; transform:translateX(-50%);
    width:1200px; height:900px;
    background: radial-gradient(ellipse at center,
      rgba(33,88,164,0.28) 0%, rgba(33,88,164,0.08) 40%, transparent 70%);
    filter: blur(60px);
  }
  .atmosphere::after {
    content:''; position:absolute;
    bottom:-20%; right:-10%;
    width:900px; height:900px;
    background: radial-gradient(circle at center,
      rgba(244,205,99,0.08) 0%, rgba(235,162,93,0.04) 40%, transparent 70%);
    filter: blur(80px);
  }
  .grid-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(254,255,238,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(254,255,238,0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  }

  .wrap { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 40px; }

  /* ---------- Header ---------- */
  header.hub-head {
    position: relative; z-index: 2;
    padding: 36px 0 30px;
    border-bottom: 1px solid var(--mlc-fg-9);
  }
  .head-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
  }
  h1.hub-title {
    margin: 0;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fffef0;
    padding: 0;
    overflow: visible;
    display: inline-flex;
    align-items: baseline;
  }
  h1.hub-title .mark { color: inherit; text-decoration: none; transition: opacity .15s; }
  h1.hub-title .mark:hover { opacity: .7; }
  h1.hub-title .slash { color: var(--mlc-fg-7); font-weight: 200; margin: 0 0.1em; }
  h1.hub-title .accent {
    background: linear-gradient(120deg, #F4CD63 0%, #EBA25D 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic; font-weight: 400;
    display: inline-block;
    padding-right: 0.08em;
  }
  h1.hub-title .up {
    margin-left: 12px;
    font-family: var(--mlc-font-mono, monospace); font-weight: 600; font-size: 0.7em;
    color: var(--mlc-gold); text-decoration: none;
    align-self: center; vertical-align: baseline; letter-spacing: 0; line-height: 1;
    transition: color .15s, opacity .15s, transform .15s;
  }
  h1.hub-title .up:hover { opacity: .7; transform: translateX(-3px); }
  .hub-sub {
    font-size: 15px;
    line-height: 1.55;
    color: var(--mlc-fg-4);
    max-width: 560px;
    margin: 0;
  }
  .head-meta {
    font-family: var(--mlc-font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--mlc-fg-5);
    line-height: 1;
    text-transform: uppercase;
  }
  .head-meta .v { color: var(--mlc-gold); }
  .head-meta .z3-home{
    display:inline-block;
    font-family:var(--mlc-font-sans);
    font-weight:300;font-size:30px;letter-spacing:-0.04em;line-height:1.25;
    text-decoration:none;text-transform:lowercase;
    color:var(--mlc-cream);
    transition:opacity .15s;
  }
  .head-meta .z3-home:hover{opacity:.8}
  .head-meta .z3-home b{
    font-style:italic;font-weight:400;
    background: linear-gradient(120deg, #F4CD63 0%, #EBA25D 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ---------- Section labels ---------- */
  .section { padding: 56px 0 24px; position: relative; z-index: 2; }
  .section-label {
    display: flex; align-items: baseline; gap: 20px;
    margin: 0 0 28px;
    font-family: var(--mlc-font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mlc-fg-5);
  }
  .section-label .tag { color: var(--mlc-gold); font-weight: 700; }
  .section-label .rule { flex: 1; height: 1px; background: var(--mlc-fg-9); }
  .section-label .note { color: var(--mlc-fg-6); font-weight: 400; }
  .section-label .count { color: var(--mlc-fg-5); font-family: var(--mlc-font-mono); }

  /* ---------- Card grid ---------- */
  .cards {
    display: grid;
    gap: 1px;
    background: var(--mlc-fg-9);
    border: 1px solid var(--mlc-fg-9);
    border-radius: 14px;
    overflow: hidden;
  }
  .cards.two  { grid-template-columns: repeat(2, 1fr); }
  .cards.three { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px) {
    .cards.two, .cards.three { grid-template-columns: 1fr; }
  }

  /* ---------- Card ---------- */
  .card {
    background: #0a0d14;
    display: flex; flex-direction: column;
    position: relative;
    transition: background .25s;
    cursor: pointer;
    min-height: 0;
  }
  .card:hover { background: #0d1220; }
  .card:hover .card-arrow { color: var(--mlc-gold); transform: translateX(4px); }
  .card:hover .preview-frame { border-color: var(--mlc-gold-40); }

  .card-preview {
    position: relative;
    aspect-ratio: 16 / 10;
    flex: 0 0 auto;       /* preview stays a stable size (the body absorbs spare height) */
    background: #050609;
    overflow: hidden;
    border-bottom: 1px solid var(--mlc-fg-9);
  }
  .card-preview.wide { aspect-ratio: 24 / 10; }
  .card-preview.tall { aspect-ratio: 4 / 3; }

  .preview-frame {
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    background: transparent;
    transition: border-color .25s;
    pointer-events: none;
  }
  iframe.preview-frame { background: #050609; pointer-events: none; width: 100%; height: 100%; }

  /* Phone-framed mobile preview */
  .mc-phone {
    position: relative;
    width: 170px; height: 368px;
    background: #0a0a0c;
    border-radius: 27px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4);
    overflow: hidden;
    flex-shrink: 0;
  }
  .mc-phone iframe {
    width: 390px; height: 844px; border: 0;
    transform: scale(0.405); transform-origin: top left;
    display: block; border-radius: 18px;
    pointer-events: none;
  }
  .mc-notch {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 54px; height: 16px; background: #0a0a0c; border-radius: 0 0 11px 11px; z-index: 3;
  }

  /* Scale wrapper for full-size pages rendered inside cards */
  .preview-scale {
    position: absolute;
    top: 0; left: 0;
    transform-origin: top left;
    pointer-events: none;
  }
  .preview-scale iframe {
    border: 0;
    display: block;
    background: #050609;
  }

  /* Interactive-preview wrapper — DOES take pointer events */
  .preview-interactive {
    position: absolute;
    inset: 0;
    pointer-events: auto;
  }
  .preview-interactive iframe {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: auto;
  }

  .card-meta {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px 6px;
    font-family: var(--mlc-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mlc-fg-6);
  }
  .card-meta .idx { color: var(--mlc-fg-5); }
  .card-meta .kind { color: var(--mlc-gold); }
  /* the text block absorbs the card's spare height so all cards in a row match the
     tallest one, while the preview + footer stay a stable size (footer pinned to bottom). */
  .card-body { padding: 4px 18px 14px; flex: 1 1 auto; }
  .card-title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--mlc-cream);
    margin: 0 0 8px;
  }
  .card-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mlc-fg-4);
    margin: 0 0 4px;
  }
  .card-tags {
    display: flex; gap: 14px; flex-wrap: wrap;
    font-family: var(--mlc-font-mono);
    font-size: 10px;
    color: var(--mlc-fg-5);
    letter-spacing: 0.06em;
    margin-top: 10px;
  }
  .card-tags span::before { content:'·'; color: var(--mlc-fg-7); margin-right: 6px; }
  .card-tags span:first-child::before { display: none; }

  .card-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--mlc-fg-9);
    font-family: var(--mlc-font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mlc-fg-5);
  }
  .card-path { color: var(--mlc-fg-4); }
  .card-path .sep { color: var(--mlc-fg-7); margin: 0 4px; }
  .card-arrow {
    color: var(--mlc-fg-5);
    font-size: 14px;
    transition: color .25s, transform .25s;
  }

  /* ---------- Footer ---------- */
  .hub-foot {
    padding: 80px 0 60px;
    border-top: 1px solid var(--mlc-fg-9);
    margin-top: 56px;
    font-family: var(--mlc-font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mlc-fg-5);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  }
  .hub-foot a:hover { color: var(--mlc-gold); }

  @media (max-width: 760px){
    .wrap{padding:0 16px}
    header.hub-head{padding:18px 0 14px}
    h1.hub-title{font-size:24px !important}
    .head-meta .z3-home{font-size:24px}
    .cards.two,.cards.three{grid-template-columns:1fr}
    .section-label{font-size:9px;flex-wrap:wrap;gap:10px}
    .card-preview{aspect-ratio:16/10}
    .card-title{font-size:22px}
    .hub-foot{flex-direction:column;align-items:flex-start;gap:10px;font-size:9px;padding:32px 0 30px}
  }

/* bundle teaser — a couple of overlapping mini previews inside one card */
/* bundle teaser — a couple of live mini-previews side by side; each .bt-cell bounds
   one preview so the hub's fitScales() scales it to the cell (not the whole card). */
.bundle-teaser{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:8px;background:#050609}
.bt-cell{position:relative;flex:1 1 0;min-height:0;overflow:hidden;border-radius:8px;border:1px solid var(--mlc-fg-9)}
.bundle-teaser .preview-scale{position:absolute;top:0;left:0;transform-origin:top left}
.bundle-teaser .preview-scale iframe{pointer-events:none;border:0;display:block}