/* Beginner's map (academy-pages/beginners-guide): a full-width storyboard sheet — paper panels with a sketched
   frame per step, marker notes and lines that draw themselves in. Uses the academy tokens. */
.mx-scribble { font-family: var(--font-outlier, Caveat, cursive); font-weight: 700; line-height: 1; transform: rotate(-2deg); }
.mx-marker-hl { background: linear-gradient(transparent 58%, rgb(250 204 21 / .55) 58%, rgb(250 204 21 / .55) 92%, transparent 92%); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mx-draw-line { stroke-dasharray: 260; stroke-dashoffset: 260; animation: mx-draw 1.6s ease forwards .3s; }
@keyframes mx-draw { to { stroke-dashoffset: 0; } }
.mx-guide p.mx-scribble + h2, p.mx-scribble + h2 { margin-top: .5rem; }
.mx-cross { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 2px solid #f43f5e; border-radius: 50% 45% 55% 48%; color: #f43f5e; font-weight: 700; font-size: .8rem; transform: rotate(-6deg); }

/* sheet header: the title block printed on a storyboard sheet */
.mx-sb-sheet { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: .9rem 1.1rem; border: 1px solid rgb(255 255 255 / .14); border-radius: .75rem .75rem 0 0; font: 600 .7rem/1.4 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #9ca3af; }
.mx-sb-sheet b { color: #FDE68A; font-weight: 600; margin-right: .5rem; }

/* the panels, left to right like shots: 1 → 2 → 3 → 4 columns as the screen widens */
.mx-sb-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; border: 1px solid rgb(255 255 255 / .14); border-top: 0; border-radius: 0 0 .75rem .75rem; counter-reset: shot; }
@media (min-width: 700px) { .mx-sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .mx-sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .mx-sb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* each shot = the dark "Get set up" card, with a small paper storyboard strip on top */
.mx-sb-panel { position: relative; display: flex; flex-direction: column; border-radius: 1rem; padding: 1rem 1.05rem 1.1rem; background: var(--color-surface, #141414); border: 1px solid rgb(255 255 255 / .08); box-shadow: 0 18px 40px -24px rgb(0 0 0 / .8); transition: transform .3s ease, border-color .3s ease; }
.mx-sb-panel:hover { transform: translateY(-3px); border-color: rgb(163 180 255 / .45); }
.mx-sb-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; font: 600 .68rem/1.3 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; }
.mx-sb-shot { color: #A3B4FF; white-space: nowrap; }
.mx-sb-when { color: #FDE68A; background: rgb(250 204 21 / .12); padding: .3rem .55rem; border-radius: .4rem; white-space: nowrap; }
.mx-sb-frame { position: relative; margin-top: .75rem; height: 6.25rem; border: 2px solid #1b1c22; outline: 6px solid #f4f1e8; outline-offset: 0; border-radius: .3rem; background: #fff; color: #23263a; display: grid; place-items: center; padding: .45rem; margin-inline: 6px; }
.mx-sb-frame svg { width: 100%; height: 100%; }
.mx-sb-note { position: absolute; right: .3rem; bottom: -1.05rem; font-size: 1.2rem; color: #FDE68A; background: var(--color-surface, #141414); padding: 0 .35rem; transform: rotate(-3deg); }
.mx-sb-scene { margin-top: 1.4rem; font: 600 .64rem/1.3 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #8b8fa3; }
.mx-sb-title { margin-top: .3rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.mx-sb-sub { color: #A3B4FF; font-size: .86rem; }
.mx-sb-action { margin-top: .55rem; font-size: .85rem; line-height: 1.45; color: var(--color-ink-2, #ccc); }
.mx-sb-action .mx-scribble { display: inline-block; font-size: 1.15rem; color: #FDE68A; margin-right: .15rem; }
.mx-sb-todo { margin-top: .8rem; display: grid; gap: .45rem; }
.mx-sb-todo li { display: flex; gap: .5rem; font-size: .85rem; line-height: 1.45; color: var(--color-ink-2, #ccc); }
.mx-sb-todo li span { color: #86efac; font-weight: 700; }
.mx-sb-goal { margin-top: .8rem; padding: .55rem .75rem; border-radius: .6rem; background: rgb(77 93 251 / .12); border-left: 3px solid #4D5DFB; font-size: .83rem; color: #e0e7ff; }
.mx-sb-label { margin-top: 1rem; font: 600 .64rem/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: #8b8fa3; }
.mx-sb-tools { margin-top: .45rem; display: grid; gap: .3rem; }
.mx-sb-tools li { font-size: .78rem; line-height: 1.4; padding: .35rem .55rem; border-radius: .5rem; background: rgb(255 255 255 / .05); }
.mx-sb-tools strong { color: #fff; }
.mx-sb-tools span { color: #9ca3af; }
.mx-sb-link { margin-top: auto; padding-top: 1rem; display: inline-flex; gap: .35rem; font-weight: 600; font-size: .92rem; color: #A3B4FF; }
.mx-sb-link:hover { color: #fff; }
.mx-sb-next { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px dashed rgb(163 180 255 / .35); border-radius: .9rem; padding: 2rem; }
@media (min-width: 1080px) and (max-width: 1359px) { .mx-sb-next { display: flex; } }

/* Software kit */
.mx-kit-card { border-radius: 1rem; padding: 1.15rem; background: var(--color-surface, #141414); border: 1px solid rgb(255 255 255 / .08); }
.mx-kit-card h4 { font-weight: 700; color: #fff; }
.mx-kit-when { margin-top: .25rem; font-size: .8rem; color: #A3B4FF; }
.mx-kit-cost { flex: none; font: 600 .62rem/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; padding: .35rem .5rem; border-radius: .4rem; background: rgb(255 255 255 / .08); color: #e5e7eb; }
.mx-kit-free { background: rgb(134 239 172 / .14); color: #86efac; }
.mx-kit-included { background: rgb(163 180 255 / .14); color: #c7d2fe; }
.mx-kit-subscription { background: rgb(250 204 21 / .12); color: #FDE68A; }

@media (prefers-reduced-motion: reduce) { .mx-draw-line { animation: none; stroke-dashoffset: 0; } .mx-sb-panel:hover { transform: none; } }