/* base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one full-bleed sheet of frosted pigment glass (WebGL). A hummingbird lives behind it, perched on a twig
   at the right; the wordmark sits in the pale mist at the top, a glass specimen tray of sites rests on the dark ground. */
:root{
  --mist:#EEF6F2;
  --ink:#072219;
  --ink-soft:#2B4F42;
  --mint:#8BD9C3;
  --ruby:#C8133F;
  --ruby-light:#FF7C96;
  --glass:rgba(3,19,13,.4);
  --glass-strong:rgba(3,19,13,.78);
  --glass-line:rgba(238,246,242,.15);
  --on-glass:#E8F3EE;
  --on-glass-soft:rgba(232,243,238,.66);
  --halo:rgba(238,246,242,.8);
  --ui-fg:#072219;
  --ui-bg:rgba(238,246,242,.4);
  --ui-bg-hover:rgba(238,246,242,.7);
  --ui-line:rgba(7,34,25,.28);
  --wm:#072219;
  --tld:#C8133F;

  /* font pairing, swapped by [data-font] */
  --display:"Bodoni Moda","Bodoni 72",Didot,"Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --mono-stretch:100%; --mono-weight:400;
  --wm-size:clamp(52px, min(19vw, 14vh), 168px);
  --wm-weight:500; --wm-track:-.025em; --wm-lh:.9; --wm-stretch:100%;
  --w1-style:italic; --w1-weight:400; --w2-indent:.55em;
  --tld-style:italic; --tld-weight:400;
  --dom-weight:400; --dom-track:-.01em; --dom-stretch:100%;
  color-scheme: light;
}

/* ---- styles: the colour world of the glass ---- */
:root[data-style="night"]{
  --mist:#020B08; --ink:#E6F4EE; --ink-soft:rgba(230,244,238,.68);
  --wm:#E6F4EE; --tld:#FF5A7A; --ruby:#FF4F73;
  --glass:rgba(238,246,242,.05); --glass-strong:rgba(2,11,8,.86); --glass-line:rgba(238,246,242,.14);
  --halo:rgba(2,11,8,.85);
  --ui-fg:#E6F4EE; --ui-bg:rgba(238,246,242,.06); --ui-bg-hover:rgba(238,246,242,.14); --ui-line:rgba(238,246,242,.22);
  color-scheme: dark;
}
:root[data-style="pigment"]{
  --mist:#2FB592; --ink:#04170F; --ink-soft:rgba(4,23,15,.72);
  --wm:#04170F; --tld:#9E0B30; --ruby:#9E0B30;
  --glass:rgba(2,16,10,.5); --glass-line:rgba(238,246,242,.16);
  --halo:rgba(63,196,162,.85);
  --ui-fg:#04170F; --ui-bg:rgba(238,246,242,.22); --ui-bg-hover:rgba(238,246,242,.4); --ui-line:rgba(4,23,15,.3);
}
:root[data-style="frost"]{
  --mist:#F5FAF8; --ink:#0B2A20; --ink-soft:#4A6A5F;
  --wm:#123524; --tld:#C8133F;
  --glass:rgba(255,255,255,.42); --glass-strong:rgba(18,53,36,.86); --glass-line:rgba(18,53,36,.14);
  --on-glass:#0B2A20; --on-glass-soft:rgba(11,42,32,.62);
  --halo:rgba(245,250,248,.9);
}

