:root {
  color-scheme:dark;
  --bg:#091220;
  --panel:#14243a;
  --paper:#102035;
  --ink:#f3f7ff;
  --muted:#b9cce0;
  --edge:#47637d;
  --accent:#8de4ff;
  --glass-fill:rgb(17 34 54 / 81%);
  --glass-sheen:linear-gradient(125deg,rgb(84 151 169 / 20%),transparent 48%,rgb(129 107 171 / 12%));
  --glass-shadow:inset 0 1px 0 rgb(223 245 255 / 16%),0 7px 20px rgb(1 8 18 / 16%);
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  color:var(--ink);
  background:radial-gradient(ellipse at 7% 3%,#22465e 0,transparent 38rem),radial-gradient(ellipse at 97% 18%,#302b54 0,transparent 34rem),var(--bg);
  min-height:100vh;
}

a {
  color:var(--accent);
  text-underline-offset:3px;
}

button,input,select {
  font:inherit;
}

button,.button,input,select {
  min-height:42px;
  border:1px solid var(--edge);
  border-radius:9px;
  color:var(--ink);
  background:#192e45;
  padding:8px 13px;
}

button,.button {
  cursor:pointer;
  font-weight:600;
}

.button {
  text-decoration:none;
}

button:hover,.button:hover {
  border-color:var(--accent);
}

:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
}

button:disabled {
  cursor:default;
  opacity:.54;
}

h1,h2,h3 {
  line-height:1.16;
  letter-spacing:-.025em;
}

h1 {
  font-size:clamp(2rem,4.5vw,3.6rem);
  margin:0;
}

h2 {
  font-size:clamp(1.3rem,2.2vw,1.85rem);
  margin:0;
}

h3 {
  font-size:1rem;
  margin:18px 0 5px;
}

p {
  margin:7px 0;
  color:var(--muted);
}

code,pre {
  font-family:var(--mono);
}

code {
  font-size:.87em;
  overflow-wrap:anywhere;
}

.top,main,footer {
  width:min(1100px,calc(100% - 32px));
  margin:0 auto;
}

.top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:12px;
  padding:12px 20px;
  background-color:var(--glass-fill);
  background-image:var(--glass-sheen);
  border:1px solid var(--edge);
  border-radius:14px;
  box-shadow:var(--glass-shadow);
}

.brand {
  font-size:22px;
  font-weight:700;
  letter-spacing:-.04em;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  gap:5px;
  align-items:center;
}

.brand span {
  color:var(--muted);
  font-weight:500;
}

.brand svg {
  width:30px;
  height:30px;
  fill:#5997a58c;
  stroke:#b5e9ff;
  stroke-width:1.5;
}

.brand svg path:first-child {
  fill:#9078b688;
  stroke:#a698d8;
}

