/* ===== Self-hosted fonts (latin subset; copre IT+EN) ===== */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Press Start 2P';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/press-start-2p-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root{
    --bg:#0b0b10;
    --surface:#14141d;
    --surface-2:#1a1a25;
    --border:#282836;
    --border-soft:#1f1f2b;
    --text:#eae8e0;
    --text-dim:#a3a098;
    --text-faint:#6c6a62;
    --c-fond:#5ce08a;
    --c-mecc:#46c7f5;
    --c-level:#ff9d4d;
    --c-gen:#b18cff;
    --c-sys:#ff6b6b;
    --c-narr:#34d6bd;
    --c-pixel:#ffcf4d;
    --c-psi:#ff7bc4;
    --c-prod:#6aa8ff;
    --c-res:#cfcbbf;
    --c-ux:#56ccf2;
    --c-enemy:#ff5a5f;
    --c-test:#a3e635;
    --c-biz:#eab308;
    --c-audio:#818cf8;
    --c-legal:#94a3b8;
    --c-loc:#2dd4bf;
    --c-tech:#fb923c;
    --c-anti:#f43f5e;
    --c-case:#c8a06a;
    --pixel:'Press Start 2P', monospace;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
    --shadow:0 2px 0 rgba(0,0,0,.5), 0 14px 30px -16px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--mono);
    color:var(--text);
    background:
      radial-gradient(900px 500px at 50% -8%, rgba(70,199,245,.07), transparent 60%),
      radial-gradient(700px 600px at 100% 0%, rgba(177,140,255,.06), transparent 55%),
      var(--bg);
    background-attachment:fixed;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    padding-bottom:80px;
  }
  /* scanline + vignette overlay */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:9999; pointer-events:none;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px);
    mix-blend-mode:multiply; opacity:.5;
  }
  body::after{
    content:"";
    position:fixed; inset:0; z-index:9998; pointer-events:none;
    box-shadow:inset 0 0 220px 40px rgba(0,0,0,.6);
  }

  a{color:inherit;}
  ::selection{background:rgba(92,224,138,.3);}

  /* ---------- HERO ---------- */
  .hero{
    max-width:1180px; margin:0 auto; padding:54px 24px 26px;
    text-align:center;
  }
  .hero .kicker{
    font-size:11px; letter-spacing:.32em; color:var(--text-faint);
    text-transform:uppercase; margin-bottom:22px;
  }
  .hero h1{
    font-family:var(--pixel);
    font-size:clamp(20px, 5.4vw, 44px);
    line-height:1.35; margin:0; color:#fff; letter-spacing:1px;
    text-shadow:2px 0 var(--c-sys), -2px 0 var(--c-mecc), 0 0 26px rgba(70,199,245,.35);
  }
  .hero h1 .l2{ display:block; color:var(--c-fond); text-shadow:2px 0 var(--c-narr), -2px 0 var(--c-pixel); margin-top:.5em; font-size:.62em; }
  .hero .sub{
    max-width:680px; margin:22px auto 0; color:var(--text-dim); font-size:14.5px;
  }
  .hero .sub b{color:var(--text); font-weight:600;}
  .cursor{ display:inline-block; width:.62em; height:1.05em; background:var(--c-fond); transform:translateY(2px); margin-left:3px; animation:blink 1.05s steps(1) infinite; }
  @keyframes blink{50%{opacity:0;}}

  .howto{
    max-width:760px; margin:26px auto 0; padding:13px 18px;
    border:1px dashed var(--border); border-radius:10px;
    background:rgba(255,255,255,.015); color:var(--text-faint); font-size:12.5px;
  }
  .howto b{color:var(--text-dim);}

  /* ---------- NAV / FILTER ---------- */
  .filterbar{
    position:sticky; top:0; z-index:50;
    background:rgba(11,11,16,.82); backdrop-filter:blur(9px);
    border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);
    margin-top:30px;
  }
  .filterbar .inner{
    max-width:1280px; margin:0 auto; padding:12px 18px;
    display:flex; flex-wrap:wrap; gap:9px 7px; align-items:center;
  }
  .flabel{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint); margin-right:4px; }
  .chip{
    font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.02em;
    color:var(--text-dim); background:var(--surface); border:1px solid var(--border);
    padding:6px 11px 6px 9px; border-radius:999px; cursor:pointer; text-decoration:none;
    display:inline-flex; align-items:center; gap:7px; transition:.16s ease; white-space:nowrap;
  }
  .chip .dot{ width:8px; height:8px; border-radius:2px; background:var(--c, var(--text-faint)); box-shadow:0 0 7px var(--c, transparent); }
  .chip:hover{ color:var(--text); border-color:var(--c, var(--border)); transform:translateY(-1px); }
  .chip.active{ color:#0b0b10; background:var(--c, #fff); border-color:var(--c, #fff); font-weight:700; }
  .chip.active .dot{ background:#0b0b10; box-shadow:none; }
  .chip:focus-visible{ outline:2px solid var(--c, var(--text)); outline-offset:2px; }
  .chip .chip-n{ font-size:10px; font-weight:700; opacity:.6; margin-left:1px; }
  .chip.active .chip-n{ opacity:.85; }
  .chip.zero{ opacity:.32; }
  .chip.zero:hover{ transform:none; }

  /* mobile-only collapse toggle for the category chips (hidden on desktop) */
  .filters-toggle{
    display:none;
    font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.02em;
    color:var(--text-dim); background:var(--surface); border:1px solid var(--border);
    padding:6px 11px; border-radius:999px; cursor:pointer;
    align-items:center; gap:6px; transition:.16s ease; white-space:nowrap;
  }
  .filters-toggle:hover{ color:var(--text); border-color:var(--c-pixel); }
  .filters-toggle .ft-caret{ flex:none; opacity:.7; transition:transform .18s ease; }
  .filterbar.filters-open .filters-toggle .ft-caret{ transform:rotate(180deg); }
  .filters-toggle .ft-n{
    font-size:10px; font-weight:700; line-height:1; color:#0b0b10;
    background:var(--c-pixel); border-radius:999px; padding:2px 6px;
  }
  .filters-toggle .ft-n[hidden]{ display:none; }

  .search{
    margin-left:auto; display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--border); border-radius:999px;
    padding:6px 13px; min-width:180px;
  }
  .search:focus-within{ border-color:var(--c-mecc); box-shadow:0 0 0 3px rgba(70,199,245,.12); }
  .search svg{ flex:none; opacity:.55; }
  .search input{
    background:none; border:none; outline:none; color:var(--text);
    font-family:var(--mono); font-size:13px; width:100%;
  }
  .search input::placeholder{ color:var(--text-faint); }
  .search-clear{
    flex:none; background:none; border:none; cursor:pointer; padding:0; line-height:1;
    color:var(--text-faint); font-family:var(--mono); font-size:13px; opacity:.7; transition:.16s ease;
  }
  .search-clear:hover{ color:var(--text); opacity:1; }
  .search-clear[hidden]{ display:none; }

  mark.gdhl{ background:var(--accent); color:#0b0b10; border-radius:2px; padding:0 1px; }

  /* ---------- GRID + CARDS ---------- */
  main{ max-width:1280px; margin:0 auto; padding:26px 18px 0; }
  .count{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); margin:4px 2px 18px; }
  .grid{
    display:grid; gap:16px;
    grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
    align-items:start;
    animation:fadein .5s ease both;
  }
  @keyframes fadein{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}

  /* sticky category headers (injected by JS) */
  .cat-head{
    --accent:var(--text-faint);
    grid-column:1 / -1;
    position:sticky; top:var(--bar-h, 0px); z-index:40;
    display:flex; align-items:center; gap:9px;
    margin:6px 0 -4px; padding:7px 4px;
    font-family:var(--mono); font-size:11px; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
    background:linear-gradient(180deg, var(--bg) 62%, transparent);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    scroll-margin-top:var(--bar-h, 0px);
  }
  .cat-head .ch-dot{ width:9px; height:9px; border-radius:2px; flex:none; background:var(--accent); box-shadow:0 0 8px var(--accent); }
  .cat-head .ch-n{ margin-left:auto; font-size:10px; font-weight:700; color:var(--text-faint); letter-spacing:.05em; }
  .cat-head[hidden]{ display:none; }

  .card{
    --accent:var(--text-faint);
    position:relative; background:linear-gradient(180deg, var(--surface-2), var(--surface));
    border:1px solid var(--border); border-radius:12px; overflow:hidden;
    padding:16px 16px 28px; box-shadow:var(--shadow); cursor:pointer;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--accent); opacity:.9;
  }
  .card:hover{ transform:translateY(-3px); border-color:var(--accent); box-shadow:0 2px 0 rgba(0,0,0,.5), 0 18px 34px -18px var(--accent); }
  .card[hidden]{ display:none; }

  .badge{
    display:inline-block; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
    color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    padding:3px 7px; border-radius:5px; margin-bottom:10px;
  }
  .card h3{ margin:0 0 8px; font-size:15.5px; font-weight:700; color:#fff; line-height:1.25; letter-spacing:.01em; }
  .card p{ margin:0 0 9px; font-size:13px; color:var(--text-dim); }
  .card p:last-child{ margin-bottom:0; }
  .card b{ color:var(--accent); font-weight:600; }
  .card code{
    font-family:var(--mono); font-size:11.5px; color:var(--text);
    background:rgba(255,255,255,.06); border:1px solid var(--border);
    padding:1px 5px; border-radius:4px; white-space:nowrap;
  }
  .card ul{ margin:0 0 9px; padding:0; list-style:none; font-size:12.6px; color:var(--text-dim); }
  .card li{ position:relative; padding-left:16px; margin-bottom:5px; }
  .card li::before{ content:"▸"; position:absolute; left:0; top:0; color:var(--accent); font-size:11px; }
  .card li b{ color:var(--text); }
  .card .more{
    margin-top:11px; padding-top:9px; border-top:1px solid var(--border-soft);
    font-size:11.5px; font-style:italic; color:var(--text-faint);
  }
  .card .more::before{ content:"→ "; font-style:normal; color:var(--accent); }
  .card .more b{ color:var(--text-dim); font-style:normal; font-weight:600; }

  /* category accent mapping */
  .cat-fond{ --accent:var(--c-fond); } .cat-mecc{ --accent:var(--c-mecc); }
  .cat-level{ --accent:var(--c-level); } .cat-gen{ --accent:var(--c-gen); }
  .cat-sys{ --accent:var(--c-sys); } .cat-narr{ --accent:var(--c-narr); }
  .cat-pixel{ --accent:var(--c-pixel); } .cat-psi{ --accent:var(--c-psi); }
  .cat-prod{ --accent:var(--c-prod); } .cat-res{ --accent:var(--c-res); }
  .cat-ux{ --accent:var(--c-ux); } .cat-enemy{ --accent:var(--c-enemy); }
  .cat-test{ --accent:var(--c-test); } .cat-biz{ --accent:var(--c-biz); }
  .cat-audio{ --accent:var(--c-audio); } .cat-legal{ --accent:var(--c-legal); }
  .cat-loc{ --accent:var(--c-loc); } .cat-tech{ --accent:var(--c-tech); }
  .cat-anti{ --accent:var(--c-anti); } .cat-case{ --accent:var(--c-case); }

  .empty{ text-align:center; color:var(--text-faint); padding:50px 0; font-size:14px; }
  .empty[hidden]{ display:none; }

  footer{
    max-width:1280px; margin:46px auto 0; padding:24px 18px; text-align:center;
    border-top:1px solid var(--border-soft); color:var(--text-faint); font-size:11.5px;
  }
  footer .ps{ font-family:var(--pixel); font-size:9px; color:var(--text-dim); letter-spacing:1px; }

  .toplink{
    position:fixed; right:18px; bottom:18px; z-index:60;
    width:42px; height:42px; border-radius:10px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:18px;
    transition:.15s ease; text-decoration:none;
  }
  .toplink:hover{ color:#fff; border-color:var(--c-fond); transform:translateY(-2px); }

  @media (max-width:560px){
    .hero{ padding-top:38px; }
    .grid{ grid-template-columns:1fr; }

    /* compact filter bar: top row = toggle + search + lang + theme; chips collapse below */
    .flabel{ display:none; }
    .filters-toggle{ display:inline-flex; order:0; }
    .search{ order:1; flex:1 1 120px; min-width:120px; width:auto; margin-left:0; }
    .langsel{ order:2; }
    .theme-toggle{ order:3; }
    .chip{ order:4; }
    .filterbar:not(.filters-open) .chip{ display:none; }
  }

  /* ---------- card cliccabile ---------- */
  .card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .card::after{
    content: attr(data-more-label) " \2197";
    position:absolute; right:10px; bottom:8px; z-index:2;
    font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--accent);
    background:color-mix(in srgb, var(--accent) 16%, var(--surface));
    border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    padding:2px 7px; border-radius:5px;
    opacity:0; transform:translateY(3px);
    transition:opacity .15s ease, transform .15s ease;
    pointer-events:none;
  }
  .card:hover::after, .card:focus-visible::after{ opacity:1; transform:none; }

  /* ---------- modal ---------- */
  .modal-backdrop{
    --accent:var(--text-faint);
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center;
    padding:24px; overflow-y:auto;
    background:rgba(6,6,10,.74);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; transition:opacity .18s ease;
  }
  .modal-backdrop.open{ opacity:1; }
  .modal-backdrop[hidden]{ display:none; }

  .modal{
    position:relative; width:100%; max-width:720px;
    max-height:calc(100vh - 48px); display:flex; flex-direction:column;
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    border:1px solid var(--border); border-radius:14px; overflow:hidden;
    box-shadow:0 2px 0 rgba(0,0,0,.5), 0 30px 70px -22px rgba(0,0,0,.9);
    transform:translateY(10px) scale(.985); opacity:0;
    transition:transform .2s ease, opacity .2s ease;
  }
  .modal-backdrop.open .modal{ transform:none; opacity:1; }
  .modal::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--accent); z-index:1;
  }

  .modal-head{
    flex:none; display:flex; align-items:flex-start; gap:14px;
    padding:18px 18px 14px; border-bottom:1px solid var(--border-soft);
  }
  .modal-head .mh-text{ flex:1; min-width:0; }
  .modal-head .badge{ margin-bottom:9px; }
  .modal-head h2{
    margin:0; font-size:19px; font-weight:700; color:#fff; line-height:1.25; letter-spacing:.01em;
  }
  .modal-close{
    flex:none; width:34px; height:34px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface);
    color:var(--text-dim); font-size:21px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:.15s ease;
  }
  .modal-close:hover{ color:#fff; border-color:var(--accent); }

  .modal-body{ flex:1; overflow-y:auto; padding:16px 20px 22px; }
  .modal-body p{ margin:0 0 12px; font-size:14px; color:var(--text-dim); line-height:1.62; }
  .modal-body p:last-child{ margin-bottom:0; }
  .modal-body b{ color:var(--accent); font-weight:600; }
  .modal-body i{ color:var(--text); font-style:italic; }
  .modal-body code{
    font-family:var(--mono); font-size:12.5px; color:var(--text);
    background:rgba(255,255,255,.06); border:1px solid var(--border);
    padding:1px 5px; border-radius:4px;
  }
  .modal-body h4{
    margin:18px 0 9px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent);
  }
  .modal-body ul{ margin:0 0 12px; padding:0; list-style:none; font-size:13.5px; color:var(--text-dim); }
  .modal-body li{ position:relative; padding-left:18px; margin-bottom:7px; line-height:1.55; }
  .modal-body li::before{ content:"\25B8"; position:absolute; left:0; top:0; color:var(--accent); }
  .modal-body li b{ color:var(--text); }
  .modal-body .d-more{
    margin-top:16px; padding-top:12px; border-top:1px solid var(--border-soft);
    font-size:12.5px; font-style:italic; color:var(--text-faint);
  }
  .modal-body .d-more::before{ content:"\2192 "; font-style:normal; color:var(--accent); }
  .modal-body .d-more b{ color:var(--text-dim); font-style:normal; font-weight:600; }

  .modal-body::-webkit-scrollbar{ width:10px; }
  .modal-body::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; border:2px solid var(--surface); }

  /* swipe: animazione di entrata + indicatore posizione (mobile only) */
  .modal-body.gd-nav-up{ animation:gd-nav-up .18s ease; }
  .modal-body.gd-nav-down{ animation:gd-nav-down .18s ease; }
  @keyframes gd-nav-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
  @keyframes gd-nav-down{ from{ opacity:0; transform:translateY(-16px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .modal-body.gd-nav-up, .modal-body.gd-nav-down{ animation:none; }
  }

  body.modal-open{ overflow:hidden; }



  /* ---------- toggle tema ---------- */
  .theme-toggle{
    flex:none; display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:999px;
    background:var(--surface); border:1px solid var(--border);
    color:var(--text-dim); cursor:pointer; transition:.16s ease;
  }
  .theme-toggle:hover{ color:var(--text); border-color:var(--c-pixel); transform:translateY(-1px); }
  .theme-toggle:focus-visible{ outline:2px solid var(--c-pixel); outline-offset:2px; }
  .theme-toggle .ic{ display:none; }
  .theme-toggle .ic-sun{ display:block; }
  html[data-theme="light"] .theme-toggle .ic-sun{ display:none; }
  html[data-theme="light"] .theme-toggle .ic-moon{ display:block; }

  /* ============ TEMA CHIARO ============ */
  html[data-theme="light"]{
    --bg:#f3f2ec;
    --surface:#ffffff;
    --surface-2:#f7f6f0;
    --border:#d9d6ca;
    --border-soft:#e7e4da;
    --text:#1b1b22;
    --text-dim:#54514a;
    --text-faint:#8b8779;
    --c-fond:#1c9b55;
    --c-mecc:#0c81b6;
    --c-level:#cf6f08;
    --c-gen:#7a45f0;
    --c-sys:#df3a2c;
    --c-narr:#0c9a88;
    --c-pixel:#b3870a;
    --c-psi:#d2429a;
    --c-prod:#2c6ee0;
    --c-res:#6c695e;
    --c-ux:#0e87c7;
    --c-enemy:#e03e43;
    --c-test:#5a9e0f;
    --c-biz:#a16207;
    --c-audio:#4f46e5;
    --c-legal:#52617a;
    --c-loc:#0d9488;
    --c-tech:#d97706;
    --c-anti:#e11d48;
    --c-case:#8a6d3b;
    --shadow:0 1px 0 rgba(0,0,0,.05), 0 12px 26px -18px rgba(0,0,0,.35);
  }
  html[data-theme="light"] body{
    background:
      radial-gradient(900px 500px at 50% -8%, rgba(12,129,182,.06), transparent 60%),
      radial-gradient(700px 600px at 100% 0%, rgba(122,69,240,.05), transparent 55%),
      var(--bg);
  }
  html[data-theme="light"] body::before{ opacity:.10; }
  html[data-theme="light"] body::after{ box-shadow:inset 0 0 200px 26px rgba(0,0,0,.05); }
  html[data-theme="light"] ::selection{ background:rgba(28,155,85,.22); }

  html[data-theme="light"] .hero h1{
    color:#191920;
    text-shadow:2px 0 var(--c-sys), -2px 0 var(--c-mecc), 0 0 16px rgba(12,129,182,.16);
  }
  html[data-theme="light"] .howto{ background:rgba(0,0,0,.022); }

  html[data-theme="light"] .filterbar{ background:rgba(247,246,240,.86); border-color:var(--border-soft); }
  html[data-theme="light"] .chip.active{ color:#fff; }
  html[data-theme="light"] .chip.active .dot{ background:#fff; }
  html[data-theme="light"] .search:focus-within{ box-shadow:0 0 0 3px rgba(12,129,182,.14); }

  html[data-theme="light"] .card h3{ color:#191920; }
  html[data-theme="light"] .card code,
  html[data-theme="light"] .modal-body code{ background:rgba(0,0,0,.05); color:var(--text); border-color:var(--border); }
  html[data-theme="light"] .card::after{ background:color-mix(in srgb, var(--accent) 14%, #fff); }

  html[data-theme="light"] .toplink:hover{ color:#191920; }

  html[data-theme="light"] .modal-backdrop{ background:rgba(22,24,32,.5); }
  html[data-theme="light"] .modal{ box-shadow:0 1px 0 rgba(0,0,0,.05), 0 30px 70px -26px rgba(0,0,0,.45); }
  html[data-theme="light"] .modal-head h2{ color:#15151b; }
  html[data-theme="light"] .modal-close:hover{ color:#15151b; }


  /* ---------- modal: footer correlate ---------- */
  .modal-foot{
    flex:none; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between;
    padding:12px 16px 14px; border-top:1px solid var(--border-soft);
    background:color-mix(in srgb, var(--surface-2) 75%, transparent);
  }
  .mf-rel{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-width:0; flex:1; }
  .mf-label{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); margin-right:2px; }
  .mf-chips{ display:contents; }
  .relchip{
    --accent:var(--text-faint);
    display:inline-flex; align-items:center; gap:6px; max-width:240px;
    font-family:var(--mono); font-size:11px; font-weight:600;
    color:var(--text-dim); background:var(--surface);
    border:1px solid var(--border); border-radius:999px;
    padding:4px 11px 4px 9px; cursor:pointer; transition:.15s ease;
  }
  .relchip .rc-dot{ width:7px; height:7px; border-radius:2px; background:var(--accent); box-shadow:0 0 6px var(--accent); flex:none; }
  .relchip .rc-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .relchip:hover{ color:var(--text); border-color:var(--accent); transform:translateY(-1px); }
  .relchip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .mf-actions{ display:flex; align-items:center; gap:8px; flex:none; }
  .mf-back{
    font-family:var(--mono); font-size:11px; font-weight:600; white-space:nowrap;
    color:var(--text-faint); background:none; border:1px solid var(--border);
    border-radius:999px; padding:4px 11px; cursor:pointer; transition:.15s ease;
  }
  .mf-back:hover{ color:var(--text); border-color:var(--accent); }
  .mf-back[hidden]{ display:none; }
  .langsel{ display:inline-flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .langbtn{ font:inherit; font-size:10px; letter-spacing:.12em; padding:6px 9px; background:transparent; color:var(--text-faint); border:0; border-right:1px solid var(--border); cursor:pointer; text-transform:uppercase; transition:background .15s,color .15s; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
  .langbtn:last-child{ border-right:0; }
  .langbtn:hover{ color:var(--text); }
  .langbtn.active{ background:var(--c-mecc); color:#0a0a0a; font-weight:700; }

  /* mobile: modale a tutto schermo — posto in fondo per vincere la cascata sulle
     regole base della modale e dei relchip definite più sopra (specificità uguale, vince l'ultima) */
  @media (max-width:560px){
    .modal-backdrop{ padding:0; overflow:hidden; }
    .modal{ width:100%; max-width:none; height:100dvh; max-height:none; border:none; border-radius:0; }
    .modal-head h2{ font-size:17px; }
    .modal-body{ padding:14px 16px 18px; overscroll-behavior:contain; }
    .modal-foot{ gap:8px 10px; }
    .relchip{ max-width:150px; }
  }