/* Shared transparent hero scenes; the guide background remains visible through all layers. */
.guide-art.method-glyphfield { background: none; min-width: 0; align-self: center; }
.method-glyphfield-stage { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.method-glyphfield-stage canvas, .method-glyphfield-fallback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.method-glyphfield-stage canvas { display: none; }
.method-glyphfield[data-rendered="true"] .method-glyphfield-stage canvas { display: block; }
.method-glyphfield[data-rendered="true"] .method-glyphfield-fallback { visibility: hidden; }
.method-glyphfield-fallback { color: #e0f6ff; fill: none; stroke: currentColor; stroke-width: .7; }
.method-glyphfield-fallback .glyphfield-tint { color: var(--primary); }
.method-glyphfield-fallback .glyphfield-violet { color: #8b7cff; }
.method-glyphfield-fallback text { fill: currentColor; stroke: none; text-anchor: middle; dominant-baseline: middle; font: 16px ui-monospace, monospace; }
.method-glyphfield-fallback .glyphfield-stars { font-size: 12px; letter-spacing: 13px; opacity: .65; }
.method-glyphfield-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin: -8px auto 10px; position: relative; }
.method-glyphfield [hidden] { display: none !important; }
.method-glyphfield button { font: inherit; cursor: pointer; color: #b9c8d8; border: 1px solid transparent; background: transparent; }
.method-glyphfield [data-glyph-feature] { min-height: 44px; padding: 7px 10px; border-radius: 999px; font-size: .75rem; letter-spacing: .01em; }
.method-glyphfield [data-glyph-feature]:hover, .method-glyphfield [data-glyph-feature][aria-pressed="true"] { color: #e0f6ff; border-color: rgb(var(--brand-rgb) / .35); background: rgb(var(--brand-rgb) / .055); }
.method-glyphfield [data-glyph-explanation] { max-width: 43ch; margin: 0 auto; min-height: 7.6em; font-size: .78rem; line-height: 1.6; color: #b9c8d8; text-align: left; }
.method-glyphfield [data-glyph-explanation] strong { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #e0f6ff; margin-bottom: 4px; font-weight: 500; }
.method-glyphfield [data-glyph-motion] { display: block; min-height: 44px; padding: 8px 12px; margin: 0 auto; font-size: .7rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--brand-rgb) / .4); }
.method-glyphfield [data-glyph-motion]:hover { color: #e0f6ff; }
.guide-art.method-glyphfield figcaption { font-size: .65rem; margin-top: 5px; }
@media (max-width: 600px) {
  .method-glyphfield-stage { max-width: 360px; }
  .method-glyphfield [data-glyph-explanation] { min-height: 0; margin-bottom: 8px; }
}
@media (forced-colors: active) {
  .method-glyphfield-stage canvas { display: none !important; }
  .method-glyphfield[data-rendered="true"] .method-glyphfield-fallback { visibility: visible; }
  .method-glyphfield-fallback, .method-glyphfield-fallback .glyphfield-tint, .method-glyphfield-fallback .glyphfield-violet { color: CanvasText; }
  .method-glyphfield [data-glyph-feature][aria-pressed="true"] { border-color: Highlight; }
}
@media print {
  .method-glyphfield-stage { max-width: 230px; }
  .method-glyphfield-stage canvas, .method-glyphfield-controls, .method-glyphfield [data-glyph-motion] { display: none !important; }
  .method-glyphfield[data-rendered="true"] .method-glyphfield-fallback { visibility: visible; }
  .method-glyphfield-fallback, .method-glyphfield-fallback .glyphfield-tint, .method-glyphfield-fallback .glyphfield-violet { color: #333; }
  .method-glyphfield [data-glyph-explanation], .method-glyphfield [data-glyph-explanation] strong { color: #111; }
}