/* Editorial chapters use brand display hierarchy; controls use compact Asgard roles. */
:root{--sans:var(--ag-font-sans);--serif:var(--ag-font-display)}
body{font:var(--ag-type-body1);font-synthesis:none}.brand{font:var(--ag-type-body2);letter-spacing:.03em}
h1,h2{font-family:var(--ag-font-display);font-weight:700;line-height:1.5}h1{font-size:48px}h2{font-size:32px}h3{font:var(--ag-type-h3)}h4{font:var(--ag-type-h4)}
.hero h1{font:700 48px/1.35 var(--ag-font-display);letter-spacing:-.02em}.hero .lead{font:var(--ag-type-h4)}.hero .caption,.caption,.eyebrow,.scroll-hint,.footer p{font:var(--ag-type-caption);letter-spacing:0}
.profile-name{font:700 48px/1.25 var(--ag-font-display)}.profile-class{font:var(--ag-type-h3)}.quote{font:var(--ag-type-h3)}
.chapter-body h3,.object-body h2,.quality-card h2,.job-section h2,.reference-box h3{font:var(--ag-type-h2)}
.chapter-body p,.section-intro .lead,.quality-card p,.reference-box p,.product-card p,.term p,.object-body dd,.skill-card p,.footer p{font:var(--ag-type-body1)}
.product-card .boundary,.product-card a,.job-card .caption,.job-section>.caption,.skill-stats span,.mode-boundary,.motion-status,.motion-description{font:var(--ag-type-body2)}
.product-card h3,.object-body h3,.workflow h3{font:var(--ag-type-h3)}.term h3,.job-card h3{font:var(--ag-type-h4)}
.button,.lang-switch button,.control-row button,.control-row select,.control-select select,.motion-mode-switch button,.angle-display-tier button,.angle-buttons button{font:500 15px/24px var(--ag-font-sans);min-height:48px;padding:8px 16px;border-radius:var(--ag-control-radius);transition:background-color var(--ag-duration) var(--ag-ease),border-color var(--ag-duration) var(--ag-ease)}
.lang-switch{border-radius:var(--ag-control-radius)}.lang-switch button{font-size:13px;padding:8px 12px}.nav{font:var(--ag-type-body2)}.nav a{min-height:48px}
.chapter-nav button,.roster button{font:var(--ag-type-body1);border-radius:var(--ag-control-radius)}.chapter-nav button small,.chapter-nav button span,.roster span{font:var(--ag-type-body2)}
button[aria-pressed=true],.control-row button[aria-pressed=true],.roster button[aria-pressed=true]{color:var(--ag-ui-text);background:color-mix(in srgb,var(--ag-ui-accent) 20%,#0a0f1e)}
button:disabled{opacity:var(--ag-disabled-opacity);pointer-events:none}button:active,.button:active{transform:none}
a:focus-visible,button:focus-visible,select:focus-visible,.motion-stage canvas:focus-visible,.angle-canvas:focus-visible{outline:var(--ag-focus-width) solid var(--ag-ui-accent);outline-offset:2px;box-shadow:0 0 0 var(--ag-focus-halo) #22d3ee66}
.job-section,.motion-stage,.object-card,.front-card,.reference-box,.product-callout{border-radius:var(--ag-card-radius)}
.angle-heading,.angle-heading strong,.angle-heading span{font:var(--ag-type-body2)}.angle-hint,.angle-limit,.angle-status{font:var(--ag-type-body2)!important}
[lang^=zh] h1,[lang^=zh] h2,[lang^=zh] h3,[lang^=zh] .eyebrow,[lang^=zh] .brand{letter-spacing:0}
@media(max-width:760px){
 .hero h1{font:700 32px/48px var(--ag-font-display)}h1,.profile-name{font:var(--ag-type-h1)}h2{font:var(--ag-type-h2)}.hero .lead{font:var(--ag-type-body1)}
 .header{gap:8px;padding:8px 16px}.brand{font:var(--ag-type-body2)}.nav{font:var(--ag-type-body2);gap:20px}.nav-scroll-hint{font:var(--ag-type-caption);margin-bottom:0}.nav a{min-height:48px}
 .lang-switch button{min-height:48px;padding:8px 12px}.button{font-size:15px}.control-select select,.control-row select{font-size:16px}
 .chapter-nav button{min-width:170px;padding:12px}.roster{gap:8px}.roster span{font:var(--ag-type-caption)}.roster button{padding:8px 3px}
 .job-card h3{font:var(--ag-type-h4)}.job-card .caption{font:var(--ag-type-body2)}.quality-card h2{font:var(--ag-type-h2)}.quality-card p{font:var(--ag-type-body1)}.hero .caption{font:var(--ag-type-caption)}
 .angle-buttons button{font-size:13px;line-height:20px;padding:8px}.angle-heading strong,.angle-heading span{font:var(--ag-type-body2)}
}
h1,h2{text-wrap:balance}
.lang-switch button[aria-pressed=true],.chapter-nav button[aria-pressed=true],.roster button[aria-pressed=true],.motion-mode-switch button[aria-pressed=true],.angle-display-tier button[aria-pressed=true]{color:var(--ag-ui-text);background:color-mix(in srgb,var(--ag-ui-accent) 20%,#0a0f1e);border-color:var(--ag-ui-accent);transform:none}
.button:hover{filter:brightness(.9)}.button.ghost:hover,.button.light:hover,.control-row button:hover{filter:none;background:color-mix(in srgb,var(--ag-ui-accent) 15%,#0a0f1e)}

/* Control groups wrap as groups; labels and focus rings keep breathing room. */
.control-row,.motion-mode-switch,.angle-display-tier,.angle-buttons,.troop-actions{gap:var(--ag-space-3)}
.control-row>button,.troop-actions>button{min-height:48px;padding:8px 16px;white-space:normal}
.control-select{gap:var(--ag-space-3);margin-block:var(--ag-space-2)}
.control-select label{min-width:0}