/* Brand tokens, fonts and .btn are generated from the main site's source. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--page);color:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration-color:var(--stroke-2);text-underline-offset:.25em}a:hover{color:var(--accent)}[hidden]{display:none!important}
h1,p{margin:0}button,input,textarea{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.header{height:65px;min-height:65px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;width:100%;padding-inline:max(var(--gutter),calc((100% - 1040px)/2));gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}.brand:hover{color:var(--text)}.brand img{display:block}
.header-links{display:flex;gap:24px;align-items:center;font-size:15px;color:var(--text-2)}.header-links>a{text-decoration:none}.languages{display:flex;gap:2px;padding:3px;border:1px solid var(--stroke);border-radius:6px}.languages button{border:0;border-radius:3px;background:transparent;font-size:12px;font-family:var(--mono);padding:5px 8px;color:var(--text-2)}.languages [aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}
main{width:min(100% - 40px,520px);margin:clamp(28px,7vh,70px) auto 40px;isolation:isolate;position:relative}
main::before{content:'';position:absolute;inset:-90px 0 30%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 32%,rgba(94,230,196,.035),transparent 65%)}
.card{position:relative;padding:18px 36px 30px;isolation:isolate}.card-surface{position:absolute;inset:0;background:var(--card);border:1px solid var(--stroke-2);border-radius:var(--radius-lg);z-index:-1;transform-origin:top center;box-shadow:0 2px 2px #00000008,0 14px 56px #00000012}
.device-visual{width:100%;height:135px;display:grid;place-items:center;pointer-events:none}.device-visual svg{width:280px;height:120px;overflow:visible;color:var(--accent)}.visual-orbits{opacity:.09;stroke-dasharray:1 9}.source-device{transition:opacity 220ms ease,transform 280ms cubic-bezier(.23,1,.32,1);opacity:0;transform:translateX(12px);stroke:var(--text-3);stroke-width:1.25}.source-line{stroke:var(--accent);opacity:.55}.tv-device{transform-origin:152px 60px;transition:transform 280ms cubic-bezier(.77,0,.175,1)}.screen-fill{fill:var(--page)}.screen-frame{stroke:#59646e;stroke-width:1.1}.screen-inner{stroke:var(--stroke);stroke-width:1}.stand{stroke:#68737d;stroke-width:1.5;stroke-linecap:round}.screen-logo{opacity:.9;transform-origin:152px 59px;transition:opacity 180ms ease,transform 280ms cubic-bezier(.23,1,.32,1)}.signal{fill:var(--accent);opacity:.55}.screen-check,.screen-error{opacity:0;transform:scale(.88);transform-origin:152px 59px;transition:opacity 180ms ease,transform 280ms cubic-bezier(.23,1,.32,1)}.screen-check circle{fill:#5ee6c414;stroke:#5ee6c43d}.screen-check path,.screen-error path{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.screen-error path{stroke:#ffb4ab}.transfer-path{opacity:0}.transfer-path>path{stroke:#5ee6c433;stroke-dasharray:2 5}.packet{fill:var(--accent);opacity:0}
.card[data-visual=content] .tv-device,.card[data-visual=waiting] .tv-device,.card[data-visual=approved] .tv-device,.card[data-visual=importing] .tv-device{transform:translateX(30px)}
.card:not([data-visual=code]):not([data-visual=success]):not([data-visual=error]) .source-device{opacity:1;transform:translateX(0);transition:opacity 220ms ease,transform 280ms cubic-bezier(.23,1,.32,1)}
.card[data-visual=waiting] .transfer-path,.card[data-visual=approved] .transfer-path,.card[data-visual=importing] .transfer-path{opacity:1}
.card[data-visual=approved] .packet,.card[data-visual=importing] .packet{animation:transfer 1000ms linear 5}.card[data-visual=approved] .packet-two,.card[data-visual=importing] .packet-two{animation-delay:450ms}
.card[data-visual=success] .screen-logo,.card[data-visual=error] .screen-logo{opacity:0;transform:scale(.88)}.card[data-visual=success] .screen-check,.card[data-visual=error] .screen-error{opacity:1;transform:scale(1)}.card[data-visual=success] .screen-frame{stroke:var(--accent)}
.card[data-visual=success] .tv-device{animation:arrive 420ms cubic-bezier(.23,1,.32,1)}
@keyframes transfer{0%{transform:translateX(0);opacity:0}15%{opacity:.85}80%{opacity:.85}100%{transform:translateX(64px);opacity:0}}
@keyframes arrive{0%{transform:translateY(3px) scale(.96)}100%{transform:translateY(0) scale(1)}}
.step{position:relative}.step h1{font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-.025em;text-wrap:balance;text-align:center}.description{font-size:15px;line-height:1.55;color:var(--text-2);margin:12px auto 26px;max-width:40ch;text-align:center}
input,textarea{display:block;width:100%;border:1px solid var(--stroke-2);background:var(--page);border-radius:var(--radius);outline:none;padding:13px 14px;font-size:16px;line-height:1.5;transition:border-color 150ms ease,box-shadow 150ms ease}input:focus,textarea:focus{border-color:#5ee6c47a;box-shadow:0 0 0 3px #5ee6c40b}input::placeholder,textarea::placeholder{color:#66717d;opacity:.72}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#ffb4ab80}.code{height:80px;text-align:center;font-family:var(--mono);font-size:29px;font-weight:500;letter-spacing:.34em;padding-left:calc(14px + .34em);text-transform:uppercase}.code::placeholder{font-weight:400;opacity:.5}.mono,textarea{font-family:var(--mono)}
.btn.primary{position:relative;width:100%;min-height:48px;padding:11px 44px;font-size:15px;line-height:1.5;transition:background 150ms ease,transform 120ms cubic-bezier(.23,1,.32,1),opacity 150ms ease}.primary:disabled{opacity:.6}.button-arrow{position:absolute;right:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms cubic-bezier(.23,1,.32,1),opacity 150ms ease}.button-spinner{position:absolute;right:18px;width:15px;height:15px;border:1.5px solid #0b101633;border-top-color:var(--on-accent);border-radius:50%;display:none}.primary[aria-busy=true] .button-arrow{opacity:0;transform:translateX(4px)}.primary[aria-busy=true] .button-spinner{display:block;animation:spin 700ms linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.btn.secondary{width:100%;min-height:36px;margin-top:8px;border-color:transparent;font-size:14px;color:var(--text-2)}.error{color:#ffb4ab;font-size:13px;line-height:1.5;margin:10px 0 16px;min-height:0}.error:empty{margin-top:0;height:20px;margin-bottom:0}.challenge{margin:16px 0;min-height:65px;display:flex;justify-content:center}.paired{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-2);font-size:12px;margin:0 0 14px}.paired .mono{color:var(--text);font-size:11px;letter-spacing:.06em}.dot{height:5px;width:5px;border-radius:50%;background:var(--accent)}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border:1px solid var(--stroke);border-radius:var(--radius);background:var(--page);margin:24px 0 22px}.tabs button{position:relative;border:0;background:transparent;font-size:14px;padding:8px 4px;border-radius:3px;color:var(--text-2);z-index:1}.tab-indicator{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 4.5px);background:var(--fill-hover);border:1px solid var(--stroke);border-radius:3px;pointer-events:none;transition:transform 220ms cubic-bezier(.23,1,.32,1)}.tabs[data-kind=yaml] .tab-indicator{transform:translateX(calc(100% + 3px))}.tabs [aria-selected=true]{color:var(--text)}label{display:block;font-size:13px;color:var(--text-2);margin-bottom:7px}.field-hint{font-size:12px;color:var(--text-3);line-height:1.5;margin-top:8px}.yaml-hint{display:flex;gap:14px;justify-content:space-between}.yaml-hint output{white-space:nowrap}textarea{resize:vertical;min-height:180px;max-height:440px;font-size:12px;line-height:1.65}
.result{text-align:center;min-height:210px}#result-title:focus{outline:none}.result .description{margin-bottom:22px}.label-box{border:1px solid var(--stroke-2);border-radius:var(--radius);padding:15px 16px;margin-top:16px;background:var(--page)}.label-box>span{display:block;font-size:12px;color:var(--text-3)}.label-box output{display:block;font-size:23px;color:var(--accent);letter-spacing:.08em;margin-top:3px}.result-status{font-size:12px;color:var(--text-3);line-height:1.5;margin:18px 0;min-height:18px}.result .primary{margin-top:20px}.result-status:empty{display:none}
.privacy{margin:20px auto 0;text-align:center;font-size:12px;line-height:1.6;color:var(--text-3);max-width:46ch;padding:0 6px}.privacy a{white-space:nowrap}footer{margin-top:auto;border-top:1px solid var(--stroke);padding:22px max(var(--gutter),calc((100% - 1040px)/2));display:flex;justify-content:space-between;gap:16px;color:var(--text-3);font-size:13px}footer a{text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(hover:hover) and (pointer:fine){.primary:hover:not(:disabled) .button-arrow{transform:translateX(3px)}.tabs button:hover{color:var(--text)}}
@media(max-width:600px){main{width:calc(100% - 32px);margin-top:24px;margin-bottom:28px}.header{padding-inline:20px}.header-links{gap:15px}.header-links>a{font-size:13px}.card{padding:10px 22px 24px}.device-visual{height:122px}.device-visual svg{width:250px;height:107px}.step h1{font-size:27px}.description{font-size:14px;max-width:34ch;margin-bottom:22px}.code{height:74px;font-size:27px}.tabs{margin-top:22px}footer{flex-wrap:wrap;gap:5px;padding:20px;font-size:12px}textarea{font-size:16px;min-height:190px}.result{min-height:200px}.label-box output{font-size:22px}}
@media(min-width:601px) and (max-height:800px){main{margin-top:26px}.device-visual{height:118px}.card{padding-top:8px}.step h1{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.source-device,.tv-device,.screen-logo,.screen-check,.screen-error{transform:none!important}.packet{display:none}.button-spinner{border-color:var(--on-accent);border-style:dotted}.tab-indicator{transition:none}}
body[data-page-hidden=true] .packet,body[data-page-hidden=true] .button-spinner{animation-play-state:paused}

.tabs[data-instant=true] .tab-indicator{transition:none}

@media(max-width:359px){.header-links>a{display:none}}

.code-flight{position:fixed;top:0;left:0;z-index:20;pointer-events:none;white-space:nowrap;font-family:var(--mono);font-size:29px;line-height:1;font-weight:500;letter-spacing:.34em;transform-origin:top left;color:var(--text)}

.card[data-visual=unknown] .source-device{opacity:0}

.code-flight>span{display:inline-block;transform-origin:top left}