@layer features{.speed-page{width:min(var(--layout-content-max),100%);margin:0 auto;padding:0 max(var(--layout-page-gutter),env(safe-area-inset-right)) 96px max(var(--layout-page-gutter),env(safe-area-inset-left))}.speed-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.7fr);gap:clamp(32px,6vw,88px);align-items:center;padding:clamp(48px,7vw,84px) 0 clamp(32px,4vw,52px)}.speed-hero__copy h1{max-width:12ch;margin:0;color:var(--text-primary);font-family:var(--font-display);font-size:clamp(44px,5.4vw,72px);font-weight:600;line-height:.94;text-wrap:balance}.speed-hero__copy h1 em{color:var(--accent-primary);font-style:normal}.speed-hero__lede{max-width:56ch;margin:22px 0 0;color:var(--text-secondary);font-size:var(--font-size-lead);line-height:1.58}.speed-hero__lede code{padding:1px 5px;color:var(--code-inline-text);font-family:var(--font-code);font-size:var(--font-size-body-sm);background:var(--code-inline-surface);border-radius:var(--radius-sm)}.speed-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.speed-hero__start{position:relative;overflow:hidden}.speed-hero__start[data-running=false]{animation:speed-start-ring 2.6s var(--ease-standard) infinite}.speed-hero__start[data-running=true]:after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.38) 50%,transparent 100%);animation:speed-start-sweep 1.2s linear infinite}.speed-hero__stop{--ui-button-hover-shadow: var(--shadow-offset-sm)}.speed-hero__stop svg{fill:currentColor;color:var(--text-danger)}@keyframes speed-start-ring{0%,to{box-shadow:0 0 #f05a2857}55%{box-shadow:0 0 0 10px #f05a2800}}@keyframes speed-start-sweep{0%{transform:translate(-100%)}to{transform:translate(100%)}}.speed-hero__error{margin:16px 0 0;color:var(--text-danger);font-size:var(--font-size-body-sm)}.speed-gauge{position:relative;display:grid;place-items:center;padding:18px;background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius-notched-surface);box-shadow:var(--shadow-offset-md)}.speed-gauge>svg{display:block;width:100%;max-width:320px;height:auto}.speed-gauge__track{fill:none;stroke:var(--border-subtle);stroke-width:10;stroke-linecap:round}.speed-gauge__value{fill:none;stroke:var(--accent-primary);stroke-width:10;stroke-linecap:round;transition:d var(--duration-standard) var(--ease-standard)}.speed-gauge__head{fill:var(--accent-highlight);stroke:var(--text-primary);stroke-width:1.5}.speed-gauge__ticks text{fill:var(--text-muted);font-family:var(--font-code);font-size:12px}.speed-gauge__readout{position:absolute;top:52%;display:grid;justify-items:center;text-align:center}.speed-gauge__readout strong{color:var(--text-primary);font-family:var(--font-display);font-size:clamp(34px,4vw,46px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.speed-gauge__unit{margin-top:2px;color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta);letter-spacing:.14em;text-transform:uppercase}.speed-gauge__status{margin-top:10px;color:var(--text-secondary);font-size:var(--font-size-meta)}.speed-gauge[data-phase=measuring] .speed-gauge__head{animation:speed-gauge-pulse var(--duration-loading) var(--ease-standard) infinite}@keyframes speed-gauge-pulse{0%,to{r:5}50%{r:7}}.speed-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:8px}.speed-metric{display:grid;align-content:start;padding:18px 20px 20px;background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius-surface)}.speed-metric__label{display:flex;gap:8px;align-items:center;margin:0;color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta);font-weight:640;letter-spacing:.14em;text-transform:uppercase}.speed-metric__label svg{flex:none;color:var(--accent-primary)}.speed-metric__value{margin:12px 0 0;color:var(--text-primary);font-family:var(--font-display);font-size:clamp(28px,3vw,38px);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}.speed-metric__value span{margin-left:6px;color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-body-sm)}.speed-metric__detail{margin:10px 0 0;color:var(--text-muted);font-size:var(--font-size-meta)}.speed-metric--progress{align-content:space-between}.speed-progress{margin-top:18px;overflow:hidden;background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);block-size:12px}.speed-progress__fill{display:block;background:var(--accent-primary);block-size:100%;transition:inline-size var(--duration-standard) var(--ease-standard)}.speed-path,.speed-chart,.speed-history,.speed-references{margin-top:20px;padding:22px 24px 26px;background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius-surface)}.speed-path h2,.speed-chart h2,.speed-history h2,.speed-references h2{display:flex;gap:8px;align-items:center;margin:0;color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta);font-weight:640;letter-spacing:.14em;text-transform:uppercase}.speed-path h2 svg,.speed-chart h2 svg,.speed-history h2 svg,.speed-references h2 svg{flex:none;color:var(--accent-primary)}.speed-path__header,.speed-history__header,.speed-references__header{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}.speed-path__header p,.speed-history__header p,.speed-references__header p{margin:0;color:var(--text-secondary);font-size:var(--font-size-ui)}.speed-path__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.5fr) minmax(0,1fr);gap:16px;align-items:center;margin-top:18px}.speed-path__node{padding:16px 18px 18px;background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-control)}.speed-path__node--edge{text-align:right}.speed-path__label{display:flex;gap:8px;align-items:center;margin:0;color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta);letter-spacing:.12em;text-transform:uppercase}.speed-path__node--edge .speed-path__label{justify-content:flex-end}.speed-path__label svg{flex:none;color:var(--accent-primary)}.speed-path__value{margin:8px 0 0;overflow-wrap:anywhere;color:var(--text-primary);font-size:var(--font-size-body);font-weight:640}.speed-path__facts{display:grid;gap:8px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border-subtle)}.speed-path__facts>div{display:flex;gap:12px;align-items:baseline;justify-content:space-between}.speed-path__node--edge .speed-path__facts>div{flex-direction:row-reverse}.speed-path__facts dt{flex:none;color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta);letter-spacing:.08em;text-transform:uppercase}.speed-path__facts dd{margin:0;overflow-wrap:anywhere;color:var(--text-secondary);font-size:var(--font-size-ui);text-align:right}.speed-path__node--edge .speed-path__facts dd{text-align:left}.speed-path__mono{font-family:var(--font-code);font-variant-numeric:tabular-nums}.speed-path__link{display:grid;justify-items:center;gap:8px}.speed-path__latency{color:var(--text-primary);font-family:var(--font-code);font-size:var(--font-size-body-sm);font-variant-numeric:tabular-nums;font-weight:640}.speed-path__jitter{color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta)}.speed-path__wire{position:relative;display:block;inline-size:100%;background:repeating-linear-gradient(90deg,var(--border-strong) 0 6px,transparent 6px 12px);block-size:2px}.speed-path__wire:after{position:absolute;top:-5px;right:-2px;color:var(--accent-primary);content:"▶";font-size:var(--font-size-meta);line-height:1}.speed-path__packet{position:absolute;top:-3px;left:0;display:block;width:8px;background:var(--accent-primary);border-radius:var(--radius-pill);opacity:0;block-size:8px}.speed-path__link[data-active=true] .speed-path__wire{animation:speed-wire-drift .6s linear infinite}.speed-path__link[data-active=true] .speed-path__packet{animation:speed-packet-travel 1.4s var(--ease-standard) infinite}.speed-path__link[data-active=true] .speed-path__packet--trailing{animation-delay:.48s}@keyframes speed-wire-drift{to{background-position:12px 0}}@keyframes speed-packet-travel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}to{left:calc(100% - 8px);opacity:0}}.speed-chart>svg{display:block;width:100%;height:clamp(180px,24vw,240px);margin-top:14px}.speed-chart__grid line{stroke:var(--border-subtle);stroke-width:1}.speed-chart__grid-vertical{stroke-dasharray:2 5}.speed-chart__scale text{fill:var(--text-muted);font-family:var(--font-code);font-size:12px}.speed-chart__area{fill:url(#speed-chart-fill)}.speed-chart__line{fill:none;stroke:var(--accent-primary);stroke-width:2.4;stroke-linejoin:round}.speed-chart__empty{margin:6px 0 0;color:var(--text-muted);font-size:var(--font-size-ui)}.speed-history__list{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}.speed-history__list li{display:grid;grid-template-columns:auto minmax(80px,1fr) auto auto auto;gap:14px;align-items:center;padding:10px 14px;background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-control)}.speed-history__clock,.speed-history__rate,.speed-history__delta,.speed-history__detail{font-family:var(--font-code);font-size:var(--font-size-meta);font-variant-numeric:tabular-nums}.speed-history__clock{color:var(--text-muted)}.speed-history__rate{color:var(--text-primary);font-size:var(--font-size-body-sm);font-weight:640}.speed-history__detail{color:var(--text-muted)}.speed-history__delta[data-direction=up]{color:var(--text-success)}.speed-history__delta[data-direction=down]{color:var(--text-danger)}.speed-history__delta[data-direction=none]{color:var(--text-muted)}.speed-history__bar{overflow:hidden;background:var(--surface);border-radius:var(--radius-pill);block-size:8px}.speed-history__fill{display:block;background:var(--accent-primary);block-size:100%}.speed-references__note{margin:14px 0 0;color:var(--text-muted);font-size:var(--font-size-meta)}.speed-references__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:18px 0 0;padding:0;list-style:none}.speed-reference{position:relative;padding:16px 18px 18px;background:var(--surface-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-control)}.speed-reference:hover{border-color:var(--accent-primary)}.speed-reference__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}.speed-reference__mark{display:block;width:36px;height:36px;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-control)}.speed-reference__title{min-width:0}.speed-reference__kind{margin:0 0 4px;color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta);letter-spacing:.1em;text-transform:uppercase}.speed-reference__id{display:block;overflow:hidden;font-size:var(--font-size-body-sm);font-weight:640}.speed-reference__id--plain{margin:0;color:var(--text-primary)}.speed-reference__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 0}.speed-reference__facts dt{color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta);letter-spacing:.1em;text-transform:uppercase}.speed-reference__facts dd{margin:5px 0 0;color:var(--text-primary);font-size:var(--font-size-body-sm);font-variant-numeric:tabular-nums;font-weight:640}.speed-page__signature{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:24px 0 0;color:var(--text-muted);font-family:var(--font-code);font-size:var(--font-size-meta)}.speed-page__signature .ui-theme-logo{display:block;width:20px;height:20px}@media(max-width:1080px){.speed-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:860px){.speed-hero{grid-template-columns:minmax(0,1fr);padding-top:40px}.speed-hero__gauge{order:-1;justify-self:center;width:min(100%,360px)}.speed-path__row{grid-template-columns:minmax(0,1fr)}.speed-path__node--edge{text-align:left}.speed-path__link{justify-items:start}.speed-path__wire{inline-size:100%}}@media(max-width:560px){.speed-page{padding:0 max(18px,env(safe-area-inset-right)) 60px max(18px,env(safe-area-inset-left))}.speed-metrics{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){.speed-gauge[data-phase=measuring] .speed-gauge__head,.speed-hero__start,.speed-hero__start:after,.speed-path__link[data-active=true] .speed-path__wire,.speed-path__link[data-active=true] .speed-path__packet{animation:none}}}
