/* ============================================================
   Augmented Serendipity — "The Adjacent Possible" idea-atlas
   ============================================================ */
:root{
  --ink:#0C1820;          /* deep petrol ink (hero / atlas) */
  --ink-2:#0F212C;
  --ink-3:#16303D;
  --paper:#F3F0E9;        /* warm porcelain (reading) */
  --paper-2:#EAE6DC;
  --card:#FBFAF6;
  --text:#1A2A31;         /* near-ink body text on paper */
  --text-soft:#4A5C63;
  --text-inv:#EAF2F2;     /* text on ink */
  --text-inv-soft:#9DB4BC;
  --line:#D8D2C4;         /* hairline on paper */
  --line-ink:#22404E;     /* hairline on ink */
  --teal:#2FB6A8;         /* systematic / connective */
  --teal-deep:#1E8C82;
  --amber:#E7A93C;        /* serendipity / spark */
  --amber-deep:#C8862A;
  --rose:#E86F9B;

  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --display:"Instrument Serif", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap:1140px;
  --measure:44rem;
  --r:14px;
  --shadow:0 1px 2px rgba(12,24,32,.06), 0 18px 40px -24px rgba(12,24,32,.35);
}

/* field hues (constellation + accents) */
:root{
  --f-ai:#6EA8FF; --f-human-machine:#9F8AF2; --f-evo-computing:#33C4B3;
  --f-evolution:#43B063; --f-open-ended:#EBB24C; --f-complexity:#F0895A;
  --f-innovation:#EE6C9B; --f-biology:#8ED26A; --f-biotech-pharma:#38BDD6;
  --f-cognition:#BC8CF0; --f-senses:#F5C63C; --f-science:#C6CE3C;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--serif); font-size:19px; line-height:1.66;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:inherit}
::selection{background:rgba(47,182,168,.28)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-soft); font-weight:500;
}

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(243,240,233,.82); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav.on-ink{ background:rgba(12,24,32,.7); border-color:var(--line-ink); }
.nav-inner{display:flex; align-items:center; gap:22px; height:62px; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.brand{display:flex; align-items:baseline; gap:.5ch; text-decoration:none; margin-right:auto}
.brand b{font-family:var(--display); font-weight:400; font-size:1.42rem; letter-spacing:.01em; color:var(--text)}
.on-ink .brand b{color:var(--text-inv)}
.brand .spark{width:9px; height:9px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 3px rgba(231,169,60,.22); display:inline-block; transform:translateY(-2px)}
.nav a.lnk{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--text-soft); transition:color .2s}
.nav a.lnk:hover{color:var(--teal-deep)}
.on-ink .nav a.lnk{color:var(--text-inv-soft)}
.on-ink .nav a.lnk:hover{color:var(--teal)}
.nav .navsearch{margin-left:2px; border:1px solid var(--line); background:var(--card);
  border-radius:999px; padding:7px 12px; display:flex; align-items:center; gap:8px; cursor:text}
.on-ink .nav .navsearch{border-color:var(--line-ink); background:rgba(255,255,255,.04)}
.nav .navsearch input{border:0; background:transparent; font-family:var(--mono); font-size:.74rem;
  color:inherit; width:96px; outline:none}
.on-ink .navsearch input{color:var(--text-inv)}
.navsearch kbd{font-family:var(--mono); font-size:.6rem; border:1px solid var(--line); border-radius:4px;
  padding:1px 5px; color:var(--text-soft)}
.on-ink .navsearch kbd{border-color:var(--line-ink); color:var(--text-inv-soft)}
.navtoggle{display:none}

/* ---------- hero / atlas ---------- */
.hero{position:relative; background:var(--ink); color:var(--text-inv); overflow:hidden}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.hero-grad{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 78% 12%, rgba(47,182,168,.10), transparent 45%),
             radial-gradient(90% 80% at 10% 100%, rgba(231,169,60,.10), transparent 50%),
             linear-gradient(180deg, rgba(12,24,32,.1), rgba(12,24,32,.66))}
.hero-inner{position:relative; z-index:3; max-width:var(--wrap); margin:0 auto; padding:118px 24px 120px}
.hero h1{font-family:var(--display); font-weight:400; letter-spacing:.005em;
  font-size:clamp(3.1rem,8.2vw,6.6rem); line-height:.98; margin:.18em 0 .28em;
  text-wrap:balance}
