/* Content artwork keeps original brand colors; controls follow the shared UI system. */
@layer vuvu.material {
 .around-brand{--ab-green:#0b5b38;--ab-paper:#f9f7f9;--ab-pink:#f6edf3;max-width:1280px;margin:0 auto;padding:0 0 30px;color:var(--ink,#251f23);font:14px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;min-width:0}
 .around-brand *{box-sizing:border-box}
 /* Keep the reset weaker than each component's intentional spacing. */
 .around-brand :where(h1,h2,h3,p){margin:0!important;letter-spacing:normal}
 .around-brand h1{font-size:28px!important;font-weight:600!important;line-height:1.4!important}
 .around-brand h2{font-size:21px!important;font-weight:600!important;line-height:1.5!important}
 .around-brand h3{font-size:16px!important;font-weight:600!important;line-height:1.5!important}
 .around-brand :is(button,a,input,select,textarea){font:inherit}
 .around-brand button,.around-brand a.ab-button{min-height:36px;padding:7px 13px!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:normal;text-align:center;line-height:1.5!important;text-decoration:none;color:var(--ink,#251f23);border:1px solid var(--line,#dccfd8);background:var(--panel,#fff);border-radius:var(--vuvu-radius-button,4px)!important;cursor:pointer;box-shadow:none}
 .around-brand button:hover,.around-brand a.ab-button:hover{border-color:var(--ab-green);filter:brightness(.98)}
 .around-brand :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--accent,#0b5b38);outline-offset:3px}
 .around-brand button:disabled{cursor:wait;opacity:.55}
 .around-brand .ab-primary{background:var(--ab-green)!important;border-color:var(--ab-green)!important;color:#fff!important}
 .around-brand .ab-quiet{border:0!important;box-shadow:none!important;background:transparent!important;padding:6px 10px!important;color:var(--accent,#0b5b38);font-size:12px;text-underline-offset:4px}
 .around-brand .ab-quiet:hover:not(:disabled){text-decoration:underline;filter:none}
 /* Preserve the text grid while keeping a comfortable hit area around links. */
 .ab-card-body>.ab-quiet,.ab-principle>.ab-quiet{margin-inline-start:-10px}
 .ab-topline,.ab-heading,.ab-actions,.ab-section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
 .ab-topline{margin-bottom:14px;font-size:11px;letter-spacing:.14em;color:var(--muted,#6c696a)}
 .ab-heading{margin-bottom:24px}.around-brand .ab-heading p{color:var(--muted,#6c696a);margin-top:6px!important}
 .ab-nav{display:flex;gap:6px;border-bottom:1px solid var(--line,#dccfd8);padding:0 0 12px;margin-bottom:24px;overflow-x:auto}
 .around-brand .ab-nav button{flex:none;background:transparent;border-color:transparent;padding:8px 16px!important}
 .around-brand .ab-nav button[aria-selected=true]{background:var(--panel2,#eef5e4)!important;border-color:var(--accent,#0b5b38);color:var(--accent,#0b5b38);font-weight:600}
 .ab-hero{display:grid;grid-template-columns:1.35fr 1fr;background:var(--ab-green);color:var(--ab-paper);min-height:292px;padding:34px;gap:32px;border-radius:var(--vuvu-radius-panel,8px);overflow:hidden;margin-bottom:26px}
 .ab-hero>div{display:flex;flex-direction:column;justify-content:space-between;gap:22px}
 .around-brand .ab-hero h2{font-size:clamp(28px,3vw,44px)!important;line-height:1.4!important;letter-spacing:.01em;white-space:pre-line}
 .around-brand .ab-hero p{color:#e2e9df!important;max-width:400px}.ab-hero small{font-size:11px;letter-spacing:.12em}.ab-hero .ab-hero-art{align-items:center;justify-content:center;border-left:1px solid #f9f7f92b;padding-left:30px}
 .ab-hero-art img{width:86%;height:92px;object-fit:contain;background:transparent!important}.ab-hero-art span{font-size:13px;letter-spacing:.18em}
 .ab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.ab-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ab-card{border:1px solid var(--line,#dccfd8);border-radius:var(--vuvu-radius-card,6px);background:var(--panel,#fff);min-width:0;overflow:hidden}
 .ab-grid>.ab-card{display:flex;flex-direction:column}
 .ab-card-body{padding:24px;display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:12px}
 .ab-card-body>:is(button,.ab-actions):last-child{margin-top:auto}
 .ab-card-body>small,.ab-muted{color:var(--muted,#6c696a);font-size:12px}.ab-card-body p{font-size:13px;color:var(--muted,#6c696a)}
 .ab-principle{padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
 .ab-principle-num{font:12px ui-monospace,monospace;color:var(--muted,#6c696a)}
 .around-brand .ab-principle h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:23px!important}.ab-principle h3 small{font-size:12px;font-weight:400}
 .ab-principle p{color:var(--muted,#6c696a);font-size:13px}.ab-principle .ab-quiet{margin-top:auto}
 .ab-section{margin-top:32px}.ab-section-title{align-items:flex-end;gap:12px 16px;margin-bottom:16px}.ab-section-title>div{display:grid;gap:4px;min-width:0}.ab-section-title p{color:var(--muted,#6c696a);font-size:12px}
 .ab-section-title>.ab-quiet{flex:none}
 .around-brand .ab-disclosure{margin-top:24px}
 .ab-disclosure>summary{width:fit-content;max-width:100%;padding:8px 10px;margin-inline-start:-10px;cursor:pointer;border-radius:var(--vuvu-radius-button,4px);line-height:1.5}
 .ab-disclosure>summary:hover{text-decoration:underline;text-underline-offset:4px}
 .ab-disclosure>summary:focus-visible{outline:2px solid var(--accent,#0b5b38);outline-offset:3px}
 .ab-disclosure[open]>summary{margin-bottom:16px}
 .ab-palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
 .around-brand .ab-swatch{display:block;padding:0!important;overflow:hidden;text-align:left;background:var(--panel,#fff)!important}
 .ab-swatch i{display:block;height:72px;border-bottom:1px solid #00000010}.ab-swatch span{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px;padding:10px 12px;font-size:11px}.ab-swatch code{font-family:ui-monospace,monospace}
 .ab-image{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:var(--ab-paper);color:#251f23;font-size:12px}.ab-card>.ab-image{border-bottom:1px solid var(--line,#dccfd8)}
 .ab-error{color:var(--danger,#a44e3b);font-size:12px}.ab-resource-error{display:flex;align-items:center;justify-content:center;min-height:90px;gap:12px;padding:16px;background:var(--panel2,#f6edf3);font-size:12px}
 .around-brand .ab-notice{margin-top:20px!important;padding:16px 20px;border:1px solid var(--line,#dccfd8);background:var(--panel2,#f6edf3);border-radius:var(--vuvu-radius-card,6px);font-size:12px;color:var(--muted,#6c696a);overflow-wrap:anywhere}
 .ab-chapter-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-size:11px;color:var(--muted,#6c696a)}
 .ab-actions{justify-content:flex-start;gap:8px}
 .ab-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:20px 0 14px}.ab-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted,#6c696a)}
 .around-brand :is(select,input[type=search],textarea){background:var(--panel,#fff);color:var(--ink,#251f23);border:1px solid var(--line,#dccfd8);border-radius:var(--vuvu-radius-field,4px);padding:9px 12px;min-width:0;max-width:100%}
 .ab-filters input[type=search]{width:230px}.ab-filters select{min-width:135px}.around-brand .ab-results{font-size:12px;color:var(--muted,#6c696a);margin-bottom:16px!important}
 .ab-logo-stage{display:flex;align-items:center;justify-content:center;height:170px;padding:30px;background:#f9f7f9;border-bottom:1px solid #dccfd8}.ab-logo-stage[data-bg=dark]{background:#0b5b38}.ab-logo-stage img{max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:auto;background:transparent}
 .ab-logo-file{font:11px/1.6 ui-monospace,monospace;word-break:break-all;color:var(--muted,#6c696a)}
 .ab-logo .ab-card-body{padding:20px;gap:8px}.ab-logo .ab-actions{gap:8px;padding-top:4px}.ab-logo .ab-actions button{font-size:11px;min-height:32px;padding:6px 10px!important}
 .ab-font-sample{display:block;width:100%;min-height:160px;resize:vertical;font-size:30px!important;line-height:1.7!important;padding:20px!important;background:var(--ab-paper)!important;color:#251f23!important}
 .ab-font-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%}.around-brand .ab-font-controls label{display:flex!important;gap:10px;align-items:center;font-size:12px;white-space:nowrap;flex:1 1 240px;min-width:0;max-width:100%}.ab-font-controls input{width:150px;min-width:0;flex:1 1 150px;accent-color:var(--ab-green)}.ab-font-controls output{min-width:3ch;font-variant-numeric:tabular-nums}
 .ab-table{width:100%;border-collapse:collapse;font-size:13px}.ab-table th,.ab-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line,#dccfd8)}.ab-table th{font-size:12px;color:var(--muted,#6c696a);font-weight:500;background:var(--panel2,#f6edf3)}
 .around-brand .ab-status{position:sticky;bottom:12px;width:fit-content;max-width:100%;padding:10px 16px;background:var(--panel,#fff);border:1px solid var(--line,#dccfd8);border-radius:var(--vuvu-radius-card,6px);box-shadow:0 4px 18px #0001;margin:12px auto 0!important;font-size:12px;z-index:2}.ab-status:empty{display:none}
 .ab-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 24px;text-align:center;border:1px dashed var(--line,#dccfd8);grid-column:1/-1;color:var(--muted,#6c696a)}
 .ab-footer{padding-top:24px;margin-top:28px;border-top:1px solid var(--line,#dccfd8);font-size:11px;color:var(--muted,#6c696a);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
 .ab-license-text{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.8 ui-monospace,monospace;max-height:320px;overflow:auto;margin:0;padding:20px;background:var(--panel2,#f6edf3);border-radius:var(--vuvu-radius-card,6px)}
 @media(max-width:800px){.ab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-hero{padding:26px;gap:20px}.ab-palette{grid-template-columns:repeat(3,minmax(0,1fr))}}
 @media(max-width:540px){.around-brand h1{font-size:24px!important}.ab-grid,.ab-grid.two,.ab-hero{grid-template-columns:1fr}.ab-hero{padding:24px}.ab-hero .ab-hero-art{border-left:0;border-top:1px solid #f9f7f92b;padding:20px 0 0;gap:10px}.ab-hero-art img{height:52px;width:65%}.ab-palette{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-card-body,.ab-principle{padding:20px}.ab-section-title{align-items:flex-start}.around-brand .ab-notice{padding:14px 16px}.ab-filters{align-items:stretch}.ab-filters label{flex:1 1 130px;min-width:0}.ab-filters select{min-width:0;width:100%}.ab-filters input[type=search]{width:100%}.around-brand .ab-nav button{padding:8px 10px!important}.ab-table th,.ab-table td{padding:10px 9px;font-size:12px}.ab-font-sample{font-size:24px!important;padding:16px!important}}
}