/* karmayoga.dev, Night Shift. Two page themes from the system setting. The stage (hero, end band
   and every pre block) is night in both. Martian Mono and Instrument Sans from Google Fonts, loaded
   without blocking the first paint; the fallback stacks below render until they arrive. */
:root{
  color-scheme:light dark;
  --bg:#F3F5F9;--surface:#FFFFFF;--panel:#E7EBF2;--rule:#D3DAE5;--edge:#7A879D;
  --ink:#0B1326;--muted:#46536A;
  --signal:#FF7A1F;--signal-hi:#FF8F42;--signal-ink:#B83D06;--on-signal:#0B1326;
  --accent:var(--signal-ink);--accent-soft:#FF7A1F29;
  --night:#0B1322;--night-hi:#16243D;--night-lo:#050A14;--st-ink:#EDF1F7;--st-muted:#A9B6CB;--st-rule:#24324B;--st-edge:#5D6D88;--st-signal-ink:#FF9A52;
  --frame:#182234;--frame-hi:#1E2B42;--frame-edge:#2E3B54;--term:#0C1424;--term-hi:#111C31;--term-line:#1F2B40;
  --term-ink:#E4EAF3;--term-dim:#8F9DB4;--slot:#3A4A66;--idle:#6A7A95;--busy:#FF8A3D;--moon:#A8C4F2;
  --glow:255 122 31;
  --display:"Martian Mono",ui-monospace,"SF Mono","SFMono-Regular",Menlo,monospace;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gutter:clamp(20px,5vw,72px);
}
@media(prefers-color-scheme:dark){:root{
  --bg:#0A111F;--surface:#0F1829;--panel:#131D31;--rule:#222E45;--edge:#5D6D88;
  --ink:#EDF1F7;--muted:#A2AFC4;
  --signal-ink:#FF9A52;--on-signal:#0A111F;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}
p,h1,h2,h3,figure,ol,ul,pre,dl,dd{margin:0}
h1,h2{font-family:var(--display);font-weight:760;font-stretch:87.5%;letter-spacing:-.05em;word-spacing:-.28em;line-height:1.02}
h2{font-size:clamp(30px,3.5vw,48px);font-weight:720;line-height:1.08}
h3{font-family:var(--sans);font-weight:600;font-size:21px;letter-spacing:-.012em;line-height:1.3}
code,pre,kbd{font-family:var(--mono);font-stretch:87.5%}
code{font-size:.84em;background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:1px 5px;white-space:nowrap}
::selection{background:var(--signal);color:var(--on-signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.skip{position:fixed;top:12px;left:12px;z-index:30;padding:10px 18px;background:var(--bg);border:1px solid var(--rule);transform:translateY(-200%)}
.skip:focus{transform:none}
.shell{max-width:1200px;margin:auto;padding-inline:var(--gutter)}
.label{font:500 11.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:12px 22px;border:1px solid var(--signal-ink);border-radius:4px;background:var(--signal);color:var(--on-signal);font-size:15.5px;font-weight:600;letter-spacing:-.005em;text-decoration:none;
  box-shadow:0 10px 30px -12px rgb(var(--glow)/.7);transition:background .15s,box-shadow .15s}
.button:hover{background:var(--signal-hi);box-shadow:0 0 0 4px rgb(var(--glow)/.22),0 14px 36px -10px rgb(var(--glow)/.8)}
.button.quiet{background:transparent;color:var(--ink);border-color:var(--edge);box-shadow:none}
.button.quiet:hover{border-color:var(--ink)}
@media(prefers-color-scheme:dark){.button{border-color:var(--signal)}}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Shared header and footer */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px var(--gutter);position:relative;z-index:10}
.over .site-header{position:absolute;top:0;left:0;right:0;color:var(--st-ink)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 18px/1 var(--mono);letter-spacing:-.06em;white-space:nowrap}
.brand svg{width:26px;height:20px;color:var(--signal-ink)}
.over .brand svg{color:var(--signal)}
.site-nav{display:flex;gap:6px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px;font-weight:500;text-decoration:none;color:var(--muted);border-radius:6px}
.site-nav a:hover{color:var(--ink)}
.over .site-nav a{color:var(--st-muted)}
.over .site-nav a:hover{color:var(--st-ink)}
.site-nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:8px}
.site-footer{border-top:1px solid var(--rule);padding:32px var(--gutter);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;font-size:14px;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.site-footer a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.site-footer a:hover{color:var(--ink);text-decoration:underline}

/* Hero. The scene is a session in CSS 3D: one window, the manager on the left, agent panes that
   fly into the column on the right. Without JavaScript, or with reduced motion, it rests assembled
   and tilted. With JavaScript, scrolling assembles it. The stage is always night, lit by a cool moon
   from the top left and a warm glow behind the scene whose strength is --heat, the busy share. */
.hero{position:relative;background:var(--night);color:var(--st-ink);--heat:.5}
.stage{position:relative;height:100svh;min-height:560px;overflow:hidden;
  background:radial-gradient(42% 50% at var(--gx,66%) var(--gy,54%),rgb(var(--glow)/calc(.09 + var(--heat)*.2)),transparent 72%),
    radial-gradient(55% 45% at 12% -8%,#8FB4F01A,transparent 70%),
    radial-gradient(75% 70% at var(--gx,66%) var(--gy,54%),var(--night-hi),var(--night) 62%,var(--night-lo));
  transition:background .4s;perspective:1800px;perspective-origin:66% 52%}
.js .hero{height:330svh}
.js .stage{position:sticky;top:0}
.hero-copy{position:absolute;z-index:4;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(40%,540px);opacity:var(--copy,1)}
.hero-copy .label{margin-bottom:20px}
.hero .label{color:var(--st-muted)}
.hero h1{font-size:clamp(44px,4.9vw,74px);color:var(--st-ink)}
.hero h1 em{font-style:normal;color:var(--st-signal-ink);text-shadow:0 0 36px rgb(var(--glow)/.16)}
.hero .intro{margin-top:24px;max-width:440px;color:var(--st-muted);font-size:17.5px}
.hero .actions{margin-top:28px}
.hero .button:not(.quiet),.end .button:not(.quiet){border-color:var(--signal)}
.hero .button.quiet,.end .button.quiet{color:var(--st-ink);border-color:var(--st-edge)}
.hero .button.quiet:hover,.end .button.quiet:hover{border-color:var(--st-ink)}
.hero :focus-visible{outline-color:var(--st-signal-ink)}
.status-note{margin-top:14px;font:11.5px/1.6 var(--mono);color:var(--st-muted);white-space:nowrap}
.status-note::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--idle);vertical-align:1px}
.hero-bottom{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--st-rule);padding-top:14px}
.hero-bottom .label{font-size:11px}
.walk-cue{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:14px;text-decoration:none;color:var(--st-ink)}
.scroll-cue{display:none}.js .scroll-cue{display:inline}.js .fallback-cue{display:none}
.caption{position:absolute;z-index:4;left:0;right:0;bottom:7svh;padding-inline:var(--gutter);text-align:center;color:var(--st-ink);font:600 clamp(18px,1.9vw,24px)/1.3 var(--sans);letter-spacing:-.015em;text-wrap:balance;opacity:0;pointer-events:none}

.rig{position:absolute;left:0;top:0;width:1000px;height:622px;transform-style:preserve-3d;transform-origin:0 0;
  --cx:66vw;--cy:54svh;--s:.72;--rx:7deg;--ry:-16deg;
  transform:translate3d(var(--cx),var(--cy),0) scale3d(var(--s),var(--s),var(--s)) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(-500px,-311px,0);
  font:400 12.5px/19px var(--mono);font-stretch:87.5%;color:var(--term-ink);pointer-events:none}
.rig>div{position:absolute;transform-style:preserve-3d}
.frame{left:0;top:0;width:1000px;height:622px;border-radius:12px;background:linear-gradient(170deg,#22314B,var(--frame) 46%);
  box-shadow:0 0 0 1px var(--frame-edge),inset 0 1px 0 #A8C4F238,inset 1px 0 0 #A8C4F214}
.titlebar{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;justify-content:center;color:var(--term-dim);font-size:12px}
.titlebar i{position:absolute;top:12px;width:11px;height:11px;border-radius:50%;background:var(--slot)}
.titlebar i:nth-child(1){left:14px}.titlebar i:nth-child(2){left:31px}.titlebar i:nth-child(3){left:48px}
.slot{position:absolute;left:438px;width:556px;height:188px;border:1px dashed var(--slot);border-radius:6px}
.slot.s1{top:40px}.slot.s2{top:234px}.slot.s3{top:428px}
.thumb{position:absolute;left:995px;top:40px;width:3px;height:430px;border-radius:2px;background:var(--slot);transform:translateY(var(--thumb,0px))}
.slab{left:0;top:622px;width:1000px;height:18px;transform-origin:0 0;transform:rotateX(-90deg);background:#101827}
.slab.side{left:1000px;top:0;width:18px;height:622px;transform:rotateY(90deg)}
.slab.left{left:0;top:0;width:18px;height:622px;transform:rotateY(90deg);transform-origin:0 0}
.slab.top{left:0;top:0;width:1000px;height:18px;transform:rotateX(-90deg);background:#3A4B6A}
.shadow{left:40px;top:70px;width:920px;height:560px;border-radius:40px;background:#000;opacity:.6;filter:blur(50px);transform:translateZ(-80px)}

.pane{background:linear-gradient(180deg,var(--term-hi),var(--term) 38%);border:1px solid var(--term-line);border-radius:6px;overflow:hidden;backface-visibility:hidden;
  box-shadow:inset 0 1px 0 #A8C4F21F;transition:box-shadow .35s,border-color .35s}
.pane header{display:flex;align-items:center;gap:8px;height:27px;padding:0 12px;border-bottom:1px solid var(--term-line);font-size:12px;color:var(--term-dim)}
.pane header b{font-weight:600;color:var(--term-ink)}
.pane header .state{margin-left:auto}
.dot{width:8px;height:8px;border-radius:50%;background:var(--idle);flex:none}
.pane .body{padding:8px 12px;white-space:pre}
.pane .body p{transition:opacity .25s}
.dim{color:var(--term-dim)}
.acc{color:var(--busy)}
.lock{width:10px;height:12px;color:var(--busy);flex:none}
.mgr{left:6px;top:40px;width:426px;height:576px;transform:translateZ(1px);
  border-color:#FF8A3D4D;box-shadow:inset 0 1px 0 #FFB58040,0 0 0 1px #FF8A3D26}
/* The wide glows are slow to paint on a phone, so the script turns them on (.lit) one frame after the first paint. */
:where(.lit,:root:not(.js)) .mgr{box-shadow:inset 0 1px 0 #FFB58040,0 0 0 1px #FF8A3D26,0 0 60px rgb(var(--glow)/.14)}
.pane .input{position:absolute;left:0;right:0;bottom:0;height:34px;padding:7px 12px;border-top:1px solid var(--term-line);color:var(--term-dim)}
.agent{left:0;top:0;width:556px;height:188px;transform-origin:0 0;transform:translate3d(var(--x),var(--y),1px);--x:438px}
.agent:not(.busy){border-color:#3B4C6B;box-shadow:inset 0 1px 0 #A8C4F240,0 0 0 1px #A8C4F214}
:where(.lit,:root:not(.js)) .agent:not(.busy){box-shadow:inset 0 1px 0 #A8C4F240,0 0 0 1px #A8C4F214,0 24px 50px -20px #000}
.a1{--y:40px}.a2{--y:234px}.a3{--y:428px}.a4{--y:622px;clip-path:inset(0 0 100% 0)}
.agent .msg{color:var(--busy)}
.agent .input{height:30px;padding:5px 12px}
/* A busy agent throws its own light. It flares for a moment as it lands in its slot. */
.busy{border-color:#FF8A3D8C;box-shadow:inset 0 1px 0 #FFB58066,0 0 0 1px #FF8A3D59}
:where(.lit,:root:not(.js)) .busy{box-shadow:inset 0 1px 0 #FFB58066,0 0 0 1px #FF8A3D59,0 0 26px rgb(var(--glow)/.32),0 0 90px rgb(var(--glow)/.2)}
.busy header{background:linear-gradient(90deg,#FF8A3D24,transparent 72%)}
.busy .dot{background:var(--busy);box-shadow:0 0 0 3px #FF8A3D33,0 0 10px #FF8A3D}
.busy .state{color:var(--busy);font-weight:600}
.landed{border-color:#FFC39A;box-shadow:inset 0 1px 0 #FFD2B0,0 0 0 2px #FF9A52,0 0 40px rgb(var(--glow)/.6),0 0 140px rgb(var(--glow)/.35)}
.thread{left:0;top:-1.5px;height:3px;width:0;transform-origin:0 50%;opacity:0;border-radius:2px;
  background:linear-gradient(90deg,#FFD2B0,var(--busy) 18%,rgb(var(--glow)/.25));box-shadow:0 0 8px #FF8A3D,0 0 22px rgb(var(--glow)/.7)}

/* Lines that the scroll reveals stay visible in the resting state. */
.js .rig [data-at]:not(.on){opacity:0}
.caret{display:inline-block;width:.6em;height:1.05em;vertical-align:-.2em;background:var(--busy);opacity:.9}
.js .caret{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* The spread: where each agent waits before it is created. JS reads these too. */
.a1{--sx:610px;--sy:-70px;--sz:230px;--sry:-20deg;--srz:-4deg}
.a2{--sx:700px;--sy:130px;--sz:150px;--sry:-15deg;--srz:3deg}
.a3{--sx:760px;--sy:330px;--sz:70px;--sry:-11deg;--srz:-2deg}
.a4{--sx:800px;--sy:520px;--sz:-10px;--sry:-8deg;--srz:2deg}
.js .rig{--rx:14deg;--ry:-30deg}
.js .agent{transform:translate3d(var(--sx),var(--sy),var(--sz)) rotateY(var(--sry)) rotateZ(var(--srz));clip-path:none}
.js .agent .body p:not(.on){opacity:0}

/* Sections */
.section{padding-block:112px}
.section+.section{border-top:1px solid var(--rule)}
.section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px;margin-bottom:52px}
.section-heading .label{padding-top:10px;color:var(--signal-ink)}
.section-heading .label::before{content:"// ";color:var(--muted)}
.section-heading p.lead{margin-top:20px;max-width:640px;color:var(--muted);font-size:18.5px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;padding:0}
.steps li{border-top:2px solid var(--ink);padding-top:26px;min-width:0}
.num{display:block;font:800 56px/1 var(--display);font-stretch:87.5%;letter-spacing:-.06em;color:var(--signal-ink);margin-bottom:26px}
.steps h3{margin-bottom:12px}
.steps p,.grid p{color:var(--muted);font-size:16px}
.steps p+p,.grid p+p{margin-top:12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 64px}
.grid article{min-width:0;border-top:1px solid var(--rule);padding-top:22px}
.grid h3{margin-bottom:12px}
.tag{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid var(--edge);border-radius:3px;font:600 10.5px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);vertical-align:3px}
.tag.now{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.road{list-style:none;padding:0;border-top:2px solid var(--ink)}
.road li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.road li:first-child{position:relative}
.road li:first-child::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--signal) 0 38%,transparent 38%)}
.road .tag{align-self:start;justify-self:start;margin-left:0}
.road li p{color:var(--muted);font-size:16px}
.road strong{display:block;font-size:18px;font-weight:600;margin-bottom:4px;color:var(--ink)}
/* The end band: the night comes back, as a bookend to the hero. */
.end{padding:128px var(--gutter);text-align:center;color:var(--st-ink);
  background:radial-gradient(60% 90% at 50% 120%,rgb(var(--glow)/.28),transparent 70%),var(--night)}
.end h2{max-width:820px;margin:0 auto;font-size:clamp(34px,4.6vw,64px)}
.end p{margin:20px auto 0;max-width:560px;color:var(--st-muted)}
.end .actions{justify-content:center;margin-top:28px}

/* Inner pages */
.page-intro{padding:88px 0 72px;border-bottom:1px solid var(--rule)}
.page-intro h1{font-size:clamp(44px,5.8vw,84px);max-width:900px}
.page-intro h1 em{font-style:normal;color:var(--signal-ink)}
.page-intro p{margin-top:24px;max-width:640px;color:var(--muted);font-size:19px}
.page-intro .label{margin-bottom:22px;color:var(--signal-ink)}
.prose{max-width:720px}
.prose p{color:var(--muted)}
.prose p+p{margin-top:14px}
/* Anything that is the terminal is night, in both themes. */
pre{background:var(--term);color:var(--term-ink);border:1px solid var(--term-line);border-radius:6px;box-shadow:inset 0 1px 0 #A8C4F21F;padding:16px 18px;font-size:14px;line-height:1.65;overflow-x:auto;margin-top:18px}
pre .dim{color:var(--term-dim)}
.table-wrap{overflow-x:auto;border-top:1px solid var(--rule)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:16px 18px 16px 0;border-bottom:1px solid var(--rule)}
th{font:600 10.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
td:first-child{white-space:nowrap}
td:first-child code{font-size:14px}
td{color:var(--muted)}
.guide{list-style:none;padding:0;counter-reset:step}
.guide>li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:48px 0;border-bottom:1px solid var(--rule)}
.guide>li>.num{font-size:40px;margin:0}
.guide h2{font-size:clamp(24px,2.5vw,32px);letter-spacing:-.045em;margin-bottom:14px}
.guide p{color:var(--muted);max-width:680px}
.guide p+p{margin-top:12px}
.note{margin-top:28px;padding:18px 20px;border-left:3px solid var(--signal);background:var(--panel);color:var(--muted);font-size:16px;max-width:720px}
.download{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start;padding-block:72px 96px}
.download h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:16px}
.download p{color:var(--muted)}
.download p+p{margin-top:14px}
.wait{border:1px solid var(--rule);border-radius:10px;padding:28px;background:var(--surface)}
.wait .label{color:var(--signal-ink);margin-bottom:14px}
.wait .address{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 6px}
.wait .address code{font-size:15px;padding:6px 10px;user-select:all}
.copy{min-height:40px;padding:0 14px;border:1px solid var(--edge);border-radius:6px;background:transparent;color:var(--ink);font:14px var(--sans);cursor:pointer}
.copy:hover{border-color:var(--ink)}
.wait .button{margin-top:18px}
.unavailable{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border:1px dashed var(--edge);border-radius:6px;color:var(--muted);font-size:15px;margin-top:22px}

@media(max-width:900px){
  .grid{gap:40px}
  .steps{gap:28px}
  .download{grid-template-columns:minmax(0,1fr);gap:40px}
}
/* Phone and narrow windows: copy above, scene below, the glow centred on the scene. */
@media(max-width:820px){
  .site-header{padding:16px var(--gutter)}
  .site-nav a{padding:0 9px}
  .stage{perspective-origin:50% 70%;
    background:radial-gradient(70% 40% at var(--gx,50%) var(--gy,74%),rgb(var(--glow)/calc(.05 + var(--heat)*.22)),transparent 72%),
      radial-gradient(90% 40% at 0% 0%,#8FB4F01A,transparent 70%),
      radial-gradient(110% 70% at var(--gx,50%) var(--gy,72%),var(--night-hi),var(--night) 62%,var(--night-lo))}
  .hero-copy{top:84px;transform:none;left:var(--gutter);right:var(--gutter);width:auto}
  .hero-copy .label{margin-bottom:12px;font-size:11px}
  .hero h1{font-size:clamp(34px,10.5vw,46px)}
  .hero .intro{margin-top:14px;font-size:15px;line-height:1.55}
  .hero .actions{margin-top:18px}
  .hero .button{min-height:44px;padding:10px 16px;font-size:14px}
  .status-note{margin-top:10px;font-size:10.5px}
  .hero-bottom{display:none}
  .caption{bottom:56px;padding-inline:var(--gutter)}
  .rig{--cx:50vw;--cy:76svh;--s:.36}
  .a1{--sx:470px;--sy:-130px;--sz:260px}
  .a2{--sx:500px;--sy:100px;--sz:200px}
  .a3{--sx:520px;--sy:330px;--sz:140px}
  .a4{--sx:540px;--sy:560px;--sz:80px}
  .section{padding-block:72px}
  .section-heading{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:36px}
  .section-heading .label{padding:0}
  .steps,.grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .num{font-size:44px;margin-bottom:16px}
  .road li{grid-template-columns:minmax(0,1fr);gap:6px}
  .guide>li{grid-template-columns:minmax(0,1fr);gap:8px;padding:32px 0}
  .page-intro{padding:44px 0 44px}
  .page-intro p{font-size:17px}
  .end{padding-block:80px}
}
@media(max-width:820px) and (max-height:700px){
  .hero-copy{top:68px}.hero-copy .label{display:none}.hero h1{font-size:30px}.hero .intro{font-size:13px}
  .rig{--cy:80svh;--s:.32}
}
@media(max-width:480px){.site-nav a{padding:0 6px;font-size:14px}.brand{font-size:14px;gap:8px}.site-header{gap:0 8px;flex-wrap:wrap}}
@media(max-width:389px){.brand{font-stretch:87.5%}}
@media(max-width:400px){.wait{padding:20px}.wait .address code{font-size:12px;padding:6px 8px}}
@media(max-width:374px){.hero-copy{top:120px}.status-note,p code{white-space:normal}p code{overflow-wrap:anywhere}}
@media(min-width:821px) and (max-width:1100px){.rig{--s:.5}}
@media(min-width:1101px) and (max-width:1400px){.rig{--s:.6}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .hero{height:auto}
  .js .stage{position:relative}
  .js .rig{--rx:7deg;--ry:-16deg}
  .js .agent{transform:translate3d(var(--x),var(--y),1px)}
  .js .a4{clip-path:inset(0 0 100% 0)}
  .js .rig [data-at]:not(.on),.js .agent .body p:not(.on){opacity:1}
  .js .scroll-cue{display:none}.js .fallback-cue{display:inline}
}
@media(forced-colors:active){.pane,.frame{border:1px solid CanvasText}.button{border:1px solid ButtonText}.busy{box-shadow:none;border:2px solid Highlight}.thread{display:none}}