.hero h1 .amp{color:var(--amber); font-style:italic}
.hero .lede{max-width:33rem; font-size:1.16rem; line-height:1.6; color:var(--text-inv-soft)}
.hero .lede b{color:var(--text-inv); font-weight:600}
.hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.btn{font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; padding:13px 20px; border-radius:999px; display:inline-flex; align-items:center; gap:9px;
  border:1px solid transparent; transition:transform .15s, background .2s, border-color .2s}
.btn:hover{transform:translateY(-1px)}
.btn-solid{background:var(--amber); color:#231704; font-weight:600}
.btn-solid:hover{background:#f0b954}
.btn-ghost{border-color:var(--line-ink); color:var(--text-inv)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}
.hero-hint{position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-inv-soft);
  display:flex; gap:9px; align-items:center; opacity:.8}
.hero-tip{position:absolute; z-index:4; pointer-events:none; background:rgba(9,18,24,.94);
  border:1px solid var(--line-ink); border-radius:10px; padding:9px 12px; max-width:230px; opacity:0;
  transition:opacity .12s; transform:translate(-50%,-118%)}
.hero-tip .t{font-family:var(--serif); font-size:.9rem; line-height:1.3; color:var(--text-inv)}
.hero-tip .f{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; margin-top:4px}

/* ---------- sections on paper ---------- */
.band{padding:86px 0}
.band.tint{background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.band-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap}
.band-head h2{font-family:var(--display); font-weight:400; font-size:clamp(2rem,4.4vw,3rem); margin:.1em 0; line-height:1.02}
.band-head p{max-width:32rem; color:var(--text-soft); margin:.2em 0 0}

/* fields grid */
.fields{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.field-card{position:relative; text-decoration:none; color:inherit; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:22px 22px 20px; overflow:hidden;
  transition:transform .18s, box-shadow .2s, border-color .2s}
.field-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent}
.field-card .dot{width:11px; height:11px; border-radius:50%; background:var(--fc); display:inline-block;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--fc) 22%, transparent)}
.field-card h3{font-family:var(--display); font-weight:400; font-size:1.5rem; margin:14px 0 4px; line-height:1.06}
.field-card .k{color:var(--text-soft); font-size:.95rem; margin:0}
.field-card .n{position:absolute; top:20px; right:22px; font-family:var(--mono); font-size:.72rem;
  color:var(--text-soft)}
.field-card .bar{position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--fc), transparent)}

/* post feed / cards */
.feed{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.pcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:11px;
  transition:transform .16s, box-shadow .2s, border-color .2s}
.pcard:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.pcard .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pill{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid color-mix(in srgb,var(--fc) 45%, var(--line));
  color:color-mix(in srgb,var(--fc) 60%, var(--text)); background:color-mix(in srgb,var(--fc) 12%, transparent)}
.pcard h3{font-family:var(--display); font-weight:400; font-size:1.62rem; line-height:1.08; margin:0}
.pcard p{margin:0; color:var(--text-soft); font-size:1.01rem; line-height:1.5}
.pcard .rt{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--text-soft); margin-top:auto}
.feed.dense{grid-template-columns:repeat(3,1fr)}
.feed.dense .pcard h3{font-size:1.32rem}