/* ---- fonts ---- */
:root[data-font="swiss"]{
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wm-size:clamp(48px, min(17.5vw, 13.5vh), 160px);
  --wm-weight:800; --wm-track:-.055em; --wm-lh:.86;
  --w1-style:normal; --w1-weight:300; --w2-indent:.5em;
  --tld-style:normal; --tld-weight:800;
  --dom-weight:700; --dom-track:-.035em;
}
:root[data-font="elastic"]{
  --display:"Anybody","Arial Black",Arial,sans-serif;
  --body:"Anybody","Helvetica Neue",Arial,sans-serif;
  --mono:"Anybody",ui-monospace,Menlo,monospace;
  --mono-stretch:82%; --mono-weight:600;
  --wm-size:clamp(42px, min(15.5vw, 12.5vh), 150px);
  --wm-weight:700; --wm-track:-.01em; --wm-lh:.92;
  --w1-style:italic; --w1-weight:300; --w2-indent:.4em;
  --tld-style:normal; --tld-weight:700;
  --dom-weight:650; --dom-track:0; --dom-stretch:100%;
}
:root[data-font="terminal"]{
  --display:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  --body:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  --mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  --mono-stretch:87.5%;
  --wm-size:clamp(38px, min(13.5vw, 11vh), 132px);
  --wm-weight:600; --wm-track:-.055em; --wm-lh:1.02; --wm-stretch:87.5%;
  --w1-style:normal; --w1-weight:300; --w2-indent:1.2ch;
  --tld-style:normal; --tld-weight:600;
  --dom-weight:500; --dom-track:-.04em; --dom-stretch:87.5%;
}
:root[data-font="editorial"]{
  --display:"Instrument Serif","Times New Roman",serif;
  --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --wm-size:clamp(58px, min(20vw, 16.5vh), 196px);
  --wm-weight:400; --wm-track:-.03em; --wm-lh:.84;
  --w1-style:italic; --w1-weight:400; --w2-indent:.6em;
  --tld-style:italic; --tld-weight:400;
  --dom-weight:400; --dom-track:-.01em;
}
html,body{height:100%}
body{
  background:var(--mist);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
#bg{
  position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0;
  background:linear-gradient(to top,#03100B 0%,#082A1F 14%,#0B5641 30%,#0F977A 44%,#8BD9C3 60%,#EEF6F2 80%);
}
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; display:none;
  opacity:.45; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.no-webgl .grain{display:block}

.page{
  position:relative; z-index:1;
  min-height:100%;
  max-width:1440px; margin:0 auto;
  display:flex; flex-direction:column;
  box-sizing:border-box;
  padding-left:max(clamp(16px,4vw,56px), env(safe-area-inset-left,0px));
  padding-right:max(clamp(16px,4vw,56px), env(safe-area-inset-right,0px));
  padding-block:0 18px;
}

.top{
  display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap;
  padding-block:18px 0;
  font-family:var(--mono); font-stretch:var(--mono-stretch); font-weight:var(--mono-weight); font-size:12px; letter-spacing:.02em; color:var(--ink-soft);
}
.btn{
  font-family:var(--mono); font-stretch:var(--mono-stretch); font-weight:var(--mono-weight); font-size:12px; color:var(--ui-fg);
  background:var(--ui-bg);
  border:1px solid var(--ui-line); border-radius:3px;
  padding:7px 12px; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.btn:hover{background:var(--ui-bg-hover)}
.controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.pick{display:flex; align-items:center; gap:6px; color:var(--ink-soft)}
.pick select{
  font-family:var(--mono); font-stretch:var(--mono-stretch); font-size:12px; color:var(--ui-fg);
  background-color:var(--ui-bg); border:1px solid var(--ui-line); border-radius:3px;
  padding:6px 26px 6px 10px; cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 52%, calc(100% - 9px) 52%; background-size:4px 4px; background-repeat:no-repeat;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pick select:hover{background-color:var(--ui-bg-hover)}
.pick select option{color:#072219; background:#EEF6F2}
.kbd{opacity:.6}
:focus-visible{outline:2px solid var(--ruby); outline-offset:3px}

.hero{
  display:grid; justify-items:center;
  padding-block:clamp(56px, 9vh, 110px) 24px;
}
.wordmark{
  margin:0;
  font-family:var(--display); font-optical-sizing:auto; font-weight:var(--wm-weight); font-stretch:var(--wm-stretch);
  font-size:var(--wm-size);
  line-height:var(--wm-lh); letter-spacing:var(--wm-track); color:var(--wm);
  transition:color .4s ease;
}
.wordmark{text-align:center}
.wordmark .w1{display:block}
.wordmark .w2{display:block}
.wordmark .tld{color:var(--tld); font-style:var(--tld-style); font-weight:var(--tld-weight)}
@keyframes caret{50%{opacity:0}}
.aside{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding-bottom:.4em;
  text-shadow:0 0 22px var(--halo);
}
.tagline{margin:0; font-size:clamp(17px,1.35vw,20px); line-height:1.4; max-width:30ch; text-wrap:pretty}
.hint{margin:0; font-family:var(--mono); font-stretch:var(--mono-stretch); font-weight:var(--mono-weight); font-size:12px; line-height:1.6; color:var(--ink-soft); max-width:38ch}
.linkbtn{
  font-family:var(--mono); font-stretch:var(--mono-stretch); font-weight:var(--mono-weight); font-size:12px; color:var(--ink);
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-decoration-color:var(--ruby); text-underline-offset:4px;
}
.linkbtn:hover{color:var(--ruby)}

.flowers{margin-top:auto; padding-top:40px; display:flex; flex-direction:column}
.tray{
  background:var(--glass);
  border:1px solid var(--glass-line); border-radius:4px;
  -webkit-backdrop-filter:blur(8px) saturate(130%); backdrop-filter:blur(8px) saturate(130%);
  color:var(--on-glass);
}
.tray-head{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px;
  padding:12px 18px; border-bottom:1px solid var(--glass-line);
  font-family:var(--mono); font-stretch:var(--mono-stretch); font-weight:var(--mono-weight); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-glass-soft);
}
.specs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.specs li{min-width:0}
.specs li + li{border-left:1px solid var(--glass-line)}
.spec{
  position:relative; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  padding:20px 18px 16px;
  color:inherit; text-decoration:none;
  transition:background .25s ease;
}
.spec:hover,.spec.visiting{background:rgba(238,246,242,.06)}
:root[data-style="frost"] .spec:hover,:root[data-style="frost"] .spec.visiting{background:rgba(18,53,36,.05)}
.nectar{
  flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--ruby);
  box-shadow:0 0 0 0 rgba(255,124,150,0);
  transition:transform .3s ease, box-shadow .3s ease;
}
.spec:hover .nectar,.spec.visiting .nectar,.spec.picked .nectar{transform:scale(1.5); box-shadow:0 0 0 5px rgba(255,124,150,.18)}
.domain{
  font-family:var(--display); font-weight:var(--dom-weight); font-stretch:var(--dom-stretch);
  font-size:clamp(19px,1.7vw,25px); line-height:1.15; letter-spacing:var(--dom-track);
  overflow-wrap:break-word; min-width:0;
}
.domain i{font-style:normal; color:var(--on-glass-soft)}
.go{font-family:var(--mono); font-stretch:var(--mono-stretch); font-weight:var(--mono-weight); font-size:11px; letter-spacing:.02em; color:var(--on-glass-soft); white-space:nowrap}
.spec:hover .go{color:var(--on-glass)}
.spec.picked .go{color:var(--ruby-light)}

.labels{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 24px;
  padding-top:14px;
  font-family:var(--mono); font-stretch:var(--mono-stretch); font-weight:var(--mono-weight); font-size:11px; color:var(--on-glass-soft);
}

.tweak{
  position:fixed; z-index:5;
  top:calc(env(safe-area-inset-top,0px) + 62px);
  right:max(16px, env(safe-area-inset-right,0px));
  width:min(290px, calc(100vw - 32px)); box-sizing:border-box;
  max-height:calc(100% - 80px); overflow:auto;
  display:flex; flex-direction:column; gap:14px;
  padding:14px 16px 16px;
  background:var(--glass-strong);
  border:1px solid var(--glass-line); border-radius:4px;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  color:var(--on-glass); font-family:var(--mono); font-size:12px;
}
.tw-head{display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-glass-soft)}
.tw-x{background:none; border:0; color:var(--on-glass); font-size:18px; line-height:1; padding:2px 6px; cursor:pointer}
.tw-row{display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center}
.tw-row input{grid-column:1/-1; width:100%; margin:0; accent-color:var(--mint)}
.tw-row output{color:var(--on-glass-soft); font-variant-numeric:tabular-nums}
.tw-label{color:var(--on-glass)}
.tw-pal{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.sw{
  display:flex; flex-direction:column; gap:6px;
  background:none; border:1px solid var(--glass-line); border-radius:3px;
  padding:5px; cursor:pointer;
  font-family:var(--mono); font-size:11px; color:var(--on-glass-soft); text-align:left;
}
.sw .chip{display:block; height:34px; border-radius:2px}
.sw[aria-pressed="true"]{border-color:var(--mint); color:var(--on-glass)}
.tw-check{display:flex; align-items:center; gap:8px; cursor:pointer}
.tw-check input{margin:0; accent-color:var(--mint)}
.tw-actions{display:flex; gap:8px}
.tw-actions button{
  flex:1; font-family:var(--mono); font-size:11px; color:var(--on-glass);
  background:rgba(238,246,242,.06); border:1px solid var(--glass-line); border-radius:3px;
  padding:8px; cursor:pointer;
}
.tw-actions button:hover{background:rgba(238,246,242,.12)}
.tw-json{display:block; font-size:10.5px; line-height:1.5; color:var(--on-glass-soft); word-break:break-all; user-select:all}

.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}


/* title build: one span per letter, revealed by the cursor swarm */
.wordmark{position:relative}
.wordmark .ch{display:inline-block}
.wordmark.building .ch{
  opacity:0; transform:translateY(.12em) scale(.92); filter:blur(4px);
  transition:opacity .28s ease, transform .5s cubic-bezier(.2,.9,.25,1.3), filter .3s ease;
}
.wordmark.building .ch.on{opacity:1; transform:none; filter:none}
.wordmark .tld{transition:color .5s ease}
:root[data-font="elastic"] .wordmark:not(.building) .ch{transition:none}
.wordmark.building:not(.colored) .tld{color:var(--wm)}

.swarm{position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden}
.cur{position:absolute; left:0; top:0; will-change:transform}
.cur svg{display:block; overflow:visible; transform-origin:3px 2.5px; filter:drop-shadow(0 1px 1.5px rgba(3,19,13,.35))}
.cur .tag{
  position:absolute; left:15px; top:19px; padding:2px 6px; border-radius:3px;
  font-family:var(--mono); font-size:10.5px; line-height:1.35; white-space:nowrap;
  opacity:0; transform:scale(.6); transform-origin:0 0; transition:opacity .15s ease, transform .2s ease;
}
.cur.working .tag{opacity:1; transform:none}
.sel{position:absolute; left:0; top:0; border:1px solid currentColor; box-sizing:border-box; transition:opacity .35s ease}
.sel .h{position:absolute; width:6px; height:6px; background:#fff; border:1px solid currentColor; box-sizing:border-box}
.sel .tl{left:-3.5px; top:-3.5px} .sel .tr{right:-3.5px; top:-3.5px}
.sel .bl{left:-3.5px; bottom:-3.5px} .sel .br{right:-3.5px; bottom:-3.5px}
.sel .badge{
  position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%);
  padding:1px 6px; border-radius:3px; font-family:var(--mono); font-size:10px; line-height:1.5;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.sel .badge:empty{display:none}
.sel.flash .h,.sel.flash .badge{display:none}
.sel.rest{opacity:.4}
.sel.rest .badge{display:none}
.guide{position:absolute; left:0; top:0; background:rgba(18,53,36,.55); transition:opacity .35s ease}
.swarm .fade{opacity:0 !important}
.tw-wide{
  font-family:var(--mono); font-size:11px; color:var(--on-glass);
  background:rgba(238,246,242,.06); border:1px solid var(--glass-line); border-radius:3px;
  padding:8px; cursor:pointer;
}
.tw-wide:hover{background:rgba(238,246,242,.12)}

@media (max-width:900px){
  .specs{grid-template-columns:1fr}
  .specs li + li{border-left:0; border-top:1px solid var(--glass-line)}
  .spec{flex-direction:row; align-items:center; gap:14px; padding:16px 18px}
  .domain{flex:1}
}
@media (max-width:760px){
  .top > span{flex-basis:100%}
  .pick .kbd{display:none}
  .hero{grid-template-columns:1fr}
  .aside{padding-bottom:0}
  .wordmark .w2{padding-left:.3em}
}
@media (hover:none){ .hover-note{display:none} }
@media (prefers-reduced-motion:reduce){ .spec,.nectar,.wordmark .ch,.wordmark .tld{transition:none} }