/* The guides share one sheet. Same ground, glass and colours as the main page:
   jade = something you press, amber = something the engineer did. */
:root{--bg:#07090a;--fg:#e9edef;--fg-2:#a8b0b6;--fg-3:#79828a;--line:rgba(255,255,255,.075);--line-2:rgba(255,255,255,.14);--jade:#20bd86;--jade-hi:#46e9ae;--amber:#e8913a;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--fg);font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background:radial-gradient(62vw 54vh at 10% -6%,rgba(32,189,134,.17),transparent 62%),radial-gradient(70vw 56vh at 50% 108%,rgba(232,145,58,.05),transparent 62%),var(--bg);background-attachment:fixed}
a{color:var(--jade-hi);text-decoration:underline;text-decoration-color:rgba(70,233,174,.4);text-underline-offset:3px}
a:hover{text-decoration-color:var(--jade-hi)}
:focus-visible{outline:2px solid var(--jade-hi);outline-offset:3px;border-radius:6px}
header{border-bottom:1px solid var(--line);background:rgba(7,9,10,.66)}
header .in,main,footer .in{max-width:760px;margin:0 auto;padding:0 24px;width:100%}
header .in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Rajdhani","Geist",sans-serif;font-weight:600;letter-spacing:.14em;font-size:17px;text-transform:uppercase;color:var(--fg);text-decoration:none}
.mark{width:26px;height:23px;background:linear-gradient(180deg,var(--jade-hi),var(--jade));-webkit-mask:url(/assets/mark.png) center/contain no-repeat;mask:url(/assets/mark.png) center/contain no-repeat}
header .back{font-size:14px;color:var(--fg-2);text-decoration:none}
header .back:hover{color:var(--fg)}
main{flex:1;padding-top:64px;padding-bottom:96px}
.kicker{margin:0 0 14px;font-family:"Rajdhani","Geist",sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
h1{margin:0;font-size:clamp(32px,5.6vw,48px);line-height:1.08;font-weight:300;letter-spacing:-0.03em}
.lead{margin:22px 0 0;font-size:18px;color:var(--fg-2)}
figure{margin:36px 0 0}
figure img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line-2)}
figcaption{margin-top:10px;font-size:13px;color:var(--fg-3)}
.card{margin-top:36px;padding:8px 28px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.024) 42%,rgba(255,255,255,.034));box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 30px 70px -40px rgba(0,0,0,.95)}
h2{margin:0 0 8px;padding-top:26px;font-size:20px;font-weight:500;letter-spacing:-0.01em}
section{padding-bottom:22px;border-bottom:1px solid var(--line)}
section:last-child{border-bottom:0}
p,li,td{color:var(--fg-2)}
p{margin:0 0 10px}
ul,ol{margin:0 0 10px;padding-left:22px}
li{margin:6px 0}
b,th{color:var(--fg);font-weight:500}
kbd{font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:.86em;padding:1px 6px;border-radius:5px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--fg)}
table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid var(--line)}
th{font-size:13px;color:var(--fg-3);font-weight:500}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--fg);white-space:nowrap}
td:nth-child(2){white-space:nowrap}
.say{margin:12px 0;padding:12px 16px;border-radius:10px;border:1px solid var(--line-2);background:rgba(0,0,0,.34);font-family:"Geist Mono",ui-monospace,Menlo,monospace;font-size:14px;color:var(--fg)}
.say::before{content:"you  ";color:var(--fg-3)}
.end{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.end p{font-size:17px}
.btn{display:inline-flex;align-items:center;height:44px;padding:0 20px;margin-top:12px;border-radius:999px;background:linear-gradient(180deg,#43dba3,#1fb47f);color:#03130c;font-weight:600;font-size:15px;text-decoration:none;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.more{margin-top:40px}
.more h2{padding-top:0;font-size:15px;color:var(--fg-3);font-weight:500}
.more ul{list-style:none;padding:0}
footer{border-top:1px solid var(--line);padding:24px 0;font-size:12px;color:var(--fg-3)}
@media (max-width:600px){header .in,main,footer .in{padding-left:16px;padding-right:16px}main{padding-top:44px}.card{padding:4px 18px}td:first-child,td:nth-child(2){white-space:normal}}