/* THE MINIATURE GENERATOR'S PAGE (Miniature.astro, miniature.js, sprite.js), Maayan's design (2026-11-05): black, the
   GrowlMaster serif for headings and its UI face for the rest; the hero (words | drawing → miniature), the panel, the
   button under it, then the example. */
body:has(.mini) { background: #000; }
/* its tokens; .mini-kit carries them where its pieces show outside this page (a miniature's page: DropSheet.astro) */
.mini, .mini-kit { --cream: #f3e6c8; --panel: #2f2d2a; --field: #45423d; --gold: #8a6c35; --serif: "Frank Ruhl Libre", Georgia, serif; --sans: "Grandstander", system-ui, sans-serif; }
.mini {
  box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 28px 24px 48px; color: var(--cream); background: #000; }

/* the sprite piece: the new pose replaces the old at once, then the figure squashes the way a dice sack does
   (dice.css gm-sprite-squash). The squash and the facing flip share the podium's foot (sprite.js FOOT/CELL), so the
   base stays put and the figure never dips. */
.gm2-mini-sprite { position: relative; transform-origin: 50% var(--floor, 82%); }
.gm2-mini-sprite.is-right { transform: scaleX(-1); }
.gm2-mini-sprite.is-squash { animation: mini-squash .32s ease-out; }
@keyframes mini-squash {
  0% { scale: 1 1; rotate: 0deg; }
  35% { scale: var(--sqx, 1.06) var(--sqy, .94); rotate: var(--sqa, 0deg); }
  65% { scale: var(--sqx2, .98) var(--sqy2, 1.03); rotate: var(--sqa2, 0deg); }
  100% { scale: 1 1; rotate: 0deg; }
}
.gm2-mini-sprite__pose, .gm2-mini-sprite__part { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; user-select: none; z-index: 1; }
/* the floor is the black page. The same picture turns over at the foot (scaleY, origin --floor from sprite.js),
   squeezed to .55 so it reads as a puddle and not a second figure. The mask is in the picture's own space, before
   that flip: it keeps the base, strongest where it meets the foot, and lets go a short way up the figure. Once
   turned over, that is a short fade going down, touching the base. */
.gm2-mini-reflect { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; opacity: 0; pointer-events: none; user-select: none; transform: scaleY(-.55); transform-origin: 50% var(--floor, 82%); filter: brightness(.72) saturate(.8); -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--floor) - 16%), rgba(0,0,0,.4) calc(var(--floor) - 6%), #000 var(--floor), transparent calc(var(--floor) + .5%)); mask-image: linear-gradient(to bottom, transparent calc(var(--floor) - 16%), rgba(0,0,0,.4) calc(var(--floor) - 6%), #000 var(--floor), transparent calc(var(--floor) + .5%)); }
.gm2-mini-reflect.is-on, .gm2-mini-sprite.is-fly .gm2-mini-reflect--base, .gm2-mini-sprite.is-fly .gm2-mini-reflect--body { opacity: .9; }
.gm2-mini-sprite.is-fly .gm2-mini-reflect:not(.gm2-mini-reflect--base):not(.gm2-mini-reflect--body) { opacity: 0; }
.gm2-mini-reflect--body { animation: mini-hover-reflect var(--hover-t, 2.6s) ease-in-out infinite; animation-play-state: paused; }
.gm2-mini-sprite.is-fly .gm2-mini-reflect--body { animation-play-state: running; }
@keyframes mini-hover-reflect {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(var(--hover, -2.6%) * -.55); }
}
.gm2-mini-sprite__pose.is-on { opacity: 1; }
/* fly: the podium and the character are the same picture, split. Only the character rises and settles. */
.gm2-mini-sprite.is-fly .gm2-mini-sprite__part { opacity: 1; }
.gm2-mini-sprite.is-fly .gm2-mini-sprite__pose { opacity: 0; }
.gm2-mini-sprite__part--body { animation: mini-hover var(--hover-t, 2.6s) ease-in-out infinite; animation-play-state: paused; }
.gm2-mini-sprite.is-fly .gm2-mini-sprite__part--body { animation-play-state: running; }
@keyframes mini-hover {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--hover, -2.6%); }
}
/* a pose's own effect (sprite.js RECIPE): glows that breathe, sparks that flicker, bits that rise or fall without end,
   bits that burst out once, the skull that winds away once. Each bit carries its own way to go (--dx, --dy, --rot). */
