:root{--ink:#1e1b3a;--muted:#6b6890;--bg:#faf9ff;--card:#fff;--line:#e7e4f7;--violet:#6d28d9;--violet2:#8b5cf6;--teal:#0e9fb8;--radius:14px;--shadow:0 2px 6px rgba(49,32,120,.06),0 10px 30px rgba(49,32,120,.08)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);background-image:radial-gradient(circle at 10% -10%,#ede9fe 0,transparent 40%),radial-gradient(circle at 110% 10%,#cffafe 0,transparent 35%);background-attachment:fixed}
a{color:var(--violet)}a:hover{color:var(--teal)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
main.wrap{padding-top:28px;padding-bottom:56px;min-height:60vh}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:.2em 0 .3em}
h2{font-size:1.4rem;margin-top:2em}
.muted{color:var(--muted)}.small{font-size:.85rem}
.lead{font-size:1.1rem;color:#3b3766;max-width:760px}
/* header */
.site-header{background:linear-gradient(120deg,#1e1450,#4c1d95 55%,#0e7490);color:#fff;position:sticky;top:0;z-index:10;box-shadow:0 4px 20px rgba(30,20,80,.25)}
.header-inner{display:flex;align-items:center;gap:20px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.3rem;letter-spacing:.02em}
.brand:hover{color:#e0e7ff}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:#ede9fe;text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:500;font-size:.95rem}
.nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.nav-search{background:rgba(255,255,255,.14)}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
@media (max-width:760px){.nav-toggle{display:block}.nav{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:#2e1765;padding:10px 16px}.nav-open .nav{display:flex}}
/* hero */
.hero{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:30px;padding:20px 0 10px}
.hero h1 span{background:linear-gradient(90deg,var(--violet),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-gem svg{width:100%;max-width:260px;display:block;margin:auto;filter:drop-shadow(0 20px 30px rgba(109,40,217,.35));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}
.hero-search{display:flex;gap:8px;margin-top:20px;max-width:560px}
.hero-search input,.filter-input{flex:1;padding:14px 18px;border:2px solid var(--line);border-radius:999px;font-size:1rem;background:#fff;outline:none}
.hero-search input:focus,.filter-input:focus{border-color:var(--violet2)}
.hero-search button{padding:0 24px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--teal));color:#fff;font-weight:700;font-size:1rem;cursor:pointer}
.filter-input{width:100%;max-width:480px;margin:10px 0 20px}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-gem{display:none}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:30px 0}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow)}
.stats strong{display:block;font-size:1.7rem;color:var(--violet)}.stats span{color:var(--muted);font-size:.9rem}
@media (max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(76,29,149,.18);color:var(--ink)}
.card-img,.heal-img{aspect-ratio:4/3;background:linear-gradient(135deg,#ede9fe,#cffafe);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-img img,.heal-img img{width:100%;height:100%;object-fit:cover}
.gem-ph{font-size:2.6rem;color:#a78bfa}
.card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:#4338ca}
.browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:var(--radius);text-decoration:none;color:#fff;box-shadow:var(--shadow);min-height:120px;transition:transform .15s}
.tile:hover{transform:translateY(-3px);color:#fff}.tile strong{font-size:1.2rem}.tile span{opacity:.9;font-size:.92rem}
.t1{background:linear-gradient(135deg,#7c3aed,#4f46e5)}.t2{background:linear-gradient(135deg,#db2777,#9333ea)}.t3{background:linear-gradient(135deg,#0891b2,#4f46e5)}.t4{background:linear-gradient(135deg,#059669,#0e7490)}
/* mineral page */
.crumbs{font-size:.9rem;color:var(--muted)}
.mineral-head{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:start}
@media (max-width:800px){.mineral-head{grid-template-columns:1fr}}
.badge{display:inline-block;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;background:#ede9fe;color:var(--violet)}
.badge.gem{background:#cffafe;color:#0e7490}.badge.heal{background:#fce7f3;color:#be185d}
.big-formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.5rem;color:#4338ca;margin:.2em 0}
.mineral-photo{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow)}
.mineral-photo img{width:100%;height:auto;max-height:420px;object-fit:contain;border-radius:10px;display:block;background:#f5f3ff}
.mineral-photo figcaption{font-size:.78rem;color:var(--muted);margin-top:6px;word-break:break-word}
.props{width:100%;max-width:760px;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.props th,.props td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.props th{width:38%;background:#f7f5ff;font-weight:600;color:#3b3766}
.props tr:last-child th,.props tr:last-child td{border-bottom:0}
.pill-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pill-list a{display:inline-block;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none}
.meta-section{margin-top:2.4em;padding:22px;border-radius:var(--radius);background:linear-gradient(135deg,#fdf4ff,#eef2ff);border:1px solid #f0d9fb}
.meta-section h2{margin-top:0}
.disclaimer{font-size:.9rem;background:#fff7ed;border-left:4px solid #f59e0b;padding:10px 14px;border-radius:8px;color:#7c2d12}
.meta-card{background:#fff;border-radius:12px;padding:14px 18px;margin-top:12px}
.meta-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
.meta-dl dt{font-weight:600;color:#3b3766}.meta-dl dd{margin:0}
.chakra{display:inline-block;font-size:.78rem;font-weight:600;padding:2px 9px;border-radius:999px;color:#fff;text-decoration:none;margin:1px 2px 1px 0}
a.chakra:hover{color:#fff;opacity:.85}
.chakra-root{background:#dc2626}.chakra-sacral{background:#ea580c}.chakra-solar-plexus{background:#ca8a04}.chakra-heart{background:#16a34a}.chakra-throat{background:#0284c7}.chakra-third-eye{background:#4f46e5}.chakra-crown{background:#9333ea}
.chakra-filter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chakra-filter button{border:0;border-radius:999px;padding:8px 16px;font-weight:600;cursor:pointer;color:#fff;opacity:.55;font-size:.92rem}
.chakra-filter button[data-chakra=all]{background:#334155}
.chakra-filter button.active{opacity:1;box-shadow:0 0 0 3px #fff,0 0 0 5px currentColor}
.heal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.heal-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s}
.heal-card:hover{transform:translateY(-3px);color:var(--ink)}
.heal-img{aspect-ratio:16/9}
.heal-body{padding:12px 14px}.heal-body p{margin:.4em 0;font-size:.92rem}
.index-list{columns:3 260px;column-gap:28px;padding-left:18px}
.index-list li{break-inside:avoid;margin:2px 0}
.letters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.letters a{min-width:36px;text-align:center;padding:6px 8px;border-radius:8px;background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:600}
.letters a.current{background:var(--violet);color:#fff;border-color:var(--violet)}
.links ul{padding-left:18px}
/* footer */
.site-footer{background:#1e1450;color:#c7c2ea;padding:28px 0;font-size:.9rem}
.site-footer a{color:#a5f3fc}.site-footer .muted{color:#9993c7}
/* pagefind */
#search{--pagefind-ui-primary:#6d28d9;--pagefind-ui-border:#e7e4f7;--pagefind-ui-border-radius:12px;--pagefind-ui-font:inherit}

/* ---------- stone colour theming ---------- */
body.hub{background:#faf9ff;background-image:radial-gradient(circle at 0% 0%,rgba(167,139,250,.35) 0,transparent 35%),radial-gradient(circle at 100% 5%,rgba(34,211,238,.30) 0,transparent 35%),radial-gradient(circle at 85% 70%,rgba(244,114,182,.22) 0,transparent 35%),radial-gradient(circle at 10% 80%,rgba(52,211,153,.22) 0,transparent 35%),radial-gradient(circle at 50% 40%,rgba(251,191,36,.14) 0,transparent 40%);background-attachment:fixed}
body.stone-page{background:linear-gradient(165deg,var(--stone-tint) 0%,var(--stone-tint2) 100%);background-attachment:fixed}
body.stone-page a{color:var(--stone-accent)}
body.stone-page .site-footer a{color:#a5f3fc}
body.stone-page h2{color:var(--stone-accent)}
body.stone-page .crumbs{color:var(--stone-accent);opacity:.9}
.stone-hero{background:radial-gradient(circle at 85% 0%,var(--stone-glow) 0,transparent 55%),linear-gradient(135deg,var(--stone) 0%,var(--stone-deep) 100%);color:var(--hero-ink);border-radius:22px;padding:26px;box-shadow:0 18px 40px -12px var(--stone-deep);position:relative;overflow:hidden;margin-top:10px}
.stone-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);pointer-events:none}
.stone-hero h1,.stone-hero .big-formula{color:var(--hero-ink)}
.stone-hero .lead,.stone-hero p{color:var(--hero-ink-soft)}
body.stone-page .stone-hero a{color:var(--hero-ink);text-decoration-thickness:2px}
.stone-hero .badge{background:var(--hero-chip);color:var(--hero-ink);backdrop-filter:blur(4px)}
.stone-hero .mineral-photo{background:rgba(255,255,255,.92);border:0}
.stone-hero .mineral-photo figcaption{color:#5b5878}
body.stone-page .stone-hero .mineral-photo figcaption a{color:#4b4f6b}
body.stone-page .props th{background:color-mix(in srgb,var(--stone-tint) 70%,#fff)}
body.stone-page .pill-list a{border-color:color-mix(in srgb,var(--stone) 35%,#fff)}
body.stone-page .meta-section{background:rgba(255,255,255,.72);border-color:color-mix(in srgb,var(--stone) 30%,#fff);backdrop-filter:blur(6px)}
body.stone-page .links{background:rgba(255,255,255,.6);border-radius:var(--radius);padding:4px 20px 12px;margin-top:2em}
body.stone-page .links h2{margin-top:.8em}
/* tinted cards */
.card[style],.heal-card[style]{border-top:5px solid var(--stone)}
.card[style] .card-body,.heal-card[style] .heal-body{background:linear-gradient(180deg,var(--stone-tint),#fff 85%)}
.card[style]:hover,.heal-card[style]:hover{box-shadow:0 14px 34px -8px var(--stone)}
.card[style] .card-img,.heal-card[style] .heal-img{background:linear-gradient(135deg,var(--stone-tint),var(--stone))}
/* fixes: keep header/footer link colours on stone pages; let the tint cover the whole page */
body.stone-page{background-attachment:scroll;min-height:100vh}
body.stone-page .site-header a,body.stone-page .site-header .brand{color:#ede9fe}
body.stone-page .site-header .brand{color:#fff}
body.stone-page a.chakra{color:#fff}
.t5{background:linear-gradient(135deg,#ea580c,#db2777)}
.hero-id{margin-top:12px}.hero-id a{font-weight:600}
/* identifier */
.id-form fieldset{border:0;background:rgba(255,255,255,.82);border-radius:var(--radius);padding:14px 18px 16px;margin:0 0 14px;box-shadow:var(--shadow)}
.id-form legend{font-weight:700;padding:0;float:left;width:100%;margin-bottom:10px;color:#3b2a7a}
.chips{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.chip{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font:inherit;font-size:.92rem;cursor:pointer;color:var(--ink);transition:all .12s}
.chip i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15)}
.chip:hover{border-color:var(--violet2)}
.chip.on{border-color:var(--violet);background:#ede9fe;box-shadow:0 0 0 2px rgba(109,40,217,.25)}
.chip.wide{flex-direction:column;align-items:flex-start;border-radius:12px;text-align:left;gap:2px;flex:1 1 220px}
.chip.wide small{color:var(--muted)}
.id-actions{text-align:right}
.btn-ghost{border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 18px;font:inherit;cursor:pointer}
.id-results{margin-top:10px}
.id-card .card-img{position:relative}
.match{position:absolute;top:8px;right:8px;background:var(--stone-accent,#6d28d9);color:#fff;font-weight:700;font-size:.85rem;padding:3px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* pairings */
.t6{background:linear-gradient(135deg,#be185d,#f472b6)}
.pairs{margin-top:16px}
.pairs h3{font-size:1.05rem;margin:0 0 10px}
.pair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pair-card{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;text-decoration:none;color:var(--ink);background:linear-gradient(90deg,var(--stone-tint,#f5f3ff),#fff 90%);border-left:5px solid var(--stone,#a78bfa);box-shadow:0 1px 4px rgba(49,32,120,.08);transition:transform .12s}
body.stone-page .pair-card{color:var(--ink)}
.pair-card:hover{transform:translateY(-2px);color:var(--ink)}
.pair-card strong{display:block}
.pair-card small{display:block;color:#4b4870;font-size:.82rem;line-height:1.35}
.pair-card em{display:block;color:var(--stone-accent,#6d28d9);font-style:normal}
.pair-img{flex:0 0 52px;height:52px;border-radius:10px;overflow:hidden;background:var(--stone,#ddd);display:flex;align-items:center;justify-content:center;color:#fff}
.pair-img img{width:100%;height:100%;object-fit:cover}
.intent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.intent{background:rgba(255,255,255,.85);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.intent h3{margin:0 0 10px}
.intent-stones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pair-card.mini{padding:6px 8px}.pair-card.mini .pair-img{flex-basis:38px;height:38px}
.combo-picker{background:rgba(255,255,255,.85);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.combo-selected{margin:12px 0;display:flex;flex-wrap:wrap;gap:8px}
#combo-out h3{margin-top:1.4em}

/* ---------- facts & "where it's found" map ---------- */
.facts-section h3 { margin-top: 1rem; }
.where-found .stone-map { height: 340px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); background: #e8eef3; margin: .6rem 0; }
.map-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: 0; margin: .3rem 0; font-size: .92rem; }
.map-legend li { display: flex; align-items: center; gap: .4rem; }
.mk { display: inline-block; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.mk-n { background: var(--mk, var(--stone, #8e44ad)); border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.55); }
.mk-t { width: 18px; height: 18px; background: #fff; border: 4px solid #d62828; box-shadow: 0 0 0 1.5px #222; transform: rotate(45deg); border-radius: 3px; }
.mk-o { background: transparent; border: 3px dashed #333; }
.leaflet-container .mk { display: block; }
/* ---------- fossil / geode hubs ---------- */
.collection-intro { max-width: 70ch; }
.facts-mini { font-size: .85rem; opacity: .85; display: block; margin-top: .2rem; }
.formation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.formation-grid > div { background: rgba(255,255,255,.75); border-radius: 14px; padding: .9rem 1rem; color: #222; }
.formation-grid h3 { margin: 0 0 .3rem; }
.t7{background:linear-gradient(135deg,#92400e,#a16207)}
.t8{background:linear-gradient(135deg,#5b21b6,#0e7490)}
.fossil-section{margin-top:2rem}.fossil-section h2{margin-bottom:.2rem}.jump a{font-weight:600;margin-right:.3rem}

/* =====================================================================
   v3: multi-stop stone gradients, dark mode, liquid-glass controls, glitter
   ===================================================================== */
:root{--panel:rgba(255,255,255,.84);--panel-line:rgba(255,255,255,.7);--glass-ink:#241f4a;color-scheme:light}
html[data-theme=dark]{--ink:#ece9ff;--muted:#b3aed6;--bg:#0c0a18;--card:#17142b;--line:#2d2852;--violet:#c4b5fd;--violet2:#a78bfa;--teal:#67e8f9;--panel:rgba(18,14,34,.8);--panel-line:rgba(255,255,255,.1);--glass-ink:#f1eeff;--shadow:0 2px 6px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}
html[data-theme=dark] body{background:#0c0a18;background-image:radial-gradient(circle at 10% -10%,rgba(124,58,237,.35) 0,transparent 40%),radial-gradient(circle at 110% 10%,rgba(14,116,144,.35) 0,transparent 35%)}
html[data-theme=dark] body.hub{background:#0b0918;background-image:radial-gradient(circle at 0% 0%,rgba(124,58,237,.38) 0,transparent 35%),radial-gradient(circle at 100% 5%,rgba(8,145,178,.32) 0,transparent 35%),radial-gradient(circle at 85% 70%,rgba(219,39,119,.25) 0,transparent 35%),radial-gradient(circle at 10% 80%,rgba(5,150,105,.25) 0,transparent 35%)}

/* --- stone page: rich gradient of the stone's own colours + gemmy radial highlights --- */
body.stone-page{background:
  radial-gradient(circle at 12% 8%,rgba(255,255,255,.45) 0,transparent 28%),
  radial-gradient(circle at 88% 22%,rgba(255,255,255,.28) 0,transparent 22%),
  radial-gradient(circle at 70% 78%,rgba(255,255,255,.22) 0,transparent 26%),
  radial-gradient(circle at 25% 60%,rgba(255,255,255,.12) 0,transparent 20%),
  linear-gradient(160deg,var(--pg));background-attachment:scroll;min-height:100vh}
html[data-theme=dark] body.stone-page{background:
  radial-gradient(circle at 12% 8%,rgba(255,255,255,.10) 0,transparent 28%),
  radial-gradient(circle at 88% 22%,color-mix(in srgb,var(--c2) 30%,transparent) 0,transparent 26%),
  radial-gradient(circle at 70% 78%,color-mix(in srgb,var(--c3) 22%,transparent) 0,transparent 30%),
  linear-gradient(160deg,var(--dk))}
.stone-hero{background:linear-gradient(90deg,var(--hero-scrim,transparent),transparent 75%),radial-gradient(circle at 85% 0%,rgba(255,255,255,.35) 0,transparent 45%),radial-gradient(circle at 20% 100%,rgba(255,255,255,.15) 0,transparent 40%),linear-gradient(120deg,var(--hero))}
.stone-hero h1{text-shadow:0 1px 12px color-mix(in srgb,var(--hero-ink) 18%,transparent)}
html[data-theme=dark] .stone-hero{--hero-ink:#fff;--hero-ink-soft:rgba(255,255,255,.88);--hero-chip:rgba(255,255,255,.14);background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 80%),radial-gradient(circle at 85% 0%,rgba(255,255,255,.18) 0,transparent 45%),linear-gradient(120deg,var(--dk))}
/* content sits on frosted panels so text stays readable over any gradient */
body.stone-page .mineral > section{background:var(--panel);border:1px solid var(--panel-line);border-radius:18px;padding:6px 22px 16px;margin-top:20px;backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);box-shadow:var(--shadow)}
body.stone-page .mineral > section > h2{margin-top:.7em}
body.stone-page .mineral > section.meta-section{background:var(--panel)}
body.stone-page .crumbs{display:inline-block;background:var(--panel);padding:3px 12px;border-radius:999px;opacity:1}
html[data-theme=dark] body.stone-page a,html[data-theme=dark] body.stone-page h2,html[data-theme=dark] body.stone-page .crumbs{color:var(--stone-accent-dk)}
html[data-theme=dark] body.stone-page .site-footer a{color:#a5f3fc}
/* mini gradients on cards */
.card[style],.heal-card[style]{border-top:0;position:relative}
.card[style]::before,.heal-card[style]::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--c1,var(--stone)),var(--c2,var(--stone)),var(--c3,var(--stone)));z-index:1}
.card[style] .card-img,.heal-card[style] .heal-img{background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.55),transparent 40%),linear-gradient(135deg,var(--c3,#eee),var(--c2,var(--stone)),var(--c1,var(--stone)))}
.card[style] .card-body,.heal-card[style] .heal-body{background:linear-gradient(160deg,color-mix(in srgb,var(--c2,var(--stone)) 20%,#fff),color-mix(in srgb,var(--c3,var(--stone)) 14%,#fff) 70%,#fff)}
.pair-card{background:linear-gradient(90deg,color-mix(in srgb,var(--c2,var(--stone,#a78bfa)) 24%,#fff),color-mix(in srgb,var(--c3,#fff) 12%,#fff) 90%);border-left-color:var(--c1,var(--stone,#a78bfa))}
html[data-theme=dark] .card[style] .card-body,html[data-theme=dark] .heal-card[style] .heal-body{background:linear-gradient(160deg,color-mix(in srgb,var(--c1,var(--stone)) 40%,#120f22),color-mix(in srgb,var(--c2,var(--stone)) 18%,#120f22) 75%)}
html[data-theme=dark] .pair-card{background:linear-gradient(90deg,color-mix(in srgb,var(--c1,var(--stone,#a78bfa)) 45%,#15122a),color-mix(in srgb,var(--c2,#333) 15%,#15122a) 90%);color:var(--ink)}
html[data-theme=dark] .pair-card small{color:#cfcae8}
html[data-theme=dark] .pair-card em,html[data-theme=dark] .card .formula{color:var(--stone-accent-dk,#c4b5fd)}

/* --- dark mode for fixed light surfaces --- */
html[data-theme=dark] .lead{color:#d4d0ee}
html[data-theme=dark] .formula,html[data-theme=dark] .big-formula{color:#a5b4fc}
html[data-theme=dark] .stone-hero .big-formula{color:var(--hero-ink)}
html[data-theme=dark] .card,html[data-theme=dark] .heal-card,html[data-theme=dark] .stats div{background:var(--card);border-color:var(--line);color:var(--ink)}
html[data-theme=dark] .card-img,html[data-theme=dark] .heal-img{background:linear-gradient(135deg,#2a1f55,#0f3d4a)}
html[data-theme=dark] .mineral-photo,html[data-theme=dark] .stone-hero .mineral-photo{background:rgba(20,16,38,.9);border-color:var(--line)}
html[data-theme=dark] .mineral-photo img{background:#1c1833}
html[data-theme=dark] .stone-hero .mineral-photo figcaption,html[data-theme=dark] body.stone-page .stone-hero .mineral-photo figcaption a{color:#cfcae8}
html[data-theme=dark] .props{background:rgba(22,18,40,.85)}
html[data-theme=dark] .props th,html[data-theme=dark] body.stone-page .props th{background:rgba(255,255,255,.06);color:#d9d4f5}
html[data-theme=dark] .props th,html[data-theme=dark] .props td{border-color:var(--line)}
html[data-theme=dark] .meta-section{background:linear-gradient(135deg,#1d1436,#121a33);border-color:#3b2d66}
html[data-theme=dark] .meta-card{background:rgba(255,255,255,.05)}
html[data-theme=dark] .meta-dl dt{color:#d9d4f5}
html[data-theme=dark] .disclaimer{background:#2b1d0e;color:#fcd9a8;border-left-color:#f59e0b}
html[data-theme=dark] .badge{background:#2e2260;color:#ddd6fe}
html[data-theme=dark] .badge.gem{background:#0f3b47;color:#a5f3fc}
html[data-theme=dark] .badge.heal{background:#4a1530;color:#fbcfe8}
html[data-theme=dark] .id-form fieldset,html[data-theme=dark] .intent,html[data-theme=dark] .combo-picker,html[data-theme=dark] .formation-grid>div{background:rgba(22,18,40,.82);color:var(--ink)}
html[data-theme=dark] .id-form legend{color:#ddd6fe}
html[data-theme=dark] .hero-search input,html[data-theme=dark] .filter-input{background:rgba(22,18,40,.85);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] body.stone-page .links{background:var(--panel)}
html[data-theme=dark] .where-found .stone-map{border-color:var(--line);background:#11182a}
html[data-theme=dark] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6)}
html[data-theme=dark] .leaflet-container{background:#11182a}
html[data-theme=dark] .leaflet-control-attribution{background:rgba(15,12,30,.8)!important;color:#cfcae8}
html[data-theme=dark] .leaflet-control-attribution a{color:#a5f3fc!important}
html[data-theme=dark] .leaflet-popup-content-wrapper,html[data-theme=dark] .leaflet-popup-tip{background:#1b1733;color:var(--ink)}
html[data-theme=dark] .leaflet-bar a{background:#1b1733;color:#ece9ff;border-color:#2d2852}
html[data-theme=dark] .mk-o{border-color:#ddd}
html[data-theme=dark] #search{--pagefind-ui-primary:#c4b5fd;--pagefind-ui-text:#ece9ff;--pagefind-ui-background:#15122a;--pagefind-ui-border:#2d2852;--pagefind-ui-tag:#2a2450}
html[data-theme=dark] .pagefind-ui__result-excerpt mark{background:#5b21b6;color:#fff}
html[data-theme=dark] .site-footer{background:#08060f}
html[data-theme=dark] .gem-ph{color:#c4b5fd}

/* --- Liquid Glass controls --- */
.nav a,.chip,.chakra-filter button,.btn-ghost,.hero-search button,.letters a,.theme-toggle,.jump a,.pill-list a,
#search .pagefind-ui__button,#search .pagefind-ui__search-clear,.leaflet-bar a.glassy{
  --gl-tint:color-mix(in srgb,var(--stone,#8b5cf6) 18%,transparent);
  position:relative;border-radius:999px;color:var(--glass-ink);
  border:1px solid transparent;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14)) padding-box,
    linear-gradient(var(--gl-tint),var(--gl-tint)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 38%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.75)) border-box;
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 2px rgba(255,255,255,.3),inset 0 0 14px rgba(255,255,255,.22),0 4px 16px -4px rgba(30,20,80,.22);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s,background .2s,filter .2s;text-decoration:none}
.nav a:hover,.chip:hover,.chakra-filter button:hover,.btn-ghost:hover,.hero-search button:hover,.letters a:hover,.theme-toggle:hover,.jump a:hover,.pill-list a:hover{
  transform:translateY(-1px);filter:brightness(1.06) saturate(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 18px rgba(255,255,255,.3),0 8px 22px -6px color-mix(in srgb,var(--stone,#7c3aed) 55%,transparent)}
.nav a:active,.chip:active,.chakra-filter button:active,.btn-ghost:active,.hero-search button:active,.letters a:active,.theme-toggle:active,.pill-list a:active{transform:scale(.96)}
.chip.on,.letters a.current,.chakra-filter button.active{--gl-tint:color-mix(in srgb,var(--stone,#7c3aed) 45%,transparent);color:var(--glass-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 16px rgba(255,255,255,.35),0 0 0 2px color-mix(in srgb,var(--stone,#7c3aed) 60%,transparent),0 6px 20px -6px var(--stone,#7c3aed);font-weight:700}
.letters a.current{border-color:transparent}
/* header sits on a dark gradient: darker glass, light text */
.site-header .nav a,.site-header .theme-toggle{--glass-ink:#fff;color:#fff;
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.35),rgba(255,255,255,0) 55%) padding-box,linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04)) padding-box,linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 40%,rgba(255,255,255,.4)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 10px -4px rgba(0,0,0,.4)}
body.stone-page .site-header a{color:#fff}
/* chakra buttons keep their chakra colour under the glass */
.chakra-filter button{background-image:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 60%);color:#fff;opacity:.8}
.chakra-filter button.active{opacity:1;color:#fff}
.hero-search button{color:#fff;background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.55),rgba(255,255,255,0) 55%) padding-box,linear-gradient(90deg,color-mix(in srgb,var(--violet) 85%,transparent),color-mix(in srgb,var(--teal) 85%,transparent)) padding-box,linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.1) 45%,rgba(255,255,255,.6)) border-box}
html[data-theme=dark] .hero-search button{background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.35),rgba(255,255,255,0) 55%) padding-box,linear-gradient(90deg,#6d28d9cc,#0e7490cc) padding-box,linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.05) 45%,rgba(255,255,255,.4)) border-box}
html[data-theme=dark] :is(.chip,.btn-ghost,.letters a,.jump a,.pill-list a,#search .pagefind-ui__button){
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.2),rgba(255,255,255,0) 55%) padding-box,linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)) padding-box,linear-gradient(var(--gl-tint),var(--gl-tint)) padding-box,linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.05) 40%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.35)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 14px rgba(255,255,255,.06),0 4px 16px -4px rgba(0,0,0,.5)}
.chip.wide{border-radius:16px}
.chip i{box-shadow:inset 0 1px 2px rgba(255,255,255,.6)}
.theme-toggle{border:0;cursor:pointer;font-size:1.05rem;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:0}
#search .pagefind-ui__button{color:var(--glass-ink)!important}
/* solid fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .chip,.btn-ghost,.letters a,.jump a,.pill-list a{background:#f4f1ff}
  html[data-theme=dark] :is(.chip,.btn-ghost,.letters a,.jump a,.pill-list a){background:#231e40}
  .site-header .nav a{background:rgba(255,255,255,.12)}
  body.stone-page .mineral > section{background:rgba(255,255,255,.95)}
  html[data-theme=dark] body.stone-page .mineral > section{background:#15122a}
}

/* --- glitter: canvas particles (fx.js) + shimmer sweeps --- */
#glitter{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
main.wrap,.site-footer{position:relative;z-index:1}
.card,.tile,.heal-card{position:relative;overflow:hidden}
.card::after,.tile::after,.heal-card::after,.hero-search button::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);z-index:2}
.card:hover::after,.heal-card:hover::after,.tile:hover::after{animation:sweep .9s ease-out}
.tile::after{animation:sweep 1.4s ease-out 1.2s,sweep-idle 9s ease-in-out 3s infinite}
.hero-search button::after{border-radius:inherit;animation:sweep-idle 7s ease-in-out 2s infinite}
.stone-hero::after{animation:hero-glint 9s ease-in-out infinite}
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes sweep-idle{0%,80%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes hero-glint{0%,100%{opacity:.5;transform:translateX(-8%)}50%{opacity:1;transform:translateX(8%)}}
h1{position:relative}
main h1::after{content:"✦";position:absolute;font-size:.38em;margin-left:.35em;top:.15em;color:var(--stone,#a78bfa);text-shadow:0 0 8px currentColor;animation:twinkle 3.2s ease-in-out infinite}
.stone-hero h1::after{color:var(--hero-ink)}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  #glitter{display:none}
}
/* ---------- UV reactive ---------- */
.t9{background:radial-gradient(circle at 80% 20%,rgba(57,255,110,.55),transparent 45%),radial-gradient(circle at 20% 80%,rgba(255,74,42,.55),transparent 45%),linear-gradient(135deg,#140b2e,#2a0e4a)}
.badge.uv{background:#120a26;color:#fff;text-decoration:none;box-shadow:0 0 0 1px var(--glow),0 0 10px var(--glow);text-shadow:0 0 6px var(--glow)}
body.stone-page .stone-hero a.badge.uv{color:#fff}
body.uv-hub,html[data-theme=dark] body.uv-hub{background:#07040f;background-image:radial-gradient(circle at 10% 0%,rgba(124,58,237,.35),transparent 40%),radial-gradient(circle at 90% 10%,rgba(57,255,110,.12),transparent 35%),radial-gradient(circle at 70% 90%,rgba(255,74,42,.14),transparent 40%);color:#ece9ff;
  --ink:#ece9ff;--muted:#b3aed6;--card:#110b22;--line:#2d2852;--glass-ink:#f1eeff}
body.uv-hub h1{color:#fff;text-shadow:0 0 18px #a855f7,0 0 4px #fff}
body.uv-hub .lead{color:#d9d4f5}
body.uv-hub a{color:#c4b5fd}
.uv-explain{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0}
.uv-explain>div{background:rgba(255,255,255,.05);border:1px solid rgba(168,85,247,.35);border-radius:14px;padding:12px 16px;box-shadow:inset 0 0 20px rgba(168,85,247,.12)}
.uv-explain h3{margin:.2em 0 .3em;color:#e9d5ff}
.uv-safety{background:rgba(250,204,21,.1);border-left:4px solid #facc15;padding:8px 14px;border-radius:8px;color:#fde68a}
body.uv-hub .filter-input{background:rgba(255,255,255,.06);color:#fff;border-color:#3b2d66}
.uv-card{background:#0d0819;border:1px solid color-mix(in srgb,var(--glow) 60%,transparent);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 18px -4px var(--glow),inset 0 0 22px -10px var(--glow);color:#ece9ff}
.uv-card:hover{box-shadow:0 0 28px -2px var(--glow),inset 0 0 26px -8px var(--glow);color:#fff}
.uv-card .card-img{background:radial-gradient(circle,color-mix(in srgb,var(--glow) 35%,#000),#05030a 70%)}
.uv-card .card-img img{filter:saturate(1.15)}
.uv-card .gem-ph{color:var(--glow);text-shadow:0 0 12px var(--glow)}
.uv-card .card-body{background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 12%,#0d0819),#0d0819)}
.uv-card strong{color:var(--glow);text-shadow:0 0 8px color-mix(in srgb,var(--glow) 70%,transparent);font-size:1.05rem}
.uv-waves{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0}
.uv-waves i{font-style:normal;font-size:.7rem;padding:1px 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--glow) 55%,transparent);color:#e9e6ff}
.uv-line{font-size:.84rem;color:#cfcae8}
.uv-section{--panel:rgba(10,6,22,.9)!important;color:#ece9ff;border-color:color-mix(in srgb,var(--glow) 55%,transparent)!important;box-shadow:0 0 24px -8px var(--glow)!important}
body.stone-page .mineral>section.uv-section{background:linear-gradient(160deg,#0d0819,#140c2a)}
body.stone-page .uv-section h2,html[data-theme=dark] body.stone-page .uv-section h2{color:var(--glow);text-shadow:0 0 10px var(--glow)}
body.stone-page .uv-section a{color:#c4b5fd}
.uv-section .props{background:rgba(255,255,255,.04);box-shadow:none}
.uv-section .props th{background:rgba(255,255,255,.06)!important;color:#e9e6ff}
.uv-section .props td{color:#f5f3ff}
.uv-section .props th,.uv-section .props td{border-color:rgba(255,255,255,.1)}
.uv-section .props small{color:#a9a4cf;font-weight:400}
.uv-section .muted{color:#b3aed6}
.uv-body{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
@media (max-width:760px){.uv-body{grid-template-columns:1fr}}
.uv-photo{margin:0}.uv-photo img{width:100%;border-radius:12px;box-shadow:0 0 22px -6px var(--glow)}
.uv-photo figcaption{font-size:.75rem;color:#a9a4cf;word-break:break-word}
@media (min-width:761px){.nav{flex-wrap:nowrap;gap:3px}.nav a{padding:6px 10px;font-size:.88rem;white-space:nowrap}.header-inner{gap:14px}}
@media (min-width:761px) and (max-width:1080px){.brand span{display:none}.nav a{padding:5px 8px;font-size:.82rem}}
/* ---------- clearer selected state on glass controls ---------- */
.chip.on,.letters a.current,.chakra-filter button.active{
  --sel:var(--stone,#7c3aed);
  color:#2a0f5c;font-weight:700;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.7),rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--sel) 38%,rgba(255,255,255,.55)),color-mix(in srgb,var(--sel) 58%,rgba(255,255,255,.2))) padding-box,
    linear-gradient(135deg,#fff,color-mix(in srgb,var(--sel) 80%,#fff) 45%,#fff) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 2px 6px color-mix(in srgb,var(--sel) 45%,transparent),
    0 0 0 2px color-mix(in srgb,var(--sel) 85%,#fff),0 0 14px 2px color-mix(in srgb,var(--sel) 55%,transparent)}
.chip.on::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--sel);color:#fff;font-size:.72rem;font-weight:800;box-shadow:0 0 6px color-mix(in srgb,var(--sel) 70%,transparent);flex:none}
.chip.wide.on::before{position:absolute;top:8px;right:10px}
.chip.wide.on{padding-right:36px}
.chakra-filter button.active{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);background-image:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 0 0 2px #fff,0 0 0 4px currentColor,0 0 16px 2px rgba(255,255,255,.6)}
.chakra-filter button.active::before{content:"✓ "}
html[data-theme=dark] :is(.chip.on,.letters a.current){color:#fff;
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.3),rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,color-mix(in srgb,var(--sel) 55%,transparent),color-mix(in srgb,var(--sel) 75%,#000 10%)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.8),color-mix(in srgb,var(--sel) 70%,#fff) 45%,rgba(255,255,255,.6)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 2px 6px rgba(0,0,0,.35),0 0 0 2px color-mix(in srgb,var(--sel) 70%,#fff),0 0 16px 2px color-mix(in srgb,var(--sel) 65%,transparent)}
html[data-theme=dark] .chip.on::before{background:#fff;color:var(--sel)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.chip.on,.letters a.current{background:color-mix(in srgb,var(--sel) 45%,#fff)}}
/* ---------- colors ---------- */
.t10{background:linear-gradient(135deg,#e74c3c,#f1c40f 30%,#27ae60 55%,#2e86de 75%,#8e44ad)}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:22px 0 10px}
.swatch-btn{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:999px;text-decoration:none;color:var(--glass-ink);position:relative;
  border:1px solid transparent;
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%) padding-box,linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.15)) padding-box,linear-gradient(color-mix(in srgb,var(--stone) 22%,transparent),color-mix(in srgb,var(--stone) 22%,transparent)) padding-box,linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 40%,rgba(255,255,255,.75)) border-box;
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 14px rgba(255,255,255,.2),0 6px 18px -6px color-mix(in srgb,var(--stone) 60%,transparent);transition:transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s}
.swatch-btn:hover{transform:translateY(-2px);color:var(--glass-ink);box-shadow:inset 0 1px 0 #fff,0 10px 26px -6px var(--stone)}
.swatch-btn:active{transform:scale(.97)}
.swatch{flex:none;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.85),transparent 35%),linear-gradient(135deg,var(--sw));box-shadow:inset 0 -3px 6px rgba(0,0,0,.25),0 2px 8px color-mix(in srgb,var(--stone) 60%,transparent),0 0 0 2px rgba(255,255,255,.8)}
.sw-label{display:flex;flex-direction:column;line-height:1.2}.sw-label small{color:var(--muted)}
.swatch-strip{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.swatch-btn.mini{padding:4px 12px 4px 4px;gap:8px;font-size:.88rem}
.swatch-btn.mini .swatch{width:24px;height:24px}
.swatch-btn.current{font-weight:700;box-shadow:inset 0 1px 0 #fff,inset 0 2px 6px color-mix(in srgb,var(--stone) 45%,transparent),0 0 0 2px color-mix(in srgb,var(--stone) 85%,#fff),0 0 14px 2px color-mix(in srgb,var(--stone) 55%,transparent)}
.color-row h2 a{text-decoration:none;display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.dot{display:inline-block;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--sw));box-shadow:0 0 0 2px rgba(255,255,255,.8),0 2px 6px rgba(0,0,0,.2)}
body.color-page{background:radial-gradient(circle at 15% 0%,rgba(255,255,255,.5),transparent 35%),linear-gradient(160deg,color-mix(in srgb,var(--stone) 30%,#fff),#faf9ff 45%,color-mix(in srgb,var(--stone) 18%,#fff));background-attachment:fixed}
html[data-theme=dark] body.color-page{background:radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--stone) 35%,transparent),transparent 40%),linear-gradient(160deg,color-mix(in srgb,var(--stone) 22%,#0c0a18),#0c0a18 50%,color-mix(in srgb,var(--stone) 14%,#0c0a18))}
.color-hero{border-radius:22px;padding:22px 26px;margin:10px 0;color:#fff;background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.4),transparent 45%),linear-gradient(120deg,var(--sw));box-shadow:0 18px 40px -14px var(--stone);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.color-hero h1{margin:.1em 0}.color-hero p{margin:0;opacity:.95}
.color-chips{display:flex;flex-wrap:wrap;gap:6px;margin:.4em 0}
.color-chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:3px 10px 3px 4px;border-radius:999px;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2));border:1px solid rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
body.stone-page .stone-hero a.color-chip{color:#1e1b3a;text-decoration:none}
.color-chip i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),transparent 45%),var(--chip);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.color-chip:hover{filter:brightness(1.05);transform:translateY(-1px)}
html[data-theme=dark] .swatch-btn{background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.2),rgba(255,255,255,0) 55%) padding-box,linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)) padding-box,linear-gradient(color-mix(in srgb,var(--stone) 25%,transparent),color-mix(in srgb,var(--stone) 25%,transparent)) padding-box,linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.05) 40%,rgba(255,255,255,.35)) border-box}
html[data-theme=dark] .color-row h2 a{color:var(--ink)}
html[data-theme=dark] body.stone-page .stone-hero a.color-chip{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border-color:rgba(255,255,255,.25)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.swatch-btn{background:color-mix(in srgb,var(--stone) 15%,#fff)}html[data-theme=dark] .swatch-btn{background:#231e40}}
body.stone-page .stone-hero a.color-chip{color:var(--hero-ink);background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.08)),var(--hero-chip);border-color:rgba(255,255,255,.45)}

.tile.t11{background:linear-gradient(135deg,#0b1f5c,#2f4fa3 55%,#c8d4ff)}
.chatoyancy-box{margin:2.5rem 0 1rem;padding:1.2rem 1.4rem;border-radius:22px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.4)}
section.family .grid{margin-top:.6rem}

/* Handle With Care */
:root{--warn:#e8a317;--warn-deep:#b4540a}
.tile.t12{background:linear-gradient(135deg,#3a1a00,#b4540a 50%,#f5c542)}
.badge.hz{background:linear-gradient(135deg,#f5c542,#e07a10);color:#2a1500;font-weight:700;text-decoration:none;box-shadow:0 0 0 1px #fff6 inset,0 2px 8px #e07a1055}
.hz-section{border:2px solid var(--warn)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 18%,var(--card)),color-mix(in srgb,var(--card) 85%,transparent))!important}
.hz-section.sev-high{border-color:#d9381e!important}
.hz-icons,.hz-legend{display:flex;flex-wrap:wrap;gap:.4rem}
.hz-icon{padding:.25rem .7rem;border-radius:999px;font-size:.85rem;background:color-mix(in srgb,var(--warn) 22%,transparent);border:1px solid color-mix(in srgb,var(--warn) 60%,transparent);backdrop-filter:blur(10px) saturate(1.5)}
.sev{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.75rem;font-weight:700;margin-left:.4rem;color:#fff;background:#c98a10}
.sev-high .sev,.sev.sev-high{background:#d9381e}.sev.sev-moderate,.sev-moderate .sev{background:#e07a10}.sev.sev-low,.sev-low .sev{background:#5a8a2a}
.hz-card{outline:2px solid color-mix(in srgb,var(--warn) 55%,transparent);outline-offset:-2px}
.hz-card.sev-high{outline-color:#d9381e99}
.hz-mini{font-size:1rem;letter-spacing:.15rem}
.elixir-note{padding:.6rem .9rem;border-radius:14px;border-left:4px solid var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
body.hz-hub h1{background:linear-gradient(90deg,#b4540a,#e8a317,#d9381e);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=dark] .badge.hz{color:#1a0d00}

.tile.t13{background:linear-gradient(135deg,#5a0f1e,#9b2335 50%,#e8eef4)}
.ark-sites{columns:2;gap:2rem;font-size:.92rem}@media(max-width:700px){.ark-sites{columns:1}}
.ark-dino{margin:2rem 0;padding:1rem 1.3rem;border-radius:22px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.4)}

@media (min-width:761px) and (max-width:1440px){.brand span{display:none}.nav a{padding:5px 8px;font-size:.8rem}.nav{gap:2px}}
@media (min-width:761px) and (max-width:1180px){.nav{flex-wrap:wrap;row-gap:4px}}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.gallery-grid figure{margin:0;border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line)}
.gallery-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .3s}
.gallery-grid a:hover img{transform:scale(1.04)}
.gallery-grid figcaption{font-size:.75rem;padding:.35rem .6rem;color:var(--muted)}
.ark-hero{float:right;margin:0 0 1rem 1.5rem;width:min(300px,40%)}
.ark-hero img{width:100%;height:auto;border-radius:22px;box-shadow:0 10px 30px #0004;display:block}
.ark-hero figcaption{font-size:.78rem;color:var(--muted);text-align:center;margin-top:.3rem}
.ark-map{clear:both}
@media(max-width:700px){.ark-hero{float:none;width:100%;margin:0 0 1rem}}

.aka{margin:.2rem 0 .4rem;font-size:.95rem;opacity:.9;color:var(--hero-ink-soft,inherit)}
.stone-note{border-left:4px solid var(--stone,#8e44ad)}

/* ---- holographic sheen (palette.holo) ---- */
body.holo{--hx:50%;--hy:30%;--ha:0deg}
body.holo::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
   conic-gradient(from var(--ha) at var(--hx) var(--hy),#ff6ad5,#ffd36a,#7cffb2,#6ad8ff,#8b7bff,#ff6ad5),
   linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);
  background-blend-mode:screen;opacity:.32;mix-blend-mode:soft-light;filter:saturate(1.3) blur(24px);
  animation:holo-spin 18s linear infinite}
html[data-theme=dark] body.holo::before{opacity:.42;mix-blend-mode:screen;filter:saturate(1.2) blur(30px) brightness(.55)}
body.holo .stone-hero{background-image:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.25) 40%,rgba(160,255,230,.18) 50%,rgba(255,170,240,.2) 60%,transparent 80%),linear-gradient(135deg,var(--hero));background-size:250% 100%,100% 100%;animation:holo-sweep 9s ease-in-out infinite alternate}
@keyframes holo-spin{to{--ha:360deg}}
@property --ha{syntax:"<angle>";inherits:true;initial-value:0deg}
@keyframes holo-sweep{from{background-position:0% 0,0 0}to{background-position:100% 0,0 0}}
@media (prefers-reduced-motion:reduce){body.holo::before,body.holo .stone-hero{animation:none}}
/* ---- sparkle frame canvas ---- */
#sparkle-frame{position:fixed;inset:0;pointer-events:none;z-index:40}
.tile.t14{background:linear-gradient(135deg,#2a1a3a,#8e5bb8 45%,#e0607e 75%,#1e8a4a)}