.top nav,.links,.command-row,.input-line,footer {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.top nav a {
  font-size:.93rem;
  font-weight:600;
  text-decoration:none;
  color:var(--muted);
}

.top nav a:hover,.top nav a[aria-current] {
  color:var(--accent);
}

main {
  padding-block:26px 48px;
}

.hero,.manage,.card,.guide {
  background-color:var(--glass-fill);
  background-image:var(--glass-sheen);
  border:1px solid var(--edge);
  box-shadow:var(--glass-shadow);
  border-radius:17px;
}

.top,.hero,.manage {
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.hero {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:24px;
  align-items:center;
  padding:clamp(22px,4vw,44px);
}

.hero>div>p {
  font-size:1.1rem;
  margin:12px 0 23px;
  max-width:45ch;
}

.primary {
  background:var(--accent);
  color:#0c263c;
  border-color:var(--accent);
}

.connect {
  padding-left:24px;
  border-left:1px solid var(--edge);
}

.connect h2 {
  font-size:1.1rem;
  margin-bottom:8px;
}

.connect a,.connect div {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid #49617977;
  text-decoration:none;
}

.connect span {
  font-size:.87rem;
  color:var(--muted);
}

.manage {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin:16px 0 30px;
  padding:20px 24px;
}

.manage>div {
  flex:1 1 440px;
}

.manage h2 {
  font-size:1.25rem;
}

.manage .hint {
  font-size:.88rem;
}

.section-heading,.filters {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.filters {
  justify-content:flex-start;
  align-items:stretch;
  margin:13px 0;
}

.filters label:first-child {
  flex:1;
}

label {
  display:block;
  color:var(--muted);
  font-size:.87rem;
}

input,select {
  display:block;
  width:100%;
  background:var(--paper);
  font-size:1rem;
  margin:4px 0;
  color:var(--ink);
}

.count,.badges span,.tags li {
  font:12px/1.4 var(--mono);
  color:#d3e6f6;
}

.count {
  white-space:nowrap;
}

.catalog {
  display:grid;
  gap:8px;
}

.catalog-row:has(> .card[hidden]) {
  display:none;
}

.catalog-row {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:8px;
}

@media(min-width:491px) {
  .catalog-row:has(> .select-profile:not([hidden])) {
    grid-template-columns:minmax(0,1fr) auto;
  }
}

.card[hidden] + .select-profile {
  display:none;
}

.select-profile {
  align-self:start;
  min-height:44px;
  padding:10px 13px;
  border:1px solid #568f9f;
  border-radius:10px;
  background:#173747;
  color:#c2f3ff;
  font-weight:600;
  text-decoration:none;
}

.select-profile:hover {
  background:#214c5e;
}

.badges .availability {
  border:1px solid #64809a;
  background:transparent;
  color:#dcebf6;
}

.badges .built-in {
  border-color:#529397;
  background:#153b43;
  color:#c5f7ed;
}

.card {
  border-radius:12px;
}

.card summary {
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 18px;
  cursor:pointer;
  list-style:none;
}

.card summary::-webkit-details-marker {
  display:none;
}

.card summary:after {
  content:"+";
  margin-left:auto;
  color:var(--accent);
  font:1.15rem var(--mono);
}

.card[open] summary:after {
  content:"−";
}

.card-title {
  display:grid;
  min-width:0;
}

.card-title code {
  color:var(--muted);
  font-size:.78rem;
}

.glyph {
  display:grid;
  place-items:center;
  border:1px solid #73a9be7d;
  border-radius:9px;
  background:#123c4a;
  color:#b9f2f2;
  font-size:20px;
  width:34px;
  height:34px;
  flex-shrink:0;
}

.badges,.tags {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}

.badges span,.tags li {
  border:1px solid #5d76956b;
  background:#16293d;
  padding:3px 7px;
  border-radius:6px;
}

.detail {
  padding:0 20px 20px;
}

.detail>p:first-child {
  border-top:1px solid var(--edge);
  padding-top:14px;
}

.detail ul {
  padding-left:18px;
}

.detail .tags {
  list-style:none;
  padding:0;
}

pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:420px;
  overflow:auto;
  background:#091726;
  border:1px solid #47637d85;
  border-radius:9px;
  padding:12px;
  color:#dbedff;
  font-size:.86rem;
}

pre code {
  font-size:inherit;
}

fieldset {
  flex:1 1 100%;
  min-width:0;
  border:1px solid var(--edge);
  border-radius:11px;
  padding:15px;
}

.input-line input {
  flex:1;
  min-width:160px;
}

.command-row {
  margin:12px 0;
}

.stop {
  color:#ffc6cf;
}

.err {
  color:#ffc7c7;
}

.docs-shell {
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  align-items:start;
  gap:16px;
}

.toc {
  display:grid;
  gap:8px;
  position:sticky;
  top:12px;
  padding:16px 10px;
}

.toc a {
  font-size:14px;
}

.guide {
  min-width:0;
  padding:clamp(20px,3vw,36px);
}

.guide h1 {
  font-size:clamp(1.65rem,3vw,2.45rem);
}

.guide h2 {
  margin:30px 0 10px;
  font-size:1.4rem;
  border-top:1px solid #4e647c80;
  padding-top:20px;
}

.guide p,.guide li {
  color:#d1deec;
}

.guide code {
  color:#d9edff;
}

.copy {
  font-size:12px;
  min-height:28px;
  margin:3px 0 6px;
  padding:3px 8px;
}

footer {
  border-top:1px solid var(--edge);
  padding:16px 0 25px;
  font-size:.87rem;
  color:var(--muted);
}

footer span {
  margin-right:auto;
}

[hidden] {
  display:none!important;
}

@media(max-width:760px) {
  .hero {
    grid-template-columns:1fr;
  }
  .connect {
    padding:12px 0 0;
    border-left:0;
    border-top:1px solid var(--edge);
  }
  .docs-shell {
    grid-template-columns:1fr;
  }
  .toc {
    position:static;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 15px;
  }
  .manage {
    padding:16px;
  }
  .top {
    flex-wrap:wrap;
  }
  .section-heading {
    align-items:flex-start;
  }
  .card summary {
    flex-wrap:wrap;
  }
  .badges {
    order:4;
    width:100%;
    padding-left:46px;
  }
}

@media(max-width:490px) {
  .catalog-row {
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }
  .select-profile {
    justify-self:start;
  }
  .filters {
    flex-direction:column;
    gap:4px;
  }
  .top {
    gap:5px;
  }
  .top nav {
    gap:12px;
  }
  .top,main,footer {
    width:calc(100% - 20px);
  }
  .hero {
    padding:16px;
  }
  .connect a,.connect div {
    flex-wrap:wrap;
  }
  .card summary,.detail {
    padding-left:12px;
  }
  .command-row button {
    flex:1 1 42%;
  }
  footer span {
    width:100%;
  }
}

@media(prefers-reduced-transparency:reduce) {
  .hero,.manage,.card,.guide,.top {
    background:#182a40;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

#pool-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
#pool-summary > div {
  padding: 8px 12px;
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: var(--paper);
}
#pool-summary dt {
  color: var(--muted);
  font-size: .84rem;
}
#pool-summary dd {
  margin: 2px 0;
  font: 600 1.15rem var(--mono);
}

.reference-detail {
  padding: 7px 10px;
  margin: 5px 0;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--paper);
}
.reference-detail summary {
  overflow-wrap: anywhere;
  cursor: pointer;
  color: var(--accent);
  font: .88rem/1.55 var(--mono);
}
#ref-status {
  font-size: .88rem;
}

#preview-input {
  width: 100%;
  min-height: 80px;
  margin: 5px 0;
  padding: 12px;
  color: var(--ink);
  font: inherit;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 9px;
  resize: vertical;
}
.admin {
  margin-top: 14px;
}
.admin summary {
  cursor: pointer;
  color: var(--accent);
}

.comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,225px),1fr));
  gap: 14px;
}
.comparison pre {
  max-height: 16rem;
  white-space: pre-wrap;
}
#raw-result summary {
  margin-top: 12px;
  color: var(--accent);
  cursor: pointer;
}
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  color: var(--ink);
}
.check input {
  width: 20px;
  min-height: 20px;
  accent-color: var(--accent);
}
.instance-setup {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
}
.workspace-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--edge);
  padding: 7px 0;
}
.workspace-row button {
  min-height: 32px;
  font-size: .85rem;
}
#instance-endpoint {
  font: .88rem var(--mono);
  background: var(--bg);
}
.manage h4 {
  margin: 14px 0 5px;
}

#controls {
  scroll-margin-top:12px;
}
#forget {
  background:transparent;
  color:var(--ink);
}
#copy-status:empty {
  display:none;
}