.site-footer {position:relative;}
.footer-spark-track {position:absolute;left:0;right:0;top:-4px;height:8px;overflow:hidden;pointer-events:none;}
.footer-spark {position:absolute;left:0;top:3px;width:110px;height:2px;pointer-events:none;opacity:0;
 background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 35%,transparent) 65%,var(--accent) 96%,transparent);
 filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 45%,transparent));}
.footer-count-rolling {color:transparent!important;}
.footer-count-roll {position:fixed;z-index:30;pointer-events:none;white-space:pre;font-variant-numeric:tabular-nums;}
.footer-count-digit {display:block;position:absolute;overflow:hidden;white-space:pre;}
.footer-count-reel {display:block;position:relative;}
.footer-count-moving {will-change:transform;}
.footer-count-reel > span {display:block;height:var(--footer-count-row);line-height:var(--footer-count-row);}
.footer-dm-tip {width:max-content;max-width:calc(100vw - 24px);padding:13px 17px;font:600 12px/1.6 Consolas,monospace;}
html[data-night-mode="on"] .footer-dm-tip {color:#dbcbd1;border-color:#8a536c55;
 background:linear-gradient(125deg,#ffffff07,transparent),#1b1018b8;
 box-shadow:inset 0 1px 0 #ffffff08,0 8px 28px #0003;backdrop-filter:blur(14px) saturate(115%);}

@media(min-width:641px) {
 .home-page #works > .section-heading {align-items:center;}
 .home-page #works .works-heading-note,.home-page #works .works-heading-hint {align-self:center;align-items:center;margin-bottom:0;font:11px/1.55 Consolas,monospace;}
}
@media(prefers-reduced-motion:reduce) {.footer-spark {display:none;}.footer-count-reel {will-change:auto;}}

/* Place both work captions beside the lower edge of the heading. */
@media(min-width:641px) {
 .home-page #works .works-heading-note,
 .home-page #works .works-heading-hint {position:relative;top:7px;}
}

/* Work section progress label. */
.home-page #works .works-heading-wip {color:#d7ba70;font:11px/1.55 Consolas,monospace;white-space:nowrap;}
@media(min-width:641px) {
 .home-page #works > .section-heading {grid-template-columns:max-content minmax(0,max-content) minmax(36px,1fr) auto;}
 .home-page #works .works-heading-wip {grid-column:3;grid-row:1;justify-self:center;align-self:center;position:relative;top:7px;}
 .home-page #works .works-heading-hint {grid-column:4;}
}
@media(max-width:640px) {
 .home-page #works .works-heading-wip {grid-column:2;grid-row:2;justify-self:end;align-self:start;}
 .home-page #works .works-heading-note {grid-column:1;max-width:calc(100% - 40px);}
}


/* Balance the music area without moving the work section. */
.home-page .listening-section {margin-top:30px;margin-bottom:30px;}
@media (min-width:1100px) {
 .home-page .listening-section {margin-top:40px;margin-bottom:40px;}
}
@media (max-width:600px) {
 .home-page .listening-section {margin-top:24px;margin-bottom:36px;}
}
.home-page .music-history,
.home-page .music-history > summary,
.home-page .music-history > summary > span {user-select:text;-webkit-user-select:text;}

/* Raise the music area slightly and bring its history control closer. */
.home-page .listening-section {margin-top:18px;margin-bottom:60px;}
.home-page .listening-section > .music-history {margin-top:-8px;}
@media (min-width:1100px) {
 .home-page .listening-section {margin-top:28px;margin-bottom:70px;}
}
@media (max-width:760px) {
 .home-page .listening-section {margin-bottom:50px;}
 .home-page .listening-section > .music-history {margin-top:2px;}
}
@media (max-width:600px) {
 .home-page .listening-section {margin-top:12px;margin-bottom:56px;}
}

/* Compact footer metadata; the portal follows the escaped row via ResizeObserver. */
.home-page .personal-footer > .build-meta,
.home-page .personal-footer > .view-counter,
.home-page .personal-footer > .night-escape-counter {margin-top:-6px;}

.home-page .personal-footer .view-counter:not([hidden]) + .night-escape-counter {margin-top:-9px;}


/* Hero glyph overhang: leave paint room after the final tracked letter without moving the line. */
html:not([data-night-mode="on"]) body.home-page .home-hero h1 em .hero-shimmer {
 padding-inline-end:.08em;
 margin-inline-end:-.08em;
 max-width:calc(100% + .08em);
}
/* End hero glyph overhang. */

/* Language labels: explicit alignment plus a one-pixel optical lift for lowercase glyphs. */
.header-controls #language.language-toggle {
 display:grid;
 place-items:center;
 padding:0 0 2px;
 line-height:1;
 text-align:center;
}
/* End language label alignment. */