/* The original hero layout stays in place below a compact, fixed navigation. */
:root{--browser-tint:#896b74;background:var(--browser-tint)}
body,body.dimmed{background:var(--browser-tint)}
.site-wrap{background:var(--paper)}
.site-header{
  position:fixed;z-index:30;inset:0 0 auto;transform:none;width:100%;
  height:calc(104px + var(--night-safe-top));
  padding:var(--night-safe-top) max(32px,calc((100% - 1062px)/2)) 0;
  color:#fff0db;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s,box-shadow .25s;
}
.site-header.is-scrolled{
  background:var(--browser-tint);color:#735c69;border-color:#d9c5ca66;
  box-shadow:0 3px 18px #4c354309;
}
.site-header :is(.logo,.logo-symbol,.logo-dot){color:inherit}
.header-actions{display:flex;align-items:center;gap:10px}
.site-header .header-control{
  position:relative;display:grid;place-items:center;flex:none;
  width:44px;height:44px;min-height:44px;padding:0;gap:0;
  border:1px solid #f4e4cf66;border-radius:50%;
  background:#fff5e90a;color:inherit;box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,border-color .2s,transform .2s;
}
.site-header .header-control:hover{background:#fff5e91a;transform:none}
.site-header .header-control:active{transform:scale(.94)}
.site-header .header-control:focus-visible,.site-header .logo:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.site-header.is-scrolled .header-control{border-color:#a68b9866;background:#fffaf52e}
.light-icon{width:24px;height:24px;overflow:visible}
.light-rays{transition:opacity .25s}
.record-disc{
  position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:repeating-radial-gradient(circle,#4f3f49 0 1px,#6d5662 1px 2px,#4f3f49 2px 3px);
  box-shadow:0 0 0 1px #e8c5b758,0 2px 5px #32232b26;
  animation:record-turn 12s linear infinite;animation-play-state:paused;
}
.record-disc:before{content:'';position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from 35deg,transparent 0 12%,#f5d5b52e 15%,transparent 25% 62%,#f5d5b52e 65%,transparent 76%)}
.record-label{position:relative;display:grid;place-items:center;width:12px;height:12px;border-radius:50%;background:#d9a0a7;box-shadow:0 0 0 1px #30222b26}
.record-label:after{content:'';width:3px;height:3px;border-radius:50%;background:#fff0db}
.music-muted{position:absolute;right:1px;bottom:1px;width:14px;height:14px;fill:#725764;stroke:#fff0db;stroke-width:1.3;stroke-linecap:round}
.music-switch.is-playing .record-disc{animation-play-state:running}
.music-switch.is-playing .music-muted{opacity:0}
.music-switch[aria-disabled="true"]{opacity:.65}
.music-status{position:absolute;top:calc(100% - 4px);right:max(32px,calc((100% - 1062px)/2));max-width:250px;margin:0;padding:10px 14px;border-radius:14px;background:#fff8ef;color:#735c69;box-shadow:0 5px 24px #4c35431a;font-size:13px;line-height:1.6}
.music-status[hidden]{display:none}
body.dimmed .site-header :is(.logo,.logo-symbol,.logo-dot){color:inherit}
body.dimmed .site-header .header-control{background:#59434b26;border-color:#ebd8c966;color:inherit}
body.dimmed .site-header .light-rays{opacity:.2}
body.dimmed .site-header.is-scrolled{color:#f4ddcf;border-color:#b295ab33}
body.dimmed .music-status{background:#49384e;color:#f4ddcf}
@keyframes record-turn{to{transform:rotate(360deg)}}
@media(max-width:700px){
  .site-header{height:calc(72px + var(--night-safe-top));padding-inline:26px}
  .header-actions{gap:8px}
  .music-status{right:26px}
}
@media(max-width:365px){.site-header{padding-inline:18px}.music-status{right:18px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .site-header,.site-header .header-control,.light-rays{transition:none}
  .record-disc{animation:none}
}