.home-page .owner-note{position:relative;margin:26px 0 0;padding:10px 20px 8px;border:1px solid color-mix(in srgb,var(--accent) 23%,var(--line));border-radius:12px 4px 12px 12px;background:radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--accent) 9%,var(--bg)),var(--bg) 78%);box-shadow:inset 2px 0 color-mix(in srgb,var(--accent) 55%,transparent);font-family:var(--mono,monospace);color:var(--text)}
.home-page .owner-note::after{content:'';position:absolute;right:0;top:0;width:14px;height:14px;background:linear-gradient(225deg,color-mix(in srgb,var(--accent) 16%,var(--bg)) 48%,transparent 51%);pointer-events:none}
.home-page .owner-note [hidden],.home-page .owner-note[hidden]{display:none!important}
.owner-note-heading,.owner-note-footer,.owner-note-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.owner-note-title{font-size:11px;color:var(--muted);letter-spacing:.03em}
.owner-note-heading{min-height:18px}.owner-note-time,.owner-note-typing{font-size:10px;color:var(--faint);margin-left:auto}
.home-page .owner-note-text{position:relative;font:500 18px/1.6 var(--mono,monospace);margin:4px 0 5px;padding-inline:24px;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;min-height:29px;color:var(--text)}
.home-page .owner-note-text::before{content:'✧';position:absolute;left:0;top:-1px;font:42px/1.2 'Segoe UI Symbol',serif;color:var(--accent);opacity:.12}
.home-page .owner-note button{min-width:0;min-height:0;background:transparent;color:var(--muted);border:0;padding:4px 0;font:11px/1.5 var(--mono,monospace);cursor:pointer;border-radius:4px;transition:color .2s ease}
.home-page .owner-note button:hover{color:var(--accent)}.home-page .owner-note button:focus-visible{outline:1px solid var(--accent);outline-offset:4px}.home-page .owner-note button:disabled{opacity:.4;cursor:default}
.owner-note-byline{display:none}
.home-page .owner-note .owner-note-edit{margin-left:auto;padding:0}.home-page .owner-note .owner-note-history-toggle{margin-left:auto;padding:0}
.owner-note-footer{min-height:16px}.owner-note-history-toggle::first-letter{text-transform:lowercase}
.owner-note-history{overflow:hidden}.owner-note-history ol{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--line)}.owner-note-history li{display:grid;grid-template-columns:125px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent)}.owner-note-history li:last-child{border:0}.owner-note-history time{font-size:10px;color:var(--faint);padding-top:3px}.home-page .owner-note-history p{font:12px/1.7 var(--mono,monospace);margin:0;overflow-wrap:anywhere;user-select:text;color:var(--muted)}
.owner-note-typing{display:flex;align-items:center;gap:7px;color:var(--accent)}.owner-note-dots{display:flex;gap:3px}.owner-note-dots b{width:3px;height:3px;border-radius:50%;background:currentColor;animation:owner-note-dot 1.4s ease-in-out infinite}.owner-note-dots b:nth-child(2){animation-delay:.16s}.owner-note-dots b:nth-child(3){animation-delay:.32s}@keyframes owner-note-dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.owner-note-editor{margin:14px 0}.owner-note-editor label>span{display:block;font-size:10px;color:var(--faint);margin-bottom:8px}.home-page .owner-note textarea{display:block;box-sizing:border-box;resize:vertical;width:100%;min-height:82px;max-height:180px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface) 65%,transparent);color:var(--text);padding:12px;font:16px/1.65 var(--mono,monospace);outline:none}.home-page .owner-note textarea:focus{border-color:var(--accent)}.owner-note-editor-footer{margin-top:9px}.owner-note-count{font-size:10px;color:var(--faint)}.owner-note-count.is-over-limit,.home-page .owner-note-error{color:#ef8f96}.owner-note-editor-footer>div{display:flex;gap:20px}.home-page .owner-note .owner-note-save{color:var(--accent)}.home-page .owner-note-error{font:11px/1.6 var(--mono,monospace);margin:8px 0 0}.owner-note-error:empty{display:none}.owner-note-login{font-size:11px;color:var(--accent)}
.home-page main .listening-section{margin-top:18px;margin-bottom:32px}
@media(max-width:640px){.home-page .owner-note{padding:10px 14px 8px;margin-top:18px}.home-page .owner-note-text{font-size:16px;padding-inline:16px}.owner-note-heading{flex-wrap:wrap}.owner-note-history li{grid-template-columns:1fr;gap:5px}.owner-note-time,.owner-note-typing{font-size:9px}}
@media(prefers-reduced-motion:reduce){.owner-note-dots b{animation:none;opacity:.65}.home-page .owner-note button{transition:none}}
/* Keep desktop prose readable; player height follows its actual content. */

@media(min-width:1000px) and (min-height:900px) and (max-height:1150px){
 .home-page .skills-section .section-heading{padding:10px 0 6px}
 .home-page .skills-description{margin-top:10px;line-height:1.65}
 .home-page .skills-description p{margin-bottom:14px}
 .home-page .skills-description .skill-note-trigger{line-height:inherit}
 .home-page .skills-section{padding-bottom:6px}
 .home-page .owner-note{margin-top:18px}
 .home-page main .listening-section{margin-top:18px}
}

/* Restore the original desktop hero; balance prose and player gaps around the note. */
@media(min-width:1000px){.home-page .skills-description{line-height:1.65}.home-page .skills-description p{margin-bottom:14px}.home-page .skills-description p:last-child{margin-bottom:0}.home-page .owner-note{margin-top:18px}.home-page main .listening-section{margin-top:18px}}

@media(min-width:1000px){.home-page .home-hero{padding:22px 0 20px}.home-page .home-hero h1{margin:18px 0 16px}}

/* Align the player footer and lift only its surrounding gaps. */
@media(min-width:1000px){.home-page main .listening-section{margin-top:14px}.home-page .listening-label{margin-bottom:10px}}
@media(min-width:761px){.home-page .listening-section>.listening-footnote{float:right;max-width:calc(100% - 170px);min-height:32px;margin:4px 0 0;display:flex;align-items:center;justify-content:flex-end}.home-page .listening-section>.music-history{margin-top:4px}.home-page .listening-section>.music-history>summary{width:max-content;max-width:100%}}

/* Keep the next section below the first tall desktop view; spacing stays after the music. */
@media(min-width:1000px) and (min-height:1200px){.home-page main .listening-section{margin-bottom:84px}}

/* Match the divider-to-title space used by What I Do at each breakpoint. */
.home-page {--section-title-top:23px;}
@media(min-width:1100px){.home-page {--section-title-top:16px;}}
@media(max-width:600px){.home-page {--section-title-top:20px;}}
@media(min-width:1000px) and (min-height:900px) and (max-height:1150px){.home-page {--section-title-top:10px;}}
.home-page #works > .section-heading,
.home-page #wall > .section-heading {padding-top:var(--section-title-top);}

/* Reserve the note frame before its first network response. */
.home-page .owner-note {min-height:92px;box-sizing:border-box;}
.home-page .owner-note.is-loading .owner-note-text::after {content:"";display:block;width:min(240px,55%);height:12px;margin:12px auto 0;border-radius:4px;background:color-mix(in srgb,var(--muted) 12%,transparent);}

/* Favorite artists is a popover; playback and footer keep their geometry. */
.home-page .listening-section.artists-open:not(.artists-outside){display:block}.home-page .listening-section.artists-open:not(.artists-outside)>.music-artists-panel{position:absolute;left:auto;right:0;top:34px;width:280px;max-width:100%;margin:0}

/* Keep every favorite artist reachable in a short viewport without moving playback. */
.music-artists-panel:not([hidden]){display:flex;flex-direction:column;max-height:calc(100vh - 32px);max-height:var(--artists-available-height,calc(100dvh - 32px));box-sizing:border-box;overflow-anchor:none}.music-artists-panel>strong,.music-artists-panel>p,.music-artists-credit{flex-shrink:0}.music-artists-panel>ol{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 0}.music-artists-panel>ol:focus-visible{outline:1px solid var(--line);outline-offset:4px;border-radius:3px}.music-artists-credit{align-self:flex-end;max-width:100%;margin:0 0 7px;padding:3px 0;border:0;background:none;color:#98e5ac;font:inherit;font-size:10px;text-align:right;cursor:pointer}.music-artists-credit[hidden]{display:none}.music-artists-credit:focus-visible{outline:1px solid currentColor;outline-offset:3px;border-radius:2px}html[data-theme=light] .music-artists-credit{color:#27834c}

/* The note shares the artwork field instead of painting an opaque island. */
html:not([data-night-mode="on"]) .home-page .owner-note {
 background:radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 78%),color-mix(in srgb,var(--surface) 18%,transparent);
}
html:not([data-night-mode="on"])[data-theme="light"] .home-page .owner-note {
 background:radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 78%),color-mix(in srgb,var(--surface) 32%,transparent);
}
html:not([data-night-mode="on"]) .home-page .owner-note::after {
 background:linear-gradient(225deg,color-mix(in srgb,var(--accent) 14%,transparent) 48%,transparent 51%);
}
/* End translucent owner note. */


