/* Hallmark · genre: playful · macrostructure: Stat-Led · tone: soft-modern · anchor hue: pear
 * theme: Hum (light cream / rounded-sans / multi-accent) · nav: N12 (tint+ink banner, retract-on-scroll) · footer: Ft8
 * H4 knobs: number=tabular-display, qualifier=below, secondary=two-beside · enrichment: none (charts are the content)
 * audience: 原神音乐爱好者 · use: 比较创作者贡献 · contrast: pass (40–41) · mobile: pass (34, 49, 50–57)
 * pre-emit critique: P4 H4 E4 S4 R4 V5 */
@import url('./tokens.css');
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}
body{background:var(--color-paper);color:var(--color-ink);font:var(--text-base)/1.6 var(--font-body);font-feature-settings:"ss01" on,"cv11" on}
button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:var(--color-transparent)}
button,a,summary{touch-action:manipulation}
button{cursor:pointer;white-space:nowrap;min-height:44px;border:var(--rule-width) solid var(--color-rule);background:var(--color-tint);color:var(--color-ink);border-radius:var(--radius-pill);padding:var(--space-sm) var(--space-md);font-weight:500;transition:transform 140ms var(--ease-press),background-color 160ms var(--ease-out)}
button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}
@media(hover:hover){button:hover{background:var(--color-well);transform:translateY(-1px)}}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.hit-point:focus-visible{outline-offset:0}
a{color:var(--color-link);text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--color-link) 45%,var(--color-transparent));text-underline-offset:3px}
@media(hover:hover){a:hover{text-decoration-color:var(--color-link);text-decoration-thickness:2px}}
h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:600;letter-spacing:-.02em;min-width:0;overflow-wrap:anywhere}
h1{font-size:var(--text-display);font-weight:700;letter-spacing:-.03em;line-height:1.08}
h2{font-size:var(--text-lg)}h3{font-size:var(--text-base);margin-block:var(--space-lg) var(--space-sm)}
/* ---- N12 banner + retracting nav ---- */
.nav{position:sticky;top:0;z-index:var(--z-sticky);transform:translateY(0);transition:transform 320ms var(--ease-out)}
.nav.is-compact{transform:translateY(calc(var(--banner-h) * -1))}
.nav.is-dismissed{transform:none}
.nav__banner{position:relative;height:var(--banner-h);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding-inline:var(--space-md) calc(44px + var(--space-md));background:var(--color-accent-tint);color:var(--color-ink)}
.nav.is-dismissed .nav__banner{display:none}
.nav__banner-text{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__banner-dot{width:8px;height:8px;flex-shrink:0;border-radius:var(--radius-pill);background:var(--color-accent-deep)}
.nav__banner-link{min-height:0;padding:var(--space-2xs) var(--space-xs);border:0;background:var(--color-transparent);color:var(--color-ink);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.nav__banner-link:hover{background:var(--color-transparent);transform:none;color:var(--color-link)}}
.nav__banner-x{position:absolute;inset-inline-end:var(--space-xs);top:50%;translate:0 -50%;width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--color-transparent);color:var(--color-muted);font-size:0}
.nav__banner-x::before,.nav__banner-x::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:currentColor}
.nav__banner-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.nav__banner-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media(hover:hover){.nav__banner-x:hover{color:var(--color-ink);transform:none}}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);height:var(--bar-h);padding-inline:clamp(16px,4vw,64px);background:var(--color-paper);border-bottom:var(--rule-width) solid var(--color-rule);transition:box-shadow var(--dur-short) var(--ease-out)}
.nav.is-scrolled .nav__bar{box-shadow:var(--shadow-nav)}
.wordmark{display:flex;align-items:center;gap:var(--space-xs);font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--color-ink);font-size:var(--text-lg);white-space:nowrap;text-decoration:none}
.brandmark{display:inline-block;color:var(--color-accent-deep);font-size:1.75rem;line-height:1;animation:brand-pulse 4s var(--ease-in-out) infinite}
@keyframes brand-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes brand-wobble{0%{transform:rotate(0)}30%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}100%{transform:rotate(0)}}
@media(hover:hover){.wordmark:hover .brandmark{animation:brand-wobble 480ms var(--ease-out)}}
.brand-en{display:none;font-family:var(--font-mono);font-weight:400;font-size:var(--text-xs);letter-spacing:.1em;color:var(--color-muted);margin-left:var(--space-sm)}
.btn-outline{border:1.5px solid var(--color-ink);background:var(--color-transparent);color:var(--color-ink);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-md);font-weight:600}
.btn__arrow{display:inline-block;transition:transform var(--dur-short) var(--ease-out)}
@media(hover:hover){.btn-outline:hover{background:var(--color-accent-tint);transform:translateY(-1px)}.btn-outline:hover .btn__arrow{transform:translate(2px,-2px)}}
.btn-outline:active{transform:translateY(1px)}
/* ---- Stat-Led hero ---- */
main{max-width:1400px;margin:auto;padding:var(--space-xl) clamp(16px,4vw,64px) var(--space-2xl)}
.page-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl);align-items:end;margin-bottom:var(--space-2xl)}
.lede{font-size:var(--text-lg);color:var(--color-ink-2);margin-top:var(--space-md)}
.coverage{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);letter-spacing:.02em;margin-top:var(--space-sm)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);padding:var(--space-lg) var(--space-xl);background:var(--color-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);font-variant-numeric:tabular-nums}
.stat{display:flex;flex-direction:column;gap:var(--space-2xs);color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em}
.stat b{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--color-ink)}
.stat:last-child{grid-column:1/-1;border-top:1px dashed var(--color-rule);padding-top:var(--space-md)}
.stat:last-child b{width:fit-content;padding-inline:.06em;font-size:var(--text-figure);color:var(--color-coral);background-image:linear-gradient(var(--color-accent-soft) 0 0);background-repeat:no-repeat;background-size:100% .16em;background-position:0 .86em}
.loading{padding:var(--space-3xl) var(--space-md);text-align:center;color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-sm)}
.loading::before{content:"";display:inline-block;width:8px;height:8px;margin-right:var(--space-xs);border-radius:var(--radius-pill);background:var(--color-accent-deep);animation:brand-pulse 1.2s var(--ease-in-out) infinite}
/* ---- reveal (added by ui.js, one-shot) ---- */
.will-reveal{opacity:0;transform:translateY(12px)}
.will-reveal.revealed{opacity:1;transform:none;transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
/* ---- workspace ---- */
.workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
[hidden]{display:none!important}
.author-pane{padding:var(--space-lg);background:var(--color-tint);border-radius:var(--radius-card);align-self:start}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
#selectionCount{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-ink);background:var(--color-accent-tint);border-radius:var(--radius-pill);padding:var(--space-3xs) var(--space-xs);font-variant-numeric:tabular-nums;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out)}
#selectionCount.is-full{background:var(--color-coral-tint)}
.hint,.aside-note{font-size:var(--text-xs);color:var(--color-muted)}
.hint{margin-top:var(--space-sm)}
.selection-tools{display:flex;justify-content:space-between;gap:var(--space-sm);margin:var(--space-sm) 0}
.text-button{min-height:44px;border:0;background:var(--color-transparent);color:var(--color-link);padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}
@media(hover:hover){.text-button:hover{background:var(--color-transparent);transform:none;text-decoration:underline;text-underline-offset:3px}}
.selection-message{color:var(--color-error);font-size:var(--text-sm);min-height:24px;margin-bottom:var(--space-sm)}
.author-list{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-sm);max-height:440px;overflow:auto;scrollbar-width:thin;padding:var(--space-xs)}
.author-card{--person-color:var(--color-muted);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-input);background:var(--color-card);color:var(--color-ink);transition:transform var(--dur-short) var(--ease-spring),box-shadow var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}
.author-card.selected{border-color:var(--person-color);background:color-mix(in oklch,var(--person-color) 8%,var(--color-card))}
@media(hover:hover){.author-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);background:color-mix(in oklch,var(--person-color) 12%,var(--color-card))}}
.author-card input{accent-color:var(--person-color);width:18px;height:18px;min-height:18px;cursor:pointer}
.check-label{display:grid;place-items:center;width:32px;min-height:44px;flex-shrink:0}
.author-open{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0;min-height:44px;padding:var(--space-xs) 0;border:0;background:var(--color-transparent);color:var(--color-ink);text-align:left;white-space:normal}
@media(hover:hover){.author-open:hover{background:var(--color-transparent);transform:none}}
@media(hover:hover){.author-open:hover .author-label strong{color:var(--color-link)}}
.monogram{display:grid;place-items:center;width:36px;height:40px;flex-shrink:0;border-radius:var(--radius-sm);font:700 var(--text-lg) var(--font-display);color:var(--person-color);background:color-mix(in oklch,var(--person-color) 12%,var(--color-card))}
.author-label{min-width:0;flex:1}
.author-label strong{display:block;font-size:var(--text-base);font-weight:600}
.author-label small{display:block;color:var(--color-muted);font-size:var(--text-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.author-num{font-weight:700;font-variant-numeric:tabular-nums;color:var(--person-color);font-size:var(--text-lg)}
.aside-note{margin-top:var(--space-lg);line-height:1.7}
.analysis-pane{min-width:0}
/* ---- filters ---- */
.filters{display:flex;align-items:end;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-lg)}
.field{display:flex;flex:1;min-width:125px;flex-direction:column;gap:var(--space-xs)}
.field label{font-size:var(--text-sm);font-weight:500;color:var(--color-muted)}
select,input[type=month]{width:100%;min-width:0;min-height:44px;border:1px solid var(--color-rule);border-radius:var(--radius-input);padding:var(--space-sm);background:var(--color-card);color:var(--color-ink);outline:2px solid var(--color-transparent);outline-offset:1px;transition:background-color var(--dur-short) var(--ease-out)}
@media(hover:hover){select:hover,input[type=month]:hover{background:var(--color-tint)}}
select:focus-visible,input[type=month]:focus-visible{outline-color:var(--color-focus);background:var(--color-accent-tint)}
input[aria-invalid=true]{border-color:var(--color-error)}
select:disabled,input[type=month]:disabled{opacity:.55;cursor:not-allowed}
.range-dash{padding-bottom:var(--space-sm);color:var(--color-muted);display:none}
.quiet{border:0;background:var(--color-transparent);color:var(--color-muted)}
@media(hover:hover){.quiet:hover{background:var(--color-tint);color:var(--color-ink);transform:none}}
.range-error{flex-basis:100%;min-height:1lh;font-size:var(--text-sm);color:var(--color-error)}
/* ---- chart panels ---- */
.chart-panel{margin-bottom:var(--space-xl);padding:var(--space-lg);border-radius:var(--radius-card);background:var(--color-card);box-shadow:var(--shadow-card)}
.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.chart-heading p{font-size:var(--text-sm);color:var(--color-muted);margin-top:var(--space-xs)}
.chart-unit{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted)}
.legend{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);min-height:44px;align-items:center;margin-top:var(--space-md);font-size:var(--text-sm)}
.legend-item{display:inline-flex;align-items:center;gap:var(--space-sm)}
.legend-mark{width:18px;height:4px;border-radius:var(--radius-pill);background:var(--person-color)}
.legend-mark.dashed{height:0;background:var(--color-transparent);border-top:2px dashed var(--color-total)}
.chart{position:relative;min-width:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--color-rule) var(--color-card)}
.chart svg{display:block;width:100%;height:300px;overflow:visible;font-family:var(--font-mono);font-size:11px}
.chart-grid{stroke:var(--color-rule);stroke-dasharray:2 5;stroke-width:1}
.axis-text{fill:var(--color-muted);font-size:11px}
.line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-point{stroke:var(--color-card);stroke-width:1.5}
.hit-point{fill:var(--color-transparent);cursor:crosshair}
.hit-point:hover,.hit-point:focus-visible{fill:var(--color-well);opacity:.45}
.readout{min-height:45px;display:flex;align-items:center;gap:var(--space-sm) var(--space-md);flex-wrap:wrap;font-size:var(--text-sm);padding:var(--space-sm) 0;color:var(--color-muted)}
.readout b{color:var(--color-ink);font-weight:600}
.readout-value{color:var(--person-color);font-weight:600}
.chart-note{color:var(--color-muted);font-size:var(--text-xs);margin-top:var(--space-sm);line-height:1.7}
.total-toggle{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);cursor:pointer;min-height:44px}
.total-toggle input{accent-color:var(--color-ink);min-height:18px;width:16px;height:16px}
.empty{min-height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:var(--space-md);color:var(--color-muted)}
.empty::before{content:"♮";display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-pill);background:var(--color-accent-tint);color:var(--color-accent-deep);font:700 1.75rem var(--font-display)}
/* ---- push button (primary) ---- */
#profileCompare,.empty button{--btn-face:var(--color-accent);--btn-edge:var(--color-accent-deep);border:0;border-radius:var(--radius-pill);background:var(--btn-face);color:var(--color-accent-ink);font-weight:600;padding:.8rem 1.4rem;box-shadow:0 4px 0 0 var(--btn-edge),0 6px 12px -3px var(--color-accent-cast);transition:transform 140ms var(--ease-press),box-shadow 140ms var(--ease-press)}
@media(hover:hover){#profileCompare:hover,.empty button:hover{transform:translateY(-2px);background:var(--btn-face);box-shadow:0 6px 0 0 var(--btn-edge),0 12px 22px -4px var(--color-accent-cast)}}
#profileCompare:active,.empty button:active{transform:translateY(3px);box-shadow:0 1px 0 0 var(--btn-edge),0 2px 6px -2px var(--color-accent-cast);transition-duration:70ms}
#profileCompare:disabled{pointer-events:none;transform:none;box-shadow:0 4px 0 0 var(--btn-edge)}
/* ---- data table ---- */
.data-panel{background:var(--color-card);border-radius:var(--radius-card);padding:var(--space-sm) var(--space-xl);box-shadow:var(--shadow-card)}
.data-panel[open] .table-wrap{animation:rise var(--dur-long) var(--ease-out)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
summary{cursor:pointer;min-height:44px;line-height:44px;font-size:var(--text-sm);font-weight:500}
summary span{color:var(--color-muted);margin-left:var(--space-sm);font-weight:400}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm);white-space:nowrap}
caption.hint{text-align:left;padding-block:var(--space-sm)}
th,td{text-align:left;padding:var(--space-sm);border-bottom:1px solid var(--color-rule);font-variant-numeric:tabular-nums}
th{font-weight:500;color:var(--color-muted)}
th small,td small{display:block;color:var(--color-muted);font-size:var(--text-xs)}
tbody tr{transition:background-color var(--dur-micro) var(--ease-out)}
@media(hover:hover){tbody tr:hover{background:var(--color-tint)}}
/* ---- Ft8 marquee footer ---- */
footer{margin-top:var(--space-2xl)}
.foot-marquee{overflow:hidden;border-top:2px solid var(--color-ink)}
.foot-marquee__track{display:flex;width:max-content;white-space:nowrap;padding-block:var(--space-md);animation:foot-marquee 36s linear infinite}
.foot-marquee__track span{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:clamp(1rem,2.5vw,1.5rem);color:var(--color-ink)}
.foot-marquee__track i{font-style:normal;color:var(--color-accent-deep)}
@keyframes foot-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(hover:hover){.foot-marquee:hover .foot-marquee__track{animation-play-state:paused}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;color:var(--color-muted);font-size:var(--text-xs);padding:var(--space-md) clamp(16px,4vw,64px);border-top:var(--rule-width) solid var(--color-rule)}
/* ---- dialogs ---- */
dialog{position:fixed;inset:0;margin:auto;width:min(680px,calc(100% - 32px));max-height:85dvh;padding:0;border:0;border-radius:var(--radius-card);background:var(--color-card);color:var(--color-ink);box-shadow:var(--shadow-pop);overscroll-behavior:contain}
dialog::backdrop{background:var(--color-backdrop)}
.dialog-inner{position:relative;padding:var(--space-xl)}
.close{position:relative;float:right;width:44px;height:44px;padding:0;margin-left:var(--space-md);border:0;border-radius:var(--radius-pill);background:var(--color-tint);color:var(--color-ink-2);font-size:0;transition:transform var(--dur-short) var(--ease-out),background-color 160ms var(--ease-out)}
.close::before,.close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:currentColor}
.close::before{transform:translate(-50%,-50%) rotate(45deg)}
.close::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media(hover:hover){.close:hover{color:var(--color-ink);transform:rotate(90deg)}}
.profile-heading{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}
.profile-heading .monogram{width:64px;height:72px;font-size:2.5rem;border-radius:var(--radius-md);color:var(--color-ink);background:var(--color-accent-tint)}
#profileName{font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em}
.profile-en{color:var(--color-muted);font-size:var(--text-sm)}
.profile-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);padding:var(--space-lg) 0}
.profile-stats b{display:block;font-size:var(--text-xl);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.profile-stats span{font-size:var(--text-xs);color:var(--color-muted)}
.status{display:inline-block;background:var(--color-accent-tint);color:var(--color-ink);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-md);font-size:var(--text-sm);margin-bottom:var(--space-md)}
.dialog-inner p{margin-block:var(--space-sm);line-height:1.8}
.dialog-inner ul{padding-left:var(--space-lg)}
.dialog-inner li{margin-bottom:var(--space-sm)}
.dialog-note{color:var(--color-muted);font-size:var(--text-sm)}
.source-list{display:grid;gap:var(--space-sm);padding:0;list-style:none}
.source-list a{display:block;min-height:44px;font-size:var(--text-sm)}
/* ---- star-burst (primary action complete) ---- */
.star-burst{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;pointer-events:none;z-index:10;background:linear-gradient(90deg,var(--color-transparent) 47%,var(--color-coral) 47% 53%,var(--color-transparent) 53%),linear-gradient(0deg,var(--color-transparent) 47%,var(--color-coral) 47% 53%,var(--color-transparent) 53%);animation:star-burst 420ms var(--ease-out) forwards}
@keyframes star-burst{0%{transform:scale(0) rotate(0deg);opacity:1}60%{transform:scale(1.2) rotate(35deg);opacity:.9}100%{transform:scale(1.4) rotate(45deg);opacity:0}}
/* ---- breakpoints ---- */
@media(min-width:40rem){
.brand-en{display:inline}
.author-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.range-dash{display:block}
.field{flex:0 1 175px}.field:first-child{flex-basis:110px}
.chart svg{height:310px}}
@media(min-width:60rem){
.page-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.stats{transform:rotate(.8deg)}
.workspace{grid-template-columns:300px minmax(0,1fr)}
.author-pane{position:sticky;top:calc(var(--bar-h) + var(--space-lg))}
.author-list{grid-template-columns:minmax(0,1fr);max-height:calc(100dvh - 340px);min-height:360px}
.chart-panel{padding:var(--space-lg) var(--space-xl)}}
@media(max-width:39.99rem){
.nav__banner-text{font-size:.7rem}
.wordmark{font-size:var(--text-base)}
h1{font-size:2rem}
.page-head{gap:var(--space-lg)}
.stats{padding:var(--space-md) var(--space-lg)}
.chart-panel,.author-pane{padding:var(--space-md)}
.chart-heading{align-items:start;flex-direction:column;gap:var(--space-sm)}
.chart-heading h2{font-size:1.125rem}
.chart-unit{display:none}
.dialog-inner{padding:var(--space-lg)}
.chart svg{min-width:560px}
.album-chart svg{min-width:850px}
.filters .quiet{width:100%}
.foot-meta{flex-direction:column;align-items:start;gap:var(--space-sm)}
.author-list{max-height:260px}
.aside-note{margin-top:var(--space-sm)}}
@media(pointer:coarse){.nav__banner-x{width:44px;height:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:150ms!important;animation-iteration-count:1!important;transition-duration:150ms!important;scroll-behavior:auto!important}
.brandmark,.foot-marquee__track,.loading::before{animation:none!important}
.will-reveal{opacity:1;transform:none}
button:active,#profileCompare:active,.empty button:active{transform:none}}