:root{
    --bg:#0b0b10; --ink:#e7eaee; --muted:#9aa3ad; --card:#14161c;
    --accent:#2dd1ff; --accent-soft: rgba(45,209,255,.25);
    --maxw: clamp(1200px, 96vw, 2400px);
    --header-h: 0px;
    --rand-scale: 2.236;
  }
  html,body{height:100%}
  body{ margin:0; font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); }

  /* Fixed site header */
  #siteHeader h1{
    font-family: 'Nabla', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    border-bottom:1px solid #1e222a;
  }
  .inner{max-width:var(--maxw); margin:0 auto; padding:16px}
  /* replace your existing h1 rule */
    h1{
    font-family: 'Nabla', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 400;                 /* Nabla is a display/color font; no bold */
    font-size: clamp(32px, 6vw, 96px);/* increase size responsively */
    line-height: 1.05;
    margin: 0 0 8px;
}

  .sub{margin:0; color:var(--muted); font-size:13px}
  .toolbar{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
  .toolbar button{
    appearance:none; border:1px solid #2b303a; background:#18202a; color:#e7eaee;
    padding:4px 6px; border-radius:4px; cursor:pointer; font-weight:600;
  }
  .toolbar button:hover{border-color:#3c4452; background:#1c2631}
  .toolbar input[type="text"], .toolbar select{
    background:#0f1620; color:var(--ink);
    border:1px solid #2b303a; border-radius:6px;
    padding:8px 10px; min-width:220px;
  }
  .selbadge{font-size:12px; color:var(--muted); padding:0 6px}
  .pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 8px; border-radius:999px; border:1px solid #2b303a;
    background:#111722; color:#cfe9f8; font-size:12px;
  }
  .pill .lock{width:12px; height:12px; display:inline-block; border:1px solid #2b303a; border-radius:3px; position:relative}
  .pill .lock:before{content:""; position:absolute; left:2px; top:-5px; width:6px; height:5px; border:2px solid #2b303a; border-bottom:none; border-radius:7px 7px 0 0}
  .pill.muted{color:#9aa3ad}

  .sliderGroup{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #2b303a; border-radius:8px;}
  .sliderGroup label{font-size:12px; color:#cfe9f8}
  .sliderGroup input[type="range"]{width:140px}
  .sliderGroup .val{font-size:12px; color:#9aa3ad; min-width:48px; text-align:right}

  main{max-width:var(--maxw); margin:4px auto; padding:8px 4px 8px;}
  body.cart-open main{ padding-right:300px; }

  /* helps grid backfill gaps when something spans multiple cells */
.grid{ 
    display:grid;
    gap:5px;
    grid-template-columns: repeat(6, minmax(260px, 1fr));
grid-auto-flow: dense; }

.card.randomOne.is-5x{
  transform: scale(var(--rand-scale));
  transform-origin: center center;
  will-change: transform;
}

/* gracefully fall back on narrow screens */
@media (max-width: 700px){
  .card--xl{ grid-column:auto; grid-row:auto; }
  .card--xl .sample{ font-size:64px; }
}
 
  @media (max-width:1200px){ .grid{ grid-template-columns: repeat(2, minmax(240px,1fr)); } }
  @media (max-width:700px){ .grid{ grid-template-columns: 1fr; } }

  .card{
    background:var(--card); border:1px solid #1e222a; border-radius:12px; padding:10px 12px;
    min-height:0; display:flex; flex-direction:column; justify-content:space-between;
    break-inside: avoid-page; cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .card:hover{ border-color:#2a3140; box-shadow:0 0 0 2px rgba(255,255,255,.02) inset;}
  .card.selected{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), 0 0 20px -10px var(--accent);}
  .name{font-weight:800; margin:0 0 3px; letter-spacing:.2px; font-size:18px; color:#eaf6ff}
  .pairLabel{ display:none; margin:2px 0 6px; font-size:12px; color:var(--muted);}
  .sample.sample{ display:inline-flex; gap:0; font-size:0; }
.sample .seg1, .sample .seg2{ font-size:48px; line-height:1.2; }

  .meta{margin:2px 0 0; color:var(--muted); font-size:12px}
  .loading{opacity:.85; display:flex; align-items:center; gap:10px}
  .dot{width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent)}
  .progress{height:6px; background:#1c2330; border-radius:999px; overflow:hidden; flex:1}
  .bar{height:100%; width:0%; background:linear-gradient(90deg,#2dd1ff,#8af6ff); box-shadow:0 0 20px #2dd1ff inset}
  footer{color:var(--muted); font-size:12px; text-align:center; padding:16px 0}

  body.hide-in-cart .card:not(.in-cart){ display:none !important;}

  /* Random view */
  #randomView{ display:none; }
  body.random-mode #grid{ display:none !important; }
  body.random-mode #randomView{ display:block !important; }

  /* Random card placement & centering */
  .card.randomOne{ cursor:pointer; margin:0 auto; text-align:center; padding:16px 18px;}
  .card.randomOne .name,
  .card.randomOne .sample,
  .card.randomOne .pairLabel{ text-align:center;}
  .card.randomOne .pairLabel{ display:block; margin-top:8px;}
  

  /* Stage pushes the random card near the bottom, just above the tip */
#randomView .randomStage{
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;     /* centers the card */
  padding: 0;
}

  .randomBar{ display:flex; gap:8px; margin:8px 4px 12px;}
  .randomBar button{
    appearance:none; border:1px solid #2b303a; background:#18202a; color:#e7eaee;
    padding:4px 6px; border-radius:6px; cursor:pointer; font-size:12px;
  }
  .randomBar button:hover{ border-color:#3c4452; background:#1c2631}

  /* Cart (draggable) */
  #selCart{
    position:fixed; top:calc(var(--header-h) + 8px); right:12px; z-index:1050;
    width:280px; max-height:calc(100vh - 108px);
    background:var(--card); border:1px solid #1e222a; border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
    padding:10px; display:none; flex-direction:column; gap:8px; overflow:hidden;
  }
  body.cart-open #selCart{ display:flex;}
  #selCart header{display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:grab; user-select:none; position:static;}
  #selCart.dragging, #selCart header:active{ cursor:grabbing;}
  #selCart h3{margin:0; font-size:14px; letter-spacing:.2px}
  #selCart .small{ font-size:12px; color:var(--muted);}
  #selCartList{ margin:6px 0 0; padding:0; list-style:none; overflow:auto; flex:1; border-top:1px solid #242935;}
  #selCartList li{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px 6px; border-bottom:1px solid #1e222a; font-size:13px;}
  #selCartList .cartBlock{ display:flex; flex-direction:column; gap:4px; min-width:0;}
  #selCartList .cartPreview{ font-size:0; line-height:1.15; color:#f0f6ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #selCartList .cartLabel{ font-size:12px; color:#9aa3ad;}
  #selCartList button{ align-self:start; appearance:none; border:1px solid #2b303a; background:#18202a; color:#e7eaee; padding:2px 6px; border-radius:6px; cursor:pointer; font-size:12px;}
  #selCartList button:hover{ border-color:#3c4452; background:#1c2631}
  #selCart .actions{ display:flex; justify-content:flex-start; padding-top:6px;}
  #selCart .actions button{ font-size:12px; padding:4px 6px;}

  /* PRINT */
  #printDeck{ display:none;}
  @media print{
    header, #siteHeader, .toolbar, footer, #selCart, #randomView { display:none !important;}
    body{ background:white; color:black; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    main{ margin:0; padding:0}
    body.use-print-deck #grid{ display:none !important;}
    body.use-print-deck #printDeck{ display:block !important; max-width:var(--maxw); margin:0 auto;}
    #printDeck .card{ background:white; border:1px solid #000; border-radius:12px; padding:8px 10px; break-inside:avoid; box-shadow:none;}
    #printDeck .name{ display:none !important;}
    #printDeck .pairLabel{ display:block !important; color:#000; margin:0 0 6px !important; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;}
    #printDeck .sample, #printDeck .sample .seg1, #printDeck .sample .seg2{ color:#000 !important; font-size:0; line-height:1.0; margin:0;}
  }