/* A quiet circular player follows the lower end of the left reading rail. */
.music-row{--music-size:30px;position:fixed;left:var(--music-left,max(2px,calc((100vw - 1184px)/2 - 41px)));top:var(--music-top,calc(50% + 128px));width:var(--music-size);height:var(--music-size);z-index:15;color:var(--music-color,#6575de)}
.music-row[hidden]{display:none}
.music-volume{position:absolute;left:100%;top:50%;transform:translateY(-50%) translateX(-4px);padding:9px 12px 9px 16px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s}
.music-volume:before{content:"";position:absolute;inset:0 0 0 8px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:24px;background:#fffdf3e6;backdrop-filter:blur(12px);z-index:-1}
.music-row:hover .music-volume,.music-row:focus-within .music-volume{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)}
.music-volume input{display:block;width:90px;height:16px;margin:0;accent-color:var(--music-color,#6575de);cursor:pointer}
@media(hover:none){.music-row:focus-within .music-volume{opacity:1;visibility:visible;pointer-events:auto}}
.music-toggle{display:grid;place-items:center;width:100%;height:100%;padding:0;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:50%;color:inherit;background:color-mix(in srgb,var(--music-color,#6575de) 7%,#fffdf5c9);backdrop-filter:blur(12px);box-shadow:0 3px 12px #6d60920a;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s,box-shadow .2s}
.music-toggle:hover{border-color:color-mix(in srgb,currentColor 50%,transparent);background:color-mix(in srgb,var(--music-color,#6575de) 14%,#fffdf5e0);box-shadow:0 3px 14px #6d609218}
.music-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.music-symbol{height:100%;width:100%;border-radius:50%;display:grid;place-items:center}
.music-symbol svg{width:14px;height:14px;display:block}
.music-toggle[data-state=playing]{border-color:color-mix(in srgb,currentColor 40%,transparent)}
.music-toggle[data-state=loading] .music-symbol{animation:music-loading 1s ease-in-out infinite alternate}
.music-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes music-loading{to{opacity:.35}}
:is(.home-hero,.work-hero,main > .hero){position:relative;isolation:isolate}
:is(.home-hero,.work-hero,main > .hero):before{z-index:-2}
:is(.home-hero,.work-hero,main > .hero)>.hero-spectrum{position:absolute;inset:27px -28px 29px;z-index:-1;border-radius:36px;overflow:hidden;pointer-events:none;display:block}
.hero-spectrum canvas{width:100%;height:100%;display:block;pointer-events:none}
.site-route-notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:50;padding:12px 20px;border:1px solid #ded8e8;border-radius:25px;background:#fffcf4ed;color:#65709b;font-size:12px;box-shadow:0 6px 26px #65709b15;backdrop-filter:blur(10px)}
.site-route-notice:not(:disabled){cursor:pointer}
.site-route-notice[hidden]{display:none}
main:focus{outline:none}
::view-transition-group(page-content){animation-duration:240ms}
::view-transition-old(page-content),::view-transition-new(page-content){animation-duration:240ms}
@media(max-width:780px){:is(.home-hero,.work-hero,main > .hero)>.hero-spectrum{inset:20px -14px 28px;border-radius:27px}}
@media(max-width:1199px){.music-row{--music-size:28px}}
@media(max-width:600px){.music-row{--music-size:20px;top:var(--music-top,calc(50% + 80px))}.music-symbol svg{width:11px;height:11px}:is(.home-hero,.work-hero,main > .hero)>.hero-spectrum{inset:20px -12px 28px}}
@media(prefers-reduced-motion:reduce){.music-toggle,.music-symbol{transition:none;animation:none!important}::view-transition-old(page-content),::view-transition-new(page-content){animation:none!important}}
@media print{.music-row,.hero-spectrum,.site-route-notice{display:none!important}}