/* Adaptive Signal, the candidate interface.
   The atlas of Taste v1 and the instrument face of Taste v5, dark: a computational instrument with one teal accent,
   IBM Plex Sans for words and IBM Plex Mono for what the machine says (ids, states, times, measurements).
   Textures are felt, not seen: a fine grid, a grain, hairline rules. Radius 0 everywhere. */
:root {
  --bg0: #0a0c0f; --bg1: #0f1216; --bg2: #14181d; --bg3: #1a1f25; --bg4: #20262d;
  --line: #262d35; --line2: #1b2128; --hi: rgba(255,255,255,0.05);
  --t0: #e8ebee; --t1: #aab2ba; --t2: #6f7882; --t3: #4c545d;
  --acc: #7ec8b9; --acc2: #4d9c8f; --accw: rgba(126,200,185,0.14); --accl: rgba(126,200,185,0.45);
  --ok: #6fae86; --watch: #cfa85f; --bad: #d46b5f;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --top: 52px;
}
* { box-sizing: border-box; }
::selection { background: var(--accw); color: var(--t0); }
:focus-visible { outline: 1px solid var(--acc); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg1); } ::-webkit-scrollbar-thumb { background: var(--bg4); border: 2px solid var(--bg1); } ::-webkit-scrollbar-thumb:hover { background: var(--line); }
html, body { margin: 0; background: var(--bg0); color-scheme: dark; }
body { color: var(--t0); font-family: var(--sans); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--t2); text-transform: uppercase; }
/* textures: a fine grid under everything, a grain over everything */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(var(--line2) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, var(--line2) 1px, transparent 1px) 0 0 / 48px 100%; opacity: 0.35; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
#app { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- state words and marks */
.w { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.w.accepted, .w.supported, .w.taken, .w.healthy, .w.ok { color: var(--ok); }
.w.rejected, .w.refuted, .w.critical { color: var(--bad); }
.w.modified, .w.undetermined, .w.watch, .w.decaying { color: var(--watch); }
.w.open, .w.normal, .w.active, .w.pending { color: var(--t1); }
.held { color: var(--acc); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.mark { display: inline-block; width: 7px; height: 7px; vertical-align: 1px; margin-right: 6px; }
.mark.healthy, .mark.ok { background: var(--ok); } .mark.active { background: var(--acc); } .mark.watch { background: var(--watch); } .mark.critical { background: var(--bad); }
@media (prefers-reduced-motion: no-preference) { .mark.active { animation: breathe 2.6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } }

/* ---------------------------------------------------------------- home: a hero, then the loop as a scroll story */
.home { position: relative; }
.hero { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 48px 24px; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.55; }
.hero-in { position: relative; width: min(720px, 100%); display: grid; gap: 30px; justify-items: center; text-align: center; }
.hero h1 { font-size: 42px; letter-spacing: 0.22em; font-weight: 500; text-transform: uppercase; color: var(--t0); margin-left: 0.22em; }
.hero h1 span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span { opacity: 0; transform: translateY(10px); animation: letter 700ms cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 28ms); }
  @keyframes letter { to { opacity: 1; transform: none; } }
  .hero .search { opacity: 0; animation: rise 600ms cubic-bezier(.2,.8,.2,1) 380ms forwards; }
  .hero .search::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--acc); animation: sweep 900ms cubic-bezier(.2,.8,.2,1) 700ms forwards; }
  @keyframes sweep { to { width: 100%; } }
  .hero .status { opacity: 0; animation: rise 600ms cubic-bezier(.2,.8,.2,1) 820ms forwards; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.search { position: relative; width: 100%; max-width: 560px; }
.search input { width: 100%; height: 56px; background: rgba(15,18,22,0.9); border: 1px solid var(--line); padding: 0 52px 0 18px; font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; color: var(--t0); text-transform: uppercase; box-shadow: inset 0 1px 0 var(--hi); transition: border-color 180ms; }
.search input::placeholder { color: var(--t2); text-transform: none; letter-spacing: 0.02em; }
.search input:focus { border-color: var(--acc); outline: none; }
.search .go { position: absolute; right: 0; top: 0; height: 56px; width: 52px; display: grid; place-items: center; color: var(--t2); border-left: 1px solid var(--line); }
.search .go:hover { color: var(--acc); }
.search .go svg { width: 16px; height: 16px; }
.suggest { position: absolute; left: 0; right: 0; top: 56px; background: var(--bg1); border: 1px solid var(--line); border-top: 0; z-index: 5; text-align: left; max-height: 300px; overflow: auto; }
.suggest a, .suggest .none { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--line2); font-size: 13px; color: var(--t1); align-items: baseline; }
.suggest a .t { font-family: var(--mono); color: var(--t0); }
.suggest a:hover, .suggest a.on { background: var(--bg2); color: var(--t0); }
.suggest a .m { font-family: var(--mono); font-size: 10.5px; color: var(--t2); }
.suggest .none { grid-template-columns: 1fr; color: var(--t2); }
.hero .status { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--t2); text-transform: uppercase; }
.hero .status b { color: var(--t1); font-weight: 500; }
@media (max-width: 640px) { .hero h1 { font-size: 26px; letter-spacing: 0.16em; margin-left: 0.16em; } .hero .status { gap: 8px 16px; } }
.hero .status .live { display: inline-block; width: 6px; height: 6px; background: var(--acc); margin-right: 7px; vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) { .hero .status .live { animation: breathe 2.6s ease-in-out infinite; } }

