.branched-menu {
  --bm-w: 240px;
  --bm-ink: #f5f5f5;
  --bm-accent: #f5f5f5;
  --bm-line: #3f3f46;
  --bm-font: 14px;
  --bm-row: 36px;
  --bm-indent: 40px;
  --bm-line-w: 1.5;
  --bm-draw: 400ms;
  --bm-fold: 300ms;
  --bm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bm-muted: color-mix(in srgb, var(--bm-ink) 55%, transparent);

  position: relative;
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: min(var(--bm-w), 100%);
  padding-left: 14px;
  color: var(--bm-ink);
  font-family: inherit;
  font-size: var(--bm-font);
  line-height: 1.2;
}

.branched-menu::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(to bottom, var(--bm-line) 0%, var(--bm-line) 55%, transparent 100%);
}

.branched-menu__marker {
  position: absolute;
  top: -1px;
  left: 0;
  z-index: 1;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: var(--bm-accent);
  opacity: 0;
  transition:
    top 220ms var(--bm-ease-out),
    opacity 150ms ease;
}

.branched-menu__marker[data-on] {
  opacity: 1;
}

.branched-menu__section {
  display: flex;
  flex-direction: column;
}

.branched-menu__head {
  display: block;
  margin: 0;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--bm-muted);
  font: inherit;
  font-size: calc(var(--bm-font) + 1px);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}

.branched-menu__section[data-open] .branched-menu__head,
.branched-menu__head[data-active] {
  color: var(--bm-ink);
}

@media (hover: hover) and (pointer: fine) {
  .branched-menu__head:hover {
    color: var(--bm-ink);
  }
}

.branched-menu__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--bm-fold) var(--bm-ease-out);
}

.branched-menu__section[data-open] .branched-menu__body {
  grid-template-rows: 1fr;
}

.branched-menu__fold {
  min-height: 0;
  overflow: hidden;
}

.branched-menu__tree {
  position: relative;
  padding: 6px 0;
  box-sizing: border-box;
}

.branched-menu__lines {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.branched-menu__section[data-open] .branched-menu__lines {
  opacity: 1;
  transition: opacity 250ms ease 100ms;
}

.branched-menu__base,
.branched-menu__reach {
  fill: none;
  stroke-width: var(--bm-line-w);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.branched-menu__base {
  stroke: var(--bm-line);
}

.branched-menu__reach {
  stroke: var(--bm-accent);
  transition: stroke-dashoffset var(--bm-draw) var(--bm-ease-out);
}

.branched-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--bm-row);
  margin: 0;
  padding: 0 0 0 var(--bm-indent);
  border: 0;
  background: none;
  color: var(--bm-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .branched-menu__item:hover {
    color: var(--bm-ink);
  }
}

.branched-menu__item[data-active] {
  color: var(--bm-accent);
  font-weight: 500;
}

.branched-menu__icon {
  display: inline-flex;
  flex: none;
}

.branched-menu__label {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .branched-menu__marker {
    transition: opacity 150ms ease;
  }

  .branched-menu__body {
    transition: none;
  }

  .branched-menu__reach {
    transition: none;
  }
}


.branch-shell{position:relative;margin-left:auto}.branch-trigger{display:flex;align-items:center;gap:30px;border:1px solid #ff863e55;border-radius:30px;padding:13px 20px;background:#211812;color:#f7eee5;font:500 14px var(--f-body);cursor:pointer}.branch-trigger:hover,.branch-trigger[aria-expanded=true]{border-color:#ff863e;background:#ff7b3420}.branch-trigger span{color:#ff863e;font-size:20px;transition:rotate .3s}.branch-trigger[aria-expanded=true] span{rotate:90deg}#branch-panel{position:absolute;right:0;top:calc(100% + 18px);width:300px;max-width:calc(100vw - 32px);padding:26px;background:linear-gradient(140deg,#241b15,#12100e);border:1px solid #ff863e44;border-radius:20px;box-shadow:0 24px 70px #000b;max-height:calc(100dvh - 125px);overflow:auto;animation:branch-in .3s ease-out}.branch-eyebrow{color:#ff863e;font-size:10px;letter-spacing:2.5px;margin:0 0 18px}.branched-menu{--bm-accent:#ff863e;--bm-ink:#f5eee7;--bm-line:#57402f;--bm-row:40px;width:100%;max-width:100%}.branched-menu__head{display:flex;justify-content:space-between;width:100%;padding:12px 0}.branched-menu__head span{color:#ff863e;transition:rotate .3s}.branched-menu__section[data-open] .branched-menu__head span{rotate:45deg}.branched-menu__item{text-decoration:none!important;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}.branched-menu__reach{stroke-dasharray:1;stroke-dashoffset:1}.branched-menu__reach[data-active]{stroke-dashoffset:0}.branched-menu__item:hover,.branched-menu__item:focus-visible{color:#ff863e}.branch-trigger:focus-visible,.branched-menu__head:focus-visible,.branched-menu__item:focus-visible{outline:2px solid #ff863e;outline-offset:3px}.wf-lane{scroll-margin-top:150px}@keyframes branch-in{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}@media(max-width:600px){.branch-trigger{gap:8px;padding:10px 13px}.nav-in{gap:10px}#branch-panel{position:fixed;top:85px;right:16px}.nav .btn{padding:12px;font-size:10px}}@media(prefers-reduced-motion:reduce){#branch-panel{animation:none}}