.landing-sigil-creator,
.sigil-page-shell {
  --sigil-ink: #2d1b10;
  --sigil-ink-soft: rgba(45, 27, 16, 0.72);
  --sigil-line: rgba(171, 122, 47, 0.24);
  --sigil-line-strong: rgba(177, 124, 42, 0.46);
  --sigil-gold: #d4af6b;
  --sigil-gold-deep: #9f6d2b;
  --sigil-cream: #fff9ec;
  --sigil-paper: linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(247, 236, 212, 0.96));
  --sigil-shadow: 0 1rem 2rem rgba(52, 31, 12, 0.12);
}

.sigil-builder-form [hidden],
.sigil-builder-form .is-hidden,
.sigil-composed img[hidden],
.sigil-stage-tray__actions [hidden],
.sigil-stage-tray__actions .is-hidden,
.sigil-composed img:not([src]) {
  display: none !important;
}

/* ------------------------------------------------------------------------------------------
   Landing preview card
   ------------------------------------------------------------------------------------------ */

.landing-sigil-creator {
  /* The landing feature stylesheet owns the responsive outer rail. KinCrest should
     fill that rail rather than carrying a second component-level width cap. */
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

.sigil-creator-card {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: clamp(0.86rem, 1.75vw, 1.08rem);
  padding: clamp(1.45rem, 3.2vw, 2rem) clamp(1rem, 3vw, 1.38rem) clamp(1.35rem, 3.15vw, 1.75rem);
  text-align: center;
  color: var(--sigil-ink);
  overflow: hidden;
}

.sigil-creator-card::before {
  content: "";
  position: absolute;
  inset: 0.36rem;
  border: 1px solid rgba(191, 150, 84, 0.16);
  border-radius: inherit;
  pointer-events: none;
}

.sigil-creator-card__head {
  width: 100%;
}

.sigil-creator-card__copy {
  max-width: 28rem;
}

.sigil-creator-card .sigil-composed--landing {
  margin: 0.82rem auto -0.34rem;
}

.sigil-creator-card {
  --sigil-preview-step-icon-size: clamp(3.046rem, 7.56vw, 3.618rem);
  --sigil-preview-step-title-size: clamp(1.11rem, 2.28vw, 1.32rem);
}

.sigil-creator-card__steps {
  width: min(100%, 32rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(0.38rem, 1.1vw, 0.58rem);
  margin-inline: auto;
  padding: clamp(0.62rem, 1.35vw, 0.78rem);
  border: 1px solid rgba(158, 106, 45, 0.15);
  border-radius: 1.18rem;
  background: linear-gradient(180deg, rgba(255, 251, 241, 0.68), rgba(241, 224, 191, 0.38));
}

.sigil-creator-card__step {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(0.24rem, 0.7vw, 0.34rem);
  min-width: 0;
  padding: clamp(0.62rem, 1.35vw, 0.82rem) clamp(0.28rem, 0.9vw, 0.5rem);
  border: 1px solid rgba(158, 106, 45, 0.12);
  border-radius: 0.92rem;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.72), transparent 64%), rgba(255, 248, 232, 0.64);
  color: rgba(115, 77, 31, 0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58), 0 0.38rem 0.76rem rgba(74, 43, 18, 0.045);
}

.sigil-creator-card__step:not(:last-child) {
  border-right: 1px solid rgba(158, 106, 45, 0.12);
}

.sigil-creator-card__step img {
  width: var(--sigil-preview-step-icon-size);
  height: var(--sigil-preview-step-icon-size);
  object-fit: contain;
  filter: drop-shadow(0 0.18rem 0.22rem rgba(67, 40, 15, 0.1));
}

.sigil-creator-card__step span {
  display: grid;
  justify-items: center;
  width: 100%;
  min-height: 2.05em;
  align-content: end;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: var(--sigil-preview-step-title-size);
  font-weight: 720;
  line-height: 1.02;
  text-wrap: balance;
}

.sigil-creator-card__step span::after {
  content: "";
  display: block;
  width: min(86%, 5.6rem);
  height: 1px;
  margin: clamp(0.28rem, 0.65vw, 0.38rem) auto clamp(0.08rem, 0.32vw, 0.16rem);
  background: linear-gradient(90deg, transparent, rgba(164, 106, 37, 0.52) 22%, rgba(164, 106, 37, 0.52) 78%, transparent);
}

