/**
 * Generator Hub — dashboard in twee zones: links maken (een kaart per tool met
 * je concept, de formaten of een zoekveld, en "hoe werkt het?"), rechts
 * checken (tools die buiten de hub draaien, compact in een donker vlak, elk
 * met één knop). Gedeelde bouwstenen staan in css/global.css.
 */

.hub { padding-top: 1.75rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .hub { padding-top: 2.25rem; } }

/* Op een touchscreen en een smal scherm is alles wat je aantikt minstens 44 px hoog */
@media (pointer: coarse), (max-width: 639px) {
  .site-header__brand a { min-height: 2.75rem; align-items: center; }
}

/* --- Zones: naast elkaar op een breed scherm, anders checken onder maken --- */

.zones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 1280px) {
  .zones.has-side { grid-template-columns: minmax(0, 1fr) 24rem; gap: 2.5rem; align-items: start; }
}
.zone { scroll-margin-top: 1rem; }
.zone__head { margin-bottom: 1.25rem; }
.zone__title { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.zone__title--sm { font-size: 1.5rem; line-height: 1.2; }
.zone__lead { margin-top: .5rem; font-size: 1rem; line-height: 1.55; color: var(--pm-muted); text-wrap: pretty; }
.zone__lead strong { font-weight: 700; color: var(--pm-ink); }
.zone.is-flash { animation: pm-flash 1.2s ease-out; }   /* na #design of #techniek */

/* Nieuw: klein, en weg zodra je de tool hier geopend hebt (js: isNew) */
.tag {
  padding: 0 .4rem; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; line-height: 1.6; text-transform: uppercase;
  background: var(--pm-tint); color: var(--pm-blue);
}
.tag--soon { background: var(--pm-track); color: var(--pm-muted); }

/* --- Maken: een kaart per tool --- */

.makers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .makers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.maker {
  display: flex; flex-direction: column; gap: .875rem;
  padding: 1rem 1rem .875rem;
  background: #fff; border: 1px solid var(--pm-line); border-top: 3px solid var(--pm-cyan);
  box-shadow: 0 1px 2px rgba(16, 40, 60, .05), 0 24px 48px -36px rgba(16, 40, 60, .35);
}
.maker.is-soon { opacity: .65; }
.maker__head { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; }
.maker__name { font-size: 1.125rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.maker__link { color: inherit; text-decoration: none; }
.maker__link:hover { text-decoration: underline; text-decoration-color: var(--pm-cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.maker__link:focus-visible { outline: 3px solid var(--pm-blue); outline-offset: 2px; }
.maker__desc { flex-basis: 100%; font-size: .8125rem; line-height: 1.5; color: var(--pm-muted); text-wrap: pretty; }
.maker__or { margin: -.375rem 0 -.5rem; font-size: .75rem; font-weight: 700; color: var(--pm-muted); }
@media (pointer: coarse), (max-width: 639px) {
  .maker__link { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* Formaten: het formaat op een podium, zoals in de makers */
.fmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.fmt {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--pm-line); background: #fff; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.fmt__art { display: grid; place-items: center; height: 4.75rem; background: var(--pm-canvas); transition: background-color .15s; }
.fmt__label { padding: .4rem .6rem 0; font-size: .875rem; font-weight: 700; line-height: 1.3; }
.fmt__sub { padding: 0 .6rem .45rem; font-size: .75rem; line-height: 1.35; color: var(--pm-muted); }
.fmt:hover { border-color: var(--pm-cyan); box-shadow: 0 12px 24px -16px rgba(16, 40, 60, .45); }
.fmt:hover .fmt__art { background: var(--pm-tint); }
.fmt:focus-visible { outline: 3px solid var(--pm-blue); outline-offset: 2px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .fmt:hover { transform: translateY(-2px); } }
.fmt__hex { width: 2rem; height: 2.3rem; background: var(--pm-cyan); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
@media (max-width: 639px) {
  .fmt__art { height: 3.75rem; }
  .fmt__art .shape { transform: scale(.8); }
  .fmt__label { font-size: .8125rem; }
}

/* Zoeken: typ en je zit in de tool met je zoekterm */
.find { display: flex; gap: .5rem; }
.find__field { position: relative; flex: 1; min-width: 0; }
.find__field svg { position: absolute; left: .75rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); fill: none; stroke: var(--pm-cyan); stroke-width: 2.5; pointer-events: none; }
.find__input {
  width: 100%; min-height: 3rem; padding: .625rem .875rem .625rem 2.4rem;
  border: 2px solid var(--pm-border); border-radius: 0; background: #fff;
  font-size: .9375rem; color: var(--pm-ink);
  transition: border-color .15s, box-shadow .15s;
}
.find__input::placeholder { color: #8d99a3; }
.find__input:focus { outline: none; border-color: var(--pm-cyan); box-shadow: 0 0 0 4px rgba(26, 185, 226, .18); }
.find__btn { min-height: 3rem; }

/* Je concept: bovenaan de kaart en duidelijk je eigen werk, anders dan de lichte formaten */
.draft {
  display: flex; align-items: center; gap: .75rem; min-height: 3.75rem;
  padding: .5rem .75rem .5rem .625rem;
  background: var(--pm-tint); border: 1px solid #c6ebf6; border-left: 4px solid var(--pm-cyan);
  color: inherit; text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.draft:hover { background: #d9f2fa; border-color: var(--pm-cyan); }
.draft:focus-visible { outline: 3px solid var(--pm-blue); outline-offset: 2px; }
.draft__art { display: grid; place-items: center; width: 2.75rem; height: 2.25rem; flex: none; }
.draft__art .shape { border-top-width: 2px; }
.draft__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.draft__kicker { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; color: var(--pm-blue); }
.draft__kicker svg { width: .85rem; height: .85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; }
.draft__title { font-size: .9375rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft__meta { font-size: .75rem; color: var(--pm-muted); }
.draft__go {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  background: #fff; border: 1px solid var(--pm-cyan);
}
.draft__go svg { display: block; width: 1rem; height: 1rem; fill: none; stroke: var(--pm-blue); stroke-width: 2.5; transition: transform .2s ease-out; }
.draft:hover .draft__go svg { transform: translateX(2px); }

/* De bieb: je bewaarde ontwerpen (14 dagen), onder je concept */
.bieb { display: flex; flex-direction: column; gap: .375rem; }
.bieb__head { display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; color: var(--pm-blue); }
.bieb__head svg { width: .9rem; height: .9rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.25; }
.bieb__count { padding: 0 .3rem; background: var(--pm-cyan); color: var(--pm-ink); font-size: .6875rem; line-height: 1.1rem; }
.bieb__note { font-weight: 400; color: var(--pm-muted); }
.bieb__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pm-line); }
.bieb__item {
  display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .375rem .5rem .375rem .25rem;
  border-bottom: 1px solid var(--pm-line); color: inherit; text-decoration: none;
  transition: background-color .15s;
}
.bieb__item:hover { background: var(--pm-soft); }
.bieb__item:focus-visible { outline: 3px solid var(--pm-blue); outline-offset: -3px; }
.bieb__art { display: grid; place-items: center; width: 2.75rem; height: 2.4rem; flex: none; }
.bieb__art .shape { border-top-width: 2px; }
.bieb__img { display: block; overflow: hidden; background: var(--pm-canvas); border-top: 2px solid var(--pm-cyan); }
.bieb__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bieb__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.bieb__title { font-size: .875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bieb__meta { font-size: .75rem; color: var(--pm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bieb__left.is-soon { color: #8f5600; font-weight: 700; }
.bieb__more { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start; font-size: .75rem; font-weight: 700; color: var(--pm-blue); text-decoration: none; }
.bieb__more:hover { text-decoration: underline; }
.bieb__more svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* Voet: wat je eruit krijgt, en "hoe werkt het?" zolang je de rondleiding niet gedaan hebt */
.maker__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem;
  margin-top: auto; padding-top: .5rem; border-top: 1px dashed var(--pm-border);
  font-size: .75rem;
}
.maker__exports { font-weight: 700; color: var(--pm-blue); }

/* Hulp: overal dezelfde woorden en dezelfde kleine link */
.help-link {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem;
  font-size: .8125rem; font-weight: 700; color: var(--pm-ink); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.help-link svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--pm-cyan); stroke-width: 2.25; }
.help-link:hover { border-bottom-color: var(--pm-cyan); }
.help-link:focus-visible { outline: 3px solid var(--pm-blue); outline-offset: 2px; }
@media (pointer: coarse), (max-width: 639px) { .help-link { min-height: 2.75rem; } }

/* --- Checken: donker vlak met zeshoekpatroon; elke tool dezelfde opbouw en één knop --- */

.zone--dark {
  position: relative; isolation: isolate;
  padding: 1.25rem 1rem 1rem;
  background: radial-gradient(30rem 18rem at 100% 0%, rgba(26, 185, 226, .2), transparent 70%), var(--pm-ink);
  border-top: 4px solid var(--pm-cyan);
  color: #fff;
}
.zone--dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='180' viewBox='0 0 103.92 180'%3E%3Cpath d='M0 60 51.96 30 103.92 60v60L51.96 150 0 120zM51.96 0v30m0 120v30' fill='none' stroke='%23ffffff' stroke-opacity='.07'/%3E%3C/svg%3E") 0 0 / 104px 180px;
  -webkit-mask-image: linear-gradient(#000, transparent 60%);
  mask-image: linear-gradient(#000, transparent 60%);
}
@media (min-width: 640px) { .zone--dark { padding: 1.5rem 1.25rem 1.25rem; } }
.zone--side .zone__head { margin-bottom: 1rem; }
.zone--dark .zone__lead { font-size: .8125rem; color: rgba(255, 255, 255, .74); }

.checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) and (max-width: 1279px) { .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .75rem .875rem .875rem;
  background: #fff; color: var(--pm-ink);
}
.check.is-soon { opacity: .65; }
.check__name { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; font-size: .9375rem; font-weight: 800; line-height: 1.3; }
.check__desc { font-size: .8125rem; line-height: 1.45; color: var(--pm-muted); text-wrap: pretty; }
.check__meta { display: flex; flex-direction: column; gap: .1rem; font-size: .75rem; line-height: 1.4; }
.check__where { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--pm-ink); }
.check__where svg { width: .9rem; height: .9rem; flex: none; fill: none; stroke: var(--pm-blue); stroke-width: 2.5; }
.check__gets { color: var(--pm-muted); }
/* Eén knop met een werkwoord (omlijnd, geen magenta: dat is voor de hoofdactie in een tool) */
.check__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: auto; padding-top: .5rem; }
.check__cta { min-height: 2.75rem; }
.check__cta svg { width: 1rem; height: 1rem; transition: transform .2s ease-out; }
@media (hover: hover) { .check__cta:hover svg { transform: translate(2px, -2px); } }
/* Voor wie hem al kent: meteen downloaden, rustig naast de knop */
.check__alt {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem;
  font-size: .8125rem; font-weight: 700; color: var(--pm-muted); text-decoration: none;
}
.check__alt svg { width: .95rem; height: .95rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; }
.check__alt:hover { color: var(--pm-ink); text-decoration: underline; text-decoration-color: var(--pm-cyan); text-underline-offset: 3px; }
.check__alt:focus-visible { outline: 3px solid var(--pm-blue); outline-offset: 2px; }
.check__file { font-weight: 400; }

/* Telefoon: compacte regels, de knop over de hele breedte */
@media (max-width: 639px) {
  .check { padding: .75rem .75rem .625rem; }
  .check__actions { padding-top: .375rem; }
  .check__cta { flex: 1 1 100%; justify-content: space-between; }
}

/* --- Voor klanten: over de volle breedte onder de rest, licht, de kaartjes in een raster --- */

.zone--bottom { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--pm-line); }
.zone--bottom .checks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.zone--bottom .check { border: 1px solid var(--pm-border); }

/* --- Voet: de ontwikkelaarsnotitie staat ingeklapt, de gebruiker heeft hem niet nodig --- */

.hub__foot {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1.5rem;
  margin-top: 3rem; padding-top: .5rem; border-top: 1px solid var(--pm-line);
  font-size: .8125rem; color: var(--pm-muted);
}
:is(.devnote, .guide__help) summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem;
  font-weight: 700; cursor: pointer; list-style: none;
}
:is(.devnote, .guide__help) summary::-webkit-details-marker { display: none; }
:is(.devnote, .guide__help) summary::before {
  content: ''; width: .4rem; height: .4rem; margin: 0 .15rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
:is(.devnote, .guide__help)[open] summary::before { transform: rotate(45deg); }
:is(.devnote, .guide__help) summary:hover { color: var(--pm-ink); }
:is(.devnote, .guide__help) summary:focus-visible { outline: 3px solid var(--pm-blue); outline-offset: 2px; }
.devnote ol { margin: 0 0 .75rem; padding-left: 1.5rem; line-height: 1.8; }
.hub__foot code { font-size: .75rem; background: var(--pm-track); padding: 0 .3rem; color: var(--pm-ink); }
.hub__foot > a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; color: var(--pm-ink); text-decoration: none; }
.hub__foot > a:hover { color: var(--pm-magenta); }

/* --- Uitleg bij een lokale tool: een paneel van rechts (<dialog>, js: openGuide) --- */

html:has(dialog.guide[open]) { overflow: hidden; }   /* de pagina erachter schuift niet mee */

.guide {
  width: min(36rem, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0 0 0 auto; padding: 0; border: 0;
  background: #fff; color: var(--pm-ink);
  box-shadow: -32px 0 64px -32px rgba(16, 40, 60, .55);
}
.guide::backdrop { background: rgba(24, 30, 36, .55); }
.guide__panel { display: flex; flex-direction: column; height: 100%; border-top: 4px solid var(--pm-cyan); }

.guide__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem .5rem; }
.guide__kicker {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pm-blue);
}
.guide__kicker::before {
  content: ''; width: .6rem; height: .69rem; flex: none; background: var(--pm-cyan);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.guide__title { margin-top: .25rem; font-size: 1.625rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.guide__close { width: 2.75rem; height: 2.75rem; margin: -.375rem -.625rem 0 0; font-size: 1.75rem; }
.guide__close:focus-visible { outline: 3px solid rgba(26, 185, 226, .5); outline-offset: 0; }
.guide__intro { padding: 0 1.5rem; font-size: .9375rem; line-height: 1.6; color: var(--pm-muted); text-wrap: pretty; }

/* Tabjes Mac / Windows: het tabje van je eigen computer staat al open */
.guide__tabs { display: flex; margin: 1.125rem 1.5rem 0; border-bottom: 1px solid var(--pm-line); }
.guide__tabs [role="tab"] {
  flex: 1; min-height: 2.75rem; padding: .5rem 1rem; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 3px solid transparent;
  font-size: .9375rem; font-weight: 700; color: var(--pm-muted);
  transition: background-color .15s, color .15s, border-color .15s;
}
.guide__tabs [role="tab"]:hover { color: var(--pm-ink); background: var(--pm-soft); }
.guide__tabs [role="tab"][aria-selected="true"] { color: var(--pm-ink); background: var(--pm-tint); border-bottom-color: var(--pm-cyan); }
.guide__tabs [role="tab"]:focus-visible { outline: 3px solid rgba(26, 185, 226, .5); outline-offset: -3px; }

.guide__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.5rem 1.5rem 2rem; }
.guide__panelbody:focus-visible { outline: 3px solid rgba(26, 185, 226, .5); outline-offset: 6px; }

/* Stappen: zeshoeken op een lijn */
.guide-steps { margin: 0; padding: 0; list-style: none; }
.guide-step { position: relative; padding: 0 0 1.5rem 2.75rem; }
.guide-step::before {
  content: attr(data-n); position: absolute; left: 0; top: -.1rem;
  display: grid; place-items: center; width: 1.75rem; height: 2rem;
  font-size: .8125rem; font-weight: 800; background: var(--pm-cyan); color: var(--pm-ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.guide-step::after { content: ''; position: absolute; left: calc(.875rem - 1px); top: 2.3rem; bottom: .35rem; width: 2px; background: var(--pm-line); }
.guide-step:last-child { padding-bottom: .25rem; }
.guide-step:last-child::after { content: none; }
.guide-step--prep::before { background: var(--pm-tint); }   /* eenmalig: licht, zonder nummer */
.guide-step__title { font-size: 1rem; font-weight: 800; line-height: 1.35; }
.guide-step p { margin-top: .375rem; font-size: .9375rem; line-height: 1.65; }
.guide-step a:not(.btn), .guide__more a { color: var(--pm-blue); font-weight: 700; }
.guide-step .guide-step__action { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.guide-step__action small { font-size: .75rem; color: var(--pm-muted); }
.guide-step .guide-step__tip { margin-top: .625rem; padding: .5rem .75rem; border-left: 3px solid var(--pm-cyan); background: var(--pm-soft); font-size: .875rem; line-height: 1.55; }

.guide-list { margin: .5rem 0 0; padding: 0; list-style: none; }
.guide-list li { position: relative; margin-top: .375rem; padding-left: 1.2rem; font-size: .9375rem; line-height: 1.6; }
.guide-list li::before {
  content: ''; position: absolute; left: .1rem; top: .55em; width: .5rem; height: .58rem; background: var(--pm-cyan);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Opdrachten zoals ze in het venster staan, met een kopieerknop */
.cmd {
  display: inline-flex; align-items: stretch; vertical-align: baseline;
  background: var(--pm-ink); color: #fff;
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; font-size: .875rem; line-height: 1.65;
}
.cmd code { padding: 0 .5rem; font: inherit; white-space: pre; }
.cmd__copy {
  display: grid; place-items: center; width: 1.9rem; padding: 0;
  border: 0; border-left: 1px solid rgba(255, 255, 255, .2); background: none;
  color: var(--pm-cyan); cursor: pointer;
}
.cmd__copy:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.cmd__copy:focus-visible { outline: 3px solid rgba(26, 185, 226, .6); outline-offset: 1px; }
.cmd__copy svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; }
.cmd__copy .i-check { display: none; }
.cmd__copy.is-copied { color: #fff; }
.cmd__copy.is-copied .i-copy { display: none; }
.cmd__copy.is-copied .i-check { display: block; stroke-width: 2.75; }
.cmd__done { font-size: .75rem; font-weight: 700; color: var(--pm-green); }
.cmd__done:not(:empty) { margin-left: .5rem; }

/* Lukt het niet? Ingeklapt: wie het goed doet, hoeft het niet te lezen */
.guide__help { margin-top: 1.25rem; padding-top: .25rem; border-top: 1px solid var(--pm-line); }
.guide__help .guide-list li { font-size: .875rem; }
.guide__more { margin-top: .875rem; font-size: .875rem; color: var(--pm-muted); }

@media (max-width: 639px) {
  .guide__head, .guide__intro { padding-left: 1rem; padding-right: 1rem; }
  .guide__tabs { margin-left: 1rem; margin-right: 1rem; }
  .guide__body { padding: 1.25rem 1rem 1.75rem; }
  .guide__title { font-size: 1.375rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .guide[open] { animation: guide-in .3s cubic-bezier(.2, .8, .2, 1); }
  .guide[open]::backdrop { animation: guide-fade .25s ease-out; }
}
@keyframes guide-in { from { transform: translateX(3rem); opacity: 0; } }
@keyframes guide-fade { from { opacity: 0; } }