.gm2-mini-fx { position: absolute; inset: 0; pointer-events: none; }
.gm2-mini-fx--back { z-index: 0; }
.gm2-mini-fx--front { z-index: 2; }
.gm2-mini-fx > i { position: absolute; font-style: normal; }
.gm2-mini-fx__glow { left: 16%; right: 16%; top: 6%; bottom: 24%; border-radius: 50%; opacity: 0; mix-blend-mode: screen; }
.gm2-mini-fx__glow--magic { background: radial-gradient(ellipse at 50% 40%, rgba(170, 210, 255, .55), rgba(190, 130, 255, .28) 42%, transparent 72%); animation: mini-magic-glow 1.1s ease-in-out infinite; }
.gm2-mini-fx__glow--joy { background: radial-gradient(ellipse at 50% 40%, rgba(255, 236, 160, .95), rgba(255, 180, 60, .45) 40%, transparent 70%); animation: mini-breathe 1.7s ease-in-out infinite; }
.gm2-mini-fx__glow--gold { background: radial-gradient(ellipse at 50% 46%, rgba(255, 226, 140, .55), rgba(255, 190, 80, .16) 44%, transparent 70%); animation: mini-magic-glow 1.6s ease-in-out infinite; }
.gm2-mini-fx__glow--fire { top: 22%; bottom: 14%; background: radial-gradient(ellipse at 50% 62%, rgba(255, 150, 60, .6), rgba(255, 80, 20, .2) 46%, transparent 72%); animation: mini-fire-glow .38s ease-in-out infinite alternate; }
.gm2-mini-fx__glow--frost { background: radial-gradient(ellipse at 50% 46%, rgba(190, 235, 255, .55), rgba(120, 190, 255, .2) 46%, transparent 72%); animation: mini-magic-glow 2.2s ease-in-out infinite; }
.gm2-mini-fx__glow--dark { mix-blend-mode: normal; background: radial-gradient(ellipse at 50% 46%, rgba(120, 60, 200, .55), rgba(60, 20, 110, .3) 46%, transparent 72%); animation: mini-breathe 1.9s ease-in-out infinite; }
.gm2-mini-fx__glow--stink { mix-blend-mode: normal; top: 30%; background: radial-gradient(ellipse at 50% 60%, rgba(140, 190, 60, .45), rgba(90, 140, 30, .16) 46%, transparent 72%); animation: mini-magic-glow 1.8s ease-in-out infinite; }
@keyframes mini-magic-glow { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@keyframes mini-breathe { 0%, 100% { opacity: .55; scale: .86; } 50% { opacity: 1; scale: 1.14; } }
@keyframes mini-fire-glow { 0% { opacity: .5; scale: .96 .94; } 100% { opacity: .9; scale: 1.04 1.06; } }
/* sparks: in place, flickering */
.gm2-mini-fx__spark { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 1px; rotate: 45deg; opacity: 0; box-shadow: 0 0 8px currentColor; animation: mini-flicker .8s ease-in-out infinite; }
.gm2-mini-fx__spark.is-small { width: 5px; height: 5px; margin: -2px 0 0 -2px; }
@keyframes mini-flicker { 0%, 100% { opacity: 0; scale: .3; } 35% { opacity: 1; scale: 1; } 60% { opacity: .15; scale: .6; } }
/* bits that travel and come back: rise or fall, over and over */
:is(.gm2-mini-fx__ember, .gm2-mini-fx__smoke, .gm2-mini-fx__steam, .gm2-mini-fx__stink, .gm2-mini-fx__zzz, .gm2-mini-fx__heart,
  .gm2-mini-fx__rain, .gm2-mini-fx__snow, .gm2-mini-fx__leaf, .gm2-mini-fx__tear) { opacity: 0; animation: mini-travel 2s linear infinite; }
@keyframes mini-travel {
  0% { opacity: 0; translate: 0 0; rotate: 0deg; }
  15% { opacity: var(--o, 1); }
  75% { opacity: var(--o, 1); }
  100% { opacity: 0; translate: var(--dx, 0) var(--dy, -60px); rotate: var(--rot, 0deg); }
}
.gm2-mini-fx__ember { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; box-shadow: 0 0 6px 1px rgba(255, 140, 40, .9); animation-timing-function: ease-out; }
.gm2-mini-fx__smoke, .gm2-mini-fx__steam, .gm2-mini-fx__stink { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; filter: blur(6px); animation-timing-function: ease-out; }
.gm2-mini-fx__smoke { --o: .55; background: rgba(120, 116, 110, .9); }
.gm2-mini-fx__steam { --o: .45; background: rgba(235, 240, 245, .9); }
.gm2-mini-fx__stink { --o: .5; width: 24px; height: 24px; background: rgba(140, 200, 70, .9); }
.gm2-mini-fx__zzz, .gm2-mini-fx__heart { font: 700 18px/1 var(--sans, system-ui); animation-timing-function: ease-out; }
.gm2-mini-fx__zzz { color: #e8eefc; text-shadow: 0 0 6px rgba(160, 190, 255, .8); }
.gm2-mini-fx__heart { color: #ff6f91; font-size: 16px; text-shadow: 0 0 6px rgba(255, 110, 150, .7); }
.gm2-mini-fx__rain { --o: .7; width: 1.5px; height: 14px; background: linear-gradient(rgba(190, 220, 255, 0), rgba(190, 220, 255, .9)); }
.gm2-mini-fx__snow { width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; background: #f4f8ff; box-shadow: 0 0 4px rgba(255, 255, 255, .8); }
.gm2-mini-fx__leaf { width: 8px; height: 5px; border-radius: 0 70% 0 70%; animation-timing-function: ease-in-out; }
.gm2-mini-fx__tear { width: 4px; height: 6px; margin-left: -2px; border-radius: 40% 40% 50% 50%; background: #bfe6ff; box-shadow: 0 0 5px rgba(160, 210, 255, .9); animation-timing-function: ease-in; }
/* bits that burst out once: drops of a wound, chips of a break */
.gm2-mini-fx__chip { opacity: 0; animation: mini-drop .7s ease-out forwards; }
/* a wound's drop: flown on its own arc by sprite.js (drops), bigger and plain to see; where it lands, a small splash */
.gm2-mini-fx__drop { width: 9px; height: 13px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: #e8352a; box-shadow: 0 0 0 1px rgba(90, 0, 0, .35), 0 0 6px rgba(255, 60, 40, .55); }
.gm2-mini-fx__splash { width: 16px; height: 5px; margin: -2px 0 0 -8px; border-radius: 50%; background: #c8241c; opacity: .9; animation: mini-splash .5s ease-out forwards; }
@keyframes mini-splash { 0% { scale: .3 .6; opacity: .95; } 60% { scale: 1.3 1; opacity: .7; } 100% { scale: 1.6 .8; opacity: 0; } }
.gm2-mini-fx__chip { width: 7px; height: 5px; margin-left: -3px; background: #8b7d6b; clip-path: polygon(0 20%, 70% 0, 100% 60%, 30% 100%); }
@keyframes mini-drop { 0% { opacity: 1; translate: 0 0; rotate: 0deg; } 100% { opacity: 0; translate: var(--dx, 20px) var(--dy, 40px); rotate: var(--rot, 0deg); } }
/* a blow: the figure blinks white. Electricity: a cold blue blink. */
.gm2-mini-sprite.is-fx-flash :is(.gm2-mini-sprite__pose, .gm2-mini-reflect).is-on { animation: mini-hurt-flash .5s ease-out; }
.gm2-mini-sprite.is-fx-spark :is(.gm2-mini-sprite__pose, .gm2-mini-reflect).is-on { animation: mini-spark-flash 1.3s steps(1, end) infinite; }
@keyframes mini-hurt-flash { 0% { filter: brightness(1); } 14% { filter: brightness(6) saturate(0); } 40% { filter: brightness(1.3); } 100% { filter: brightness(1); } }
@keyframes mini-spark-flash { 0%, 100% { filter: none; } 8% { filter: brightness(1.9) hue-rotate(180deg) saturate(.6); } 12% { filter: none; } 54% { filter: brightness(1.6) saturate(.7); } 57% { filter: none; } }
.gm2-mini-fx__skull { left: 50%; top: 42%; width: 56px; height: 64px; margin: 0 0 0 -28px; opacity: 0; animation: mini-skull 1.6s ease-in forwards; }
.gm2-mini-fx__skull svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(244, 239, 226, .8)); }
@keyframes mini-skull {
  0% { opacity: 0; translate: -6px 8px; rotate: -18deg; scale: .45; }
  16% { opacity: 1; }
  42% { translate: 16px -28px; rotate: 22deg; }
  72% { opacity: .75; translate: -12px -64px; rotate: -12deg; }
  100% { opacity: 0; translate: 10px -108px; rotate: 28deg; scale: 1.05; }
}

/* the hero */
.mini__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; }
.mini__h1 { margin: 0; font: 700 clamp(36px, 5vw, 64px)/1.15 var(--serif); color: var(--cream); }
.mini__sub { margin: 18px 0 0; max-width: 420px; font: 700 22px/1.35 var(--sans); color: var(--cream); }
.mini__sub--long { max-width: 520px; font-size: 18px; font-weight: 500; line-height: 1.45; }
.mini__sub a, .mini__copy a { color: inherit; text-underline-offset: 3px; }
.mini__sub a:hover, .mini__copy a:hover { color: #fff; }
.mini__copy { margin: 12px 0 0; max-width: 520px; font: 400 16px/1.45 var(--sans); color: rgba(243, 230, 200, .92); }
.mini__copy p { margin: 0; }
.mini__art { position: relative; display: grid; grid-template-columns: 1fr auto 1.15fr; align-items: center; gap: 8px; overflow: visible; }
/* for=: made for a growl (link.js, miniature.js). The hero's row: the growl's picture → the arrow → its grey stand-in
   from its page, and that stand-in where the miniature will show until one is made: no example there. Faded, a place
   still to fill, never a finished miniature (Maayan, 2026-11-07); no picture, the stand-in alone in the middle. */
.mini.is-for .mini__art:has(> .mini__drawing[hidden]) { display: flex; justify-content: center; align-items: flex-end; }
.mini__standin { display: block; justify-self: center; height: clamp(140px, 16vw, 210px); width: auto; max-width: 100%; object-fit: contain; opacity: .3; }
.mini__standin--result { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: none; }
.mini.is-waiting .mini__standin--result { display: block; }
.mini.is-waiting .mini__fig > :not(.mini__standin) { visibility: hidden; }
.mini.is-waiting #miniDownload { display: none; }
.mini.is-for .mini__btns { display: none; }   /* made for a growl: Add to <name> is its button (link.js bar) */
/* no flash of the usual hero before it is aimed (Miniature.astro marks the page at once; miniature.js aims it) */
.mini.is-for:not(.is-aimed) :is(.mini__intro, .mini__art) { visibility: hidden; }
.mini__drawing { width: 100%; max-width: 280px; height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .6)); }
/* a real photo, not a drawing: turned a little, and the right side cut so the person fills the print */
.mini__drawing--photo { width: 78%; max-width: 230px; aspect-ratio: 3 / 4; object-fit: cover; object-position: left center; justify-self: center; transform: rotate(-7deg); border: 8px solid #f6f1e6; border-radius: 2px; filter: none; box-shadow: 0 14px 22px rgba(0, 0, 0, .5); }
.mini__arrow { width: 72px; height: auto; margin-top: -40px; }
[dir="rtl"] .mini__arrow { transform: scaleX(-1); }   /* the row flips, so the arrow turns with it and still points at the miniature */
/* the figure sits in a square with empty room around it, so it reads small beside the drawing: drawn a bit larger from the podium's foot, overflowing that square upward */
/* room above the square: the figure is drawn larger from its foot, so without this the top slides under the sticky header */
.mini__heromini { width: 100%; min-width: 200px; aspect-ratio: 1; margin-top: 40%; overflow: visible; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.mini__heromini :is(.gm2-mini-sprite__pose, .gm2-mini-sprite__part, .gm2-mini-fx) { transform: scale(1.28); transform-origin: 50% var(--floor, 82%); }
.mini__heromini .gm2-mini-reflect { transform: scaleY(-.55) scale(1.28); transform-origin: 50% var(--floor, 82%); }

/* the panel, three columns whose labels share one line: Type, then the description under it; Special #1, Special #2,
   then Can it levitate?; the reference the full height at the end */
.mini__form { margin-top: 18px; display: grid; justify-items: center; gap: 14px; }
.mini__panel { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 200px; grid-template-areas: "type s1 ref" "describe s2 ref" "describe fly ref"; align-items: start;
  gap: 12px 24px; padding: 18px 28px; border-radius: 22px; background: var(--panel); }
.mini__f { display: flex; flex-direction: column; gap: 8px; min-width: 0; font: 400 20px/1.2 var(--sans); color: #fff; }
.mini__f--type { grid-area: type; }
.mini__f--describe { grid-area: describe; align-self: stretch; }
.mini__f--describe textarea { flex: 1; }
.mini__f--s1 { grid-area: s1; }
.mini__f--s2 { grid-area: s2; }
.mini__f--ref { grid-area: ref; align-self: stretch; }
.mini__panel textarea, .mini__panel input[type="text"], .mini__type { box-sizing: border-box; width: 100%; border: 0; border-radius: 16px; background: var(--field); color: #fff; font: 400 20px/1.35 var(--sans); }
.mini__panel textarea { min-height: 108px; padding: 10px 14px; resize: vertical; }
.mini__panel input[type="text"] { height: 52px; padding: 0 14px; }
.mini__type { appearance: none; height: 52px; padding: 0 44px 0 14px; cursor: pointer;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
[dir="rtl"] .mini__type { padding: 0 14px 0 44px; background-position: left 16px center; }
.mini__type optgroup, .mini__type option { background: #2f2d2a; color: #fff; }
.mini__panel :is(textarea, input, select):focus-visible { outline: 2px solid #c9a35c; outline-offset: 1px; }
.mini__thumb { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; min-height: 0; padding: 12px; box-sizing: border-box; border: 0; border-radius: 16px;
  background: var(--field) no-repeat center / cover; color: #fff; font: 400 18px/1.2 var(--sans); cursor: pointer; }
.mini__thumb:hover, .mini__thumb:focus-visible { outline: 2px solid #c9a35c; }
.mini__thumb-plus { font: 200 48px/1 var(--sans); }
.mini__thumb.has-pic :is(.mini__thumb-plus, .mini__thumb-t) { visibility: hidden; }
.mini__fly { grid-area: fly; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 6px 0 0; padding: 0; border: 0; font: 400 20px/1.2 var(--sans); color: #fff; }
.mini__fly[hidden] { display: none; }
.mini__fly legend { float: left; padding: 0; margin-inline-end: 8px; white-space: nowrap; }   /* its question and both answers on one line */
.mini__fly label { white-space: nowrap; }
.mini__fly label { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.mini__fly input { appearance: none; width: 32px; height: 32px; margin: 0; border-radius: 50%; background: var(--field); cursor: pointer; }
.mini__fly input:checked { background: radial-gradient(circle, var(--cream) 0 36%, var(--field) 40%); }
.mini__go { min-width: 360px; height: 58px; padding: 0 28px; border: 0; background: var(--gold); color: #fff; font: 400 28px/1 var(--sans); cursor: pointer; }
.mini__go:hover, .mini__go:focus-visible { background: #745a2b; }
.mini__go:disabled { opacity: .6; cursor: progress; }
/* generating (miniature.js): a spinner before the button's words, and a bigger one over the miniature, which dims */
.mini.is-generating .mini__go { display: inline-flex; align-items: center; justify-content: center; gap: 14px; opacity: .85; }
.mini.is-generating .mini__go::before, .mini.is-generating .mini__stage::after { content: ""; box-sizing: border-box; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: mini-spin .8s linear infinite; }
.mini.is-generating .mini__go::before { width: 24px; height: 24px; }
.mini.is-generating .mini__stage::after { position: absolute; left: calc(50% - 27px); top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-width: 5px; z-index: 5; }
.mini.is-generating .mini__fig { filter: brightness(.35); transition: filter .3s; }
@keyframes mini-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mini.is-generating .mini__go::before, .mini.is-generating .mini__stage::after { animation-duration: 2.4s; } }
.mini__err { margin: 0; color: #ffb4a6; font: 700 18px/1.3 var(--sans); }
.mini__err[hidden] { display: none; }

/* where it will show, then the example */
.mini__here { display: grid; justify-items: center; gap: 6px; margin: 16px 0 12px; font: 400 20px/1.3 var(--sans); color: #fff; text-align: center; }
.mini__down { font-size: 32px; }
.mini__example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.mini__poses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini__pose { min-height: 52px; padding: 6px 8px; border: 0; border-radius: 8px; background: #2c2b29; color: #fff; font: 400 17px/1.15 var(--sans); cursor: pointer; }
.mini__pose:hover, .mini__pose:focus-visible { background: #3d3b38; outline: none; }
.mini__pose[aria-pressed="true"] { background: var(--gold); }
.mini__pose:disabled { opacity: .35; cursor: default; }
.mini__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "fig mute" "dir mute"; align-items: center; justify-items: center; column-gap: 10px; row-gap: 8px; padding: 0; background: none; }
.mini__fig { grid-area: fig; }
.mini__dir { grid-area: dir; }
.mini__mute { grid-area: mute; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #2c2b29; color: #fff; cursor: pointer; }
.mini__mute:hover, .mini__mute:focus-visible { background: #3d3b38; outline: none; }
.mini__mute:focus-visible { outline: 2px solid #c9a35c; outline-offset: 2px; }
.mini__mute svg { width: 22px; height: 22px; }
.mini__mute-off, .mini__mute[aria-pressed="true"] .mini__mute-on { display: none; }
.mini__mute[aria-pressed="true"] .mini__mute-off { display: block; }
.mini__mute[aria-pressed="true"] { color: rgba(255, 255, 255, .55); }
.mini__thumb.is-sheet { background-size: contain; }
.mini__fig { width: 100%; max-width: 420px; aspect-ratio: 1; }
.mini__btns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mini__btn { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border: 1.5px solid #3a2c17; border-radius: 6px; background: #fbf6ea; color: #3a2c17; font: 700 17px/1 var(--sans); cursor: pointer; text-decoration: none; }
.mini__btn:disabled { opacity: .45; cursor: default; }
/* a miniature growl's sheet in the app: its own styles (growlmaster-v2/sheets/miniature-sheet.css) */
.mini__btn--go { border-color: var(--gold); background: var(--gold); color: #fff; }
.mini__btns [hidden] { display: none; }
/* Left / Right: the words stay on the screen's left and right, and the gold thumb slides to the one chosen */
.mini__dir { direction: ltr; position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content; padding: 3px; border-radius: 999px; background: #2c2b29; }
.mini__dir-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--gold); transition: transform .28s cubic-bezier(.3, 1.45, .4, 1); }
.mini__dir.is-right .mini__dir-thumb { transform: translateX(100%); }
.mini__dir button { position: relative; z-index: 1; min-width: 92px; height: 36px; padding: 0 14px; border: 0; background: transparent; color: rgba(255, 255, 255, .72); font: 700 16px/1 var(--sans); cursor: pointer; }
.mini__dir button[aria-pressed="true"] { color: #fff; }
.mini__dir button:focus-visible { outline: 2px solid #c9a35c; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .gm2-mini-sprite.is-squash, .gm2-mini-sprite__part--body, .gm2-mini-reflect--body, .gm2-mini-fx > i, .gm2-mini-sprite:is(.is-fx-flash, .is-fx-spark) :is(.gm2-mini-sprite__pose, .gm2-mini-reflect).is-on { animation: none; }
  .gm2-mini-fx > i:not(.gm2-mini-fx__glow) { display: none; }
  .gm2-mini-fx__glow { opacity: .6; }
  .mini__dir-thumb { transition: none; }
}

/* a sheet we already made, offered back as itself (miniature.js) */
.mini__ask { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .72); }
.mini__ask[hidden] { display: none; }
.mini__ask-card { width: min(440px, 100%); padding: 28px 24px; border-radius: 18px; background: var(--panel); color: #fff; font: 400 20px/1.35 var(--sans); text-align: center; }
.mini__ask-card p { margin: 0 0 20px; }
.mini__ask-btns { display: flex; justify-content: center; gap: 12px; }

/* a short laptop: the title gives up a little so the button and the line under it stay on screen */
@media (max-height: 820px) {
  .mini { padding-top: 16px; }
  .mini__h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; }
  .mini__sub { margin-top: 8px; }
  .mini__form { margin-top: 12px; }
  .mini__here { margin-top: 10px; }
}

/* a phone: one column, the panel's parts one under the other */
@media (max-width: 900px) {
  .mini { padding: 32px 16px 48px; }
  .mini__hero { grid-template-columns: minmax(0, 1fr); }
  .mini__sub { font-size: 18px; }
  .mini__heromini { margin-top: 28%; }
  .mini__heromini :is(.gm2-mini-sprite__pose, .gm2-mini-sprite__part, .gm2-mini-fx) { transform: scale(1.12); }
  .mini__heromini .gm2-mini-reflect { transform: scaleY(-.55) scale(1.12); }
  .mini__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "type" "describe" "s1" "s2" "fly" "ref"; padding: 24px 20px; gap: 18px; }
  .mini__f { font-size: 20px; }
  .mini__panel textarea { min-height: 140px; }
  .mini__panel input[type="text"] { height: 56px; }
  .mini__thumb { min-height: 160px; }
  .mini__fly { font-size: 22px; gap: 10px 24px; }
  .mini__fly input { width: 32px; height: 32px; }
  .mini__go { min-width: 0; width: 100%; height: 64px; font-size: 26px; }
  .mini__here { font-size: 20px; }
  .mini__example { grid-template-columns: minmax(0, 1fr); }
  .mini__stage { order: -1; }
}

/* a miniature standing small (a card: figures.js; a growl's miniature bar: link.js): no reflection under it */
.gm2-mini-card .gm2-mini-reflect, .gm-link-slot__fig .gm2-mini-reflect { display: none; }

/* a sheet's picture with its miniature standing on its bottom left corner (figures.js; the public page's: dropsheet.css
   .drop__pic-mini), mirrored right to left, no reflection */
.gm2-mini-corner { position: absolute; inset-inline-start: 0; bottom: 0; z-index: 2; width: 38%; aspect-ratio: 1; cursor: pointer;
  filter: drop-shadow(0 10px 12px rgba(40, 24, 10, .35)); }
.gm2-mini-corner .gm2-mini-reflect { display: none; }
/* no picture: the miniature is the slot's whole picture (figures.js) */
.gm2-mini-corner.gm2-mini-whole { inset: 0; width: auto; aspect-ratio: auto; }