/* ---------- article ---------- */
.article{padding:64px 0 40px}
.art-head{max-width:var(--measure); margin:0 auto 30px}
.art-head .crumb{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:18px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.art-head .crumb a{text-decoration:none; color:var(--teal-deep)}
.art-head h1{font-family:var(--display); font-weight:400; font-size:clamp(2.3rem,5.5vw,3.6rem);
  line-height:1.03; margin:.1em 0 .3em; text-wrap:balance}
.art-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--text-soft);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em}
.art-body{max-width:var(--measure); margin:0 auto; font-size:1.19rem; line-height:1.75}
.art-body p{margin:0 0 1.25em}
.art-body h2{font-family:var(--display); font-weight:400; font-size:1.9rem; line-height:1.1; margin:1.7em 0 .5em}
.art-body h3{font-family:var(--display); font-weight:400; font-size:1.45rem; margin:1.5em 0 .4em}
.art-body h4{font-family:var(--mono); font-weight:500; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-deep); margin:1.6em 0 .5em}
.art-body a{color:var(--teal-deep); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.art-body strong{color:#10202a}
.art-body ul{padding-left:1.15em; margin:0 0 1.3em}
.art-body li{margin:.4em 0}
.art-body blockquote{margin:1.4em 0; padding:2px 0 2px 22px; border-left:3px solid var(--amber);
  color:var(--text-soft); font-style:italic}
.art-body .tablewrap{overflow-x:auto; margin:1.5em 0; border:1px solid var(--line); border-radius:12px}
.art-body table{border-collapse:collapse; width:100%; font-size:.9rem; font-family:var(--serif)}
.art-body th{background:var(--paper-2); text-align:left; padding:11px 13px; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); font-weight:500;
  border-bottom:1px solid var(--line)}
.art-body td{padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5}
.art-body tr:last-child td{border-bottom:0}

.tags{max-width:var(--measure); margin:34px auto 0; display:flex; gap:8px; flex-wrap:wrap}
.tag{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-decoration:none;
  padding:4px 11px; border:1px solid var(--line); border-radius:999px; color:var(--text-soft)}
.tag:hover{border-color:var(--teal); color:var(--teal-deep)}

/* interactive visual mount */
.viz{max-width:56rem; margin:36px auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:22px; box-shadow:var(--shadow)}
.viz .viz-cap{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:14px; display:flex; gap:9px; align-items:center}

/* prev/next + related */
.related{background:linear-gradient(180deg,var(--paper),var(--paper-2)); padding:60px 0 80px; margin-top:50px;
  border-top:1px solid var(--line)}
.related h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-soft); text-align:center; margin:0 0 26px}
.mini-atlas-wrap{max-width:var(--wrap); margin:0 auto 40px; padding:0 24px}
.mini-atlas{width:100%; height:280px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--ink); display:block}

/* subscribe */
.sub{background:var(--ink); color:var(--text-inv); border-radius:20px; padding:46px 40px;
  position:relative; overflow:hidden}
.sub::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 120% at 90% 0%, rgba(231,169,60,.16), transparent 55%),
             radial-gradient(70% 120% at 0% 100%, rgba(47,182,168,.14), transparent 55%)}
.sub .in{position:relative; z-index:2; max-width:40rem}
.sub h3{font-family:var(--display); font-weight:400; font-size:2.2rem; margin:.1em 0 .3em; line-height:1.04}
.sub p{color:var(--text-inv-soft); margin:0 0 22px}
.sub form{display:flex; gap:10px; flex-wrap:wrap}
.sub input[type=email]{flex:1; min-width:220px; border:1px solid var(--line-ink); background:rgba(255,255,255,.05);
  color:var(--text-inv); border-radius:999px; padding:14px 18px; font-family:var(--serif); font-size:1rem; outline:none}
.sub input[type=email]:focus{border-color:var(--teal)}
.sub small{display:block; margin-top:12px; color:var(--text-inv-soft); font-family:var(--mono);
  font-size:.66rem; letter-spacing:.05em}

/* footer */
.foot{background:var(--ink); color:var(--text-inv-soft); padding:56px 0 44px; border-top:1px solid var(--line-ink)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
.foot h5{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-inv);
  margin:0 0 14px}
.foot a{display:block; text-decoration:none; color:var(--text-inv-soft); padding:3px 0; font-size:.95rem}
.foot a:hover{color:var(--teal)}
.foot .brand b{color:var(--text-inv)}
.foot .colophon{font-size:.88rem; line-height:1.6; max-width:30ch}
.foot-base{max-width:var(--wrap); margin:34px auto 0; padding:20px 24px 0; border-top:1px solid var(--line-ink);
  display:flex; justify-content:space-between; gap:16px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; flex-wrap:wrap}

