/* The radio sits in the footer; its settings open above the bottom bar. */
#music-welcome{width:min(416px,calc(100vw - 32px));max-width:none;max-height:calc(100svh - 32px);padding:0;border:0;border-radius:0;background:transparent;color:#f1e1bd;overflow:auto;scrollbar-width:thin;scrollbar-color:#738677 transparent;box-shadow:none}
#music-welcome::backdrop{background:#031c1680;backdrop-filter:blur(12px)}
.music-welcome-card{padding:32px 32px 16px;border:1px solid #748b6e66;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 27% 66%,#37563b,#153528 50%,#0b251d);text-align:center}
.music-welcome-art{position:relative;height:208px;margin:-32px -32px 16px;overflow:hidden}
.music-welcome-branch{position:absolute;top:-8px;left:-5%;width:110%;height:104px;object-fit:cover;object-position:center;pointer-events:none}
.music-welcome-microphone{position:absolute;top:32px;left:50%;width:152px;height:176px;object-fit:contain;transform:translateX(-50%);pointer-events:none}
#music-welcome-title{margin:0;font:400 40px/40px var(--font-display);text-wrap:balance;color:#f1e1bd}
#music-welcome-description{margin:16px 0 24px;font:400 16px/24px var(--font-ui);color:#c5cfbb;text-wrap:balance}
.music-welcome-actions{display:flex;flex-direction:column;gap:8px}
.music-welcome-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 16px;border:0;border-radius:48px;font:500 14px/24px var(--font-ui);cursor:pointer}
#music-welcome-enable{background:#b5222b;color:#fff8ec}
#music-welcome-enable:hover{background:#ca3039}
#music-welcome-enable svg{width:20px;height:20px}
#music-welcome-skip{background:transparent;color:#c5cfbb}
#music-welcome-skip:hover{color:#fff0cc}
#music-welcome .music-welcome-close{position:static;display:grid;place-items:center;width:48px;height:48px;margin:16px auto 0;padding:12px;border:1px solid #82927d66;border-radius:50%;background:#163127;color:#f1e1bd}
#music-welcome .music-welcome-close svg{width:24px;height:24px}
#music-welcome .music-welcome-close:hover{background:#254335}
@media(max-width:600px){#music-welcome{inset:auto 0 16px;margin:0 auto}.music-welcome-card{padding:24px 24px 16px}.music-welcome-art{height:184px;margin:-24px -24px 16px}.music-welcome-microphone{height:152px;width:136px}#music-welcome-title{font-size:36px;line-height:40px}}
.header-actions{position:relative;display:flex;align-items:center;gap:var(--space-16)}
.music-controls{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-8);min-width:0;flex-shrink:1}
.music-controls .sound-button{width:var(--space-40);height:var(--space-40);padding:var(--space-8);flex:none}
.sound-button{width:var(--control-height);height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);border:1px solid #f1e1bd40;border-radius:var(--radius-pill);background:transparent;color:#f1e1bd;padding:var(--space-12)}
.sound-button svg{width:var(--icon-large);height:var(--icon-large);flex:none;fill:currentColor}
.sound-button:hover{background:#f1e1bd12;border-color:#f1e1bd80}
.sound-button[aria-pressed="true"]{background:#f1e1bd;color:#14392b;border-color:transparent}
.sound-button .sound-playing{display:none}
.sound-button[aria-pressed="true"] .sound-playing{display:block}
.sound-button[aria-pressed="true"] .sound-muted{display:none}
.music-caption{position:static;min-width:0;max-width:176px;min-height:var(--space-32);border:0;background:none;color:#c0c6b7;font:400 10px/16px var(--font-ui);padding:var(--space-8) 0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left}
.music-caption:hover{color:#f1e1bd;text-decoration:underline;text-underline-offset:4px}
#music-panel{position:fixed;inset:auto var(--page-gutter) calc(var(--footer-height) + var(--space-8)) auto;width:min(352px,calc(100vw - 32px));max-height:calc(100svh - var(--footer-height) - var(--space-32));overflow:auto;margin:0;padding:var(--space-24);background:#f8f3e9;color:var(--ink);border:0;border-radius:var(--radius-panel);box-shadow:0 16px 64px #0005;font:400 12px/24px var(--font-ui)}
#music-panel::backdrop{background:transparent}
#music-panel .eyebrow{color:var(--wine);font:500 10px/16px var(--font-ui);letter-spacing:2px;margin:0 0 var(--space-8)}
#music-panel h2{font:400 32px/40px var(--font-display);margin:0 0 var(--space-8)}
#music-status{color:#756b60;font:400 11px/16px var(--font-ui);margin:0 0 var(--space-16)}
.radio-actions{display:flex;gap:var(--space-8);margin-bottom:var(--space-24)}
#music-panel .radio-actions button{min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);font:500 12px/16px var(--font-ui);padding:var(--space-12) var(--space-16)}
#music-panel .radio-actions .sound-button{width:auto;background:var(--wine);color:#fff8ec;border-color:transparent}
#music-panel .radio-actions svg{width:var(--icon-small);height:var(--icon-small);fill:currentColor}
.music-volume-label{display:flex;justify-content:space-between;font-size:11px;line-height:16px}
#music-volume{appearance:none;-webkit-appearance:none;display:block;width:100%;height:40px;margin:var(--space-8) 0 var(--space-16);padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;--volume-progress:21.05%}
#music-volume::-webkit-slider-runnable-track{height:4px;border:0;border-radius:4px;background:linear-gradient(to right,var(--wine) 0 var(--volume-progress),#d8ccba var(--volume-progress) 100%)}
#music-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--wine)}
#music-volume::-moz-range-track{height:4px;border:0;border-radius:4px;background:#d8ccba}
#music-volume::-moz-range-progress{height:4px;border:0;border-radius:4px;background:var(--wine)}
#music-volume::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--wine)}
.music-credits{border-top:1px solid #d5cabc;padding-top:var(--space-16);font:400 10px/16px var(--font-ui);color:#756b60}
.music-credits p{margin:var(--space-8) 0 0}
.music-credits summary{cursor:pointer;color:var(--ink)}
.music-credits a{color:var(--wine);text-underline-offset:3px}
/* Shared footer controls on the house and tree pages. */
footer{font-size:14px;line-height:24px;letter-spacing:0}
footer>span,footer>button{font-size:14px;line-height:24px}
footer>.demo{font-size:14px;letter-spacing:0}
footer .music-controls{gap:12px;flex:none;min-height:44px}
footer .music-caption{max-width:none;min-height:44px;padding:0;font-size:14px;line-height:24px;color:inherit}
footer .footer-switch,footer.tree-footer #snow-toggle,footer #snow-toggle{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;width:auto;height:44px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:400 14px/24px var(--font-ui);cursor:pointer;opacity:1}
.footer-switch-track{position:relative;display:block;flex:none;width:40px;height:24px;border:1px solid #f1e1bd70;border-radius:24px;background:#f1e1bd0a;transition:background .18s,border-color .18s}
.footer-switch-track:before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#c7caba;transition:transform .18s,background .18s}
.footer-switch[aria-checked="true"] .footer-switch-track{background:#f1e1bd;border-color:#f1e1bd}
.footer-switch[aria-checked="true"] .footer-switch-track:before{transform:translateX(16px);background:#183b2e}
.footer-switch:hover .footer-switch-track{border-color:#fff4d7}footer .music-caption:hover{color:#fff4d7}
@media(max-width:1100px){
 :root{--footer-height:112px}
 footer:not(.tree-footer){height:var(--footer-height);min-height:var(--footer-height);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 48px;padding:8px var(--page-gutter);gap:0 16px}
 footer:not(.tree-footer)>.music-controls{grid-area:1/2;justify-self:end;height:44px;min-height:44px}
 footer:not(.tree-footer)>#progress{grid-area:1/1;justify-self:start;font-size:13px;letter-spacing:0;white-space:normal}
 footer:not(.tree-footer)>#snow-toggle{grid-area:2/2;justify-self:end}
 footer:not(.tree-footer)>.demo{grid-area:2/1;justify-self:start;white-space:normal;line-height:16px;font-size:12px;letter-spacing:0}
 .tree-footer{flex-wrap:wrap;justify-content:center;gap:8px 24px;padding-block:16px;font-size:14px}
 .tree-footer #tree-footer-count{font-size:14px}
}
@media(max-width:600px){
 footer:not(.tree-footer){column-gap:12px}footer .music-caption,footer .footer-switch,footer.tree-footer #snow-toggle,footer #snow-toggle,footer:not(.tree-footer)>#progress{font-size:12px;line-height:16px}
 footer .music-controls{gap:8px}
 .tree-footer #tree-footer-count{font-size:12px}
 #music-panel{right:var(--space-16)}
}
@media(prefers-reduced-motion:reduce){.footer-switch-track,.footer-switch-track:before{transition:none}}

@media(max-width:340px){footer .music-controls{gap:4px}}

/* Screen-reader text: kept for assistive technology, not drawn. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#music-status[hidden]{display:none}
.music-credit{margin:16px 0 0;font:400 12px/20px var(--font-ui);color:#7d776c}
.music-credit a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* Support (Ko-fi) lives in the header, with a slow rainbow running around its outline. */
@property --support-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.support-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:9999px;color:#f1e1bd;background:#0d2a21b3;text-decoration:none;font:500 14px/24px var(--font-ui);white-space:nowrap;flex:none}
.support-button svg{width:18px;height:18px;flex:none}
.support-button::before,.support-button::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--support-angle),#ff5a5a,#ffb347,#ffe866,#62f29a,#4fc8ff,#8f7bff,#ff6ad5,#ff5a5a);animation:support-spin 3.2s linear infinite}
.support-button::before{z-index:-1;padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.support-button::after{z-index:-2;inset:2px;filter:blur(10px);opacity:.28}
.support-button:hover{color:#fff7e2;background:#123528cc}
.support-button:hover::after{opacity:.45}
.support-button:focus-visible{outline:2px solid #f1e1bd;outline-offset:3px}
@keyframes support-spin{to{--support-angle:360deg}}
@media(prefers-reduced-motion:reduce){.support-button::before,.support-button::after{animation:none}}
@media(max-width:600px){.support-button{width:40px;min-height:40px;height:40px;padding:0}.support-button span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
footer>.music-controls{margin-left:auto}
/* Radio panel rhythm: title 16, buttons 24, volume, then the credit. */
#music-panel h2{margin-bottom:16px}
#music-panel .radio-actions{margin:0 0 24px}
#music-volume{height:32px;margin:4px 0 16px}
#music-panel .music-credit{margin:0}
/* Tighter: picture, title and line read as one group (feedback 12 Nov). */
#music-welcome-description{margin:8px 0 20px!important}
@media(max-width:600px){#music-welcome-description{margin:4px 0 20px!important}}
/* Tree page footer on phones and tablets: same layout as the house — count left, radio and snow stacked on the right. */
@media(max-width:1100px){
 footer.tree-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-auto-rows:44px;align-items:center;justify-content:stretch;gap:4px 16px;padding:8px var(--page-gutter)}
 footer.tree-footer>#tree-footer-count{grid-area:1/1;justify-self:start}
 footer.tree-footer>.music-controls{grid-area:1/2;justify-self:end}
 footer.tree-footer>#snow-toggle{grid-area:2/2;justify-self:end;width:auto;margin:0}
}