/* Quiet glass note: a light surface with a restrained pointer reflection. */
html:not([data-night-mode="on"]) .home-page .owner-note {
 --note-metal-hi:#edf5f7;--note-metal-mid:#83929a;--note-metal-low:#303e46;--note-rim-active:0;
 --note-shine-x:50%;--note-shine-y:0%;
 border-color:transparent;border-radius:18px;
 background:radial-gradient(ellipse at 45% 0%,color-mix(in srgb,var(--note-metal-hi) 1.5%,transparent),transparent 72%),color-mix(in srgb,var(--surface) 10%,transparent);
 box-shadow:inset 0 .5px 0 #f2fbff06;
}
html:not([data-night-mode="on"])[data-theme="light"] .home-page .owner-note {
 --note-metal-hi:#fff;--note-metal-mid:#8c9ca5;--note-metal-low:#657781;
 background:radial-gradient(ellipse at 45% 0%,#ffffff05,transparent 72%),color-mix(in srgb,var(--surface) 20%,transparent);
 box-shadow:inset 0 .5px 0 #ffffff24;
}
html:not([data-night-mode="on"]) .home-page .owner-note::before,
html:not([data-night-mode="on"]) .home-page .owner-note::after {
 content:"";display:block;position:absolute;inset:-1px;width:auto;height:auto;padding:1px;border-radius:inherit;pointer-events:none;
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;
}
html:not([data-night-mode="on"]) .home-page .owner-note::before {
 background:linear-gradient(112deg,var(--note-metal-low),var(--note-metal-mid) 12%,var(--note-metal-hi) 18%,var(--note-metal-low) 28%,var(--note-metal-mid) 58%,var(--note-metal-hi) 72%,var(--note-metal-mid) 76%,var(--note-metal-low)),linear-gradient(180deg,var(--note-metal-hi),var(--note-metal-low));
 opacity:.34;
}
html:not([data-night-mode="on"]) .home-page .owner-note::after {
 background:radial-gradient(ellipse 145px 90px at var(--note-shine-x) var(--note-shine-y),var(--note-metal-hi) 0%,color-mix(in srgb,var(--accent) 20%,var(--note-metal-hi)) 19%,var(--note-metal-mid) 38%,transparent 78%),radial-gradient(ellipse 210px 35px at calc(100% - var(--note-shine-x)) 100%,color-mix(in srgb,var(--note-metal-hi) 52%,transparent),transparent 86%);
 opacity:calc(var(--note-rim-active) * .36);transition:opacity 220ms ease-out;
}
html:not([data-night-mode="on"]) .home-page .owner-note-text::before {content:none;display:none;}
html:not([data-night-mode="on"]) .home-page .owner-note button:hover {color:var(--text);}
@media(prefers-reduced-motion:reduce) {
 html:not([data-night-mode="on"]) .home-page .owner-note::after {opacity:0;transition:none;}
}
/* End quiet glass note. */