/* Shared system breakdown, with a compact dialog and spacious reading layout. */
    .legend-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 14px 0 18px; }
    .legend-card { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
    .legend-card strong { display: block; font-size:var(--font-small); }
    .legend-card span { display: block; margin-top: 2px; color: var(--muted); font-size:var(--font-caption); line-height: 1.45; }
    .legend-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--tint); }
    #methodDialog[open] { display: flex; flex-direction: column; }
    #methodDialog .dialog-head { flex: none; }
    #methodDialog .dialog-body { min-height: 0; }
    .method-kit-grid, .method-color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 8px; }
    .method-extras-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .method-kit-card, .method-color-card { padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
    .method-kit-card h4, .method-color-card h4 { margin: 0 0 5px; font-size: var(--font-small); }
    .method-extras-grid .method-kit-card :is(h3,h4) { display:flex; align-items:center; gap:8px; }
    .method-extras-grid .method-kit-card :is(h3,h4) .icon { width:18px; height:18px; flex:none; }
    .method-kit-card p, .method-color-card p { margin: 0; font-size: var(--font-caption); line-height: 1.45; }
    .method-color-card { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; align-content: start; text-align: center; gap: 8px; }
    .method-color-card > .icon { width:24px; height:24px; color: var(--method-color,var(--ink)); margin-top: 2px; }
    .method-section-title { margin: 24px 0 10px; font-size: var(--font-lead); letter-spacing: -.02em; }
    .method-section:first-child .method-section-title { margin-top: 0; }
    .method-readiness { display: grid; grid-template-columns: 1em minmax(0,1fr); align-items: start; gap: 8px; margin: 0; font-size: var(--font-caption); line-height: 1.6; }
    .method-readiness > .icon { width: 1em; height: 1em; margin-top: .3em; }
    .method-readiness a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
    @media (max-width:720px) {
      .method-kit-grid, .method-color-grid, #methodDialog .legend-grid { grid-template-columns: minmax(0,1fr); }
    }

.method-intro>p{color:var(--muted);font-size:var(--font-body);line-height:1.65;margin:0 0 13px}
.legend-icon .icon{stroke-width:2.25}