/* karmayoga.dev, Night Shift. One dark theme for the page, the overscroll and every page, whatever the system setting. The hero is night. 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:dark;
  --bg:#0A111F;--surface:#0F1829;--panel:#131D31;--rule:#222E45;--edge:#5D6D88;
  --ink:#EDF1F7;--muted:#A2AFC4;
  --signal:#FF7A1F;--signal-hi:#FF8F42;--signal-ink:#FF9A52;--on-signal:#0A111F;
  --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);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth}
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);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)}
.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}

/* Header on the inner pages, footer on every page */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px var(--gutter);position:relative;z-index:10}
.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)}
.site-header nav a,.site-footer a{text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.site-header nav a{color:var(--muted);font-size:15px}
.site-header nav a:hover,.site-footer a:hover{color:var(--ink);text-decoration:underline}
.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 .links{display:flex;flex-wrap:wrap;gap:4px 20px}
/* 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 h1{font-size:clamp(44px,4.9vw,74px);color:var(--st-ink)}
.hero :focus-visible{outline-color:var(--st-signal-ink)}
.scroll-cue{display:none;margin-top:24px;color:var(--st-muted);font-size:14px}
.js .scroll-cue{display:block}
/* A jump past the walk to the install block, always in view while the scene plays. */
.jump{position:absolute;z-index:5;left:50%;bottom:32px;transform:translateX(-50%);min-width:120px}

.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{display:flex;flex-direction:column;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{flex:none;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}
/* Inside the panes, the look of the real tools. Lines run down from the top with the prompt right under
   the last one, and once a pane is full new lines push older ones up, as in a terminal. Each line hangs
   its text after a two cell mark: ⏺ ✻ for Claude Code, • for Codex. */
.pane .body{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:8px 12px 6px;white-space:pre-wrap}
.pane .body p{padding-left:2ch;text-indent:-2ch}
.pane .body p+p{margin-top:5px}
.pane .body p>b:first-child{display:inline-block;width:2ch;text-indent:0;font-weight:700}
.pane .foot{flex:none;padding:0 12px 8px}
.pane .u{margin-inline:-12px;padding:3px 12px 3px calc(12px + 2ch);color:#FFFFFF}
.cc{--fg:#E4EAF3;--ok:#4EBA65;--spin:#D78787;--spin-hi:#FFAF87;--rule-c:#808080}
.cc .body{color:var(--fg)}
.cc .u{background:#3A3A3A}
.cc .u::before{content:"❯ ";color:#949494}
.cc .ok{color:var(--ok)}
.cc .w{color:#FFFFFF}
.cc .spin{color:var(--spin)}
.js .cc .sg{animation:spin 1.2s steps(2) infinite}
@keyframes spin{50%{color:var(--spin-hi)}}
.cc .prompt{border-block:1px solid var(--rule-c);padding:3px 0;white-space:pre-wrap;color:var(--fg)}
.cx{--fg:#CDD6F4;--ok:#4FC16B}
.cx .body{color:var(--fg)}
.cx .u,.cx .prompt{background:#313439}
.cx .u::before{content:"› ";font-weight:700}
.cx .ok{color:var(--ok)}
.cx .w{color:#FFFFFF}
.cx .prompt{margin-inline:-12px;padding:5px 12px;font-weight:700;color:#FFFFFF}
.prompt b{display:inline-block;width:2ch}
.mgr .prompt{padding-left:2ch;text-indent:-2ch}
.mgr .prompt b{text-indent:0}
:root:not(.js) .ask,.mgr.sent .ask{display:none}
.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)}
.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)}
/* 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){display:none}
.js .rig [data-at].on{animation:line .3s ease-out}
@keyframes line{from{opacity:0;transform:translateY(6px)}}
.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}

/* Under the hero: the pitch, then the install block with a tab per system. */
.pitch{padding-block:112px 56px;max-width:760px}
.pitch p{color:var(--muted);font-size:19px}
.pitch p+p{margin-top:16px}
.pitch .core{margin-bottom:36px;font:720 clamp(30px,3.6vw,50px)/1.1 var(--display);font-stretch:87.5%;letter-spacing:-.05em;word-spacing:-.28em;color:var(--ink)}
.get{padding-bottom:112px;max-width:760px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.tabs [role=tab]{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 18px;min-height:44px;font:600 15.5px/1 var(--sans);color:var(--muted);cursor:pointer}
.tabs [role=tab]:hover{color:var(--ink)}
.tabs [aria-selected=true]{color:var(--ink);border-bottom-color:var(--signal)}
.panel{font-size:17px}
.agent-way{margin-bottom:29px}
.agent-way code{overflow-wrap:anywhere}
.os-name{margin-bottom:10px;font:500 11.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--signal-ink)}
.js .os-name{display:none}
:root:not(.js) .panel+.panel{margin-top:40px}
.cmd{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.cmd+p{margin-top:32px}
.cmd pre{flex:1;min-width:0;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;padding:16px 20px;font-size:13.5px;user-select:all}
.copy{flex:none;min-width:96px;font-family:var(--sans);cursor:pointer}
.copied:not(.sr-only){flex-basis:100%;color:var(--muted);font-size:14px}
.steps{display:grid;gap:18px;padding-left:2.4em}
.steps li{padding-left:6px}
.steps li::marker{font:600 15px var(--mono);color:var(--signal-ink)}
.inline-cmd{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;vertical-align:middle}
.button.small{min-width:0;min-height:32px;padding:4px 12px;font-size:13.5px;box-shadow:none}
.support{margin-top:40px;color:var(--muted);font-size:16px}

/* The about page and the error page. */
.page-intro{padding:88px 0 72px}
.page-intro h1{font-size:clamp(44px,5.8vw,84px);max-width:900px}
.page-intro p{margin-top:24px;max-width:640px;color:var(--muted);font-size:19px}
.page-intro .actions{margin-top:28px}
.page-intro p a{color:var(--ink)}
/* 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}
/* Phone and narrow windows: copy above, scene below, the glow centred on the scene. */
@media(max-width:820px){
  .site-header{padding:16px var(--gutter)}
  .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 h1{font-size:clamp(34px,10.5vw,46px)}
  .scroll-cue{margin-top:16px}
  /* The phone walk is simpler, so its track is shorter and the copy follows the last line. */
  .js .hero{height:240svh}
  .jump{bottom:24px}
  .rig{--cx:50vw;--cy:48svh;--s:.32}
  .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}
  .page-intro{padding:44px 0}
  .page-intro p{font-size:17px}
  .pitch{padding-block:72px 40px}
  .pitch p{font-size:17px}
  .get{padding-bottom:72px}
  .tabs [role=tab]{padding-inline:14px}
}
@media(max-width:820px) and (max-height:700px){
  .hero-copy{top:40px}.hero h1{font-size:30px}
  .rig{--cy:45svh;--s:.28}
}
@media(max-width:520px){.cmd pre{flex-basis:100%}.steps{padding-left:2em}}
@media(max-width:480px){.brand{font-size:14px;gap:8px}}
@media(max-width:389px){.brand{font-stretch:87.5%}}
@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){display:block}
  .js .scroll-cue{display:none}
}
@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}}

/* Human guide, using the About page's type and spacing. */
.guide{max-width:760px;padding-bottom:72px}
.guide section{margin-bottom:clamp(64px,7vw,88px)}
.guide section+section{border-top:1px solid var(--rule);padding-top:clamp(64px,7vw,88px)}
.guide h2{font-size:clamp(26px,3vw,36px)}
.guide p{margin-top:18px;color:var(--muted)}
.guide p code{white-space:normal}
.guide a{color:var(--ink)}
.guide-terminal{--terminal-font:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;color-scheme:dark;margin-top:24px;border:1px solid #303030;border-radius:8px;overflow:hidden;background:#080808;color:#E5E5E5}
.terminal-title{padding:10px 18px;border-bottom:1px solid #303030;background:#191919;color:#B3B3B3;font:12px/1.4 var(--terminal-font)}
.guide-terminal pre{margin:0;padding:20px;border:0;border-radius:0;box-shadow:none;background:#080808;color:#E5E5E5;font:13px/1.45 var(--terminal-font);font-stretch:normal;white-space:pre-wrap;overflow-wrap:anywhere}
.guide-terminal b{color:#FFFFFF;font-weight:700}
.terminal-green{color:#00CD00}
.terminal-yellow{color:#CDCD00}
.terminal-red{color:#FF5F5F}
.session-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);font:13px/1.45 var(--terminal-font)}
.session-manager{--pane-colour:#87D787;display:flex;flex-direction:column;min-height:360px;border-right:1px solid var(--pane-colour)}
.session-manager>pre{flex:1;display:flex;align-items:flex-end}
.session-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--pane-colour);color:#B3B3B3}
.session-label b{color:var(--pane-colour)}
.session-agent:nth-child(1){--pane-colour:#FFD75F}
.session-agent:nth-child(2){--pane-colour:#87D7FF}
.session-agent:nth-child(3){--pane-colour:#D7AFFF}
.session-agents{display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}
.session-agent+.session-agent{border-top:1px solid #303030}
.session-composer{display:flex;align-items:center;gap:10px;margin:0 16px 16px;padding:12px 0;border-top:1px solid #505050;border-bottom:1px solid #505050;color:#FFFFFF}
.session-caret{width:2px;height:1em;background:#FFFFFF}
.session-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:#303030;color:#949494;font:10px/1.4 var(--terminal-font);white-space:nowrap}
.session-bar .session-name{color:#87D787}
.session-summary{flex:1;text-align:center}
.guide-table{overflow-x:auto;margin-top:18px}
.guide-table table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.guide-table th,.guide-table td{padding:10px 12px;border-bottom:1px solid var(--rule)}
@media(max-width:820px){.session-summary{display:none}}
@media(max-width:600px){.session-version,.session-uptime{display:none}}
@media(max-width:600px){.session-layout{grid-template-columns:minmax(0,1fr)}.session-manager{min-height:260px;border-right:0;border-bottom:1px solid var(--pane-colour)}}
.by-hand{margin-top:32px}