.story { position: relative; max-width: 1180px; margin: 0 auto; padding: 40px 24px 120px; }
.spine { position: absolute; left: calc(24px + 250px + 28px); top: 0; bottom: 0; width: 1px; background: var(--line2); }
.spine i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--acc2); transform-origin: top; transform: scaleY(0); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .spine i { animation: spine linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; } @keyframes spine { from { transform: scaleY(0); } to { transform: scaleY(1); } } } }
@supports not (animation-timeline: view()) { .spine i { transform: scaleY(1); opacity: 0.5; } }
.step { display: grid; grid-template-columns: 250px 1fr; gap: 0 56px; align-items: start; min-height: 46vh; padding: 28px 0; }
.step .box { position: relative; border: 1px solid var(--line); background: var(--bg1); box-shadow: inset 0 1px 0 var(--hi); padding: 12px 14px; transition: border-color 300ms, background 300ms; }
.step .box::after { content: ""; position: absolute; right: -28px; top: 26px; width: 27px; height: 1px; background: var(--line2); transition: background 300ms; }
.step .box .code { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--t2); text-transform: uppercase; display: flex; justify-content: space-between; }
.step .box .name { font-size: 16px; font-weight: 500; margin-top: 6px; }
.step .box .kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--t3); text-transform: uppercase; margin-top: 8px; }
.step .box .dot { position: absolute; left: 100%; margin-left: 24px; top: 22px; width: 9px; height: 9px; background: var(--bg0); border: 1px solid var(--t2); transition: background 300ms, border-color 300ms; }
.step.on .box { border-color: var(--acc2); background: var(--bg2); }
.step.on .box::after { background: var(--acc2); }
.step.on .box .dot { background: var(--acc); border-color: var(--acc); }
.step .body { padding-top: 4px; }
.step .body p { margin: 0; color: var(--t1); font-size: 15px; line-height: 1.55; max-width: 62ch; }
.step .body p b { color: var(--t0); font-weight: 500; }
.step .terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.step .terms span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t2); border: 1px solid var(--line2); padding: 3px 7px; }
.step .fig { margin-top: 18px; max-width: 620px; }
.step .fig svg { width: 100%; height: auto; display: block; }
.fig text { font-family: var(--mono); font-size: 10.5px; fill: var(--t1); }
.fig .t2 { fill: var(--t2); }
.fig .t0 { fill: var(--t0); }
.fig .box { fill: var(--bg1); stroke: var(--line); }
.fig .boxa { fill: var(--bg2); stroke: var(--acc2); }
.fig .ln { fill: none; stroke: var(--t2); stroke-width: 1; }
.fig .lna { fill: none; stroke: var(--acc); stroke-width: 1.2; }
.fig .lnd { fill: none; stroke: var(--acc2); stroke-width: 1; stroke-dasharray: 4 4; }
.fig .band { fill: var(--accw); }
.fig .bandw { fill: rgba(207,168,95,0.14); }
.fig .bandb { fill: rgba(212,107,95,0.14); }
.fig .acc { fill: var(--acc); }
.fig .warn { fill: var(--watch); }
.fig .draw { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
@media (prefers-reduced-motion: no-preference) {
  .step { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(.2,.8,.2,1), transform 600ms cubic-bezier(.2,.8,.2,1); }
  .step.in { opacity: 1; transform: none; }
  .step.in .fig .draw { animation: draw 1400ms cubic-bezier(.2,.8,.2,1) 200ms forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) { .fig .draw { stroke-dashoffset: 0; } }
.story-end { display: grid; grid-template-columns: 250px 1fr; gap: 0 56px; padding: 20px 0 0; }
.story-end .ret { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--acc); text-transform: uppercase; }
.home .foot { display: flex; justify-content: space-between; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--line2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--t3); text-transform: uppercase; }
@media (max-width: 900px) { .step, .story-end { grid-template-columns: 1fr; gap: 14px; } .spine { display: none; } .step .box::after, .step .box .dot { display: none; } }

