/* A quiet site console: location on the left, visitor controls on the right. */
:root{--bottom-bar-height:calc(44px + env(safe-area-inset-bottom,0px))}
.station{height:calc(100dvh - var(--promo-height) - var(--bottom-bar-height))}
.bottom-line{
  height:var(--bottom-bar-height);z-index:12;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:24px;padding:0 20px env(safe-area-inset-bottom,0px);align-items:center;isolation:isolate;
  background:linear-gradient(100deg,#080b19f5,#111326f7 68%,#101527f7);
  border-top:1px solid #bba8e52c;box-shadow:0 -8px 30px #03050b36;
  color:#beb5cb;font:9px/1.4 Jet,monospace;letter-spacing:.025em;
}
.bottom-line::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#9f82d752 17%,transparent 49%,#91c9de54 83%,transparent)}
.bottom-breadcrumb{min-width:0;overflow:hidden}
.bottom-breadcrumb ol{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;min-width:0}
.bottom-breadcrumb li{min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bottom-breadcrumb li:first-child{flex:0 0 auto;color:#d9d0e1}
.bottom-breadcrumb li+li::before{content:'›';display:inline-block;padding:0 13px;color:#766780;font:15px/1 Cormorant,Georgia,serif;vertical-align:baseline}
.bottom-breadcrumb a{color:#a49aad;text-decoration:none;transition:color .2s}
.bottom-breadcrumb li:first-child a{color:#d5cbdc}
.bottom-breadcrumb a:hover{color:#d1e8f1}
.bottom-breadcrumb [aria-current=page]{color:#f0e4d6}
.bottom-breadcrumb a:focus-visible{outline:1px solid var(--ice);outline-offset:-1px;border-radius:1px}
.bottom-controls{display:flex;align-items:center;align-self:stretch;gap:0;flex-shrink:0;border-left:1px solid #bba8e51c}
.bottom-control{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:44px;min-height:42px;padding:0 15px;border:0;border-radius:0;
  background:transparent;color:#c4b9cf;font:9px/1.35 Jet,monospace;letter-spacing:.015em;
  transition:color .2s,background .2s;white-space:nowrap;isolation:isolate;
}
.bottom-control+.bottom-control{border-left:1px solid #bba8e51c}
.bottom-control::before{content:'';position:absolute;left:9px;top:50%;width:28px;height:28px;transform:translateY(-50%) rotate(-35deg);border:1px solid #a5c4e32e;border-radius:50%;opacity:0;transition:opacity .2s,transform .4s;pointer-events:none;z-index:-1}
.bottom-control:hover:not(:disabled){color:#f3e6d2;background:linear-gradient(0deg,#a17bc219,transparent)}
.bottom-control:hover:not(:disabled)::before,.bottom-control:focus-visible::before{opacity:1;transform:translateY(-50%) rotate(0deg)}
.bottom-control:focus-visible{outline:2px solid var(--ice);outline-offset:-4px}
.bottom-control[aria-pressed=true]{color:#c0e1ee;background:#86b8d20a}
.bottom-control:disabled,.bottom-control[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.bottom-control-icon{display:block;width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;overflow:visible;color:#b9a5d0}
.bottom-control[aria-pressed=true] .bottom-control-icon,.bottom-control[data-sound-enabled=true] .bottom-control-icon{color:#b4e1ec;filter:drop-shadow(0 0 5px #81b9de38)}
.bottom-control-value{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:#8fbdd0}
.bottom-control-value:empty{display:none}
.bottom-control .sound-waves,.bottom-control .fullscreen-exit{display:none}
.bottom-control[data-sound-enabled=true] .sound-waves,.bottom-control[aria-pressed=true] .fullscreen-exit{display:block}
.bottom-control[data-sound-enabled=true] .sound-muted,.bottom-control[aria-pressed=true] .fullscreen-enter{display:none}

@media(max-width:1023px){
  .station{height:calc(100dvh - 42px - var(--promo-height) - var(--bottom-bar-height))}
  .bottom-line{gap:12px;padding-inline:14px;font-size:8px}
  .bottom-control{padding-inline:12px;font-size:8px}
  .bottom-control-value{max-width:95px;font-size:7px}
}
@media(max-width:700px){
  .bottom-breadcrumb li:not(:first-child):not(:last-child){display:none}
  .bottom-breadcrumb li+li::before{padding:0 9px}
  .bottom-control-value{max-width:80px}
}
@media(max-width:600px){
  :root{--bottom-bar-height:calc(48px + env(safe-area-inset-bottom,0px))}
  .bottom-line{gap:10px;padding-inline:12px;font-size:8px;letter-spacing:0}
  .bottom-control{width:44px;min-width:44px;min-height:46px;padding:0;gap:0}
  .bottom-control-icon{width:17px;height:17px;flex-basis:17px}
  .bottom-control::before{left:8px;width:26px;height:26px}
  .bottom-control-name,.bottom-control-value{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .bottom-controls{border-left-color:#bba8e526}
}
@media(max-width:360px){.bottom-line{padding-inline:8px;gap:6px}.bottom-breadcrumb li+li::before{padding-inline:6px}}
@media(prefers-reduced-motion:reduce){.bottom-control,.bottom-control::before,.bottom-breadcrumb a{transition:none}}
@media(forced-colors:active){
  .bottom-line{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}
  .bottom-line::before,.bottom-control::before{display:none}
  .bottom-breadcrumb a,.bottom-breadcrumb li:first-child a{color:LinkText}
  .bottom-breadcrumb [aria-current=page],.bottom-control,.bottom-control-value,.bottom-control-icon{color:CanvasText}
  .bottom-controls,.bottom-control+.bottom-control{border-color:CanvasText}
  .bottom-control[aria-pressed=true]{outline:1px solid Highlight;outline-offset:-4px}
  .bottom-control:focus-visible,.bottom-breadcrumb a:focus-visible{outline-color:Highlight}
}