.sigil-creator-card__step small {
  display: block;
  min-height: 2.24em;
  width: 100%;
  max-width: none;
  color: rgba(76, 49, 23, 0.66);
  font-size: clamp(0.55rem, 1.25vw, 0.64rem);
  font-weight: 780;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
}

.sigil-creator-card__cta-wrap {
  width: 100%;
  margin-top: -0.28rem;
}

.sigil-creator-card__cta {
  min-width: clamp(10rem, 24vw, 12rem) !important;
}

.sigil-creator-card--landing {
  /* Landing section width is owned by landing-section-cards.css. */
  width: 100%;
  max-width: 100%;
}

/* One shield surface for the builder, Home, public previews, and shared stories. */
.sigil-composed {
  --sigil-palette-forest: #304b3f;
  --sigil-palette-crimson: #713842;
  --sigil-palette-midnight: #293d55;
  --sigil-palette-heritage-brown: var(--kinvella-nav-bg, #211207);
  --sigil-palette-ivory: #e9dfc6;
  --sigil-palette-gold: #bb9959;
  --sigil-secondary-fill: var(--sigil-palette-ivory);
  --sigil-core-fill: var(--sigil-palette-forest);
  --sigil-core-light: #526b54;
  --sigil-core-dark: #1c332b;
  --sigil-animal-color: #cbb17b;
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 10.35rem);
  aspect-ratio: 1;
  margin-inline: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}
