@layer chain {
  .chain-app { font-size:16px; line-height:1.6 }
  .chain-header,.chain-main,.chain-footer { max-inline-size:1240px; margin-inline:auto; padding-inline:clamp(22px,5vw,64px) }
  .chain-header { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:32px }
  .chain-header nav,.section-nav,.action-row,.source-links { display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px }
  .chain-header nav a,.section-nav a { min-block-size:44px; display:inline-flex; align-items:center }
  .chain-header [aria-current] { text-decoration:underline; text-underline-offset:7px }
  .chain-header .header-social { min-inline-size:44px; justify-content:center; font-size:18px; font-weight:600 }
  .chain-intro { padding-block:52px 24px; max-inline-size:780px }
  .chain-intro h1 { font-size:clamp(34px,4vw,52px); margin-block:15px 18px; text-wrap:balance }
  .chain-intro>p:last-child { font-size:20px }
  .overline { font-size:13px; letter-spacing:.11em; font-weight:500; color:#566152 }
  .network-line { display:flex; gap:16px 28px; align-items:center; justify-content:space-between; font-size:14px }
  .network-line p { max-inline-size:80ch }
  .section-nav { margin-block:28px 8px; gap:16px 32px }
  .chain-main section { padding-block:52px 34px; scroll-margin-block-start:24px }
  .chain-main h2 { font-size:clamp(27px,2.8vw,36px); margin-block:12px 18px; line-height:1.2 }
  .chain-main h3 { font-size:23px; line-height:1.3 }
  .section-top { display:flex; align-items:center; justify-content:space-between; gap:20px }
  .section-top.compact { margin-block:20px }
  #wallet>.section-top { margin-block-end:20px }
  .measure { max-inline-size:74ch }
  .helper { color:#566152; font-size:14px; margin-block:10px 18px; line-height:1.65 }
  .field-error { color:#923e2e; font-size:15px; margin-block:8px }
  .field-error:empty { display:none }
  .chain-app label { display:block; font-weight:500; margin-block-end:10px }
  .chain-app input { border:1px solid #90998c; border-radius:3px; background:#f1f1ec; color:var(--ink); padding:13px 16px; min-block-size:50px; min-inline-size:0; inline-size:100%; font:16px/1.4 var(--sans) }
  .chain-app input[aria-invalid=true] { border-color:#923e2e }
  .chain-app input::placeholder { color:#65705f }
  .chain-app form { margin-block:24px }
  .field-row { display:flex; align-items:stretch; gap:12px }
  .action-button { flex-shrink:0; background:var(--gold); border-radius:3px; padding:12px 22px; min-block-size:48px; font-weight:500 }
  .action-button:hover { background:var(--gold-hover); color:var(--ink) }
  .quiet-button { min-block-size:44px; display:inline-flex; align-items:center; justify-content:center; text-decoration:underline; text-underline-offset:5px; padding:8px 0; font-weight:500; text-align:start }
  .action-row { gap:12px 24px }
  #wallet-connection { margin-block:24px; overflow-wrap:anywhere }
  #wallet-state { font-weight:500 }
  #holdings { margin-block-start:36px }
  #balance-feedback { overflow-wrap:anywhere }
  .balance-address { font-size:15px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; margin-block:16px }
  .balance-table { inline-size:100%; border-collapse:collapse; margin-block:24px; table-layout:fixed }
  .balance-table th,.balance-table td { text-align:start; padding:14px 12px 14px 0; vertical-align:top; overflow-wrap:anywhere }
  .balance-table th { font-size:14px; font-weight:500; color:#566152 }
  .balance-table th:first-child { inline-size:27% }
  .balance-table th:nth-child(2) { inline-size:43% }
  .balance-table td { font-variant-numeric:tabular-nums }
  .balance-table small { display:block; font:14px/1.6 var(--sans); color:#566152; margin-block-start:4px }
  .balance-table a { text-decoration:underline; text-underline-offset:4px }
  .native-amount { font:500 clamp(27px,3vw,38px)/1.3 var(--display); overflow-wrap:anywhere; margin-block:22px 8px; font-variant-numeric:tabular-nums }
  .source-links { margin-block:20px 30px; font-size:15px; text-decoration:underline; text-underline-offset:4px }
  #asset-search { max-inline-size:700px }
  .asset-row { display:grid; grid-template-columns:100px minmax(0,1fr) auto; align-items:start; gap:24px; padding-block:24px }
  .asset-symbol { font:600 24px/1.3 var(--display); overflow-wrap:anywhere; padding-block-start:5px }
  .asset-details { min-inline-size:0 }
  .asset-details h3 { font:500 19px/1.5 var(--sans); letter-spacing:0; margin-block-end:8px }
  .asset-details summary { display:inline-block; min-block-size:44px; padding-block:8px; text-decoration:underline; text-underline-offset:4px; font-size:15px }
  .asset-details .contract { display:block; font-size:14px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; text-decoration:underline; text-underline-offset:4px }
  .asset-details dl { margin-block:12px; font-size:14px }
  .asset-details dt { font-weight:500 }
  .asset-details dd { margin-block-end:12px; overflow-wrap:anywhere }
  .track-button { min-block-size:44px; min-inline-size:90px; padding:8px 12px; border:1px solid #7d8876; border-radius:3px; font-weight:500 }
  .track-button[aria-pressed=true] { background:#d8dfd0 }
  #tracked-assets { display:flex; flex-wrap:wrap; gap:12px 24px; margin-block:25px 12px }
  #tracked-assets button { font-size:14px; overflow-wrap:anywhere; text-align:start; min-block-size:44px; text-decoration:underline; text-underline-offset:4px }
  #transaction-result { margin-block:20px; overflow-wrap:anywhere }
  #transaction-result a { display:block; text-decoration:underline; text-underline-offset:5px; margin-block-start:12px }
  .access-list { margin-block:28px; max-inline-size:900px }
  .access-list>div { display:grid; grid-template-columns:230px 1fr; gap:24px; padding-block:14px }
  .access-list dt { font-weight:500 }
  .access-list dd { color:#566152 }
  .chain-footer { padding-block:55px 45px; font-size:14px; color:#566152 }
  .chain-footer p { margin-block-end:8px }
  .chain-footer a { display:inline-block; min-block-size:44px; padding-block:10px; text-decoration:underline; text-underline-offset:4px }
  #wallet-dialog { inline-size:540px; max-inline-size:calc(100% - 32px); padding:30px; border:0; background:var(--paper); color:var(--ink); max-block-size:85svh; overflow:auto }
  #wallet-dialog h2 { font-size:27px; line-height:1.2 }
  #wallet-dialog .section-top { margin-block:0 20px }
  #wallet-dialog::backdrop { background:#26322c80 }
  #wallet-options { display:grid; gap:12px; margin-block:22px }
  #wallet-options button { inline-size:100%; text-align:start; overflow-wrap:anywhere }
  .chain-app :focus-visible { outline:2px solid #635019; outline-offset:5px }
  @media(max-width:650px) {
    .chain-header { position:relative; align-items:flex-start; flex-direction:column; gap:16px; padding-block:25px }
    .chain-header nav { gap:6px 22px; font-size:14px }
    .chain-header .header-social { position:absolute; inset-block-start:25px; inset-inline-end:clamp(22px,5vw,64px) }
    .chain-intro { padding-block:24px }
    .chain-intro>p:last-child { font-size:18px }
    .network-line { align-items:flex-start; flex-direction:column; gap:4px }
    .section-nav { gap:4px 22px; font-size:15px; margin-block:20px 0 }
    .section-top { align-items:flex-start; flex-direction:column; gap:10px }
    .section-top.compact { gap:10px }
    .chain-main section { padding-block:40px 24px }
    .field-row { flex-direction:column }
    .field-row .action-button { align-self:flex-start }
    .asset-row { grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; padding-block:22px }
    .asset-symbol { grid-column:1 }
    .asset-details { grid-column:1/-1; grid-row:2 }
    .track-button { grid-column:2; grid-row:1 }
    .balance-table th:first-child { inline-size:24% }
    .balance-table th:nth-child(2) { inline-size:47% }
    .balance-table { font-size:14px }
    .balance-table th,.balance-table td { padding-inline-end:8px }
    .access-list>div { grid-template-columns:1fr; gap:4px; padding-block:15px }
    #wallet-dialog { padding:24px }
  }
}