@property --curtain-index{syntax:'<number>';inherits:true;initial-value:0}
#navigation.curtain-nav .curtain-art,#navigation.curtain-nav svg{display:none}
#navigation.curtain-nav .curtain-label{margin:0}
body:has(#navigation.curtain-nav) .text-editor-toolbar{top:auto;bottom:var(--text-editor-bottom,68px)}
@media(min-width:1051px){
  #navigation.curtain-nav{--curtain-index:0;position:relative;isolation:isolate;width:420px;max-width:100%;height:78px;display:grid;grid-template-columns:repeat(var(--curtain-count,4),minmax(0,1fr));gap:0;padding:0;align-items:stretch;flex:none;font-family:inherit;transform:none;transition:--curtain-index .34s cubic-bezier(.22,.85,.25,1);filter:drop-shadow(0 9px 15px #00000009)}
  #navigation.curtain-nav .curtain-art{display:block;pointer-events:none}
  #navigation.curtain-nav .curtain-body{position:absolute;inset:23px 0 0;border-radius:30px;background:#fff;mask-image:radial-gradient(circle 30px at calc((100% / var(--curtain-count,4)) * (var(--curtain-index) + .5)) 0,transparent 29px,#000 30px);z-index:-1}
  #navigation.curtain-nav .curtain-marker{position:absolute;top:0;left:calc((100% / var(--curtain-count,4)) * var(--curtain-index) + (100% / var(--curtain-count,4) - 46px) / 2);width:46px;height:46px;overflow:hidden;border-radius:16px;background:linear-gradient(150deg,#484845,#262624);box-shadow:0 5px 10px #0000001c;z-index:0}
  #navigation.curtain-nav .curtain-frame{position:absolute;inset:10px;border:1px solid #bdbdb157;border-radius:4px;background:linear-gradient(145deg,#e8e8db16,#ffffff04)}
  #navigation.curtain-nav .curtain-rail{position:absolute;left:10px;right:10px;top:9px;height:1px;background:#c5c5bc;border-radius:2px}
  #navigation.curtain-nav .curtain-sill{position:absolute;left:10px;right:10px;bottom:9px;height:1px;background:#aaaaa080;border-radius:2px}
  #navigation.curtain-nav .curtain-panel{position:absolute;top:12px;bottom:12px;width:12px;background:repeating-linear-gradient(90deg,#999991 0,#aeaea6 2px,#8d8d85 4px,#a5a59d 6px);box-shadow:1px 0 2px #0002;transition:width .4s cubic-bezier(.25,.8,.2,1);border-radius:2px 2px 3px 3px}
  #navigation.curtain-nav .curtain-panel.left{left:11px}#navigation.curtain-nav .curtain-panel.right{right:11px;transform:scaleX(-1)}
  #navigation.curtain-nav.is-engaged .curtain-panel{width:3px}
  #navigation.curtain-nav .curtain-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-width:0;height:78px;padding:25px 0 0;margin:0;border:0;background:transparent;box-shadow:none;color:#65655f;font-family:inherit;font-size:12px;font-weight:400;line-height:1;text-decoration:none;cursor:pointer;gap:9px;outline-offset:5px;border-radius:16px;touch-action:manipulation}
  #navigation.curtain-nav .curtain-item::before,#navigation.curtain-nav .curtain-item::after{display:none}
  #navigation.curtain-nav svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;transform:translateY(0);transition:transform .34s cubic-bezier(.22,.85,.25,1),color .18s;pointer-events:none}
  #navigation.curtain-nav .curtain-label{display:block;transition:transform .34s,color .18s;font-size:11px;letter-spacing:0;font-weight:400}
  #navigation.curtain-nav .is-active{color:#222}
  #navigation.curtain-nav .is-active svg{opacity:0;transform:translateY(-13px) scale(.72);color:white;transition:opacity .18s,transform .34s,color .18s}
  #navigation.curtain-nav.is-engaged .is-active svg{opacity:1;transition:opacity .2s .12s,transform .34s,color .18s}
  #navigation.curtain-nav .is-active .curtain-label{transform:translateY(1px)}
  #navigation.curtain-nav .curtain-item:focus-visible{outline:2px solid #555}
}
@media(prefers-reduced-motion:reduce){#navigation.curtain-nav,#navigation.curtain-nav *{transition:none!important}}
@media(min-width:1051px){
  #navigation.curtain-nav .curtain-item{padding-top:29px;gap:6px}
  #navigation.curtain-nav .curtain-label{font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:14px;line-height:16px;font-weight:700;letter-spacing:.01em;color:#34342f}
  #navigation.curtain-nav svg{stroke-width:1.35;transform:rotate(-2deg)}
  #navigation.curtain-nav .curtain-item:nth-of-type(2) svg{transform:rotate(2deg)}
  #navigation.curtain-nav .is-active svg{transform:translateY(-17px) scale(.72) rotate(-2deg)}
  #navigation.curtain-nav .curtain-item:nth-of-type(2).is-active svg{transform:translateY(-17px) scale(.72) rotate(2deg)}
  #navigation.curtain-nav .curtain-marker{background:radial-gradient(ellipse at 23% 19%,#ffffff0b,transparent 55%),repeating-linear-gradient(173deg,transparent 0 9px,#ffffff03 10px,transparent 11px),#30312e;box-shadow:inset 0 0 0 1px #ffffff12,0 5px 10px #0000001c}
  #navigation.curtain-nav .curtain-frame{border-color:#deded092;border-radius:2px 4px 3px 2px;background:transparent;transform:rotate(.8deg)}
  #navigation.curtain-nav .curtain-rail{background:#e2e1d2;transform:rotate(-1deg)}
  #navigation.curtain-nav .curtain-sill{background:#d0d0beaa;transform:rotate(.7deg)}
  #navigation.curtain-nav .curtain-panel{background:transparent;box-shadow:none;border:1px solid #e6e3d1b3;border-top:0;border-radius:1px 2px 3px 2px;overflow:hidden}
  #navigation.curtain-nav .curtain-panel::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' preserveAspectRatio='none'%3E%3Cpath d='M3 0Q1 8 3 13T2 22M7 0Q5 7 7 14L6 22M10 0Q8 10 10 22' fill='none' stroke='%23e6e3d1' stroke-width='.7' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.85}
  #navigation.curtain-nav.is-replaying .curtain-panel{animation:curtain-reopen .65s ease both}
  #navigation.curtain-nav.is-replaying .is-active svg{animation:curtain-symbol-reveal .65s ease both}
}
@keyframes curtain-reopen{0%,30%{width:12px}100%{width:3px}}
@keyframes curtain-symbol-reveal{0%,55%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){#navigation.curtain-nav *{animation:none!important}}