/* search overlay */
.search-ov{position:fixed; inset:0; z-index:120; background:rgba(9,18,24,.5); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center; padding:12vh 20px 20px}
.search-ov.open{display:flex}
.search-box{width:100%; max-width:640px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:0 30px 80px -30px rgba(0,0,0,.5); overflow:hidden}
.search-box .top{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.search-box input{flex:1; border:0; outline:0; background:transparent; font-family:var(--serif); font-size:1.2rem; color:var(--text)}
.search-box .res{max-height:56vh; overflow:auto}
.search-box a.r{display:block; text-decoration:none; color:inherit; padding:13px 18px; border-bottom:1px solid var(--line)}
.search-box a.r:hover{background:var(--paper-2)}
.search-box a.r .rt{font-family:var(--display); font-size:1.14rem}
.search-box a.r .rm{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft)}
.search-box .empty{padding:26px 18px; color:var(--text-soft); font-family:var(--mono); font-size:.8rem}

/* atlas page controls */
.atlas-page{background:var(--ink)}
.atlas-full{position:relative; height:calc(100vh - 62px); min-height:560px}
.atlas-full canvas{position:absolute; inset:0; width:100%; height:100%}
.atlas-controls{position:absolute; z-index:5; top:20px; left:20px; display:flex; flex-wrap:wrap; gap:8px; max-width:70%}
.chip{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line-ink); color:var(--text-inv-soft); background:rgba(255,255,255,.03);
  padding:6px 11px; border-radius:999px; cursor:pointer; display:flex; gap:7px; align-items:center; user-select:none}
.chip .d{width:8px;height:8px;border-radius:50%;background:var(--fc)}
.chip.off{opacity:.34}
.chip.solo{border-color:var(--fc); color:var(--text-inv)}
.atlas-legend{position:absolute; z-index:5; right:20px; bottom:20px; font-family:var(--mono);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-inv-soft); text-align:right}
.atlas-intro{position:absolute; z-index:5; left:20px; bottom:20px; max-width:300px}
.atlas-intro h1{font-family:var(--display); font-weight:400; font-size:2rem; margin:0 0 6px; color:var(--text-inv)}
.atlas-intro p{margin:0; color:var(--text-inv-soft); font-size:.92rem; line-height:1.5}

/* archive */
.arch-field{margin-bottom:46px}
.arch-field .h{display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:16px}
.arch-field .h h3{font-family:var(--display); font-weight:400; font-size:1.7rem; margin:0}
.arch-field .h .dot{width:10px;height:10px;border-radius:50%;background:var(--fc)}
.arch-field .h .c{font-family:var(--mono); font-size:.7rem; color:var(--text-soft); margin-left:auto}
.arch-list a{display:flex; gap:14px; align-items:baseline; text-decoration:none; color:inherit;
  padding:9px 0; border-bottom:1px dotted var(--line)}
.arch-list a:hover{color:var(--teal-deep)}
.arch-list a .t{font-family:var(--serif); font-size:1.06rem}
.arch-list a .r{font-family:var(--mono); font-size:.64rem; color:var(--text-soft); margin-left:auto; white-space:nowrap}

/* reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* responsive */
@media(max-width:900px){
  .fields{grid-template-columns:repeat(2,1fr)}
  .feed,.feed.dense{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav .lnk.hideable{display:none}
  .nav .navsearch{margin-left:auto}
}
@media(max-width:560px){
  body{font-size:18px}
  .fields{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-inner{padding:88px 22px 90px}
  .atlas-controls{max-width:92%}
  .navsearch input{width:0; padding:0}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{transition:none; opacity:1; transform:none}
}

/* ============================================================
   Interactive visual widgets
   ============================================================ */
/* discovery matrix */
.dm-grid{display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:8px}
.dm-corner{}
.dm-colh{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-soft); text-align:center; align-self:end; padding:0 4px 6px}
.dm-rowh{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-soft); display:flex; align-items:center; padding-right:8px}
.dm-cell{border:1px solid var(--line); border-radius:10px; background:var(--paper); padding:13px;
  text-align:left; cursor:pointer; font-family:var(--serif); transition:transform .12s, box-shadow .18s, border-color .18s;
  min-height:96px}
