/* Scroll Ninja guides (/guides and /guides/slug). Loads after /styles.css. Every selector here starts with g-. */
.g-top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1000px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) 0}
.g-logo{flex:none;display:block;width:116px}
.g-logo img{width:100%;height:auto}
.g-nav{display:flex;align-items:center;gap:16px;font:500 15px/1 var(--sans)}
.g-nav a{color:var(--slate);text-decoration:none}
.g-nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.g-nav .g-join{display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:11px;background:linear-gradient(180deg,var(--cta-top),var(--cta-low));color:#F4F7F6;font:600 14px/1 var(--sans);white-space:nowrap}
.g-nav .g-join:hover{color:#fff;text-decoration:none;filter:brightness(1.08)}
@media (max-width:359.98px){.g-logo{width:86px}.g-nav{gap:10px;font-size:14px}.g-nav .g-join{padding:0 10px;font-size:13px}}

.g-doc{max-width:calc(680px + var(--gutter) * 2);margin:0 auto;padding:22px var(--gutter) 64px}
:where(.g-doc) p,:where(.g-doc) li,:where(.g-doc) td{font:400 18px/1.65 var(--sans);color:var(--slate)}
:where(.g-art) p,:where(.g-art) ul,:where(.g-art) ol{margin-top:14px}
:where(.g-art) ul,:where(.g-art) ol{padding-left:24px}
:where(.g-art) li+li{margin-top:8px}
:where(.g-art) li::marker{color:var(--jade)}
:where(.g-doc) a{color:var(--jade-label);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
:where(.g-doc) a:hover{color:var(--ink)}
:where(.g-doc) strong,:where(.g-doc) b{font-weight:600;color:var(--ink)}

.g-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none}
.g-crumbs li{font:500 13.5px/1.4 var(--sans);color:var(--muted)}
.g-crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.g-art h1{margin-top:20px;font:600 clamp(36px,8vw,52px)/1.06 var(--serif);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.g-art .g-dek{margin-top:14px;font-size:20px;line-height:1.55;color:var(--ink)}
.g-art .g-by{margin-top:12px;font:500 14px/1.4 var(--sans);color:var(--muted)}
.g-art h2{margin-top:56px;font:600 clamp(28px,5vw,34px)/1.15 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;scroll-margin-top:16px}
.g-art h3{margin-top:32px;font:600 22px/1.3 var(--serif);color:var(--ink)}
.g-art h2+h3{margin-top:18px}

.g-answer,.g-mission,.g-print,.g-box{margin-top:28px;padding:20px 22px;border:1px solid var(--hairline);border-radius:18px;background:var(--grain),linear-gradient(180deg,var(--card),var(--card-low));box-shadow:var(--sh-inset),var(--sh-card)}
.g-art .g-k{margin:0;font:600 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--jade-label)}
.g-answer :is(p,li):not(.g-k),.g-box p:not(.g-k){color:var(--ink)}
.g-fig{margin:32px 0 0}
.g-fig img{width:100%;max-width:400px;margin:0 auto;border-radius:14px}
.g-fig.g-sq img{max-width:360px}
.g-art .g-fig figcaption{margin-top:10px;text-align:center;font:400 14px/1.5 var(--sans);color:var(--muted)}
.g-toc{margin-top:32px;padding:18px 0 4px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.g-art .g-toc ol{margin:10px 0 14px;columns:2 250px;column-gap:28px}
.g-art .g-toc li{margin:0 0 6px;font-size:16px;break-inside:avoid}

.g-q{margin:24px 0 0;padding:2px 0 2px 18px;border-left:3px solid var(--sakura)}
.g-q blockquote{margin:0}
.g-art .g-q p{margin:0;font:italic 400 21px/1.45 var(--serif);color:var(--ink)}
.g-art .g-q figcaption{margin-top:6px;font:400 14px/1.4 var(--sans);color:var(--muted)}

.g-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:7px;background:var(--mint);font:600 12.5px/1.6 var(--sans);color:var(--jade-label);white-space:nowrap}
.g-pow{display:flex;align-items:center;gap:12px}
.g-pow img{flex:none;width:44px;height:auto}

.g-rank{list-style:none;padding:0;counter-reset:r}
.g-rank li{position:relative;margin-left:26px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;counter-increment:r}
.g-art .g-rank li{font-size:16px}
.g-rank li::before{content:counter(r) ".";position:absolute;left:-26px;top:0;color:var(--muted)}
.g-bar{grid-column:1/-1;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cta),var(--cta-rim));width:var(--v)}