/* ---------------------------------------------------------------- top bar */
html { scroll-padding-top: calc(var(--top) + 12px); }
.top { position: fixed; inset: 0 0 auto 0; height: var(--top); display: grid; grid-template-columns: auto minmax(220px, 360px) 1fr auto; align-items: center; gap: 20px; padding: 0 20px; background: rgba(10,12,15,0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); z-index: 10; }
.top .brand { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t0); }
.top .brand:hover { color: var(--acc); }
.top .search { max-width: none; }
.top .search input { height: 34px; font-size: 12.5px; padding-right: 40px; }
.top .search .go { height: 34px; width: 40px; }
.top .search .go svg { width: 13px; height: 13px; }
.top .suggest { top: 34px; }
.crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--t2); text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.crumbs .cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .top .crumbs { display: none; } }
.crumbs a { color: var(--t1); } .crumbs a:hover { color: var(--acc); }
.crumbs .cur { color: var(--t0); }
.crumbs .sep { color: var(--t3); }
.top .sysline { display: flex; gap: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--t2); text-transform: uppercase; white-space: nowrap; }
.top .sysline b { color: var(--t1); font-weight: 500; }
.top .demo { border: 1px solid var(--line); padding: 2px 7px; color: var(--t1); }

/* ---------------------------------------------------------------- inspector */
.insp { border-left: 1px solid var(--line); background: var(--bg1); overflow: auto; height: calc(100dvh - var(--top)); position: sticky; top: var(--top); min-width: 0; }
.insp-in { padding: 18px 22px 40px; min-width: 440px; }
@media (prefers-reduced-motion: no-preference) { .insp-in { animation: slide 240ms cubic-bezier(.2,.8,.2,1) both; } @keyframes slide { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } } }
.insp .head2 { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.insp .code { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--acc); text-transform: uppercase; margin-bottom: 6px; }
.insp h2 { font-size: 20px; line-height: 1.25; }
.insp .lede { color: var(--t1); margin-top: 8px; font-size: 13.5px; }
.insp .close { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); padding: 4px 8px; color: var(--t1); white-space: nowrap; }
.insp .close:hover { color: var(--acc); border-color: var(--acc2); }
.sec { margin-top: 18px; }
.sec > h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2); font-weight: 500; margin-bottom: 8px; display: flex; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px solid var(--line2); }
.kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 14px; }
.kv > div { padding: 5px 0; border-bottom: 1px solid var(--line2); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.kv .kk { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--t2); text-transform: uppercase; padding-top: 7px; }
.kv .vv.mono { font-family: var(--mono); font-size: 12px; color: var(--t1); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li a, .rows li .r { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(45%); gap: 12px; overflow-wrap: anywhere; padding: 7px 0; border-bottom: 1px solid var(--line2); font-size: 13px; align-items: baseline; }
.rows li a:hover .t { color: var(--acc); }
.mt { font-family: var(--mono); font-size: 10.5px; color: var(--t2); overflow-wrap: break-word; }
.io { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.io h5 { margin: 0 0 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--t2); font-weight: 500; text-transform: uppercase; }
.io ul { list-style: none; margin: 0; padding: 0; }
.io li { padding: 4px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px; color: var(--t1); }
.io li a:hover { color: var(--acc); }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metrics > div { border: 1px solid var(--line2); background: var(--bg2); padding: 7px 10px; box-shadow: inset 0 1px 0 var(--hi); }
.metrics .n { font-family: var(--mono); font-size: 15px; color: var(--t0); }
.metrics .kk { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--t2); text-transform: uppercase; margin-top: 1px; }
.nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nums > div { border: 1px solid var(--line2); background: var(--bg2); padding: 8px 10px; box-shadow: inset 0 1px 0 var(--hi); }
.nums .n { font-family: var(--mono); font-size: 18px; color: var(--t0); }
.nums .kk { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--t2); text-transform: uppercase; }
.proc a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.proc a:hover .pn { color: var(--acc); }
.pn { font-weight: 500; font-size: 13px; }
.pd { font-size: 12.5px; color: var(--t1); margin-top: 1px; }
.pio { font-family: var(--mono); font-size: 10.5px; color: var(--t2); margin-top: 3px; }
.links { display: flex; flex-wrap: wrap; gap: 6px; }
.links a { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line); background: var(--bg2); padding: 4px 8px; color: var(--t1); box-shadow: inset 0 1px 0 var(--hi); }
.links a:hover { color: var(--acc); border-color: var(--acc2); }
.chain { border-top: 1px solid var(--line); }
.chain a, .chain .s { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 13px; }
.chain .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--acc); text-transform: uppercase; padding-top: 2px; }
.chain a:hover .v { color: var(--acc); }
.judg > div { padding: 9px 0; border-bottom: 1px solid var(--line2); font-size: 13px; color: var(--t1); }
.judg .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--t2); display: flex; justify-content: space-between; margin-bottom: 3px; text-transform: uppercase; }
.act { list-style: none; margin: 0; padding: 0; }
.act li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; overflow-wrap: anywhere; padding: 6px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px; color: var(--t1); }
.act li .t { font-family: var(--mono); font-size: 10.5px; color: var(--t2); }
.act li b { font-family: var(--mono); font-size: 10.5px; color: var(--acc); font-weight: 500; letter-spacing: 0.05em; margin-right: 6px; }
.segs { display: flex; gap: 3px; align-items: flex-end; height: 40px; border-bottom: 1px solid var(--line); }
.segs span { flex: 1; background: var(--acc2); min-height: 2px; }
.segs span.neg { background: var(--bad); }
.cus { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--t2); }
.cus .b { height: 8px; background: var(--bg3); border: 1px solid var(--line2); position: relative; }
.cus .b i { position: absolute; inset: 0 auto 0 0; background: var(--watch); }
.cus .b b { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--t0); }
.empty { color: var(--t2); font-size: 13px; padding: 6px 0; }
.note { color: var(--t1); font-size: 13px; }
.back { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc); }
.notfound { min-height: calc(100dvh - var(--top)); display: grid; place-items: center; padding: 40px; text-align: center; }
.notfound > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.notfound .ld { position: relative; width: 120px; height: 1px; margin: 14px auto 0; background: var(--line); overflow: hidden; }
.notfound .ld i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--acc); }
@media (prefers-reduced-motion: no-preference) { .notfound .ld i { animation: ld 1.1s cubic-bezier(.4,0,.2,1) infinite; } @keyframes ld { from { transform: translateX(-100%); } to { transform: translateX(250%); } } }
.notfound h2 { font-size: 22px; }
.notfound p { color: var(--t1); max-width: 56ch; }
.notfound .links { justify-content: center; margin-top: 16px; }
@media (max-width: 1180px) { .ws.open, .ws.deep { grid-template-columns: minmax(0, 1fr) 420px; } .top { grid-template-columns: auto 1fr auto; } .top .sysline { display: none; } .head { grid-template-columns: 1fr; } }