/* SZL Router Control native components. KANCHAY tokens load first.
 * No routing, credential, verification or operational math is defined here.
 * SPDX-License-Identifier: Apache-2.0 */
:root {
 --surface-2: var(--surface-alt); --line: var(--border); --strong: var(--control-edge);
 --muted: var(--text-sub); --accent-2: var(--link); --ok: var(--chip-ok);
 --warn: var(--chip-warn); --danger: var(--chip-bad);
 font-family: var(--font-body);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 7%, color-mix(in srgb, var(--holo-teal) 16%, transparent), transparent 34rem),
    radial-gradient(circle at 86% 32%, color-mix(in srgb, var(--holo-teal) 12%, transparent), transparent 30rem),
    linear-gradient(180deg, var(--bg-deep), var(--bg-deep) 58%, var(--bg-deep));
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(115deg, transparent 49.5%, color-mix(in srgb, var(--holo-silver) 7%, transparent) 50%, transparent 50.5%),
    linear-gradient(25deg, transparent 49.5%, color-mix(in srgb, var(--holo-silver) 4.5%, transparent) 50%, transparent 50.5%);
  background-size: 72px 72px;
  mask-image: linear-gradient(var(--bg-deep), transparent 86%);
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, .actions a {
  min-height: 48px;
  border: 1px solid var(--strong);
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  padding: .75rem 1rem;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
button:hover, .actions a:hover { transform: translateY(-1px); border-color: var(--accent-2); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, pre:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; }
button:disabled { opacity: .55; cursor: wait; transform: none; }
input:disabled { opacity: .55; }
.primary { background: var(--accent-2); color: var(--bg-deep); border-color: transparent; font-weight: 790; }
.skip { position: fixed; z-index: 100; top: .6rem; left: .6rem; transform: translateY(-170%); background: var(--text); color: var(--bg-deep); padding: .7rem 1rem; border-radius: 10px; }
.skip:focus { transform: none; }
header, footer, main { width: min(1500px, calc(100% - 2rem)); margin-inline: auto; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header { min-height: 76px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand > span { color: var(--accent); font-size: 1.6rem; filter: drop-shadow(0 0 13px color-mix(in srgb, var(--holo-silver) 55%, transparent)); }
.runtime, .pill { font: 700 .67rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .55rem .7rem; }
.hero { padding: clamp(5rem, 11vw, 10rem) 0 clamp(2.5rem, 6vw, 5rem); max-width: 1250px; }
.eyebrow { margin: 0; color: var(--accent); font: 750 .68rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .17em; }
h1 { margin: .85rem 0 1.3rem; font-size: clamp(3.6rem, 9.8vw, 9.4rem); line-height: .82; letter-spacing: -.075em; font-weight: 620; }
h1 i { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--holo-silver) 75%, transparent); font-style: normal; }
.lede { max-width: 820px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.telemetry { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.telemetry article { min-width: 0; background: color-mix(in srgb, var(--bg-deep) 96%, transparent); padding: 1.15rem; }
.telemetry span { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .11em; }
.telemetry strong { display: block; margin-top: .4rem; font-size: clamp(1.25rem,2.5vw,2rem); overflow-wrap: anywhere; }
.route-stage { display: grid; grid-template-columns: minmax(320px,.72fr) minmax(0,1.28fr); gap: 1rem; margin-top: 1rem; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface); backdrop-filter: blur(18px); box-shadow: 0 30px 90px color-mix(in srgb, var(--bg-deep) 22%, transparent); }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.15rem; border-bottom: 1px solid var(--line); }
h2 { margin: .25rem 0 0; font-size: clamp(1.35rem,2.3vw,2rem); letter-spacing: -.035em; }
form { padding: 1.15rem; display: grid; gap: 1rem; }
label span { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
input, select, textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: color-mix(in srgb, var(--bg-deep) 70%, transparent); padding: .7rem .8rem; }
textarea { resize: vertical; line-height: 1.6; }
.candidates { min-height: 333px; display: grid; align-content: start; gap: 1px; background: var(--line); }
.candidates.empty { padding: 1.15rem; align-content: center; color: var(--muted); background: transparent; }
.candidate { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.15rem; background: color-mix(in srgb, var(--bg-deep) 97%, transparent); }
.rank { width: 34px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--strong); border-radius: 50%; color: var(--accent); font: 750 .7rem ui-monospace, monospace; }
.candidate strong, .candidate small { display: block; overflow-wrap: anywhere; }
.candidate small { margin-top: .25rem; color: var(--muted); }
.score { text-align: right; font: 700 .68rem/1.5 ui-monospace, monospace; color: var(--muted); }
.registry-panel, .proof-panel, .admission-panel, .completion-panel { margin-top: 1rem; }
.admission-grid, .completion-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; }
.admission-grid, .result-copy { padding: 1.15rem; }
.admission-grid > div { min-width: 0; border-left: 2px solid var(--line); padding-left: .9rem; }
.admission-grid h3, .result-copy h3 { margin: 0 0 .5rem; }
.admission-grid p, .muted, .boundary { color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.muted { margin: 0; font-size: .85rem; }
.boundary { margin: 0; padding: 1rem 1.15rem; font-size: .85rem; border-top: 1px solid var(--line); }
.boundary strong { color: var(--accent); }
.result-copy pre { margin-bottom: 1.4rem; border-radius: 13px; min-height: 100px; }
.result-copy ol { margin-bottom: 0; padding-left: 1.4rem; color: var(--muted); font: .8rem/1.7 ui-monospace, monospace; overflow-wrap: anywhere; }
.result-copy .identity-heading { margin-top: 1.5rem; }
.result-copy #completion-model-identity { overflow-wrap: anywhere; }
summary { padding: 1rem 1.15rem; cursor: pointer; color: var(--accent); border-top: 1px solid var(--line); }
.providers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); }
.provider { min-width: 0; background: color-mix(in srgb, var(--bg-deep) 97%, transparent); padding: 1rem 1.15rem; }
.provider h3 { margin: 0 0 .45rem; overflow-wrap: anywhere; }
.provider p { margin: .35rem 0; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.provider-models { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.provider-models button { min-height: 38px; padding: .35rem .65rem; font-size: .75rem; overflow-wrap: anywhere; }
.state { display: inline-flex; margin-top: .55rem; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .55rem; font: 700 .67rem ui-monospace, monospace; }
.state.available { color: var(--ok); }.state.unavailable { color: var(--warn); }.state.invalid { color: var(--danger); }
pre { margin: 0; max-height: 540px; overflow: auto; padding: 1.15rem; background: color-mix(in srgb, var(--bg-deep) 82%, transparent); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; font: .78rem/1.58 ui-monospace, SFMono-Regular, Menlo, monospace; }
.principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 1rem 0 clamp(4rem,8vw,8rem); }
.principles article { border-top: 1px solid var(--strong); padding-top: 1rem; }
.principles small { color: var(--accent); font: 750 .7rem ui-monospace, monospace; }
.principles h3 { margin: 2.4rem 0 .5rem; font-size: 1.2rem; }
.principles p { margin: 0; color: var(--muted); line-height: 1.6; }
footer { min-height: 90px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
@media (max-width: 950px) { .route-stage { grid-template-columns: 1fr; }.providers { grid-template-columns: 1fr 1fr; }.principles { grid-template-columns: 1fr; }.principles h3 { margin-top: 1rem; } }
@media (max-width: 590px) { header, footer, main { width: min(100% - 1rem,1500px); } header { align-items: flex-start; padding: .9rem 0; } .runtime { max-width: 48vw; text-align: right; overflow-wrap: anywhere; } h1 { font-size: clamp(3.15rem,18vw,5.3rem); } .telemetry { grid-template-columns: 1fr 1fr; } .providers, .admission-grid, .completion-controls { grid-template-columns: 1fr; } .panel-head { align-items: stretch; flex-direction: column; } .candidate { grid-template-columns: auto minmax(0,1fr); } .score { grid-column: 2; text-align: left; } footer { align-items: flex-start; flex-direction: column; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (prefers-contrast: more) { :root { --line: color-mix(in srgb, var(--holo-silver) 50%, transparent); --strong: color-mix(in srgb, var(--holo-silver) 90%, transparent); --muted: var(--text); } }
@media (forced-colors: active) { body::before { display: none; } .panel,.telemetry,.runtime,.pill,input,select { border: 1px solid CanvasText; } }
@media print { :root { color-scheme: light; --bg:var(--color-white); --bg-deep:var(--color-white); --text:var(--color-ink); --text-sub:var(--color-ink-soft); --text-ghost:var(--color-ink-soft); --muted:var(--color-ink-soft); --surface:var(--color-white); --surface-alt:var(--color-white); --line:var(--color-ink-600); --link:var(--color-yuyay-700); --accent:var(--color-ink); --holo-teal:var(--color-yuyay-700); --chip-ok:var(--color-success-strong); --chip-warn:#6b4f00; --chip-bad:#9f281e; --code-bg:var(--color-white); --code-ink:var(--color-ink); } body { background:var(--bg); } body::before,.actions,form { display:none!important; } .panel { box-shadow:none; backdrop-filter:none; break-inside:avoid; } .providers { grid-template-columns:1fr 1fr; } }

/* Native workspace finish: strong inputs, restrained foil, readable source states. */
html { min-width: 0; scroll-padding-top: 24px; }
body { min-width: 0; min-height: 100dvh; background: var(--bg); font-family: var(--font-body); line-height: 1.6; container: router-control / inline-size; }
body::before { content: none; }
header, footer, main, .workspace-nav { width: min(1240px,calc(100% - 3rem)); margin-inline: auto; }
header { min-height: 88px; }
.brand { gap: 12px; min-height: 60px; }
.native-mark { display: block; width: 40px; height: 40px; flex: 0 0 40px; }
.brand > .brand-label { color: var(--text); filter: none; font-size: 1rem; line-height: 1.3; }
.brand-label small { display: block; margin-top: 5px; color: var(--text-ghost); font: .75rem/1.4 var(--font-mono); }
.workspace-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 8px; border-bottom: 1px solid var(--border); }
.workspace-nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--text-sub); text-decoration: none; font-size: .875rem; }
.workspace-nav a:hover { color: var(--link-hover); }
.hero { padding-block: clamp(48px,6vw,80px); max-width: 980px; }
h1 { font: 520 clamp(2.8rem,6.3cqi,5.6rem)/1.06 var(--font-display); letter-spacing: -.05em; margin: 18px 0 24px; }
h1 i { color: var(--text-sub); -webkit-text-stroke: 0; }
.lede { max-width: 68ch; font-size: clamp(1rem,1.4vw,1.18rem); line-height: 1.65; }
.eyebrow { color: var(--link); font: 650 .75rem/1.5 var(--font-mono); letter-spacing: .1em; }
.runtime, .pill { color: var(--text-sub); font: 600 .75rem/1.5 var(--font-mono); overflow-wrap: anywhere; }
button, .actions a { border-radius: var(--radius-lg); font-size: .9375rem; line-height: 1.5; }
button:hover, .actions a:hover { transform: none; background: var(--surface-alt); border-color: var(--control-edge); }
.primary { color: var(--action-ink); background: var(--action-bg); border-color: var(--action-bg); font-weight: 650; }
.primary:hover { color: var(--action-ink); background: var(--action-hover-bg); border-color: var(--action-hover-bg); }
.primary:active { background: var(--action-press-bg); transform: translateY(1px); }
button:disabled { opacity: 1; color: var(--text-ghost); background: var(--surface-alt); border-color: var(--border); }
input:disabled { opacity: 1; color: var(--text-ghost); }
.panel { background: var(--surface); backdrop-filter: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.admission-panel { border: 1px solid transparent; background: linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo-edge) border-box; }
.panel-head, form, .admission-grid, .result-copy { padding: 24px; }
.panel-head { align-items: center; flex-wrap: wrap; }
h2 { font-size: clamp(1.35rem,2.2vw,1.85rem); line-height: 1.2; font-weight: 600; }
h3 { line-height: 1.35; }
.telemetry { margin-top: 24px; border-radius: var(--radius-xl); }
.telemetry article, .candidate, .provider { background: var(--surface); }
.candidates { background: var(--surface); }
.candidate { border-bottom: 1px solid var(--border); }
.telemetry #receipt-short { font: 600 clamp(.9375rem,1.8cqi,1.375rem)/1.5 var(--font-mono); }
.telemetry article { padding: 24px; }
.telemetry span, label span, .score, .state { font-size: .75rem; line-height: 1.5; }
.route-stage, .registry-panel, .proof-panel, .completion-panel { margin-top: 24px; gap: 24px; }
input, select, textarea { background: var(--bg); color: var(--text); border-color: var(--control-edge); border-radius: var(--radius-lg); font-size: 1rem; }
input::placeholder, textarea::placeholder { color: var(--text-ghost); opacity: 1; }
input, select { accent-color: var(--focus); }
.provider-models button { min-height: 44px; }
summary { min-height: 48px; color: var(--link); line-height: 1.5; }
.boundary { padding: 20px 24px; font-size: .875rem; }
.boundary strong { color: var(--text); }
pre { color: var(--code-ink); background: var(--code-bg); font: .8125rem/1.65 var(--font-mono); }
.result-copy pre { border: 1px solid var(--code-border); border-radius: var(--radius-lg); }
.principles { gap: 24px; margin-top: 48px; }
.principles small { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
#free-options-panel { margin-top: 24px; }
#free-options-list { padding: 0 24px 24px; }
#free-options-list:empty { padding: 0; }
#free-options-state, #free-options-evidence { margin: 16px 24px; }
#free-options-panel .free-option { background: var(--bg); border-color: var(--border); padding: 20px; border-radius: var(--radius-lg); }
#free-options-panel .free-option a { color: var(--link); display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
@media(max-width:590px) {
 header, footer, main, .workspace-nav { width: calc(100% - 2rem); }
 header { align-items: center; flex-wrap: wrap; gap: 8px; }
 .runtime { max-width: 100%; text-align: left; }
 .workspace-nav { gap: 0 16px; }
 .workspace-nav a { flex: 1 1 auto; justify-content: center; }
 h1 { font-size: clamp(2.6rem,11vw,3.8rem); }
 .actions { display: grid; grid-template-columns: minmax(0,1fr); }
 .actions button, .actions a { min-height: 52px; }
 .panel-head, form, .admission-grid, .result-copy, .telemetry article { padding: 20px; }
 .telemetry { grid-template-columns: minmax(0,1fr); }
 .candidate { padding: 20px; }
 .route-stage { gap: 24px; }
 .panel-head > *, label, label span { min-width: 0; overflow-wrap: anywhere; }
 .boundary { padding: 16px 20px; }
 #free-options-list { padding: 0 20px 20px; }
 #free-options-state, #free-options-evidence { margin-inline: 20px; }
}
@media(prefers-contrast:more) { :root { --line: var(--control-edge); --muted: var(--text); } }
@media(forced-colors:active) {
 .admission-panel, .primary, .primary:hover { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
 h1 i { color: CanvasText; }
 .native-mark { forced-color-adjust: none; }
 :focus-visible { outline-color: Highlight; }
}

noscript a { display: inline-flex; min-height: 44px; align-items: center; color: var(--link); }
@container router-control (max-width: 59.375rem) {
 .route-stage { grid-template-columns: minmax(0,1fr); }
 .providers { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .principles { grid-template-columns: minmax(0,1fr); }
 .principles h3 { margin-top: 1rem; }
}
@container router-control (max-width: 36.875rem) {
 header, footer, main, .workspace-nav { width: calc(100% - 2rem); }
 header { align-items: center; flex-wrap: wrap; gap: 8px; }
 .runtime { max-width: 100%; text-align: left; }
 .workspace-nav { gap: 0 16px; }
 .workspace-nav a { flex: 1 1 auto; justify-content: center; }
 h1 { font-size: clamp(2.6rem,11cqi,3.8rem); }
 .actions { display: grid; grid-template-columns: minmax(0,1fr); }
 .actions button, .actions a { min-height: 52px; }
 .telemetry, .providers, .admission-grid, .completion-controls { grid-template-columns: minmax(0,1fr); }
 .panel-head, form, .admission-grid, .result-copy, .telemetry article { padding: 20px; }
 .panel-head { align-items: stretch; flex-direction: column; }
 .panel-head > *, label, label span { min-width: 0; overflow-wrap: anywhere; }
 .candidate { grid-template-columns: auto minmax(0,1fr); padding: 20px; }
 .score { grid-column: 2; text-align: left; }
 .boundary { padding: 16px 20px; }
 footer { align-items: flex-start; flex-direction: column; justify-content: center; }
 #free-options-list { padding: 0 20px 20px; }
 #free-options-state, #free-options-evidence { margin-inline: 20px; }
}