.dm-cell b{font-weight:600; font-size:.92rem; line-height:1.28; color:var(--text)}
.dm-cell[data-i="0"]{border-left:3px solid var(--teal)}
.dm-cell[data-i="1"]{border-left:3px solid var(--amber)}
.dm-cell[data-i="2"]{border-left:3px solid var(--rose)}
.dm-cell.hot{transform:translateY(-2px); box-shadow:var(--shadow)}
.dm-cell.sel{border-color:var(--teal); box-shadow:0 0 0 2px rgba(47,182,168,.25)}
.dm-detail{margin-top:16px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px 18px; min-height:96px}
.dm-detail .dm-hint{color:var(--text-soft); font-size:.95rem}
.dm-detail h4{font-family:var(--display); font-weight:400; font-size:1.4rem; margin:.3em 0 .3em; text-transform:none; letter-spacing:0; color:var(--text)}
.dm-detail p{margin:0; color:var(--text-soft); line-height:1.55}
.dm-tag{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; display:inline-block;
  padding:3px 9px; border-radius:999px}
.dm-tag.b0{background:rgba(47,182,168,.15); color:var(--teal-deep)}
.dm-tag.b1{background:rgba(231,169,60,.18); color:var(--amber-deep)}
.dm-tag.b2{background:rgba(232,111,155,.16); color:#b5427a}
.dm-legend{display:flex; gap:16px; margin-top:12px; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft)}
.dm-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:middle}
.dm-legend .b0{background:var(--teal)} .dm-legend .b1{background:var(--amber)} .dm-legend .b2{background:var(--rose)}
@media(max-width:640px){ .dm-grid{grid-template-columns:1fr; } .dm-colh,.dm-rowh{display:none} .dm-cell{min-height:0} }

/* scout chart */
.sc-box{position:relative}
.sc-svg{width:100%; height:auto; display:block; font-family:var(--mono)}
.sc-grid{stroke:var(--line); stroke-width:1}
.sc-ytick,.sc-xtick{fill:var(--text-soft); font-size:11px}
.sc-ytick{text-anchor:end} .sc-xtick{text-anchor:middle}
.sc-axis{fill:var(--text-soft); font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-anchor:middle}
.sc-trend{stroke:var(--line); stroke-width:2; stroke-dasharray:2 6}
.sc-whisk{stroke:#c9c0ad; stroke-width:2; stroke-linecap:round}
.sc-dot{fill:var(--teal); stroke:#fff; stroke-width:1.5; cursor:pointer; transition:r .1s}
.sc-dot.ref{fill:var(--amber)}
.sc-dot.model{fill:#fff; stroke:var(--teal); stroke-width:2}
.sc-dot.graded{fill:var(--f-human-machine)}
.sc-dot.reserve{fill:var(--rose)}
.sc-tip{position:absolute; pointer-events:none; transform:translate(-50%,-115%); background:var(--ink); color:var(--text-inv);
  border-radius:10px; padding:10px 12px; max-width:250px; font-family:var(--serif); font-size:.86rem; line-height:1.4;
  transition:opacity .12s; box-shadow:var(--shadow); z-index:5}
.sc-tip b{display:block; font-weight:600; margin-bottom:2px}
.sc-tip .v{display:block; font-family:var(--mono); font-size:.66rem; color:var(--teal); letter-spacing:.04em; margin-bottom:6px}
.sc-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-soft); align-items:center}
.sc-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;border:1.5px solid #fff}
.sc-legend .ref{background:var(--amber)} .sc-legend .model{background:#fff;border-color:var(--teal)}
.sc-legend .graded{background:var(--f-human-machine)} .sc-legend .reserve{background:var(--rose)}
.sc-legend .note{text-transform:none; letter-spacing:0; font-style:italic}

/* senses explorer */
.se-group{margin-bottom:20px}
.se-gh{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:10px}
.se-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.se-card{border:1px solid var(--line); border-radius:10px; background:var(--paper); padding:13px 14px;
  text-align:left; cursor:pointer; font-family:var(--serif); transition:transform .12s, box-shadow .18s, border-color .18s;
  display:flex; flex-direction:column; gap:3px}
.se-card b{font-size:1.05rem; color:var(--text)}
.se-card .r{font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-soft)}
.se-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--teal)}
.se-card.open{border-color:var(--teal); box-shadow:0 0 0 2px rgba(47,182,168,.22)}
.se-body{grid-column:1/-1; display:none; background:var(--paper); border:1px dashed var(--line);
  border-radius:10px; padding:13px 15px; margin:2px 0 4px; color:var(--text-soft); font-size:.95rem; line-height:1.5}
.se-count{margin-top:8px; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--text-soft); font-style:italic}