.sigil-composed::before,
.sigil-composed::after { display: none; }
.sigil-composed[data-inner-color="crimson"] {
  --sigil-core-fill: var(--sigil-palette-crimson); --sigil-core-light: #965560; --sigil-core-dark: #48222e;
}
.sigil-composed[data-inner-color="heritage-brown"] {
  --sigil-core-fill: var(--sigil-palette-heritage-brown);
  --sigil-core-light: var(--kinvella-nav-bg-soft, #2b180c);
  --sigil-core-dark: var(--kinvella-nav-bg-deep, #130904);
}
.sigil-composed[data-inner-color="midnight"] {
  --sigil-core-fill: var(--sigil-palette-midnight); --sigil-core-light: #4d657b; --sigil-core-dark: #182638;
}
.sigil-composed[data-inner-color="ivory"] {
  --sigil-core-fill: var(--sigil-palette-ivory); --sigil-core-light: #fff6df; --sigil-core-dark: #c4b496;
}
.sigil-composed[data-inner-color="gold"] {
  --sigil-core-fill: var(--sigil-palette-gold); --sigil-core-light: #e5cb8d; --sigil-core-dark: #8e6b34;
}
.sigil-composed[data-secondary-color="forest"] { --sigil-secondary-fill: var(--sigil-palette-forest); }
.sigil-composed[data-secondary-color="crimson"] { --sigil-secondary-fill: var(--sigil-palette-crimson); }
.sigil-composed[data-secondary-color="heritage-brown"] { --sigil-secondary-fill: var(--sigil-palette-heritage-brown); }
.sigil-composed[data-secondary-color="midnight"] { --sigil-secondary-fill: var(--sigil-palette-midnight); }
.sigil-composed[data-secondary-color="ivory"] { --sigil-secondary-fill: var(--sigil-palette-ivory); }
.sigil-composed[data-secondary-color="gold"] { --sigil-secondary-fill: var(--sigil-palette-gold); }
.sigil-composed[data-animal-theme="aged-ivory"] { --sigil-animal-color: #dfded0; }
.sigil-composed[data-animal-theme="antique-bronze"] { --sigil-animal-color: #b28861; }
.sigil-composed[data-animal-theme="deep-espresso"] { --sigil-animal-color: #34241c; }
/* Light shields retain a clear initial even before a saved design is applied. */
.sigil-composed:is([data-inner-color="ivory"], [data-inner-color="gold"])[data-animal-theme="regal-gold"] {
  --sigil-animal-color: #644419;
}
.kincrest-medallion {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: none;
  filter: drop-shadow(0 0.22rem 0.22rem rgba(39, 25, 14, 0.19));
}
.kincrest-medallion__enamel-light { stop-color: var(--sigil-core-light); }
.kincrest-medallion__enamel-mid { stop-color: var(--sigil-core-fill); }
.kincrest-medallion__enamel-dark { stop-color: var(--sigil-core-dark); }
.kincrest-medallion__core-field {
  fill: var(--sigil-shield-fill, var(--sigil-core-fill));
  stroke: var(--sigil-shield-edge, #c5a362);
  stroke-width: 4.4;
  stroke-linejoin: round;
}
/* A cast back edge and a narrow light ridge lift the rim off the field. */
.kincrest-medallion__rim-depth {
  fill: none;
  stroke: var(--sigil-rim-depth, #453422);
  stroke-width: 6.6;
  stroke-linejoin: round;
  transform: translate(0.65px, 1.65px);
}
.kincrest-medallion__rim-light {
  fill: none;
  stroke: var(--sigil-rim-light, #fff0ce);
  stroke-width: 1.05;
  stroke-linejoin: round;
  transform: translate(-0.45px, -0.85px);
  pointer-events: none;
}
.kincrest-medallion__core-highlight {
  fill: none;
  stroke: var(--sigil-shield-edge);
  stroke-width: 0.8;
  opacity: 0.9;
  transform: translate(3px, 3px) scale(0.95);
  stroke-linejoin: round;
}
.kincrest-medallion__surface-light { fill: var(--sigil-surface-light); opacity: 0.65; pointer-events: none; }
.kincrest-medallion__metal-surface {
  mix-blend-mode: soft-light;
  opacity: 1;
  pointer-events: none;
}
.sigil-composed[data-enclosure-material="enamel"] .kincrest-medallion__metal-surface { opacity: 0.7; }
.sigil-composed[data-enclosure-material="enamel"] .kincrest-medallion__surface-light { opacity: 1; }
.kincrest-medallion__rim-shadow {
  fill: none;
  stroke: #141618;
  stroke-width: 5.8;
  stroke-linejoin: round;
  opacity: 0.8;
  transform: translate(0.2px, 0.65px);
}
.kincrest-medallion__secondary-light { stop-color: color-mix(in srgb, var(--sigil-secondary-fill) 78%, #fff5da); }
.kincrest-medallion__secondary-mid { stop-color: var(--sigil-secondary-fill); }
.kincrest-medallion__secondary-dark { stop-color: color-mix(in srgb, var(--sigil-secondary-fill) 82%, #251b14); }
.kincrest-medallion__secondary-field { fill: var(--sigil-secondary-paint); stroke: none; }
.kincrest-medallion__rim,
.kincrest-medallion__panel-divider {
  fill: none;
  stroke: var(--sigil-shield-edge, #c5a362);
  stroke-width: 4.8;
  stroke-linejoin: round;
}
.kincrest-medallion__panel-divider { stroke-width: 2.2; }
.kincrest-medallion__panel-shadow { fill: none; stroke: #171a1c; stroke-width: 3.2; opacity: 0.6; }
.kincrest-medallion__edge-detail path { stroke-linecap: round; stroke-linejoin: round; }
.kincrest-medallion__edge-detail { filter: drop-shadow(0.2px 0.8px 0.55px rgba(12, 14, 16, 0.58)); }
[data-sigil-ornament-image] {
  filter: var(--sigil-ornament-tint) contrast(1.12)
    drop-shadow(-0.12px -0.2px 0.1px rgba(255, 249, 225, 0.65))
    drop-shadow(0.15px 0.35px 0.2px rgba(12, 14, 16, 0.5));
}
.kincrest-detail__diamond { filter: drop-shadow(0.3px 0.65px 0.35px rgba(12, 14, 16, 0.65)); }
.kincrest-detail__diamond-base { fill: var(--sigil-shield-edge); stroke: #302b24; stroke-width: 0.2; }
.kincrest-detail__diamond-face--light { fill: #fff9e4; fill-opacity: 0.4; }
.kincrest-detail__diamond-face--mid { fill: #fff9e4; fill-opacity: 0.12; }
.kincrest-detail__diamond-face--shade { fill: #15191c; fill-opacity: 0.3; }
.kincrest-detail__diamond-face--dark { fill: #101316; fill-opacity: 0.65; }
.kincrest-detail__diamond-texture { opacity: 0.65; mix-blend-mode: soft-light; }
.kincrest-detail__diamond-ridge { fill: none; stroke: #fff3ce; stroke-width: 0.16; opacity: 0.65; }
.kincrest-detail__rivet { fill: var(--sigil-rivet-paint); stroke: #302b24; stroke-width: 0.15; }
.kincrest-detail__rivet--raised { stroke-width: 0.12; filter: drop-shadow(0.25px 0.5px 0.22px rgba(12, 14, 16, 0.8)); }
.kincrest-detail__engraving { fill: none; stroke: #302b24; stroke-width: 0.22; opacity: 0.3; }
.kincrest-detail__beading { fill: none; stroke: var(--sigil-shield-edge); stroke-width: 0.7; stroke-dasharray: 0.1 1.7; }
.kincrest-detail__gem { fill: var(--sigil-gem-paint, #427487); stroke: #daca93; stroke-width: 0.5; }
.kincrest-detail__glint { fill: none; stroke: #e1f3ec; stroke-width: 0.55; opacity: 0.8; }
.kincrest-medallion__animal { filter: drop-shadow(0 0.65px 0.6px rgba(30, 23, 16, 0.48)); }
.sigil-composed:not([data-field-layout="solid"]) .kincrest-medallion__monogram {
  paint-order: stroke fill;
  stroke: var(--sigil-core-fill);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.kincrest-medallion__animal-path,
.sigil-animal-vector-icon path {
  fill: none;
  stroke: var(--sigil-animal-color, currentColor);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kincrest-medallion__animal-path--outline,
.sigil-animal-vector-icon__outline { stroke-width: 3.2; }
.kincrest-medallion__animal-path--detail,
.sigil-animal-vector-icon__detail { stroke-width: 0.85; }
[data-solid="true"] > :is(.kincrest-medallion__animal-path--outline, .sigil-animal-vector-icon__outline) {
  fill: var(--sigil-emblem-paint, var(--sigil-animal-color, currentColor));
  stroke-width: 0.4;
  stroke: color-mix(in srgb, var(--sigil-animal-color, currentColor) 55%, #21180f);
  filter: var(--sigil-emblem-relief);
  fill-rule: evenodd;
}
[data-solid="true"] > :is(.kincrest-medallion__animal-path--detail, .sigil-animal-vector-icon__detail) {
  stroke: color-mix(in srgb, var(--sigil-animal-color, currentColor) 32%, #312519);
  opacity: 0.85;
}
.kincrest-medallion__animal-path--relief,
.sigil-animal-vector-icon .sigil-animal-vector-icon__relief {
  fill: color-mix(in srgb, var(--sigil-animal-color, currentColor) 35%, #271d15);
  stroke: none;
  opacity: 0.45;
}
.kincrest-medallion__animal-path--highlight,
.sigil-animal-vector-icon .sigil-animal-vector-icon__highlight {
  fill: #fff6e3;
  stroke: none;
  opacity: 0.5;
}
.kincrest-medallion__animal-path--engraving,
.sigil-animal-vector-icon .sigil-animal-vector-icon__engraving {
  stroke: color-mix(in srgb, var(--sigil-animal-color, currentColor) 38%, #342719);
  stroke-width: 0.5;
  opacity: 0.65;
}
.sigil-emblem-paint__light { stop-color: color-mix(in srgb, var(--sigil-animal-color, currentColor) 72%, #fff1ce); }
.sigil-emblem-paint__base { stop-color: var(--sigil-animal-color, currentColor); }
.sigil-emblem-paint__shade { stop-color: color-mix(in srgb, var(--sigil-animal-color, currentColor) 88%, #352519); }
.kincrest-medallion__monogram {
  fill: var(--sigil-animal-color);
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  letter-spacing: 0;
}
.sigil-animal-vector-icon,
.sigil-shape-icon { display: inline-grid; place-items: center; }
.sigil-animal-vector-icon svg,
.sigil-shape-icon svg { color: inherit; display: block; width: 100%; height: 100%; }
.sigil-shape-icon path { fill: #3b5848; stroke: #c79b50; stroke-width: 3; stroke-linejoin: round; }

/* Compact, shared controls; the page header and parchment stay owned by the app layout. */
/* The root clips horizontal overflow; keeping the body visible lets sticky content follow the viewport. */
body.sigil-page { overflow-x: visible; }
html:has(> body.sigil-page.authenticated-user) { scroll-padding-top: 0; }
.sigil-builder { display: grid; gap: var(--kv-page-layout-gap, 1.5rem); }
.sigil-builder-form {
  --sigil-sticky-top: 0.5rem;
  --sigil-dock-height: 3.25rem;
  --kv-btn-radius: 0.9rem;
  --kv-btn-min-height: 2.85rem;
  --kv-btn-context-min-width: 0;
  --kv-btn-font-size: 0.86rem;
  --kv-btn-gap: 0.6rem;
  --kv-btn-primary-bg: linear-gradient(145deg, #46301d, #23180f);
  --kv-btn-primary-color: #f5d995;
  --kv-btn-primary-border: #947343;
  --kv-btn-secondary-bg: #fffaf0;
  --kv-btn-secondary-color: #604525;
  --kv-btn-secondary-border: #ccb58f;
}
.sigil-builder-form--staged {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.35fr);
  grid-template-rows: auto 1fr auto;
  gap: 0.8rem 1.25rem;
  width: 100%;
  max-width: 66rem;
  margin-inline: auto;
  color: var(--sigil-ink);
}
.sigil-preview-dock { display: contents; }
.sigil-builder-form :is(button, input, summary, h2) { scroll-margin-top: calc(var(--sigil-sticky-top) + var(--sigil-dock-height) + 0.75rem); }
body.sigil-page .sigil-builder-form [hidden] { display: none !important; }
.sigil-builder-form :is(button, a, summary, input):focus-visible {
  outline: 3px solid #56766e;
  outline-offset: 3px;
}
.sigil-builder-form h2:focus { outline: none; }
.sigil-live-card {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: start;
  position: sticky;
  top: var(--sigil-sticky-top);
  min-width: 0;
  padding: 1.25rem 1rem;
  border: 1px solid #cdb780;
  border-radius: 1.75rem;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 249, 233, 0.94) 0%, rgba(245, 234, 211, 0.94) 62%, rgba(232, 214, 178, 0.96) 100%),
    url("/static/img/parchment-bg.webp") center / 22rem repeat;
  box-shadow: inset 0 0 0 5px rgba(255, 253, 246, 0.6), 0 1rem 2rem rgba(64, 42, 24, 0.09);
  text-align: center;
}
.sigil-live-card__eyebrow,
.sigil-stage-card__header > p:first-child {
  margin: 0 0 0.35rem;
  color: #8c6028;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sigil-live-card__copy h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: #352416; margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); overflow-wrap: anywhere; }
.sigil-composed--builder { width: min(100%, 16rem, 38svh); margin: 0.75rem auto; }
.sigil-live-card__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  color: #67543b;
  font-size: 0.8rem;
}
.sigil-control-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  background: #f2e6cf;
  color: #80551d;
}
.sigil-control-icon[data-tone="sage"] { background: #e4ece1; color: #385c47; }
.sigil-control-icon[data-tone="blue"] { background: #e4ecef; color: #375e6c; }
.sigil-control-icon svg,
.sigil-color-chip__swatch svg {
  color: inherit;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sigil-stage-tray {
  position: sticky;
  top: var(--sigil-sticky-top);
  z-index: 12;
  align-self: start;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--sigil-line);
  border-radius: 1rem;
  background: #eee5d6;
}
.sigil-stage-tray button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: transparent;
  color: #665542;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}
.sigil-stage-tray button > span:last-child { display: grid; gap: 0.18rem; text-align: left; }
.sigil-stage-tray small { font-size: 0.6rem; letter-spacing: 0.08em; }
.sigil-stage-tray button[aria-current="step"] {
  background: #fffaf0;
  color: #302116;
  border-color: #d9c39a;
  box-shadow: 0 0.2rem 0.5rem rgba(59, 39, 20, 0.06);
}
.sigil-stage-card {
  grid-column: 2;
  min-width: 0;
  padding: clamp(0.9rem, 1.5vw, 1.25rem);
  border: 1px solid var(--sigil-line);
  border-radius: 1.35rem;
  background: linear-gradient(140deg, #fffdf8, #fbf5e9);
  box-shadow: 0 0.6rem 1.4rem rgba(54, 35, 18, 0.055);
}
.sigil-builder-form--staged:has(#sigil-panel-core:not([hidden])) { grid-template-rows: auto auto 1fr; }
#sigil-panel-core, .sigil-builder-form--staged:has(#sigil-panel-core:not([hidden])) .sigil-builder-footer { align-self: start; }
#sigil-panel-core > fieldset[data-sigil-for="symbol"] { margin-bottom: 0; }
#sigil-panel-core > fieldset[data-sigil-for="symbol"]:not([hidden]) + .sigil-initial-field { margin-top: 1rem; }
.sigil-stage-card__header { margin-bottom: 1rem; }
.sigil-stage-card__header h2 { font-family: var(--font-display); font-weight: 600; color: #352416; margin: 0 0 0.4rem; font-size: clamp(1.5rem, 2.5vw, 1.8rem); line-height: 1.1; }
.sigil-stage-card__header > p:last-child { margin: 0; color: #71614f; font-size: 0.9rem; line-height: 1.45; }
.sigil-stage-card fieldset { min-width: 0; padding: 0; margin: 0 0 1rem; border: 0; }
.sigil-stage-card fieldset:last-child { margin-bottom: 0; }
.sigil-stage-card legend,
.sigil-initial-field > label,
.sigil-size-controls > label > span:first-child { margin: 0 0 0.55rem; color: #59462f; font-size: 0.86rem; font-weight: 750; }
.sigil-stage-grid { display: grid; gap: 0.65rem; }
.sigil-stage-grid--designs,
.sigil-stage-grid--shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sigil-choice-track {
  grid-auto-flow: column;
  grid-auto-columns: 7.5rem;
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: #c1a36f #f3ebdc;
  padding: 0.25rem 0.25rem 0.6rem;
}
.sigil-stage-grid--shapes.sigil-choice-track { grid-auto-columns: 5.2rem; }
.sigil-choice-track > button { scroll-snap-align: start; }
.sigil-stage-card .sigil-choice-legend { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sigil-choice-arrows { display: inline-flex; flex: 0 0 auto; gap: 0.35rem; }
.sigil-choice-arrows button { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid #dac8a7; border-radius: 0.65rem; background: #fffbf2; cursor: pointer; }
.sigil-choice-arrows .sigil-control-icon { width: 1.65rem; height: 1.65rem; border-radius: 0.45rem; }
.sigil-choice-arrows [data-sigil-scroll="-1"] svg { transform: rotate(180deg); }
.sigil-choice-track .sigil-emblem-option { justify-content: start; }
.sigil-stage-grid--emblems.sigil-choice-track { padding-block: 0.35rem; }
.sigil-choice-track .sigil-emblem-option small:empty { display: none; }

.sigil-stage-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.6rem 0.25rem;
  background: #fffcf6;
  border: 1px solid #e4d8c6;
  border-radius: 0.9rem;
  color: #735023;
  cursor: pointer;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
.sigil-stage-option strong { font-size: 0.83rem; line-height: 1.2; color: #41301f; }
.sigil-stage-option small { white-space: nowrap; color: #776653; font-size: 0.67rem; line-height: 1.3; }
.sigil-design-icon { width: 2.8rem; height: 3rem; margin: 0; }
#sigil-details .sigil-design-icon { width: 5.2rem; height: 5.7rem; margin-bottom: 1.25rem; }
#sigil-details .sigil-stage-option { padding-block: 0.8rem; gap: 0.35rem; }
.sigil-design-icon :is(.kincrest-medallion__animal, .kincrest-medallion__monogram) { display: none; }
.sigil-design-icon .kincrest-medallion { color: inherit; }
.sigil-stage-grid--designs .sigil-stage-option { padding-inline: 0.3rem; }
.sigil-stage-grid--designs small { padding-inline: 0.15rem; }
.sigil-stage-option .sigil-shape-icon { width: 2rem; height: 2.5rem; }
.sigil-stage-option .sigil-animal-icon { width: 2.75rem; height: 2.75rem; }
.sigil-stage-option[aria-pressed="true"],
.sigil-mode-options button[aria-pressed="true"] {
  border-color: #a47635;
  background: #f3e9d6;
  box-shadow: inset 0 0 0 1px #c4a169;
}
.sigil-stage-option[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #8e6329;
}
.sigil-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.sigil-color-grid--finish { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sigil-color-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.45rem 0.1rem;
  color: #59462f;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.sigil-color-chip[aria-pressed="true"] { background: #f0e7d7; border-color: #d6be94; }
.sigil-color-chip__swatch {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(77, 51, 26, 0.25);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.2);
  color: #fff6df;
}
.sigil-color-chip__swatch svg { visibility: hidden; }
[aria-pressed="true"] > .sigil-color-chip__swatch svg { visibility: visible; }
.sigil-color-chip__swatch[data-color="forest"] { background: #304b3f; }
.sigil-color-chip__swatch[data-color="crimson"] { background: #713842; }
.sigil-color-chip__swatch[data-color="heritage-brown"] { background: var(--kinvella-nav-bg, #211207); }
.sigil-color-chip__swatch[data-color="midnight"] { background: #293d55; }
.sigil-color-chip__swatch[data-color="ivory"] { background: #e9dfc6; color: #422d1c; }
.sigil-color-chip__swatch[data-color="aged-ivory"] { background: linear-gradient(135deg, #fffef8, #a4a8a6 45%, #e8e7df 65%, #8e9391); color: #292e30; }
.sigil-color-chip__swatch[data-color="gold"], .sigil-color-chip__swatch[data-color="regal-gold"] { background: #c5a362; color: #422d1c; }
.sigil-color-chip__swatch[data-color="antique-bronze"] { background: #bb874b; color: #34241c; }
.sigil-color-chip__swatch[data-color="deep-espresso"] { background: #34241c; }
.sigil-mode-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.sigil-mode-options--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sigil-mode-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.35rem;
  border: 1px solid #e4d8c6;
  border-radius: 0.8rem;
  background: #fffcf6;
  color: #4f3d2a;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.sigil-initial-field { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 0.6rem 1rem; }
.sigil-initial-field label { grid-column: 1 / -1; margin: 0; }
.sigil-initial-field input { width: 4rem; height: 4rem; text-align: center; font: 2rem var(--font-display, Georgia, serif); border: 1px solid #c9ad80; border-radius: 0.8rem; background: #fffdf8; text-transform: uppercase; }
.sigil-initial-field > span { color: #75634c; font-size: 0.86rem; }
.sigil-size-controls { margin-block: 0.9rem 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sigil-size-controls:has(> label[hidden]) > label:not([hidden]) { grid-column: 1 / -1; }
.sigil-size-controls > label { text-transform: none; letter-spacing: normal; display: grid; gap: 0.4rem; }
.sigil-size-controls input { width: 100%; margin: 0; accent-color: #42624e; cursor: pointer; }
.sigil-density-control { display: grid; grid-template-columns: auto minmax(0, 1fr) 4rem; align-items: center; gap: 0.65rem; margin-top: 0.75rem; color: #59462f; font-size: 0.78rem; }
.sigil-density-control label { margin: 0; font: inherit; font-weight: 650; letter-spacing: normal; text-transform: none; }
.sigil-density-control input { width: 100%; min-width: 0; margin: 0; accent-color: #42624e; cursor: pointer; }
.sigil-density-control output { text-align: right; color: #786851; font-size: 0.72rem; }
.sigil-range-labels { display: flex; justify-content: space-between; color: #786851; font-size: 0.7rem; }
.sigil-field-note { margin: 0.7rem 0 0; color: #71614f; font-size: 0.76rem; line-height: 1.4; }
.sigil-builder-footer { grid-column: 2; }
.sigil-builder-form__note { min-height: 1.3em; margin: 0 0 0.75rem; color: #75664f; font-size: 0.75rem; text-align: center; }
.sigil-builder-form__note.is-success { color: #35583f; }
.sigil-stage-tray__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.sigil-builder-form :is(.btn-primary, .btn-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 2.85rem;
  min-width: 0;
  padding: 0.45rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}
.sigil-builder-form .btn-primary .sigil-control-icon[data-tone="gold"] { background: #634a2c; color: #ffe5a0; }
.sigil-builder-form [data-sigil-action="previous"] svg { transform: rotate(180deg); }
.sigil-builder-form button:disabled { opacity: 0.45; cursor: default; }
.sigil-final-card { text-align: center; align-self: center; }
.sigil-final-card > .sigil-control-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; }
.sigil-final-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.sigil-creator-card__mobile-process-icon svg { color: inherit; width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sigil-creator-card__mobile-process-icon[data-tone="sage"] { color: #3c6048; }
.sigil-creator-card__mobile-process-icon[data-tone="blue"] { color: #3c6170; }
@media (hover: hover) {
  .sigil-stage-option:hover, .sigil-mode-options button:hover { border-color: #aa8046; background: #f7f0e1; }
  .sigil-stage-tray button:hover { background: #faf4e8; }
}
@media (min-width: 1100px) {
  .sigil-builder-form { --sigil-sticky-top: calc(var(--auth-workspace-topbar-height, 5rem) + 0.5rem); }
}
@media (max-width: 899px) {
  .sigil-builder-form--staged { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; max-width: 36rem; }
  .sigil-preview-dock {
    position: sticky;
    top: var(--sigil-sticky-top);
    z-index: 15;
    display: grid;
    grid-column: 1;
    gap: 0.4rem;
    align-self: start;
    border-radius: 1.2rem;
    background: #f5ead4;
    box-shadow: 0 0.45rem 1rem rgba(54, 35, 18, 0.12);
  }
  .sigil-live-card {
    --sigil-preview-size: clamp(5rem, 19svh, 7.5rem);
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.15rem;
    grid-row: auto;
    grid-column: 1;
    padding: 0.5rem 0.8rem;
    border-radius: 1.2rem;
    text-align: center;
    box-shadow: inset 0 0 0 3px rgba(255, 253, 246, 0.6);
  }
  .sigil-live-card__copy { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.15rem 0.5rem; }
  .sigil-live-card__copy h2 { font-size: 1.2rem; line-height: 1.1; }
  .sigil-live-card__eyebrow { margin: 0; font-size: 0.59rem; letter-spacing: 0.1em; }
  .sigil-composed--builder { grid-column: 1; grid-row: 2; justify-self: center; grid-template-rows: minmax(0, 1fr); width: var(--sigil-preview-size); height: auto; aspect-ratio: 100 / 124; margin: 0; }
  .sigil-live-card__caption { display: none; }
  .sigil-stage-tray, .sigil-stage-card, .sigil-builder-footer { grid-column: 1; }
  .sigil-stage-tray { position: static; gap: 0.2rem; padding: 0.25rem; }
  .sigil-stage-tray button { gap: 0.35rem; font-size: 0.82rem; padding: 0.4rem 0.15rem; }
  .sigil-stage-tray .sigil-control-icon { width: 1.75rem; height: 1.75rem; }
  .sigil-stage-card__header { margin-bottom: 0.85rem; }
  .sigil-stage-card__header > p:last-child { font-size: 0.82rem; }
  .sigil-stage-grid { gap: 0.5rem; }
  .sigil-choice-track { grid-auto-columns: 7.5rem; }
  .sigil-emblem-option .sigil-animal-icon { width: 2.75rem; height: 2.75rem; }
  .sigil-emblem-option strong { font-size: 0.78rem; }
  .sigil-emblem-option small { font-size: 0.64rem; }
  .sigil-stage-tray__actions > button { flex: 1; }
  .sigil-mode-options button { gap: 0.35rem; font-size: 0.74rem; }
  .sigil-mode-options .sigil-control-icon { width: 1.6rem; height: 1.6rem; }
  .sigil-color-chip { font-size: 0.67rem; }
  .sigil-stage-card legend { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sigil-stage-option { transition: none; }
}