@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper:#f6f5f1; --card:#fffefa; --ink:#252823; --muted:#6b6d66;
  --line:#dedfd6; --orange:#b4482b; --green:#527257;
  --mono:'IBM Plex Mono',monospace; --sans:'DM Sans',sans-serif;
  --display:Manrope,var(--sans); --ease:cubic-bezier(.22,1,.36,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
::selection { background:#e8b6a3; color:var(--ink); }
a { color:inherit; text-decoration:none; transition:color .2s; }
a:hover { color:var(--orange); }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
[hidden] { display:none!important; }
.wrap { max-width:1200px; margin:auto; padding-inline:48px; }
.masthead { height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; font:800 20px var(--display); letter-spacing:.03em; }
.brand-mark { width:42px; height:42px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:27px; position:relative; box-shadow:inset 0 1px 1px #ffffff25; }
.brand-mark span { font:13px var(--sans); color:#efa487; position:absolute; right:4px; top:1px; }
.brand-sub { display:block; font:8px var(--mono); letter-spacing:.14em; color:var(--muted); margin-top:4px; }
nav { display:flex; gap:32px; font-size:13px; }
nav a { position:relative; padding:8px 0; }
nav a::after { content:''; position:absolute; left:0; bottom:2px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
nav a:hover::after { transform:scaleX(1); }
nav span { margin-left:7px; }
.intro { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; padding:76px 0 70px; gap:48px; }
.eyebrow { font:500 10px/1.5 var(--mono); letter-spacing:.13em; margin:0; }
.dot { display:inline-block; width:6px; height:6px; background:var(--orange); border-radius:50%; margin-right:9px; vertical-align:1px; }
h1 { font:600 clamp(48px,5.9vw,77px)/1.09 var(--display); letter-spacing:-.065em; margin:22px 0 25px; }
.usb-word { color:var(--orange); }
.intro-copy { color:var(--muted); font-size:16px; line-height:1.8; margin:0; }
.hero-link { display:inline-flex; align-items:center; gap:26px; font-size:13px; font-weight:600; margin-top:28px; padding-bottom:6px; border-bottom:1px solid #b8bbb0; }
.hero-link span { transition:transform .25s var(--ease); }
.hero-link:hover span { transform:translateY(4px); }
.intro-text>* { animation:arrive .8s var(--ease) both; }
.intro-text h1 { animation-delay:.08s; }
.intro-copy { animation-delay:.16s!important; }
.hero-link { animation-delay:.23s!important; }

/* A diagram of the signal change, rather than a simulated job status. */
.connection-art { width:100%; max-width:368px; aspect-ratio:1; justify-self:end; position:relative; border:1px solid #d3d5c9; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 48% 36%,#fdfcf8 0%,#efeee7 62%,#e5e7dc 100%); animation:arrive 1s .2s var(--ease) both; }
.connection-art::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 23px,#a6ae9712 24px),repeating-linear-gradient(90deg,transparent,transparent 23px,#a6ae9712 24px); }
.art-top,.art-bottom { position:absolute; z-index:2; font:9px var(--mono); letter-spacing:.05em; }
.art-top { top:17%; width:100%; display:flex; justify-content:center; align-items:center; gap:9px; }
.art-dot { width:5px; height:5px; background:var(--green); border-radius:50%; }
.art-bottom { bottom:15%; left:23%; right:23%; display:flex; justify-content:space-between; color:var(--muted); }
.signal-arrow { color:var(--orange); margin:0 4px; }
.signal-orbit { position:absolute; border:1px solid #adb7a332; border-radius:50%; left:50%; top:46%; transform:translate(-50%,-50%); }
.orbit-one { width:52%; height:52%; }
.orbit-two { width:71%; height:71%; }
.port { position:absolute; top:29%; left:27%; width:46%; height:17%; border-radius:23px; border:8px solid #33372e; background:#e4e3d9; box-shadow:0 7px 12px #33372e10,inset 0 3px 4px #25282330; }
.port span { display:block; width:73%; height:22%; background:#282b25; border-radius:8px; margin:13% auto; }
.cable { position:absolute; width:6%; height:51%; background:linear-gradient(90deg,#262921,#53564c 46%,#292c25); top:59%; left:47%; border-radius:12px; }
.connector { position:absolute; top:46%; left:35%; width:30%; height:24%; background:linear-gradient(110deg,#45493f,#292c25 75%); border:1px solid #24271f; border-radius:12px 12px 25px 25px; box-shadow:inset 1px 1px 1px #ffffff30,0 9px 16px #25282324; animation:seat-connector 7s 1s var(--ease) infinite; }
.connector i { position:absolute; top:-33%; left:20%; width:60%; height:38%; background:linear-gradient(90deg,#b4b4a8,#e5e4da 45%,#b4b5a9); border:4px solid #34372e; border-radius:10px 10px 0 0; }
.connector b { position:absolute; top:39%; left:40%; width:21%; height:6%; border-radius:5px; background:#da8f70; box-shadow:0 0 8px #da8f7040; }
.bench-caption { display:flex; justify-content:space-between; margin-bottom:15px; color:var(--muted); font:9px var(--mono); letter-spacing:.08em; }
.bench { display:grid; grid-template-columns:1.18fr 1fr; border:1px solid #d6d8ce; border-radius:20px; overflow:hidden; background:var(--card); box-shadow:0 4px 5px #25282302,0 24px 48px -32px #25282322; scroll-margin-top:28px; }
.patch-panel,.job-panel { padding:38px 40px; min-width:0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.panel-heading .eyebrow { color:var(--muted); font-size:9px; }
.panel-heading h2 { font-size:26px; font-weight:600; letter-spacing:-.04em; margin-top:7px; }
.tool-badge { font:10px var(--mono); border:1px solid var(--line); border-radius:9px; width:42px; height:47px; display:flex; justify-content:center; align-items:center; color:var(--muted); background:#f6f6f0; }
.small { font-size:9px; letter-spacing:.08em; color:var(--muted); }
.mono { font-family:var(--mono); }
form>label { display:block; font-size:14px; font-weight:500; margin-top:25px; margin-bottom:10px; }
.field-number { color:#92978b; font:10px var(--mono); margin-right:10px; }
input[type=text],input[type=url],input:not([type]) { display:block; background:#f8f8f4; color:var(--ink); border:1px solid #daddd2; border-radius:9px; width:100%; height:53px; padding:0 16px; font-size:13px; transition:border-color .2s,background .2s,box-shadow .2s; }
input::placeholder { color:#93998b; }
input:hover { border-color:#b8c0ae; }
input:focus { background:#fff; border-color:var(--orange); box-shadow:0 0 0 3px #b4482b0c; }
input:focus-visible,button:focus-visible,a:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
.field-help { font-size:11px; color:var(--muted); line-height:1.7; margin:9px 0 0; }
.field-help strong { font:10px var(--mono); color:var(--ink); overflow-wrap:anywhere; }
.modes { padding:0; border:0; margin:28px 0 0; }
.modes legend { font-size:12px; color:var(--muted); margin-bottom:10px; }
.mode { display:flex; align-items:center; gap:12px; padding:13px 12px; border:1px solid transparent; border-radius:9px; font-size:13px; cursor:pointer; transition:background .2s,border-color .2s; }
.mode:has(input:checked) { border-color:#d7dbcf; background:#f2f4ed; }
.mode:hover { background:#f4f5ef; }
.mode+.mode { margin-top:4px; }
input[type=radio],input[type=checkbox] { accent-color:var(--orange); flex-shrink:0; width:16px; height:16px; margin:0; }
.mode strong { font-weight:500; display:block; }
.mode small { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.mode-tag { font:8px var(--mono); letter-spacing:.06em; margin-left:auto; color:var(--green); background:#e4eadf; padding:4px 7px; border-radius:4px; }
.consent { display:flex; align-items:flex-start; gap:11px; font-size:11px; font-weight:400; line-height:1.65; color:var(--muted); margin-top:24px; margin-bottom:23px; }
.consent input { margin-top:2px; }
.primary { width:100%; display:flex; align-items:center; justify-content:space-between; background:var(--orange); color:#fffaf4; border:1px solid #a94327; padding:16px 20px; border-radius:10px; font-size:14px; font-weight:500; box-shadow:inset 0 1px 1px #ffffff24,0 3px 5px #62271214; transition:background .2s,box-shadow .2s,transform .25s var(--ease); }
.primary span { font-size:21px; font-weight:400; transition:transform .25s var(--ease); }
.primary:hover { background:#a43c21; color:white; box-shadow:inset 0 1px 1px #ffffff24,0 7px 14px #62271220; transform:translateY(-2px); }
.primary:hover span { transform:translate(3px,-3px); }
.download:hover span { transform:translateY(3px); }
.primary:active { transform:translateY(1px); }
.signin-note { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); color:#62645c; font-size:13px; line-height:1.7; }
.signin-note strong { display:block; color:var(--ink); font-weight:600; }
.signin-note p { margin:6px 0 0; }
.signin-note a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.notice,.form-error { font-size:11px; line-height:1.7; color:#903a1f; background:#faeee7; border-left:2px solid var(--orange); border-radius:0 6px 6px 0; padding:13px; margin:12px 0; animation:arrive .3s var(--ease); }

/* A warm inset panel keeps progress separate from the input form. */
.job-panel { --muted:#74716b; background:#f1eee8; color:var(--ink); display:flex; flex-direction:column; position:relative; border-left:1px solid #e2ddd4; }
.job-panel::before { content:''; position:absolute; inset:0; background:linear-gradient(160deg,#ffffff35,transparent 65%); pointer-events:none; }
.job-panel>* { position:relative; }
.job-panel .panel-heading { margin-bottom:38px; }
.job-panel .eyebrow { color:#77736c; }
.monitor-indicator { width:7px; height:7px; background:#aba39a; border-radius:50%; box-shadow:0 0 0 4px #aba39a12; }
.job-id { margin:0 0 17px; }
.job-id .small { display:block; font-size:9px; }
.job-id strong { display:block; font:500 35px/1.2 var(--display); letter-spacing:-.04em; margin-top:13px; overflow-wrap:anywhere; }
.tracking-note { font-size:13px; line-height:1.8; color:var(--muted); margin:0; padding:0 0 27px; border-bottom:1px solid #ddd7ce; }
.steps { list-style:none; margin:29px 0 25px; padding:0; }
.steps li { display:flex; gap:15px; padding:0 0 30px; position:relative; color:#79756e; }
.steps li:last-child { padding-bottom:0; }
.steps li:not(:last-child)::after { position:absolute; content:''; width:1px; top:35px; bottom:6px; left:15px; background:#d7d0c6; transition:background .4s; }
.step-mark { position:relative; font:10px var(--mono); width:32px; height:32px; border:1px solid #d0c9be; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#f8f6f1; transition:border-color .4s,background .4s,color .4s; }
.steps strong { font-size:13px; font-weight:500; display:block; }
.steps small { display:block; font-size:11px; margin-top:4px; color:#79756e; }
.steps li.active { color:var(--ink); }
.steps li.active .step-mark { border-color:var(--orange); color:var(--orange); background:#f8e8df; }
.steps li.active .step-mark::after { content:''; position:absolute; inset:-5px; border:1px solid #b4482b40; border-radius:50%; animation:progress-pulse 2s ease-out infinite; }
.steps li.done { color:var(--ink); }
.steps li.done .step-mark { background:#353630; color:#fffefa; border-color:#353630; }
.steps li.done:not(:last-child)::after { background:#a9a398; }
.job-status { padding:19px 17px; border:1px solid #dfd8cd; border-radius:10px; background:#fbf9f4; margin:3px 0 17px; }
.status-label { font:9px var(--mono); letter-spacing:.08em; color:#81786e; }
.job-status p { font-size:12px; margin:8px 0 0; line-height:1.8; overflow-wrap:anywhere; color:#66615a; }
.download { margin:0 0 15px; }
.job-links { display:flex; flex-wrap:wrap; gap:20px; font-size:11px; color:var(--orange); }
.job-links a:hover { color:#8b321b; }
.text-button { align-self:flex-start; border:0; background:none; padding:12px 0; font-size:11px; color:var(--muted); }
.text-button:hover { color:var(--ink); }
.receipt { margin-top:auto; padding-top:27px; }
.receipt .small { font-size:8px; }
.package-files { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px; }
.package-files>span { font-size:10px; color:#797168; }
.package-files b { display:block; font:9px var(--mono); color:#625a51; width:33px; height:39px; border:1px solid #d4ccbf; border-radius:5px 10px 5px 5px; padding-top:14px; text-align:center; margin-bottom:8px; background:#faf8f2; }
.process { padding:78px 0 55px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:25px; }
h2 { font:500 25px/1.4 var(--display); letter-spacing:-.035em; margin:0; }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; margin-top:38px; }
.process-grid article { padding-top:18px; border-top:1px solid var(--line); }
.process-number { font:10px var(--mono); color:var(--orange); }
h3 { font-size:15px; font-weight:500; margin:18px 0 10px; }
.process p:not(.eyebrow) { font-size:12px; line-height:1.85; color:var(--muted); margin:0; }
code { font:11px var(--mono); }
.releases { padding:30px 0 57px; border-top:1px solid var(--line); }
.release-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.release-heading h2 { font-size:21px; }
.release-heading>a { font-size:12px; flex-shrink:0; }
.release-row { display:flex; align-items:center; gap:18px; padding:17px 0; border-top:1px solid var(--line); }
.release-device { font:12px var(--mono); min-width:110px; }
.release-detail { font-size:11px; color:var(--muted); flex:1; }
.release-row>a { font-size:12px; }
.release-row .experimental { color:var(--orange); }
footer { padding-block:26px!important; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font:9px var(--mono); color:var(--muted); }
.footer-divider { margin:0 10px; color:var(--orange); }
.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; }
.revealed { animation:arrive .7s var(--ease) both; }
@keyframes arrive { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes seat-connector { 0%,15%,100% { transform:translateY(0); } 7% { transform:translateY(7px); } }
@keyframes progress-pulse { 0% { opacity:.8; transform:scale(.9); } 100% { opacity:0; transform:scale(1.2); } }
@media(max-width:950px) {
  .wrap { padding-inline:30px; }
  .intro { gap:30px; padding-block:55px; }
  h1 { font-size:57px; }
  .patch-panel,.job-panel { padding:30px; }
  .section-heading { display:block; }
  .section-heading h2 { margin-top:13px; }
  .process-grid { gap:25px; }
}
@media(max-width:720px) {
  .wrap { padding-inline:22px; }
  .masthead { height:87px; }
  .intro { grid-template-columns:1fr; padding:46px 0 39px; }
  .connection-art { display:block; width:min(76vw,280px); justify-self:center; }
  .connection-art .port { border-width:6px; border-radius:18px; }
  .connection-art .connector i { border-width:3px; }
  h1 { font-size:clamp(44px,8.4vw,64px); }
  .intro-copy { font-size:15px; }
  .bench { grid-template-columns:1fr; border-radius:16px; }
  .patch-panel,.job-panel { padding:30px; }
  .job-panel .panel-heading { margin-bottom:27px; }
  .package-files { max-width:310px; }
  .receipt { margin-top:0; }
  .process { padding-top:52px; padding-bottom:39px; }
  .process-grid { grid-template-columns:1fr; gap:26px; margin-top:29px; }
  .process-grid article { display:grid; grid-template-columns:38px 1fr; gap:0 12px; padding-top:18px; }
  .process-number { grid-row:1/3; padding-top:5px; }
  .process-grid h3 { margin:0 0 8px; }
  .process-grid p { grid-column:2; }
  .release-detail { display:none; }
  .release-device { flex:1; }
  .release-heading h2 { font-size:18px; }
  footer { flex-wrap:wrap; font-size:8px; }
  footer>span:nth-child(2) { display:none; }
}
@media(max-width:420px) {
  .wrap { padding-inline:18px; }
  nav { gap:20px; font-size:12px; }
  nav a:first-child { display:none; }
  .brand-sub { font-size:7px; }
  .patch-panel,.job-panel { padding:25px 22px; }
  .bench-caption { font-size:8px; }
  .bench-caption span:first-child { display:none; }
  .mode { padding-inline:9px; gap:9px; }
  .mode small { font-size:10px; }
  .mode-tag { font-size:7px; padding-inline:4px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}


@media(max-width:720px){.job-panel{border-left:0;border-top:1px solid #e2ddd4}}

/* Essential guidance stays readable at normal browser zoom. */
.field-help { font-size:12px; color:#63645d; }
.field-help strong { font-size:11px; }
.consent { font-size:12px; color:#62645c; }
.job-panel { --muted:#625d56; }
.tracking-note { font-size:14px; color:#625d56; }
.steps strong { font-size:14px; color:#5e5952; }
.steps small { font-size:12px; color:#6a645c; }
.steps li.active strong, .steps li.done strong { color:var(--ink); }
.job-status p { font-size:13px; color:#5c574f; }
.status-label { font-size:10px; color:#696157; }
.package-files>span { font-size:11px; color:#625b52; }
.job-links, .text-button { font-size:12px; }
.process p:not(.eyebrow) { font-size:13px; color:#63645d; }
.connector { animation-iteration-count:1; }
@media(max-width:720px) {
  input[type=text], input[type=url], input:not([type]) { font-size:16px; }
}