.sys{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100dvh;overflow:clip;padding:var(--space-96) var(--space-24) var(--space-64);background-color:var(--surface-0);color:var(--ink-1);text-align:center}.sys:before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(55% 45% at 50% 28%,color-mix(in srgb,var(--accent) 12%,transparent),transparent);pointer-events:none}.sys[data-inset=true]{min-height:0;padding:var(--space-48) 0 var(--space-64);background-color:transparent}.sys[data-inset=true]:before{content:none}.sys-brand{position:absolute;top:var(--space-20);left:var(--space-24);min-height:var(--hit-target-min);color:var(--ink-1);text-decoration:none}.sys-brand,.sys-brand .wordmark{display:inline-flex;align-items:center}.sys-brand .wordmark{gap:var(--space-8)}.sys-brand .wordmark-name{font-family:var(--font-display);font-size:1.1875rem;font-weight:var(--display-l-font-weight);font-stretch:var(--display-s-font-stretch);letter-spacing:-.035em;line-height:1}.sys-inner{gap:var(--space-16);max-width:560px}.sys-inner,.sys-stage{display:grid;justify-items:center}.sys-stage{gap:var(--space-20);margin-bottom:var(--space-8)}.sys-phone{position:relative;display:grid;place-items:center;width:128px;aspect-ratio:9/16;border:1.5px solid var(--line-strong);border-radius:var(--radius-xl);corner-shape:var(--radius-xl-corner-shape);background-color:var(--surface-1);box-shadow:var(--elevation-e2-shadow);transform:rotate(-4deg)}.sys-code{color:var(--ink-1);font-family:var(--font-display);font-size:2.5rem;font-weight:var(--display-l-font-weight);font-stretch:var(--display-l-font-stretch);letter-spacing:-.04em;line-height:1}.sys-code-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-full);background-color:var(--error-subtle);color:var(--error)}.sys-cap{position:absolute;bottom:16%;padding:2px var(--space-8);border-radius:var(--radius-sm);background-color:var(--accent);color:var(--ink-on-accent);font-size:var(--text-label-font-size);font-weight:var(--text-label-font-weight);white-space:nowrap}.sys-track{position:relative;display:flex;gap:var(--space-4);width:240px;height:28px;padding:var(--space-4);border:1px solid var(--line-subtle);border-radius:var(--radius-md);corner-shape:var(--radius-md-corner-shape);background-color:var(--surface-1)}.sys-clip{flex:1 1;border-radius:var(--radius-sm);background-color:color-mix(in srgb,var(--accent) 30%,var(--surface-2))}.sys-gap{flex:1 1;border:1.5px dashed var(--line-strong);border-radius:var(--radius-sm)}.sys[data-kind=error] .sys-gap{border:0;background-color:color-mix(in srgb,var(--error) 45%,var(--surface-2))}.sys-playhead{position:absolute;top:calc(var(--space-4) * -2);bottom:calc(var(--space-4) * -2);left:var(--space-8);width:2px;border-radius:var(--radius-full);background-color:var(--ink-1);transform:translateX(132px)}.sys-title{margin:0;color:var(--ink-1);font-family:var(--font-display);font-size:clamp(2rem,1.55rem + 1.5vw,3rem);font-weight:var(--display-l-font-weight);font-stretch:var(--display-l-font-stretch);letter-spacing:-.035em;line-height:1.04;text-wrap:balance}.sys-body{max-width:46ch;margin:0;color:var(--ink-2);font-size:var(--text-body-l-font-size);line-height:var(--text-body-l-line-height);text-wrap:pretty}.sys-body a{color:var(--ink-1);text-decoration:underline;text-underline-offset:3px}.sys-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-12);margin-top:var(--space-8)}.sys-actions .button{gap:var(--space-8);min-height:var(--hit-target-min)}.sys-ref{margin:0;color:var(--ink-3);font-family:var(--font-mono);font-size:var(--text-mono-s-font-size)}@media (max-width:559px){.sys{padding:var(--space-96) var(--space-20) var(--space-48)}.sys-actions{display:grid;width:100%}}@media (prefers-reduced-motion:no-preference){.sys-phone{animation:sys-rise var(--duration-3xl) var(--easing-enter) both}.sys-cap{animation:sys-cap-in var(--duration-2xl) var(--easing-pop) both;animation-delay:var(--duration-3xl)}.sys-playhead{animation:sys-seek var(--motion-ambient-max-duration) var(--easing-content) both}.sys-gap{animation:sys-blink var(--duration-5xl) var(--easing-content) infinite alternate;animation-delay:var(--motion-ambient-max-duration)}.sys-actions,.sys-body,.sys-title{animation:sys-fade var(--motion-enter-duration) var(--motion-enter-easing) both}.sys-body{animation-delay:var(--duration-sm)}.sys-actions{animation-delay:var(--duration-lg)}}@keyframes sys-rise{0%{opacity:0;transform:translateY(12px) rotate(-8deg)}}@keyframes sys-cap-in{0%{opacity:0;transform:translateY(6px) scale(.9)}}@keyframes sys-seek{0%{transform:translateX(0)}}@keyframes sys-blink{0%{opacity:.35}}@keyframes sys-fade{0%{opacity:0;transform:translateY(6px)}}