/* Only the downloadable card area; no sitewide token overrides. */
#wl-result .wl-dna {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  grid-template-rows: 1fr auto auto auto 1fr;
  gap: 0 36px;
  padding: 36px;
  background: #101416;
  border: 1px solid #3b3d38;
  overflow: visible;
  color: #f0ece1;
}
#wl-result .wl-dna::before { content: none; }
#wl-result .wl-dna-copy { grid-column: 1; grid-row: 1; align-self: end; }
#wl-result .wl-dna h2 { margin: 0 0 20px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.45; overflow-wrap: anywhere; }
#wl-result .wl-dna h2 em { font-family: inherit; font-style: normal; color: #e1ca8b; }
#wl-result .wl-dna-sub { font-size: 15px; color: #c8c3b8; margin: 0 0 26px; }
#wl-result .wl-dna-stage { grid-column: 2; grid-row: 1 / 6; padding: 0; margin: 0; background: none; border: 0; min-height: 0; }
#wl-result .wl-dna-canvas-wrap { width: 100%; max-width: 540px; margin: 0; border: 1px solid #3b3d38; padding: 0; box-shadow: none; }
#wl-result .wl-dna-canvas-wrap canvas { width: 100%; height: auto; aspect-ratio: 4 / 5; }
#wl-result .wl-dna-actions { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; max-width: none; }
#wl-result .wl-dna-actions button { min-height: 48px; padding: 12px 10px; border-radius: 0; box-shadow: none; font-size: 14px; white-space: nowrap; touch-action: manipulation; scroll-margin-block: 100px; transition: background-color 160ms, color 160ms; }
#wl-result .wl-dna-actions button::before, #wl-result .wl-dna-actions button::after { content: none; }
#wl-result #wlDnaSave { grid-column: 1 / -1; background: #e1ca8b; color: #111516; border: 1px solid #e1ca8b; }
#wl-result #wlDnaSave:hover { background: #f0ece1; }
#wl-result .wl-dna-actions button:not(#wlDnaSave) { background: transparent; border: 1px solid #55574d; color: #f0ece1; }
#wl-result .wl-dna-actions button:not(#wlDnaSave):hover { background: #242920; }
#wl-result .wl-dna-actions button:focus-visible { outline: 2px solid #e1ca8b; outline-offset: 4px; }
#wl-result .wl-dna-actions button:disabled { opacity: .5; cursor: wait; }
#wl-result .wl-dna-status { grid-column: 1; grid-row: 3; min-height: 3.4em; margin: 16px 0 0; font-size: 13px; line-height: 1.7; color: #b7b4ab; }
#wl-result .wl-dna-meta { grid-column: 1; grid-row: 4; margin: 12px 0 0; text-align: left; line-height: 1.8; letter-spacing: .02em; color: #b7b4ab; }
@media (max-width: 850px) {
  #wl-result .wl-dna { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 0; padding: 20px 14px; }
  #wl-result .wl-dna-copy { grid-column: 1; grid-row: 1; }
  #wl-result .wl-dna-stage { grid-column: 1; grid-row: 2; margin: 0 auto 24px; width: min(100%, 540px); }
  #wl-result .wl-dna-actions { grid-column: 1; grid-row: 3; width: 100%; max-width: 540px; margin: auto; }
  #wl-result .wl-dna-status { grid-column: 1; grid-row: 4; }
  #wl-result .wl-dna-meta { grid-column: 1; grid-row: 5; }
}
@media (prefers-reduced-motion: reduce) { #wl-result .wl-dna-actions button { transition: none; } }