.g-table{width:100%;margin-top:18px;border-collapse:collapse}
.g-table th{padding:10px 8px;text-align:left;font:600 14px/1.3 var(--sans);color:var(--ink);border-bottom:2px solid var(--hairline);vertical-align:bottom}
.g-table td{padding:10px 8px;border-bottom:1px solid var(--hairline);vertical-align:top}
.g-art .g-table td{font-size:16px;line-height:1.5}
@media (max-width:559.98px){
  .g-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .g-table tr{display:block;padding:12px 0;border-bottom:1px solid var(--hairline)}
  .g-table td{display:block;padding:3px 0;border:0}
  .g-table td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--ink)}
}

.g-mission{display:flex;gap:16px;align-items:flex-start}
.g-mission img{flex:none;width:68px;height:auto;margin-top:4px}
.g-art .g-mission h2{margin-top:6px;font-size:26px}
.g-art .g-min{margin-top:4px;font:600 14px/1.4 var(--sans);color:var(--gold-text)}
.g-art .g-mission ol{margin-top:10px}
.g-art .g-note{font-size:15px;color:var(--muted)}

.g-print{text-align:center;border:2px solid var(--ink);background:var(--card)}
.g-art .g-print p{color:var(--ink);font:600 clamp(28px,7vw,40px)/1.2 var(--serif)}
.g-art .g-print .g-small{font:400 16px/1.5 var(--sans);color:var(--slate)}
.g-edit{display:inline-block;min-width:4ch;border-bottom:2px dashed var(--cta-rim);outline:none}
.g-edit:focus{background:var(--mint)}
.g-lines{list-style:none;padding:0;text-align:left}
.g-lines li{min-height:2.2em;border-bottom:1px solid var(--slate)}

.g-loop{display:block;width:100%;max-width:420px;height:auto;margin:22px auto 0}
.g-cards{display:grid;gap:12px;margin-top:16px;padding:0;list-style:none}
@media (min-width:640px){.g-cards{grid-template-columns:repeat(2,1fr)}.g-more .g-cards{grid-template-columns:repeat(3,1fr)}}
.g-cards li{margin:0}
.g-card{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px;border:1px solid var(--hairline);border-radius:16px;background:var(--card);box-shadow:var(--sh-card)}
:where(.g-doc) a.g-card{text-decoration:none;color:var(--ink)}
.g-card b{font:600 20px/1.25 var(--serif)}
.g-card span{font:400 15px/1.5 var(--sans);color:var(--slate)}
.g-card .g-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font:600 14px/1 var(--sans);color:var(--jade-label)}
.g-card:hover{border-color:var(--mint-line)}

.g-src li{overflow-wrap:anywhere}
.g-art .g-src li{font-size:15px;line-height:1.55}
.g-wait{margin-top:64px;padding:30px 20px;border:1px solid var(--gold-line);border-radius:22px;text-align:center;background:var(--grain),linear-gradient(180deg,#FDFAF4,#F7F1E6)}
.g-wait h2{font:600 clamp(28px,5vw,34px)/1.15 var(--serif);color:var(--ink)}
.g-wait>p{max-width:30em;margin:10px auto 0}
.g-jw{max-width:460px;margin:20px auto 0}
.g-more{margin-top:56px}
.g-more h2{font:600 26px/1.2 var(--serif);color:var(--ink)}

@media print{
  .g-top,.foot,.g-wait,.g-more,.g-toc,.skip{display:none!important}
  body{background:#fff}
  .g-doc{max-width:none;padding:0}
  :where(.g-doc) p,:where(.g-doc) li,:where(.g-doc) td{font-size:11.5pt;color:#000}
  .g-answer,.g-mission,.g-print,.g-box,.g-card{box-shadow:none;background:#fff;border-color:#000;break-inside:avoid}
  .g-print{break-before:page}
  .g-art h2,.g-art h3{break-after:avoid}
  .g-faq details::details-content{content-visibility:visible;height:auto}
  body:has(.g-print:target) .g-doc>:not(.g-art),body:has(.g-print:target) .g-art>:not(.g-print:target){display:none!important}
  body:has(.g-print:target) .g-print{break-before:auto;border-width:3px}
}

@media (max-width:430px){.g-crumbs li[aria-current]{display:none}}