@layer properties,theme,base;@layer components{.sys{min-height:min(100dvh,62rem);padding-top:calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));padding-bottom:var(--space-block);align-items:center;gap:clamp(3rem,2rem + 4vw,5rem);display:grid}@media (min-width:1024px){.sys{grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);column-gap:clamp(3rem,6vw,7rem)}}.sys-copy{min-width:0}.sys-request{max-width:40rem;font:400 .75rem/1.4 var(--font-mono);color:var(--color-fg-dim);align-items:center;gap:.6rem;display:flex}.sys-verb{color:var(--color-fg-muted);letter-spacing:.08em;font-weight:500}.nf-path{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--color-fg);overflow:hidden}.sys-rule{background:linear-gradient(to right, var(--color-line-strong) 60%, transparent);transform-origin:0;flex:2rem;min-width:1.5rem;height:1px}.sys-code{color:var(--color-fail);letter-spacing:.06em;text-transform:uppercase;flex:none}.sys-numeral{font-family:var(--font-display);letter-spacing:-.06em;color:var(--color-fg);margin-top:clamp(1rem,.5rem + 2vw,2rem);margin-left:-.05em;padding-top:.08em;font-size:clamp(6rem,3rem + 14vw,15rem);font-weight:500;line-height:.8}.sys-zero{color:#0000;-webkit-text-stroke:max(1.5px, .012em) var(--color-fg)}.sys-title{max-width:22ch;font-family:var(--font-display);font-weight:500;font-size:var(--text-h2);line-height:var(--text-h2--line-height);letter-spacing:var(--text-h2--letter-spacing);text-wrap:balance;outline:none;margin-top:clamp(1.25rem,1rem + 1vw,2rem)}.sys-title-lg{max-width:16ch;font-size:var(--text-display);line-height:var(--text-display--line-height);letter-spacing:var(--text-display--letter-spacing);margin-top:clamp(1.5rem,1rem + 2vw,2.5rem)}.sys-lede{max-width:52ch;font-size:var(--text-lead);color:var(--color-fg-muted);text-wrap:pretty;margin-top:1rem;line-height:1.55}.sys-note{color:var(--color-fg-dim);margin-top:.4rem}.sys-actions{flex-wrap:wrap;gap:.75rem;margin-top:2rem;display:flex}.sys-search{max-width:30rem;margin-top:2.5rem}.sys-search-field{border-bottom:1px solid var(--color-line-strong);transition:border-color var(--dur-fast) ease;align-items:center;gap:.5rem;margin-top:.6rem;padding-bottom:.4rem;display:flex}.sys-search-field:focus-within{border-bottom-color:var(--color-accent)}.sys-search-field input{min-width:0;min-height:44px;font:400 1.0625rem/1.3 var(--font-sans);color:var(--color-fg);caret-color:var(--color-accent);background:0 0;flex:1}.sys-search-field input::placeholder{color:var(--color-fg-dim)}.sys-search-field input:focus-visible{outline:none}.sys-retry-mark{border:1.5px solid;border-right-color:#0000;border-radius:50%;width:.7rem;height:.7rem}.sys-retry[disabled]{cursor:progress;opacity:.85}html:not([data-motion=reduced]) .sys-retry[aria-busy=true] .sys-retry-mark{animation:.7s linear infinite sys-spin}@keyframes sys-spin{to{transform:rotate(1turn)}}.sys-ref{min-height:1.4em;font:400 .6875rem/1.4 var(--font-mono);letter-spacing:.06em;color:var(--color-fg-dim);margin-top:1rem}.sys-routes ul{border-left:1px solid var(--color-line-strong);margin-top:1rem;padding:0;list-style:none;position:relative}.sys-routes ul:before{content:"";background:var(--color-accent);width:9px;height:9px;position:absolute;top:-5px;left:-5px}.sys-routes li{position:relative}.sys-route{min-height:3.5rem;color:var(--color-fg-muted);transition:color var(--dur-fast) ease;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"node name path""node note note";align-items:center;column-gap:.85rem;padding:.6rem 0 .6rem 1.75rem;display:grid;position:relative}.sys-route:before{content:"";background:var(--color-line-strong);transform-origin:0;width:1.75rem;height:1px;transition:background-color var(--dur-fast) ease, height var(--dur-fast) ease;position:absolute;top:50%;left:0}.sys-node{border:1px solid var(--color-fg-dim);background:var(--color-void);width:.65rem;height:.65rem;transition:transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;grid-area:node}.sys-route-name{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-fg);transition:transform var(--dur-base) var(--ease-out-quart);grid-area:name;font-size:1.375rem;font-weight:500;line-height:1.1}.sys-route-path{font:400 .75rem/1 var(--font-mono);color:var(--color-fg-dim);grid-area:path}.sys-route-note{font:400 .6875rem/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-fg-dim);grid-area:note;margin-top:.2rem}.sys-route:hover,.sys-route:focus-visible{color:var(--color-fg)}.sys-route:hover:before,.sys-route:focus-visible:before{background:var(--color-accent);height:2px}.sys-route:hover .sys-node,.sys-route:focus-visible .sys-node{background:var(--color-accent);border-color:var(--color-accent);transform:rotate(45deg)}.sys-route:hover .sys-route-name,.sys-route:focus-visible .sys-route-name{transform:translate(.25rem)}.sys-route:hover .sys-route-path,.sys-route:focus-visible .sys-route-path{color:var(--color-fg-muted)}html:not([data-motion=reduced]) .sys-rule{animation:sys-draw var(--dur-hero) var(--ease-out-quart) .12s both}html:not([data-motion=reduced]) .sys-route:before{animation:sys-draw var(--dur-enter) var(--ease-out-quart) both;animation-delay:calc(.3s + var(--i,0) * var(--stagger) * 1.5)}html:not([data-motion=reduced]) .sys-node{animation:sys-pop var(--dur-base) var(--ease-out-quart) both;animation-delay:calc(.42s + var(--i,0) * var(--stagger) * 1.5)}@keyframes sys-draw{0%{transform:scaleX(0)}}@keyframes sys-pop{0%{opacity:0;scale:.4}}html[data-motion=reduced] .sys-route,html[data-motion=reduced] .sys-route:before,html[data-motion=reduced] .sys-node,html[data-motion=reduced] .sys-route-name{transition:none}}@layer utilities;
