:host { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: calc(var(--space-8) * var(--spacing)); }
    :host([data-columns="1"]) { --n: 1; }
    :host([data-columns="2"]) { --n: 2; }
    :host([data-columns="3"]) { --n: 3; }
    :host([data-columns="5"]) { --n: 5; }
    :host([data-columns="6"]) { --n: 6; }
    [role=tablist] { display: none; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: calc(var(--space-2) * var(--spacing)); }
    :host([ready]) [role=tablist] { display: grid; }
    .panels { display: grid; }
    :host([ready]) ::slotted([role=tabpanel]) { grid-row: 1; grid-column: 1; margin-top: 0 !important; border-radius: 0 0 var(--r) var(--r) !important; }
    :host([ready]) ::slotted([role=tabpanel][hidden]) { display: grid !important; visibility: hidden; }
    ::slotted([role=tab]) { border: 0; border-bottom: 3px solid var(--line); background: var(--raised); color: var(--body); padding: calc(.9rem * var(--spacing)) calc(var(--space-4) * var(--spacing)) calc(.8rem * var(--spacing));
      border-radius: var(--r-sm) var(--r-sm) 0 0; font: 500 calc(1rem * var(--type-scale)) var(--font-display); text-align: center; cursor: pointer; transition: color .2s, border-color .2s; }
    ::slotted([role=tab]:hover) { color: var(--ink); }
    ::slotted([role=tab][aria-selected=true]) { color: var(--ink); border-bottom-color: var(--mint); font-weight: 600; }
    @media (max-width: 600px) {
      [role=tablist] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      ::slotted([role=tab]) { border-radius: calc(var(--r-sm) * 0.875); font-size: calc(.95rem * var(--type-scale)); padding: calc(var(--space-3) * var(--spacing)) calc(.6rem * var(--spacing)) calc(.65rem * var(--spacing)); }
      :host([ready]) ::slotted([role=tabpanel]) { border-radius: var(--r) !important; margin-top: calc(var(--space-2) * var(--spacing)) !important; }
    }
    :host([variant=vertical]) [part=tablist] { grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 800px) {
      :host([variant=vertical][ready]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 2rem; }
    }