/* mc-guide.css: the masterclass's own guide inside its page (glue/mc-guide.js, section#guide). The guide paper of the new
   site (#FBF8F2 by day, the night card by night), heavy Heebo headings, gold for the step numbers and the bottom line, the
   prompt boxes in the mc3 ink box (.pr), the one pink button only in the locked view. Logical properties only. */
.mg{scroll-margin-top:80px}
.mg .max{max-width:780px;margin-inline:auto}
.mg .mc-h{text-align:center}
/* the heading takes the focus only when #guide brings her here (a reading point, not a control): no ring */
.mg .mc-h:focus,.mg .mc-h:focus-visible{outline:none}
.mg .mg-sub{margin:0 auto 26px;text-align:center}
.mg-paper{box-sizing:border-box;position:relative;padding:clamp(22px,4vw,44px) clamp(18px,4vw,48px);border-radius:24px;background:#FBF8F2;color:#17110F;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--g2,#D9A63A) 45%,transparent),0 30px 70px -44px rgba(20,8,6,.5);text-align:start;font-size:17px;line-height:1.75;overflow-wrap:anywhere}
:root[data-theme="dark"] .mg-paper{background:var(--card,#1B1517);color:var(--ink,#F6EFE7)}
.mg-wait{margin:0;text-align:center;color:var(--dim)}
.mg-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--g-text);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--g2,#D9A63A) 70%,transparent);flex:none}
/* the locked view: no body, one line and the page's own sign-up window */
.mg-locked{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.mg-locked .mg-title{margin:4px 0 0;font-weight:900;font-size:clamp(20px,2.4vw,26px);line-height:1.25;text-wrap:balance}
.mg-locked .mg-note{margin:0 0 8px;color:var(--dim);max-width:46ch;text-wrap:pretty}
.mg-locked .btn{min-height:48px}
.mg-locked .btn:active{transform:scale(.96)}
.mg-fail p{margin:0;text-align:center}
.mg-fail a{color:inherit;font-weight:800;text-underline-offset:4px;text-decoration-color:var(--g2,#D9A63A)}
/* the guide itself */
.mg-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid color-mix(in srgb,var(--g2,#D9A63A) 40%,transparent)}
.mg-head .mg-title{margin:0;font-weight:900;font-size:clamp(22px,2.8vw,30px);line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.mg-words > :first-child{margin-top:0}
.mg-words p{margin:0 0 14px}
.mg-words .mg-h{margin:34px 0 12px;font-weight:900;font-size:clamp(21px,2.4vw,26px);line-height:1.25;text-wrap:balance;display:flex;align-items:baseline;gap:10px}
.mg-words .mg-sn{display:inline-grid;place-items:center;flex:none;min-width:34px;height:34px;padding-inline:6px;border-radius:999px;background:#17110F;color:#F7DF97;font-family:Syne,Heebo,sans-serif;font-weight:700;font-size:16px}
:root[data-theme="dark"] .mg-words .mg-sn{background:#F7DF97;color:#17110F}
.mg-words .mg-h3{margin:24px 0 8px;font-weight:800;font-size:19px;line-height:1.35}
.mg-words .mg-list{margin:0 0 16px;padding-inline-start:1.3em}
.mg-words .mg-list li{margin:0 0 6px}
.mg-words .mg-list li::marker{color:var(--g2,#D9A63A)}
.mg-words mark.mk{background:linear-gradient(transparent 58%,color-mix(in srgb,#F7DF97 75%,transparent) 0);color:inherit;padding:0 .08em}
:root[data-theme="dark"] .mg-words mark.mk{background:linear-gradient(transparent 58%,rgba(217,166,58,.4) 0)}
.mg-words .mg-lk{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--g2,#D9A63A);text-decoration-thickness:2px;text-underline-offset:4px}
.mg-words .mg-call{margin:18px 0;padding:14px 18px;border-radius:16px;border-inline-start:4px solid var(--g2,#D9A63A);background:color-mix(in srgb,#F7DF97 22%,transparent)}
.mg-words .mg-call.warn{border-inline-start-color:#A61B1B;background:color-mix(in srgb,#A61B1B 8%,transparent)}
:root[data-theme="dark"] .mg-words .mg-call.warn{border-inline-start-color:#FF9C8F}
.mg-words .mg-bottom{margin:26px 0 8px;padding:18px 20px;border-radius:18px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--g2,#D9A63A) 70%,transparent)}
.mg-words .mg-lb{display:block;margin-bottom:4px;font-weight:900;color:var(--g-text)}
:root:not([data-theme="dark"]) .mg-words .mg-lb{color:#6E4A08}
.mg-words .mg-bottom p{margin:0}
.mg-words .mg-quote{margin:22px 0;padding-inline-start:18px;border-inline-start:3px solid var(--g2,#D9A63A);font-family:"Frank Ruhl Libre",Heebo,serif;font-size:20px;line-height:1.5}
.mg-words .mg-quote p{margin:0}
.mg-words .mg-quote cite{display:block;margin-top:6px;font-family:Heebo,sans-serif;font-style:normal;font-size:15px;opacity:.75}
.mg-words .mg-img{margin:20px 0}
.mg-words .mg-img img{display:block;width:100%;height:auto;border-radius:16px}
.mg-words .mg-img figcaption,.mg-words .mg-cap{margin-top:8px;font-size:14.5px;opacity:.8}
/* a prompt box: the mc3 ink box (.pr), the copy and keep buttons in its own cream ink */
.mg-prompt{margin:18px 0;padding:16px 18px;border-radius:18px;background:#17110F;color:#F6EFE7;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;box-shadow:0 0 0 1px rgba(240,206,107,.28)}
.mg-prompt-h{flex:1 0 100%;font-weight:800;font-size:14px;color:#F0CE6B}
.mg-prompt-t{flex:1 0 100%;margin:4px 0 8px!important;font-size:15.5px;line-height:1.7;white-space:pre-wrap}
.mg-cpy,.mg-prompt .gkeep,.mg-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(246,239,231,.55);background:transparent;color:#F6EFE7;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:transform .15s cubic-bezier(.23,1,.32,1),border-color .2s}
.mg-cpy:hover,.mg-prompt .gkeep:hover,.mg-chip:hover{border-color:#F7DF97}
.mg-cpy:active,.mg-prompt .gkeep:active,.mg-chip:active{transform:scale(.96)}
.mg-cpy:focus-visible,.mg-prompt .gkeep:focus-visible,.mg-chip:focus-visible{outline:2px solid #F7DF97;outline-offset:2px}
.mg-prompt svg{flex:none}
.mg-prompt .gkeep svg{fill:none}
.mg-prompt .gkeep[aria-pressed="true"] svg{fill:#D4AF37;stroke:#F7DF97}
.mg-chips{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mg-chip{font-weight:600;white-space:normal;text-align:start}
@media (prefers-reduced-motion:reduce){.mg-cpy,.mg-prompt .gkeep,.mg-chip,.mg-locked .btn{transition:none}.mg-cpy:active,.mg-prompt .gkeep:active,.mg-chip:active,.mg-locked .btn:active{transform:none}}