:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; background: #fff; color: #251d2c; font-family: system-ui, sans-serif; }
.magic7-shell, .magic7-footer { width: min(100% - 32px, 760px); max-width: 760px; margin-inline: auto; }
.magic7-shell { padding: 28px 0 44px; }
.magic7-header { text-align: center; }
.magic7-kicker, h1, h2 { color: #8a5410; }
.magic7-kicker { margin-bottom: 6px; font-weight: 800; letter-spacing: .18em; }
.magic7-notice, .magic7-disclosure, .magic7-stale, .magic7-source-status, .magic7-guide { margin-inline: auto; padding: 10px 12px; border-radius: 8px; background: #fff8eb; }
.magic7-stale, .magic7-source-status, .magic7-guide { border: 1px solid #e7c990; }
.magic7-guide { margin-top: 18px; text-align: left; color: #45394a; }
.magic7-guide h2 { margin: 0 0 8px; font-size: 1rem; }
.magic7-guide p { margin: 8px 0 0; font-size: .9rem; line-height: 1.8; }
.magic7-source-status { margin-top: 16px; text-align: left; }
.magic7-method { display: none; }
.magic7-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 24px 0 16px; }
button, .magic7-official-link, .magic7-footer a { min-height: 44px; padding: 10px 14px; border-radius: 8px; font: inherit; }
button { border: 1px solid #ceb6d7; background: #fff; color: #392143; cursor: pointer; }
.magic7-tab[aria-selected="true"] { border-color: #8a5410; color: #8a5410; }
.magic7-cards { display: grid; gap: 10px; }
.no-js .magic7-panel { display: block; }
.magic7-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #e1d8e5; border-radius: 10px; background: #fff; }
.magic7-position { margin: 0; color: #8a5410; font-size: 1.6rem; font-weight: 800; text-align: center; }
.magic7-position span:last-child { font-size: .85rem; }
.magic7-card-label { display: none; }
.magic7-code { margin: 0; overflow-wrap: anywhere; color: #251d2c; font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; }
.magic7-actions { display: flex; justify-content: flex-end; }
.magic7-official-link { display: inline-flex; align-items: center; justify-content: center; background: #8a5410; color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.magic7-empty { margin: 0; padding: 20px; border: 1px dashed #ceb6d7; border-radius: 10px; text-align: center; }
.magic7-footer { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 0 40px; }
.magic7-footer a { color: #8a5410; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 600px) {
  .magic7-shell, .magic7-footer { width: min(100% - 24px, 760px); }
  .magic7-tabs { grid-template-columns: repeat(2, 1fr); }
  .magic7-card { grid-template-columns: 42px minmax(0, 1fr); }
  .magic7-actions { grid-column: 1 / -1; }
  .magic7-official-link { width: 100%; }
}