/* Embeddings guide module */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");

:root {
  --night: #070c16;
  --night-2: #0a1220;
  --paper: #eef7ff;
  --muted: #91a9bd;
  --line: rgba(145, 192, 226, 0.16);
  --cyan: #51e7ef;
  --yellow: #ffd45e;
  --coral: #ff7669;
  --violet: #b99cff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { min-width: 320px; margin: 0; color: var(--paper); background: var(--night); font-family: "DM Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
a { color: inherit; }
canvas { display: block; max-width: 100%; }
.site-header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 1.45rem clamp(1.2rem, 4vw, 4rem); border-bottom: 1px solid rgba(255,255,255,.09); }
.brand { font-weight: 600; text-decoration: none; }
.brand span { margin-right: .55rem; color: var(--cyan); transition: transform 160ms ease; }
.brand:hover span { display: inline-block; transform: translateX(-3px); }
.site-header nav { display: flex; gap: clamp(1rem, 2.5vw, 2.4rem); }
.site-header nav a, .site-header p, .eyebrow, .chapter-number, .lab-label { font-family: "DM Mono", monospace; font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; }
.site-header nav a { color: #a7bacb; text-decoration: none; }
.site-header nav a:hover { color: var(--paper); }
.site-header p { justify-self: end; margin: 0; color: #92a5b8; }

.hero { position: relative; display: flex; align-items: center; min-height: 100svh; overflow: hidden; padding: 8rem clamp(1.2rem, 7vw, 8rem) 5rem; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; opacity: .88; animation: hero-breathe 12s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,12,22,.98) 0%, rgba(7,12,22,.91) 27%, rgba(7,12,22,.38) 62%, rgba(7,12,22,.18) 100%), linear-gradient(0deg, var(--night) 0%, transparent 24%); }
.hero-copy { position: relative; z-index: 2; width: min(710px, 67vw); }
.eyebrow { margin: 0 0 1.5rem; color: var(--cyan); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; font-size: clamp(4.7rem, 10.8vw, 10rem); font-weight: 520; letter-spacing: -.085em; line-height: .78; }
h1 em { color: var(--cyan); font-style: normal; }
.lede { max-width: 590px; margin: 2.8rem 0 0; color: #b2c6d7; font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.7; }
.start-link { display: inline-flex; gap: 1rem; margin-top: 2.5rem; color: var(--cyan); font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.start-link span { animation: nudge-down 1.8s ease-in-out infinite; }
.dimension-note { position: absolute; z-index: 2; right: 3rem; bottom: 2.5rem; margin: 0; color: rgba(222,240,255,.45); font-family: "DM Mono", monospace; font-size: .66rem; letter-spacing: .1em; }

.chapter { max-width: 1440px; margin: 0 auto; padding: clamp(6rem, 11vw, 11rem) clamp(1.2rem, 5vw, 5rem); scroll-margin-top: 1rem; }
.chapter-dark { max-width: none; background: var(--night-2); }
.chapter-dark > * { max-width: 1340px; margin-right: auto; margin-left: auto; }
.chapter-heading { display: grid; grid-template-columns: minmax(140px,.34fr) 1fr; gap: clamp(2rem, 7vw, 8rem); margin-bottom: clamp(4rem, 8vw, 7rem); }
.chapter-number { margin: .7rem 0 0; color: var(--cyan); }
.chapter-heading h2 { max-width: 950px; margin: 0; font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 520; letter-spacing: -.07em; line-height: .9; }
.chapter-heading > div > p { max-width: 700px; margin: 2rem 0 0; color: #a9bece; font-size: clamp(1rem, 1.35vw, 1.17rem); line-height: 1.75; }

.encoder-lab { display: grid; grid-template-columns: minmax(210px,.85fr) 150px minmax(320px,1.35fr); min-height: 420px; border: 1px solid var(--line); background: #08111e; }
.input-side, .vector-side { padding: clamp(1.5rem, 3vw, 3rem); }
.input-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.vector-side { min-width: 0; border-left: 1px solid var(--line); }
.lab-label { margin: 0; color: var(--muted); }
.token-picker { display: grid; gap: .6rem; margin-top: 2.2rem; }
.token-picker button, .query-picker button { padding: .8rem 1rem; border: 1px solid var(--line); background: transparent; text-align: left; }
.token-picker button:hover, .query-picker button:hover { border-color: rgba(81,231,239,.5); }
.token-picker button.is-active, .query-picker button.is-active { border-color: var(--cyan); color: var(--night); background: var(--cyan); }
.input-explanation { margin: auto 0 0; color: #9cb1c2; font-size: .83rem; line-height: 1.55; }
.encoder { position: relative; display: grid; place-content: center; justify-items: center; gap: 9px; overflow: hidden; color: var(--muted); font-family: "DM Mono", monospace; font-size: .57rem; letter-spacing: .07em; text-transform: uppercase; }
.encoder::before, .encoder::after { content: ""; position: absolute; top: 50%; width: 35%; height: 1px; background: var(--line); }
.encoder::before { left: 0; }.encoder::after { right: 0; }
.encoder i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: pulse 1.5s ease-in-out infinite; }
.encoder i:nth-of-type(2) { animation-delay: .25s; }.encoder i:nth-of-type(3) { animation-delay: .5s; }
.vector-heading { display: flex; justify-content: space-between; gap: 1rem; }
.vector-heading code { color: var(--cyan); font-family: "DM Mono", monospace; font-size: .7rem; }
.vector-bars { display: grid; grid-template-columns: repeat(8,1fr); align-items: center; gap: clamp(.3rem, 1vw, .8rem); height: 250px; margin-top: 1.4rem; }
.bar-axis { position: relative; height: 100%; }
.bar-axis::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: rgba(255,255,255,.12); }
.bar { position: absolute; right: 15%; left: 15%; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 20px rgba(81,231,239,.24); transform-origin: center; transition: height 500ms cubic-bezier(.2,.8,.2,1), top 500ms cubic-bezier(.2,.8,.2,1), background 300ms ease; }
.bar-axis:nth-child(3n) .bar { background: var(--violet); }
.bar-value { position: absolute; right: 0; left: 0; color: #9eb3c4; font-family: "DM Mono", monospace; font-size: .58rem; text-align: center; transition: top 500ms ease; }
.vector-array { overflow: hidden; margin: 1.5rem 0 0; color: #b5c6d4; font-family: "DM Mono", monospace; font-size: clamp(.62rem,1vw,.76rem); line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }
.definition-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 3rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.definition-grid article { min-height: 260px; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.definition-grid span, .db-notes span { color: var(--cyan); font-family: "DM Mono", monospace; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.definition-grid h3 { margin: 4.5rem 0 .8rem; font-size: 1.3rem; font-weight: 550; }
.definition-grid p, .db-notes p { margin: 0; color: #98afc0; font-size: .91rem; line-height: 1.65; }
code { font-family: "DM Mono", monospace; }

.map-lab { display: grid; grid-template-columns: minmax(220px,.42fr) minmax(0,1.2fr); border: 1px solid var(--line); background: #07101c; }
.map-controls { display: flex; flex-direction: column; gap: 3rem; padding: clamp(1.5rem,3vw,2.5rem); border-right: 1px solid var(--line); }
.query-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.query-picker button { padding: .55rem .7rem; font-size: .72rem; }
.nearest-readout ol { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: neighbor; }
.nearest-readout li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); color: #c5d5e1; font-size: .83rem; }
.nearest-readout li span { color: var(--muted); font-family: "DM Mono", monospace; font-size: .67rem; }
.map-note { margin: auto 0 0; color: #748ca0; font-size: .73rem; line-height: 1.55; }
.map-canvas-wrap { position: relative; min-width: 0; }
#embedding-map { width: 100%; height: auto; }
.canvas-caption { position: absolute; right: 1rem; bottom: .8rem; margin: 0; color: rgba(157,180,198,.46); font-family: "DM Mono", monospace; font-size: .55rem; letter-spacing: .06em; }
.distance-explainer { display: grid; grid-template-columns: .82fr 1.18fr; margin-top: 7rem; border-top: 1px solid var(--line); }
.angle-copy { padding: clamp(2rem,5vw,5rem) clamp(2rem,5vw,5rem) 3rem 0; }
.angle-copy h3 { max-width: 560px; margin: 1.5rem 0; font-size: clamp(2.1rem,4vw,4rem); font-weight: 520; letter-spacing: -.05em; line-height: 1; }
.angle-copy > p:not(.chapter-number) { color: #a7bdcd; line-height: 1.7; }
.angle-copy label { display: flex; justify-content: space-between; margin-top: 3rem; color: #a9bdcd; font-family: "DM Mono", monospace; font-size: .65rem; text-transform: uppercase; }
.angle-copy output { color: var(--cyan); }
input[type="range"] { width: 100%; margin-top: 1rem; accent-color: var(--cyan); }
.angle-visual { position: relative; display: grid; place-items: center; min-height: 520px; border-left: 1px solid var(--line); }
#cosine-canvas { width: 100%; height: auto; }
.similarity-score { position: absolute; top: 1.5rem; right: 1.5rem; display: grid; justify-items: end; }
.similarity-score span { color: var(--muted); font-family: "DM Mono", monospace; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.similarity-score strong { color: var(--yellow); font-size: 2.4rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.search-demo { border: 1px solid var(--line); background: #08111e; }
.search-topbar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 2rem; border-bottom: 1px solid var(--line); }
.query-text { margin: .5rem 0 0; font-size: 1.25rem; }
#run-search { padding: .8rem 1rem; border: 1px solid var(--cyan); color: var(--night); background: var(--cyan); font-size: .75rem; }
#run-search span { display: inline-block; margin-left: .8rem; }
.pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; padding: 2rem; border-bottom: 1px solid var(--line); }
.pipeline-step { position: relative; display: grid; gap: .7rem; min-height: 150px; padding: 1.3rem; border: 1px solid var(--line); background: rgba(4,11,20,.45); transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
.pipeline-step.is-running { border-color: var(--cyan); box-shadow: inset 0 0 35px rgba(81,231,239,.07); transform: translateY(-4px); }
.pipeline-step span { color: var(--cyan); font-family: "DM Mono", monospace; font-size: .62rem; }
.pipeline-step strong { align-self: end; font-size: 1.05rem; font-weight: 500; }
.pipeline-step code { color: var(--muted); font-size: .68rem; }
.pipeline-arrow { display: grid; place-content: center; width: clamp(35px,5vw,75px); color: var(--muted); }
.result-grid { display: grid; grid-template-columns: repeat(3,1fr); opacity: 1; transition: opacity 200ms ease, transform 300ms ease; }
.result-grid.is-searching { opacity: .16; transform: translateY(8px); }
.result-grid article { min-height: 210px; padding: 2rem; border-right: 1px solid var(--line); }
.result-grid article:last-child { border: 0; }
.result-grid span { color: var(--yellow); font-family: "DM Mono", monospace; font-size: .62rem; text-transform: uppercase; }
.result-grid h3 { margin: 3rem 0 .7rem; font-size: 1.25rem; font-weight: 550; }
.result-grid p { margin: 0; color: #94aabc; font-size: .84rem; line-height: 1.55; }
.db-definition { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,8vw,9rem); margin-top: clamp(5rem,9vw,9rem); }
.pull-quote { margin: 0; font-size: clamp(2rem,4vw,4rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.05; }
.pull-quote em { color: var(--cyan); font-style: normal; }
.db-notes { display: grid; gap: 0; border-top: 1px solid var(--line); }
.db-notes article { display: grid; grid-template-columns: 110px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }

.finale { display: grid; justify-items: center; padding: clamp(7rem,14vw,14rem) 1.2rem; overflow: hidden; border-top: 1px solid var(--line); background: radial-gradient(circle at center, rgba(81,231,239,.08), transparent 34rem); text-align: center; }
.finale h2 { margin: 1.5rem 0 0; font-size: clamp(5rem,14vw,13rem); font-weight: 520; letter-spacing: -.09em; line-height: .68; }
.finale h2 span { color: var(--cyan); }
.finale > p:not(.chapter-number) { max-width: 590px; margin: 4rem 0 0; color: #9eb4c5; line-height: 1.7; }
.finale a { display: inline-flex; gap: .8rem; margin-top: 2.5rem; color: var(--cyan); font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }

@keyframes pulse { 0%,100% { opacity:.3; transform:scale(.7); } 50% { opacity:1; transform:scale(1.1); } }
@keyframes nudge-down { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }
@keyframes hero-breathe { from { transform:scale(1); } to { transform:scale(1.035); } }
@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr 1fr; }.site-header nav { display:none; }
  .hero-copy { width: min(720px,90vw); }.hero > img { object-position: 62% center; }.hero-shade { background: rgba(7,12,22,.72); }
  .chapter-heading { grid-template-columns: 1fr; gap:1.5rem; }
  .encoder-lab { grid-template-columns: 1fr; }.encoder { min-height:100px; }.encoder::before,.encoder::after { width:40%; }.input-side,.vector-side { border:0; border-bottom:1px solid var(--line); }.input-explanation { margin-top:2rem; }
  .definition-grid { grid-template-columns:1fr; }.definition-grid article { min-height:0; }.definition-grid h3 { margin-top:2.5rem; }
  .map-lab,.distance-explainer,.db-definition { grid-template-columns:1fr; }.map-controls { border-right:0; border-bottom:1px solid var(--line); }.angle-visual { border-top:1px solid var(--line); border-left:0; }.angle-copy { padding-right:0; }
  .pipeline { grid-template-columns:1fr; }.pipeline-arrow { width:auto; height:42px; transform:rotate(90deg); }
}
@media (max-width: 620px) {
  .site-header { padding:1.15rem; }.site-header p { font-size:.55rem; }
  h1 { font-size:clamp(4rem,22vw,6rem); }.hero { align-items:flex-end; padding-bottom:7rem; }.hero > img { opacity:.5; object-position:70% center; }.dimension-note { right:1.2rem; }
  .chapter { padding-right:1.2rem; padding-left:1.2rem; }
  .token-picker { grid-template-columns:1fr 1fr; }.vector-bars { height:210px; }
  .search-topbar { align-items:flex-start; flex-direction:column; }.result-grid { grid-template-columns:1fr; }.result-grid article { min-height:0; border-right:0; border-bottom:1px solid var(--line); }.result-grid h3 { margin-top:2rem; }
  .db-notes article { grid-template-columns:1fr; gap:.7rem; }.finale h2 { line-height:.74; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; } }