#aidemore{position:relative;overflow-x:clip;min-height:var(--screen-h);
  padding:var(--head-top, calc(var(--nav-h) + var(--u)*72)) 0 var(--band, calc(var(--u)*72));color:var(--text);
  background:linear-gradient(180deg,var(--porcelain),
    color-mix(in srgb,var(--porcelain),var(--porcelain) 5.3%) calc(var(--join)*.14),
    color-mix(in srgb,var(--porcelain),var(--porcelain) 32.4%) calc(var(--join)*.38),
    color-mix(in srgb,var(--porcelain),var(--porcelain) 67.6%) calc(var(--join)*.62),
    color-mix(in srgb,var(--porcelain),var(--porcelain) 94.7%) calc(var(--join)*.86),
    var(--porcelain) var(--join)) var(--porcelain);
  --aidemore-ink:#2B4552;
  --aidemore-far:36%;--aidemore-tx:50%;--aidemore-sl:72%;--aidemore-dot:80%;
  --aidemore-face:50%;--aidemore-top:85.714%;--aidemore-core:20%;
  --aidemore-rule:30%;
  --aidemore-mk:max(54px, calc(var(--u)*84));
  --aidemore-gap:calc(var(--u)*40)}
#aidemore:is([data-theme="dark"] *){
  --aidemore-ink:color-mix(in srgb,var(--text-body) 80%,var(--tint));
  --aidemore-far:30%;--aidemore-tx:46%;--aidemore-sl:66%;--aidemore-dot:74%;
  --aidemore-face:38%;--aidemore-top:62%;--aidemore-core:22%;
  --aidemore-rule:28%}
@media (prefers-color-scheme:dark){#aidemore:is(:root:where(:not([data-theme])) *){
  --aidemore-ink:color-mix(in srgb,var(--text-body) 80%,var(--tint));
  --aidemore-far:30%;--aidemore-tx:46%;--aidemore-sl:66%;--aidemore-dot:74%;
  --aidemore-face:38%;--aidemore-top:62%;--aidemore-core:22%;
  --aidemore-rule:28%}}
#aidemore h2,#aidemore p,#aidemore ol,#aidemore ul,#aidemore li{margin:0;padding:0}
#aidemore ol,#aidemore ul{list-style:none}
#aidemore .in{width:var(--col);margin-inline:auto}
#aidemore h2{font:var(--font-section);letter-spacing:var(--ls-section);color:var(--text);text-wrap:balance}
#aidemore .lead{margin-top:calc(var(--u)*14);font:var(--font-lead);color:var(--text-body);text-wrap:balance}

#aidemore .steps{position:relative;margin-top:calc(var(--u)*32);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--aidemore-gap);counter-reset:aidemore-step}
#aidemore .steps::before{content:"";position:absolute;left:0;right:0;top:calc(var(--aidemore-mk) + var(--u)*6);height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--hair-strong),var(--hair-strong) 84%,transparent)}
#aidemore .step{display:flex;flex-direction:column;align-items:flex-start;counter-increment:aidemore-step}
#aidemore .step::before{content:counter(aidemore-step);order:1;margin-top:calc(var(--u)*20);font:500 max(11px,calc(var(--u)*12))/1 var(--mono);letter-spacing:.08em;color:var(--link)}
#aidemore .mk{order:0;display:block;flex:none;width:var(--aidemore-mk);height:var(--aidemore-mk);overflow:visible}
#aidemore .step p{order:2;margin-top:calc(var(--u)*8);max-width:19em;font:400 var(--fs-body)/1.5 var(--sans);color:var(--text-body);text-wrap:pretty}
#aidemore .s2 p{--reveal-delay:140ms}
#aidemore .s3 p{--reveal-delay:280ms}
#aidemore .s4 p{--reveal-delay:420ms}

#aidemore .mk path,#aidemore .mk circle{fill:none;stroke-linecap:round;stroke-linejoin:round}
#aidemore .mk .ff{fill:color-mix(in srgb,var(--glass-fill) var(--aidemore-face),transparent)}
#aidemore .mk .ft{fill:color-mix(in srgb,var(--glass-fill) var(--aidemore-top),transparent)}
#aidemore .mk .e{stroke:var(--aidemore-ink);stroke-width:1.3}
#aidemore .mk .h{stroke:color-mix(in srgb,var(--aidemore-ink) var(--aidemore-far),transparent);stroke-width:1}
#aidemore .mk .tx{stroke:color-mix(in srgb,var(--aidemore-ink) var(--aidemore-tx),transparent);stroke-width:1.3}
#aidemore .mk .sl{stroke:color-mix(in srgb,var(--aidemore-ink) var(--aidemore-sl),transparent);stroke-width:1.3}
#aidemore .mk .a{stroke:var(--turquoise);stroke-width:1.75}
#aidemore .mk .cf{fill:color-mix(in srgb,var(--turquoise) var(--aidemore-core),transparent);stroke:none}
#aidemore .mk .af{fill:var(--turquoise);stroke:none}
#aidemore .mk .dot{stroke:color-mix(in srgb,var(--aidemore-ink) var(--aidemore-dot),transparent);stroke-width:1.6;stroke-dasharray:.01 3.3}

#aidemore .note{margin-top:calc(var(--u)*60);display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);column-gap:calc(var(--u)*64);align-items:start}
#aidemore .note .lead{max-width:22em;text-wrap:pretty}
#aidemore .sheet{position:relative;display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(var(--u)*19) calc(var(--u)*36);padding:calc(var(--u)*26) calc(var(--u)*34) calc(var(--u)*28);border-radius:var(--glass-radius);
  background:var(--glass-bg);border:var(--glass-border);box-shadow:var(--glass-shadow)}
