:root {
  color-scheme:dark;
  --bg:#080d19;
  --panel:#101827;
  --line:#243147;
  --muted:#95a4bd;
  --text:#edf2ff;
  --cyan:#38dfd1;
  --purple:#9d81ff;
  --blue:#5583ff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:25px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
button:disabled {
  cursor:wait
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:4px
}
button {
  color:inherit
}
h1,h2,h3,p,figure {
  margin:0
}
button,input,select,textarea {
  border-radius:9px
}
input,select,textarea {
  width:100%;
  min-width:0;
  background:#0b1220;
  border:1px solid #344159;
  color:var(--text);
  padding:11px 12px
}
input::placeholder,textarea::placeholder {
  color:#7788a2;
  opacity:1
}
textarea {
  resize:vertical;
  min-height:112px;
  line-height:1.65
}
select {
  padding-right:20px
}
label {
  display:block;
  font-size:12px;
  font-weight:600;
  margin:17px 0 7px;
  color:#c6d2e5
}
summary {
  cursor:pointer
}
pre {
  font:inherit;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
[hidden] {
  display:none!important
}
.topbar {
  height:88px;
  border-bottom:1px solid #1a2638;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:0 max(32px,calc((100vw - 1320px)/2));
  background:#090f1b
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:22px;
  font-weight:800;
  letter-spacing:.01em
}
.brand-mark {
  width:38px;
  height:38px;
  color:var(--cyan);
  filter:drop-shadow(0 0 12px #28d6c93d)
}
.brand-sub {
  display:block;
  font-size:8px;
  letter-spacing:.22em;
  color:var(--muted);
  margin-top:-4px;
  font-weight:600
}
.topbar nav {
  display:flex;
  gap:34px;
  font-size:13px;
  color:var(--muted)
}
.topbar nav a:hover,.topbar nav .nav-active {
  color:var(--text)
}
.connection {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  background:#101c27;
  border:1px solid #263b44;
  border-radius:30px;
  padding:7px 12px;
  color:#aed1cb
}
.dot {
  width:6px;
  height:6px;
  border-radius:50%;
  display:inline-block;
  flex:none;
  background:var(--cyan);
  box-shadow:0 0 12px #38dfd152
}
.connection.unavailable {
  color:#e7b77f;
  border-color:#695038
}
.connection.unavailable .dot {
  background:#e7b77f
}
main {
  max-width:1384px;
  padding:0 32px;
  margin:auto
}
.hero {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:52px;
  align-items:center;
  padding:67px 0 62px
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--cyan);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em
}
.eyebrow.small {
  font-size:9px;
  letter-spacing:.14em
}
h1 {
  font-size:clamp(38px,4.1vw,59px);
  letter-spacing:-.045em;
  line-height:1.12;
  font-weight:740;
  margin:20px 0
}
h1 span {
  color:var(--cyan)
}
.hero-description {
  max-width:415px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8
}
.hero-stats {
  display:flex;
  gap:30px;
  margin:27px 0 23px
}
.hero-stats>div {
  padding-right:28px;
  border-right:1px solid var(--line)
}
.hero-stats>div:last-child {
  padding:0;
  border:0
}
.hero-stats strong {
  font-size:24px;
  font-weight:650;
  letter-spacing:-.04em;
  display:block
}
.hero-stats span {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:1px
}
.text-link {
  color:#bcb0ff;
  font-size:12px;
  font-weight:600;
  display:inline-flex;
  gap:25px
}
.text-link:hover {
  color:var(--cyan)
}
.network-panel {
  min-width:0;
  border:1px solid #25314b;
  border-radius:18px;
  overflow:hidden;
  background:radial-gradient(ellipse at 55% 60%,#27204a55,transparent 65%),#0c1321;
  box-shadow:0 25px 70px #00000020
}
.panel-heading {
  padding:17px 20px;
  border-bottom:1px solid #26304488;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px
}
.panel-heading>span {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:8px;
  font-weight:600;
  letter-spacing:.12em;
  color:#abb9d2
}
.network-panel figcaption {
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid #26304488;
  padding:14px 20px;
  color:#899ab6;
  font-size:9px
}
.process-panel .panel-heading a { color: var(--cyan); font-size: 11px; white-space: nowrap; }
.project-process { list-style: none; margin: 0; padding: 8px 20px; }
.project-process > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.project-process > li + li { border-top: 1px solid #26304488; }
.process-number { color: var(--cyan); font: 11px/1.8 ui-monospace, monospace; }
.project-process h2 { font-size: 14px; line-height: 1.4; font-weight: 600; margin: 0 0 5px; }
.project-process p { color: #b8c9df; font-size: 11px; line-height: 1.75; }
.process-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.process-inputs strong { display: block; color: var(--cyan); font-size: 10px; }
.project-process .process-equation { margin-top: 7px; color: #c1b4ef; font-size: 10px; }
.process-panel figcaption { display: block; line-height: 1.75; font-size: 10px; }
.workspace {
  display:grid;
  grid-template-columns:420px minmax(0,1fr);
  gap:28px;
  padding-bottom:50px;
  align-items:start;
  border-top:1px solid #1d293d;
  padding-top:34px
}
.search-card {
  background:linear-gradient(150deg,#141e30,#101724 65%);
  border:1px solid #2a374e;
  border-radius:16px;
  padding:25px
}
.card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.card-heading h2 {
  font-size:20px;
  font-weight:650;
  letter-spacing:-.025em;
  margin-top:5px
}
.step-mark {
  font-size:30px;
  font-weight:300;
  letter-spacing:-.04em;
  color:#3c506b
}
.examples {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:10px 0 18px;
  align-items:center
}
.examples>span {
  font-size:9px;
  color:var(--muted);
  width:100%
}
.examples button {
  padding:4px 9px;
  background:#192536;
  border:1px solid #31425b;
  border-radius:20px;
  font-size:10px;
  color:#bbcee4
}
.examples button:hover {
  border-color:#59b6b9;
  color:var(--cyan)
}
.field-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 88px;
  gap:12px
}
.field-grid label {
  margin-top:0
}
.field-help {
  font-size:11px;
  color:var(--muted);
  margin-top:7px;
  line-height:1.6
}
.filter-details {
  margin-top:20px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.filter-details>summary {
  padding:13px 0;
  font-size:12px;
  color:#c6d2e5
}
.filter-details>summary span {
  float:right;
  color:#8ea0bb;
  font-size:10px;
  padding-top:2px
}
.filter-content {
  padding:5px 0 14px
}
.field-grid.years {
  grid-template-columns:1fr 1fr
}
.text-button {
  border:0;
  background:none;
  padding:6px 0;
  color:var(--cyan);
  font-size:11px;
  text-align:left
}
.filter-content .text-button {
  margin-top:9px
}
.llm-option {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:19px 0 13px;
  cursor:pointer
}
.llm-option strong {
  font-size:12px;
  font-weight:600;
  color:#e2eaff
}
.llm-option small {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:400;
  line-height:1.65;
  margin-top:4px
}
.optional-tag {
  font-size:7px;
  color:#b6a5ff;
  background:#8a63eb1c;
  padding:3px 5px;
  letter-spacing:.08em;
  border:1px solid #48355d;
  border-radius:4px;
  margin-left:3px;
  vertical-align:middle
}
.switch {
  position:relative;
  display:block;
  flex:none;
  width:33px;
  height:20px;
  margin-top:2px
}
.switch input {
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer
}
.switch-track {
  display:block;
  width:33px;
  height:20px;
  background:#39465c;
  border-radius:20px;
  pointer-events:none;
  transition:background .2s
}
.switch-track:after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#c6d1e4;
  transition:transform .2s
}
.switch input:checked+.switch-track {
  background:#267f76
}
.switch input:checked+.switch-track:after {
  transform:translateX(13px);
  background:#66ffe7
}
.switch input:focus-visible+.switch-track {
  outline:2px solid var(--cyan);
  outline-offset:4px
}
.auth-details summary {
  font-size:10px;
  color:#92a4c0
}
.auth-details label {
  font-size:11px
}
.primary-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  background:linear-gradient(105deg,#436dec,#7863ef);
  border:1px solid #8596ff4d;
  padding:12px 16px;
  margin-top:20px;
  font-size:13px;
  font-weight:650;
  box-shadow:0 5px 20px #526dff20;
  transition:filter .2s,transform .2s
}
.primary-button:hover {
  filter:brightness(1.15)
}
.primary-button:active {
  transform:translateY(1px)
}
.primary-button:disabled {
  opacity:.75
}
.button-arrow {
  font-size:20px;
  line-height:1
}
.keyboard-hint {
  text-align:center;
  font-size:9px;
  color:#8291aa;
  margin-top:9px
}
.scope-note {
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:13px 5px;
  color:#92a0b7;
  font-size:10px;
  line-height:1.7
}
.scope-note>span {
  color:#ac9fe1;
  font-size:14px
}
.response-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  min-height:35px
}
.response-heading h2 {
  font-size:13px;
  font-weight:600;
  color:#c3d1e6
}
.session-tag {
  border:1px solid #26344b;
  color:#8799b5;
  border-radius:5px;
  font-size:8px;
  padding:3px 7px;
  letter-spacing:.08em
}
.request-status {
  font-size:11px;
  color:var(--muted);
  min-height:19px;
  margin:6px 0 13px
}
.request-status.error {
  color:#ffc28e
}
.empty-state {
  border:1px dashed #2b3851;
  border-radius:16px;
  min-height:530px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:35px 27px;
  background:radial-gradient(ellipse at 50% 33%,#19313d25,transparent 60%)
}
.empty-state>svg {
  width:89px;
  height:89px;
  color:#6583ad;
  margin-bottom:30px;
  opacity:.8
}
.empty-state svg circle {
  fill:#273f5d;
  stroke:#7d9abc
}
.empty-state h3 {
  font-size:25px;
  font-weight:550;
  letter-spacing:-.03em;
  margin:11px 0
}
.empty-state>p:not(.eyebrow) {
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}
.method-guide {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  border-top:1px solid #243048;
  padding-top:27px;
  margin-top:39px;
  text-align:left;
  width:100%
}
.method-guide span {
  display:block;
  color:#7ba5bb;
  font-size:9px;
  margin-bottom:5px
}
.method-guide strong {
  font-size:12px;
  font-weight:550
}
.method-guide p {
  font-size:10px;
  color:var(--muted);
  line-height:1.7;
  margin-top:5px
}
.answer-card {
  background:linear-gradient(135deg,#142231,#111827 65%);
  border:1px solid #314b55;
  border-radius:15px;
  padding:24px
}
.answer-card .card-heading h3 {
  font-size:15px;
  font-weight:600
}
.answer-symbol {
  color:var(--cyan);
  font-size:24px
}
.mode-badge {
  font-size:10px;
  color:#bbd9db;
  background:#16313788;
  border:1px solid #2c575d;
  border-radius:7px;
  padding:6px 10px;
  margin:15px 0;
  display:inline-block
}
.mode-badge.generated {
  color:#cfbcff;
  background:#2b2243;
  border-color:#534476
}
#answer {
  font-size:13px;
  color:#d0dcee;
  line-height:1.85;
  margin:10px 0 20px
}
.warning:empty {
  display:none
}
.warning {
  background:#46311c5c;
  border:1px solid #7c5a32;
  border-radius:8px;
  padding:11px;
  color:#f1c593;
  font-size:12px;
  margin-bottom:16px
}
.empty-help {
  font-size:12px;
  color:#b4c1d5
}
.trace-details {
  border-top:1px solid #2b3a4b;
  padding-top:12px
}
.trace-details summary {
  color:#99acc6;
  font-size:10px
}
.trace-details pre {
  font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:10px;
  color:#9bb0c8;
  padding-top:12px
}
.sources-section {
  margin-top:25px
}
.sources-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px
}
.sources-heading h3 {
  font-size:13px;
  font-weight:600
}
.sources-heading>span {
  font-size:10px;
  color:var(--muted)
}
#results {
  padding:0;
  list-style:none;
  margin:0;
  display:grid;
  gap:11px
}
.reference-card {
  background:#101827;
  border:1px solid #26364d;
  border-radius:12px;
  padding:18px 20px;
  transition:border-color .2s
}
.reference-card:hover {
  border-color:#48617e
}
.reference-top {
  display:flex;
  gap:12px;
  align-items:baseline
}
.reference-number {
  font-size:10px;
  color:#a9a0ec;
  background:#25243e;
  border:1px solid #3d365c;
  border-radius:5px;
  padding:2px 6px;
  flex:none
}
.reference-card h4 {
  font-size:13px;
  font-weight:600;
  line-height:1.6;
  margin:0;
  color:#e0e8fa
}
.reference-card p {
  font-size:11px;
  color:#a1b3cb;
  margin-top:8px
}
.reference-card .reference-affiliation {
  font-size:10px;
  color:#879ab6
}
.reference-card a {
  display:inline-block;
  color:var(--cyan);
  font-size:11px;
  margin-top:12px;
  margin-right:15px
}
.reference-card details {
  margin-top:10px;
  border-top:1px solid #223047;
  padding-top:8px;
  font-size:9px;
  color:#8296b2
}
.reference-card details p {
  font:10px/1.6 ui-monospace,monospace;
  overflow-wrap:anywhere
}
.spinner {
  display:none;
  width:17px;
  height:17px;
  border:2px solid #ffffff44;
  border-top-color:white;
  border-radius:50%;
  animation:spin 1s linear infinite
}
.is-loading .spinner {
  display:block
}
.is-loading .button-arrow {
  display:none
}
footer {
  border-top:1px solid var(--line);
  padding:24px 0 30px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  color:#8193af;
  font-size:10px
}
.footer-brand {
  font-size:12px;
  letter-spacing:.04em;
  color:#bac8de;
  font-weight:650
}
.footer-brand span {
  font-weight:400;
  color:#8193af;
  font-size:10px;
  letter-spacing:0
}
footer>p {
  align-self:center
}
footer details {
  flex-basis:100%
}
footer details p {
  max-width:720px;
  margin-top:8px
}
.project-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; padding: 30px 0; font-size: 12px; line-height: 1.8; }
.project-footer p { margin: 4px 0; }
.project-footer .footer-brand { font-size: 18px; }
.project-footer .footer-brand span { display: block; font-size: 12px; }
.project-footer .footer-student-name { color: #e2edf9; font-size: 15px; font-weight: 600; }
.project-footer .footer-scope { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); max-width: 920px; }
.footer-manual { grid-column: 1 / -1; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .project-footer { grid-template-columns: minmax(0, 1fr); }
  .process-inputs { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .process-panel .panel-heading { flex-wrap: wrap; }
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@media(min-width:1600px) {
  .hero {
    padding-top:80px;
    padding-bottom:75px
  }
  .hero-copy h1 {
    font-size:62px
  }
}
@media(max-width:1050px) {
  .hero {
    gap:25px
  }
  .workspace {
    grid-template-columns:360px minmax(0,1fr);
    gap:20px
  }
  .search-card {
    padding:20px
  }
  .hero-stats {
    gap:20px
  }
  .hero-stats>div {
    padding-right:20px
  }
  .panel-heading {
    padding:14px
  }
  .panel-heading>span {
    font-size:7px
  }
  .network-panel figcaption {
    flex-wrap:wrap
  }
  .empty-state {
    padding:28px 20px
  }
  .empty-state h3 {
    font-size:21px
  }
  .method-guide {
    gap:15px
  }
}
@media(max-width:800px) {
  .topbar {
    padding:0 22px;
    height:76px
  }
  .topbar nav {
    gap:18px;
    font-size:12px
  }
  .connection {
    font-size:9px;
    padding:6px 8px
  }
  main {
    padding:0 22px
  }
  .hero {
    grid-template-columns:1fr;
    padding:37px 0 30px;
    gap:30px
  }
  .hero-copy {
    max-width:550px
  }
  h1 {
    font-size:48px
  }
  .network-panel {
    max-width:650px;
    width:100%
  }
  .workspace {
    grid-template-columns:1fr;
    gap:26px
  }
  .search-card {
    padding:24px
  }
  .field-grid {
    grid-template-columns:1fr 110px
  }
  .empty-state {
    min-height:360px
  }
  .method-guide {
    max-width:460px
  }
  .scope-note {
    max-width:500px
  }
  .panel-heading>span {
    font-size:8px
  }
  .response-heading h2 {
    font-size:14px
  }
}
@media(max-width:480px) {
  .topbar {
    padding:0 17px
  }
  .brand {
    font-size:18px;
    gap:7px
  }
  .brand-mark {
    width:31px;
    height:31px
  }
  .brand-sub {
    font-size:6px
  }
  .topbar nav {
    display:none
  }
  .connection {
    max-width:155px
  }
  .hero {
    padding-top:30px
  }
  main {
    padding:0 17px
  }
  h1 {
    font-size:43px
  }
  .eyebrow {
    font-size:8px
  }
  .hero-description {
    font-size:14px
  }
  .hero-stats {
    gap:16px
  }
  .hero-stats strong {
    font-size:22px
  }
  .hero-stats>div {
    padding-right:16px
  }
  .hero-stats span {
    font-size:9px
  }
  .network-labels {
    font-size:8px;
    padding:18px 15px 0
  }
  .network-panel figcaption {
    font-size:8px;
    padding:12px 14px
  }
  .search-card {
    padding:20px
  }
  .card-heading h2 {
    font-size:19px
  }
  .optional-tag {
    font-size:6px
  }
  .response-heading h2 {
    font-size:12px
  }
  .session-tag {
    font-size:7px
  }
  .method-guide {
    gap:15px
  }
  .empty-state h3 {
    font-size:22px
  }
  .empty-state .eyebrow {
    font-size:8px
  }
  .answer-card {
    padding:19px
  }
  .reference-card {
    padding:16px
  }
  .reference-top {
    gap:9px
  }
  .field-grid {
    grid-template-columns:minmax(0,1fr) 80px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
.loading-state {
  min-height:300px;
  border:1px solid #2b3851;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 30%,#253b5933,transparent 65%);
  padding:30px
}
.loading-orbit {
  font-size:45px;
  color:var(--purple)
}
.loading-state strong {
  font-size:18px;
  font-weight:500;
  letter-spacing:-.02em
}
.loading-state p {
  font-size:12px;
  color:var(--muted)
}

/* Presentación académica del proyecto final. */
.project-credits {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 24px;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 12px;
  background: linear-gradient(110deg, #11202b, #101725);
}
.project-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.author-monogram {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid #3b656a;
  border-radius: 12px;
  background: #17353c;
  color: var(--cyan);
  font-size: 15px;
  font-weight: 600;
}
.credit-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  color: #a5b7cd;
  margin-bottom: 5px;
}
.project-credits h2, .credit-value {
  font-size: 12px;
  line-height: 1.65;
  font-weight: 600;
  color: #e2ebfa;
}
.credit-detail {
  font-size: 10px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 3px;
}
@media (max-width: 1050px) {
  .project-credits { gap: 20px; padding: 20px; }
  .author-monogram { display: none; }
}
@media (max-width: 800px) {
  .project-credits { grid-template-columns: 1fr; gap: 18px; }
  .project-credits > div + div { border-top: 1px solid var(--line); padding-top: 16px; }
  .author-monogram { display: grid; }
  .project-credits h2, .credit-value { font-size: 13px; }
}

/* Ficha de presentación: información técnica separada del buscador. */
.credit-link { display: inline-block; color: var(--cyan); font-size: 10px; margin-top: 5px; }
.technical-sheet { padding: 42px 0 48px; border-top: 1px solid var(--line); }
.technical-header { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 30px; }
.technical-header h2 { font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; line-height: 1.2; margin: 12px 0; }
.technical-header > div > p:last-child { font-size: 13px; color: var(--muted); max-width: 670px; }
.secondary-button { flex: none; background: #1b2440; color: #c5b9ff; border: 1px solid #4a4167; padding: 10px 15px; font-size: 12px; }
.technical-intro, .technical-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.technical-intro { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: #111b2b; }
.technical-kicker { color: var(--cyan); font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.technical-intro h3 { font-size: 18px; font-weight: 600; margin: 8px 0; }
.technical-intro p, .technical-columns p { color: #acbcd3; font-size: 13px; line-height: 1.8; }
.technical-columns p + p { margin-top: 12px; }
.technical-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 28px 0; }
.technical-facts > div { border-left: 2px solid #3c526d; padding-left: 16px; }
.technical-facts strong { font-size: 24px; letter-spacing: -.035em; display: block; }
.technical-facts span { font-size: 10px; color: var(--muted); display: block; margin-top: 3px; }
.technical-block { margin: 26px 0 34px; }
.technical-block-heading { margin-bottom: 19px; }
.technical-block-heading > span { color: #a699df; font-size: 9px; letter-spacing: .12em; }
.technical-block-heading h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; }
.technical-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: 10px; }
.technical-flow li { position: relative; background: #101b2a; border: 1px solid #2c4058; border-radius: 12px; padding: 18px; }
.technical-flow li + li:before { content: '→'; position: absolute; left: -13px; top: 28px; color: var(--cyan); z-index: 1; }
.flow-number { color: var(--cyan); font-size: 10px; }
.technical-flow h4 { font-size: 15px; margin: 9px 0; }
.technical-flow p { color: #aabbd1; font-size: 11px; line-height: 1.75; }
.technical-flow small { color: #b5a4ed; display: block; font-size: 9px; margin-top: 12px; }
.technical-note { background: #142232; border-left: 2px solid #516a8b; padding: 13px 16px; color: #afc0d7; font-size: 11px; line-height: 1.8; margin-top: 16px; }
.retrieval-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.retrieval-cards article { border: 1px solid #303752; border-radius: 13px; padding: 22px; background: linear-gradient(140deg,#181d33,#101825); }
.method-pill { color: #bcb0f7; font-size: 8px; letter-spacing: .1em; padding: 4px 7px; background: #282340; border-radius: 5px; }
.retrieval-cards h4 { font-size: 23px; margin: 12px 0 9px; letter-spacing: -.02em; }
.retrieval-cards p, .retrieval-cards dd { font-size: 12px; color: #afbed3; line-height: 1.75; }
.retrieval-cards dl { border-top: 1px solid #2a354b; margin: 18px 0 0; padding-top: 6px; }
.retrieval-cards dt { font-size: 10px; color: #d4deef; margin-top: 12px; }
.retrieval-cards dd { margin: 3px 0 0; font-size: 11px; }
.encoder-equation { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #14222c; border: 1px solid #2d5456; border-radius: 12px; padding: 22px; margin: 0 0 24px; }
.encoder-equation > span { font-weight: 600; font-size: 14px; }
.encoder-equation small { display: block; font-weight: 400; color: #a5bdc6; font-size: 10px; margin-top: 3px; }
.encoder-equation b { color: var(--cyan); font-weight: 400; }
.technical-columns h4, .competency-grid h4 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
.technical-sheet code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .88em; color: #c0b7e9; overflow-wrap: anywhere; }
.technical-disclosure { margin: 12px 0; border: 1px solid #2d3a50; border-radius: 12px; background: #101827; }
.technical-disclosure > summary { padding: 20px 23px; font-size: 16px; font-weight: 500; }
.technical-disclosure > summary > span { display: block; font-size: 9px; color: #a599d8; letter-spacing: .1em; margin-bottom: 7px; }
.technical-disclosure-body { padding: 0 23px 23px; }
.technical-table-wrap { overflow-x: auto; }
.technical-sheet table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
.technical-sheet caption { text-align: left; color: #becbe0; font-size: 12px; margin: 10px 0; }
.technical-sheet th { color: #d8e4f5; font-weight: 600; background: #192437; }
.technical-sheet td, .technical-sheet th { padding: 12px; border-bottom: 1px solid #2a364c; vertical-align: top; }
.technical-sheet td { color: #aebed4; }
.file-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; margin-top: 24px; }
.file-grid > div { background: #182237; padding: 15px; border-radius: 8px; }
.file-grid code { font-size: 11px; }
.file-grid p { color: #a6b7ce; font-size: 11px; margin-top: 7px; }
.competency-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; margin-top: 24px; }
.competency-grid p { color: #b2c2d6; font-size: 12px; }
.competency-grid small { display: block; font-size: 10px; color: #8da3bd; margin-top: 10px; }
.technical-columns ul { padding-left: 17px; color: #b2c2d6; font-size: 12px; line-height: 1.8; }
.technical-columns li + li { margin-top: 7px; }
.presentation-script { border: 1px solid #345853; background: #122722; padding: 25px; border-radius: 12px; margin-top: 28px; }
.presentation-script .presentation-summary { margin: 12px 0 0; color: #c1d8d0; font-size: 14px; line-height: 1.85; }
.technical-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; font-size: 12px; color: var(--cyan); }
@media (max-width: 1050px) {
  .technical-flow { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .technical-flow li + li:before { content: none; }
  .technical-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
  .technical-header { align-items: flex-start; flex-direction: column; }
  .technical-intro, .technical-columns, .retrieval-cards { grid-template-columns: 1fr; }
  .file-grid, .competency-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .technical-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .encoder-equation { flex-wrap: wrap; justify-content: flex-start; gap: 18px; }
  .technical-sheet th, .technical-sheet td { min-width: 135px; }
  .topbar nav { gap: 12px; font-size: 11px; }
}
@media (max-width: 480px) {
  .technical-flow, .file-grid, .competency-grid { grid-template-columns: 1fr; }
  .technical-intro, .technical-disclosure-body { padding: 19px; }
  .technical-facts strong { font-size: 21px; }
  .technical-disclosure > summary { font-size: 14px; padding: 18px; }
}
@media print {
  :root { color-scheme: light; }
  body { background: #fff !important; color: #182334 !important; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .topbar, .hero, .workspace, footer, #print_technical, .credit-link, .technical-links { display: none !important; }
  .project-credits { margin: 0 0 18px; }
  .technical-sheet { padding: 12px 0; }
  .technical-sheet *, .project-credits * { color: #182334 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .technical-sheet details > .technical-disclosure-body { display: block !important; }
  .technical-sheet details::details-content { display: block !important; content-visibility: visible !important; }
  .technical-header, .technical-block-heading, .technical-disclosure > summary { break-after: avoid; }
  .technical-flow li, .retrieval-cards article, .file-grid > div, .competency-grid article, .presentation-script { break-inside: avoid; }
  .technical-intro, .technical-facts, .technical-columns, .retrieval-cards, .technical-flow, .file-grid, .competency-grid { display: block; }
  .technical-intro > div, .technical-facts > div, .technical-columns > div, .retrieval-cards article, .technical-flow li, .file-grid > div, .competency-grid article { margin: 0 0 12px; }
  .technical-table-wrap { overflow: visible; }
  .technical-sheet th, .technical-sheet td { min-width: 0; }
}
.guide-content { overflow-wrap: anywhere; }
.manual-index { margin: 28px 0; padding: 24px; border: 1px solid #2d3a50; border-radius: 12px; background: #101827; scroll-margin-top: 24px; }
.manual-index h3 { font-size: 20px; margin-bottom: 10px; }
.manual-index p { color: #b8c9df; font-size: 13px; line-height: 1.8; }
.manual-index ol { columns: 2; column-gap: 40px; padding-left: 24px; margin: 18px 0 0; }
.manual-index li { break-inside: avoid; padding: 5px 0; font-size: 13px; line-height: 1.65; }
.manual-index a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.technical-disclosure { scroll-margin-top: 24px; }
.guide-content .manual-back { margin-top: 26px; font-size: 12px; }
@media (max-width: 720px) { .manual-index ol { columns: 1; } .manual-index { padding: 19px; } }
@media print { .manual-back { display: none; } .manual-index ol { columns: 1; } }
.guide-content > p, .guide-content li { color: #b8c9df; font-size: 13px; line-height: 1.85; }
.guide-content > p { margin: 14px 0; }
.guide-content > ul, .guide-content > ol { padding-left: 22px; margin: 16px 0; }
.guide-content strong { color: #e2edf9; }
.guide-content a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.guide-content pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 18px; margin: 18px 0; border: 1px solid #2b3f57; border-radius: 10px; background: #091322; font-size: 12px; line-height: 1.8; }
.guide-content table { display: block; overflow-x: auto; max-width: 100%; margin: 16px 0; line-height: 1.75; }
.pipeline-controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.pipeline-controls [aria-pressed="true"] { border-color: #43c7bd; color: #7befd8; background: #12322f; }
.guide-content .technical-flow { padding: 0; margin: 20px 0; }
#glossary_query { width: 100%; max-width: 600px; margin: 10px 0; padding: 13px 16px; color: #e3effb; background: #0b1524; border: 1px solid #40516c; border-radius: 10px; }
#glossary_count { color: #a7bdd6; font-size: 12px; }
@media print {
  .pipeline-controls, [data-example], #glossary_query, label[for="glossary_query"], #glossary_count { display: none !important; }
  [data-pipeline-panel] { display: block !important; }
  #glossary_entries tr[hidden] { display: table-row !important; }
  .guide-content table { display: table; overflow: visible; }
  .guide-content pre { border-color: #b4c1d1; }
}

/* Page activity counters stay independent of search loading and errors. */
.visitor-panel { margin: 0 0 24px; padding: 16px 18px; border: 1px solid #263449; border-radius: 12px; background: #0c1422; }
.visitor-counts { display: flex; flex-wrap: wrap; gap: 12px 24px; color: #c7d3e3; font-size: .85rem; }
.visitor-counts strong { color: #f2f6fc; font-size: 1.2rem; margin-right: 5px; font-variant-numeric: tabular-nums; }
.visitor-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #72d4b1; }
.visitor-panel p { margin: 8px 0 0; font-size: .75rem; line-height: 1.6; color: #a6b7cc; }
.visitor-panel details { margin-top: 8px; font-size: .75rem; color: #a6b7cc; }
@media print { .visitor-panel { display: none; } }