#aidemore .sheet li{min-width:0}
#aidemore .sheet .k{display:block;font:500 max(11px,calc(var(--u)*11.5))/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--link)}
#aidemore .sheet i{display:block;height:1px;transform-origin:0 50%;
  background:color-mix(in srgb,var(--aidemore-ink) var(--aidemore-rule),transparent)}
#aidemore .sheet i:nth-of-type(1){margin-top:calc(var(--u)*11);width:100%}
#aidemore .sheet i:nth-of-type(2){margin-top:calc(var(--u)*8);width:62%}
#aidemore .sheet li:nth-child(3n+2) i:nth-of-type(2){width:78%}
#aidemore .sheet li:nth-child(3n) i:nth-of-type(2){width:44%}
#aidemore .sheet li:first-child i:nth-of-type(1){background:var(--turquoise)}

#aidemore:is(.nl-motion *) :is(.aidemore-wait,.aidemore-draw) .mk .d{stroke-dasharray:1 1}
#aidemore:is(.nl-motion *) .aidemore-wait .mk .d{stroke-dashoffset:1;stroke-linecap:butt}
#aidemore:is(.nl-motion *) .aidemore-draw .mk .d{transition:stroke-dashoffset 1.1s cubic-bezier(.55,.1,.3,1) var(--aidemore-d,0ms)}
#aidemore:is(.nl-motion *) .aidemore-draw .mk .ac .d{transition-duration:.8s;transition-delay:calc(var(--aidemore-d,0ms) + 750ms)}
#aidemore:is(.nl-motion *) .aidemore-wait .mk .f{opacity:0}
#aidemore:is(.nl-motion *) .aidemore-draw .mk .f{transition:opacity .9s ease calc(var(--aidemore-d,0ms) + 500ms)}
#aidemore:is(.nl-motion *) .aidemore-draw .mk .ac .f{transition-delay:calc(var(--aidemore-d,0ms) + 1100ms)}
#aidemore:is(.nl-motion *) .s2{--aidemore-d:140ms}
#aidemore:is(.nl-motion *) .s3{--aidemore-d:280ms}
#aidemore:is(.nl-motion *) .s4{--aidemore-d:420ms}
#aidemore:is(.nl-motion *) .sheet.aidemore-wait i{transform:scaleX(0)}
#aidemore:is(.nl-motion *) .sheet.aidemore-draw i{transition:transform .9s cubic-bezier(.55,.1,.3,1) calc(var(--aidemore-i,0) * 55ms + 150ms)}
@media print{
  #aidemore .mk .d{stroke-dasharray:none!important}
  #aidemore .mk .f{opacity:1!important}
  #aidemore .sheet i{transform:none!important}
}

@media (min-width:960px) and (max-height:780px) and (min-aspect-ratio:8/5){
  #aidemore .steps{margin-top:calc(var(--u)*24)}
  #aidemore .note{margin-top:calc(var(--u)*38)}
  #aidemore .sheet{row-gap:calc(var(--u)*17);padding-block:calc(var(--u)*24) calc(var(--u)*26)}
}
@media (max-width:959px),(min-width:960px) and (max-aspect-ratio:9/10){
  #aidemore{min-height:0}
}
@media (max-width:799px),(max-width:959px) and (max-aspect-ratio:12499/10000){
  #aidemore{--aidemore-mk:60px}
  #aidemore .lead{margin-top:12px}
  #aidemore .steps{margin-top:28px;grid-template-columns:minmax(0,1fr);row-gap:22px}
  #aidemore .steps::before{display:none}
  #aidemore .step{display:grid;grid-template-columns:var(--aidemore-mk) minmax(0,1fr);column-gap:20px;align-items:start}
  #aidemore .mk{grid-column:1;grid-row:1 / span 2}
  #aidemore .step::before{grid-column:2;grid-row:1;margin-top:6px}
  #aidemore .step p{grid-column:2;grid-row:2;margin-top:6px;max-width:30em}
  #aidemore .s2 p,#aidemore .s3 p,#aidemore .s4 p{--reveal-delay:0ms}
  #aidemore:is(.nl-motion *) :is(.s2,.s3,.s4){--aidemore-d:0ms}
}
@media (max-width:959px){
  #aidemore .note{margin-top:52px;grid-template-columns:minmax(0,1fr);row-gap:24px}
  #aidemore .note .lead{max-width:36em}
  #aidemore .how .lead{text-wrap:pretty}
  #aidemore .sheet{gap:20px 24px;padding:24px 22px 26px}
  #aidemore .sheet i:nth-of-type(1){margin-top:10px}
  #aidemore .sheet i:nth-of-type(2){margin-top:7px}
}
@media (min-width:800px) and (max-width:959px) and (min-aspect-ratio:5/4){
  #aidemore{--aidemore-mk:56px;--aidemore-gap:24px}
  #aidemore .steps{margin-top:24px}
  #aidemore .step::before{margin-top:18px}
  #aidemore .step p{font-size:15px}
}
@media (max-width:559px){
  #aidemore .sheet{grid-template-rows:repeat(6,auto);grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px;padding:22px 18px 24px}
  #aidemore .sheet .k{letter-spacing:.08em}
  #aidemore .sheet li:nth-child(3n+2) i:nth-of-type(2),#aidemore .sheet li:nth-child(3n) i:nth-of-type(2){width:62%}
  #aidemore .sheet li:nth-child(even) i:nth-of-type(2){width:46%}
}
