.bm { --nh: 40px; --wire: 88px; --bh: 480px; --hh: 212px; --lead: 34px; --hy: 240px; margin: 0; --d: 1 / -1; min-width: 0; }
.bm-board { position: relative; display: grid; grid-template-columns: minmax(0, 330px) var(--wire) minmax(250px, 310px) var(--wire) minmax(0, 330px); justify-content: center; height: var(--bh); }
.bm-col { position: relative; min-width: 0; }
.bm-col ul { margin: 0; padding: 0; list-style: none; }
.bm-wl, .bm-wr { display: block; overflow: visible; max-width: none; }


.bm-n { position: absolute; left: 0; right: 0; top: calc(var(--y) - var(--nh) / 2); min-height: var(--nh); display: flex; align-items: center; gap: 10px; padding: 0 14px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; color: var(--bone); font: 600 15px/1.2 var(--f-body);
  box-shadow: inset 0 1px 0 rgb(236 230 218 / 0.07), 0 12px 24px -16px rgb(0 0 0 / 0.95); }
.bm-n.bm-r::before, .bm-n.bm-l::after { content: ""; position: absolute; top: calc(50% - 5px); width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--bone); }
.bm-n.bm-r::before { left: -6px; }
.bm-n.bm-l::after { right: -6px; }
.bm-ic { display: grid; place-items: center; flex: none; }
.bm-i { width: 20px; height: 20px; }
.bm-tx { min-width: 0; text-wrap: balance; }
.bm-lb { position: absolute; left: 0; top: calc(var(--y) - 9px); margin: 0; font: 500 12px/18px var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }


.bm-w { fill: none; stroke: var(--edge); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bm-pu { fill: var(--bone); }
.bm-pg { opacity: 0.9; }


.bm-hub { position: absolute; left: 0; right: 0; top: calc(var(--hy) - var(--hh) / 2); height: var(--hh); box-sizing: border-box; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 18px; text-align: center;
  background: var(--panel); border: 1px solid var(--bone); border-radius: 12px; box-shadow: inset 0 1px 0 rgb(236 230 218 / 0.1), 0 28px 44px -26px rgb(0 0 0 / 0.95); }
.bm-hub::before, .bm-hub::after { content: ""; position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--bone); }
.bm-hub::before { left: -7px; }
.bm-hub::after { right: -7px; }
.bm-rune { width: 76px; height: 76px; }
.bm-hn { margin: 0; font: 700 40px/1 var(--f-head); letter-spacing: -0.01em; }
.bm-hp { margin: 0; max-width: 18em; font: 500 13px/1.5 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ash); }


.bm-sub { position: absolute; left: 0; right: 0; top: calc(var(--hy) + var(--hh) / 2 + var(--lead)); display: flex; gap: 12px; }
.bm-s { position: relative; flex: 1 1 0; min-width: 0; min-height: var(--nh); box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; color: var(--bone); font: 600 14px/1.2 var(--f-body); }
.bm-s::before { content: ""; position: absolute; left: calc(50% - 0.75px); bottom: 100%; width: 1.5px; height: var(--lead); background: var(--edge); transform-origin: 50% 100%; }
.bm-yes { background: var(--red); border-color: var(--red); }


.bm-sm { --wire: 72px; }
.bm-sm .bm-board { grid-template-columns: minmax(0, 290px) var(--wire) minmax(220px, 260px) var(--wire) minmax(0, 290px); }
.bm-sm .bm-n { padding: 0 12px; gap: 9px; font-size: 14.5px; border-radius: 8px; }
.bm-sm .bm-i { width: 18px; height: 18px; }
.bm-sm .bm-rune { width: 60px; height: 60px; }
.bm-sm .bm-hn { font-size: 32px; }
.bm-sm .bm-hp { font-size: 11.5px; letter-spacing: 0.05em; }
.bm-sm .bm-hub { gap: 4px; padding: 12px; }
.bm-sm .bm-s { font-size: 13.5px; padding: 4px 9px; }
.bm-sm .bm-n.bm-r::before, .bm-sm .bm-n.bm-l::after { width: 9px; height: 9px; top: calc(50% - 4.5px); }
.bm-sm .bm-n.bm-r::before { left: -5px; }
.bm-sm .bm-n.bm-l::after { right: -5px; }


.bm-without .bm-n, .bm-without .bm-s, .bm-without .bm-hub { color: var(--ash); border-color: var(--hair); box-shadow: none; }
.bm-without .bm-hub { border-color: var(--edge); }
.bm-without .bm-w { stroke: var(--hair); stroke-width: 1.5; }
.bm-without .bm-n.bm-r::before, .bm-without .bm-n.bm-l::after, .bm-without .bm-hub::before, .bm-without .bm-hub::after { border-color: var(--edge); }
.bm-without .bm-s::before { background: var(--hair); }
.bm-without .bm-n:nth-child(odd) { rotate: -0.7deg; }
.bm-without .bm-n:nth-child(even) { rotate: 0.6deg; }
.bm-hub-lite { gap: 10px; }
.bm-hub-lite .bm-hn { font-size: 24px; line-height: 1.1; }
.bm-hic .bm-i { width: 30px; height: 30px; }


@media (hover: hover) and (pointer: fine) {
  .bm-n { transition: border-color 160ms var(--ease), color 160ms var(--ease); }
  .bm-with .bm-n:hover, .bm-hero .bm-n:hover { border-color: var(--bone); }
}


@media (max-width: 899px) {
  .bm { --y: 0px; }
  .bm-board { display: flex; flex-direction: column; height: auto; align-items: stretch; gap: 0; }
  .bm-wl, .bm-wr { display: none; }
  .bm-col { display: block; }
  .bm-chub { display: contents; }
  .bm-cl { order: 1; } .bm-hub { order: 2; } .bm-cr { order: 3; } .bm-sub { order: 4; }
  .bm-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bm-n { position: relative; left: auto; right: auto; top: auto; padding: 9px 12px; }
  .bm-n.bm-r::before, .bm-n.bm-l::after, .bm-hub::before, .bm-hub::after { display: none; }
  .bm-lb { position: static; margin: 0 0 10px; }
  .bm-cr ul + .bm-lb { margin-top: 22px; }
  .bm-hub { position: relative; left: auto; right: auto; top: auto; height: auto; margin: 36px 0; padding: 22px 16px; }
  .bm-hub::before { display: block; left: calc(50% - 0.75px); top: -36px; width: 1.5px; height: 36px; border: 0; border-radius: 0; background: var(--edge); }
  .bm-col .bm-sub { position: relative; left: auto; right: auto; top: auto; margin-top: 36px; display: flex; }
  .bm-s::before { height: 36px; }
  .bm-hub::after { display: block; left: calc(50% - 0.75px); right: auto; top: 100%; width: 1.5px; height: 36px; border: 0; border-radius: 0; background: var(--edge); }
  .bm-sm .bm-col ul { grid-template-columns: minmax(0, 1fr); }
  .bm-sm .bm-hub { margin: 28px 0; }
  .bm-sm .bm-hub::before { top: -28px; }
  .bm-sm .bm-hub::after { height: 28px; }
  .bm-sm .bm-col .bm-sub { margin-top: 28px; }
  .bm-sm .bm-s::before { height: 28px; }
  .bm-without .bm-n { rotate: 0deg !important; }
}


.br-hero { position: relative; }
.br-top { padding-block: var(--s3) var(--s2); row-gap: var(--s1); }
.br-hero .a4-h1 { --d: 1 / span 9; }
.br-hero .a4-pre { font-size: clamp(22px, 2.4vw, 34px); }
.br-hero .a4-w { font-size: clamp(48px, 7.4vw, 112px); }
.br-hero .a4-lede { --d: 10 / span 3; align-self: end; }
.br-mapwrap { padding-bottom: var(--s3); }
@media (max-width: 1199px) {
  .br-hero .a4-h1 { --d: 1 / span 7; }
  .br-hero .a4-lede { --d: 8 / span 5; }
  .bm-lb { font-size: 11px; letter-spacing: 0.06em; }
}
@media (max-width: 899px) {
  .br-hero .a4-h1, .br-hero .a4-lede { --d: 1 / -1; }
  .bm-lb { font-size: 12px; letter-spacing: 0.1em; }
}


@keyframes bm-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes bm-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes bm-draw { from { stroke-dashoffset: 1; } }
@keyframes bm-grow { from { transform: scaleY(0); } }
@keyframes bm-show { from { opacity: 0; } }
@keyframes br-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes br-wire { from { transform: scaleX(0); } }   

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    
    html:not(.no-motion) .br-sec .br-h, html:not(.no-motion) .br-sec .br-intro { animation: br-rise var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    html:not(.no-motion) .br-flow .br-ch { animation: br-rise var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    html:not(.no-motion) .br-flow .br-ch:nth-child(2) { animation-range: entry 6% entry 51%; }
    html:not(.no-motion) .br-flow .br-ch:nth-child(3) { animation-range: entry 12% entry 57%; }
    html:not(.no-motion) .br-flow .br-ch:nth-child(4) { animation-range: entry 18% entry 63%; }
    html:not(.no-motion) .br-flow .br-ch:nth-child(5) { animation-range: entry 24% entry 69%; }
    
    html:not(.no-motion) .br-pick .br-hub { animation: br-rise var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    html:not(.no-motion) .br-pick .br-s { animation: br-rise var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    html:not(.no-motion) .br-pick .br-s .br-w { transform-origin: 0 50%; animation: br-wire var(--ease) both; animation-timeline: view(); animation-range: entry 15% entry 70%; }

    
    html:not(.no-motion) .bm-hero .bm-sc { animation: bm-up var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    html:not(.no-motion) .bm-hero .bm-w { animation: bm-draw var(--ease) both; animation-timeline: view(); animation-range: entry 10% entry 70%; }

    
    @media (min-width: 900px) and (min-height: 800px) {
      html:not(.no-motion) .br-hero { view-timeline: --brh block; height: 270vh; }
      html:not(.no-motion) .br-pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding-top: var(--s1); }
      html:not(.no-motion) .br-top { padding-block: var(--s1) 0; }
      html:not(.no-motion) .br-mapwrap { padding-bottom: 0; }
      html:not(.no-motion) .bm-hero .bm-cl .bm-sc, html:not(.no-motion) .bm-hero .bm-cr .bm-sc { animation: bm-in linear both; animation-timeline: --brh; animation-range: cover var(--a) cover var(--b); }
      html:not(.no-motion) .bm-hero .bm-s.bm-sc { animation: bm-up linear both; animation-timeline: --brh; animation-range: cover var(--a) cover var(--b); }
      html:not(.no-motion) .bm-hero .bm-w { animation: bm-draw linear both; animation-timeline: --brh; animation-range: cover var(--a) cover var(--b); }
      html:not(.no-motion) .bm-hero .bm-s.bm-sc::before { animation: bm-grow linear both; animation-timeline: --brh; animation-range: cover var(--a) cover var(--b); }
      html:not(.no-motion) .bm-hero .bm-sc-p { animation: bm-show linear both; animation-timeline: --brh; animation-range: cover 66% cover 71%; }
    }
  }
}


@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .a4-fn .bm-n { transition: rotate 600ms cubic-bezier(0.77, 0, 0.175, 1); }
  html:not(.no-motion) .page:not(.a4-board):not(.a4-without) .a4-ex:has(input[value="with"]:checked) .a4-fn .bm-n { rotate: none; }
  html:not(.no-motion) .bm.bm-play .bm-cl .bm-n { animation: bm-in 420ms var(--ease) both; }
  html:not(.no-motion) .bm.bm-play .bm-cl .bm-n:nth-child(2) { animation-delay: 90ms; }
  html:not(.no-motion) .bm.bm-play .bm-wl .bm-w { animation: bm-draw 360ms ease-in-out both; animation-delay: 220ms; }
  html:not(.no-motion) .bm.bm-play .bm-hub { animation: bm-up 480ms var(--ease) both; animation-delay: 420ms; }
  html:not(.no-motion) .bm.bm-play .bm-wr .bm-w { animation: bm-draw 360ms ease-in-out both; animation-delay: 820ms; }
  html:not(.no-motion) .bm.bm-play .bm-wr .bm-w:nth-child(2) { animation-delay: 890ms; }
  html:not(.no-motion) .bm.bm-play .bm-wr .bm-w:nth-child(3) { animation-delay: 960ms; }
  html:not(.no-motion) .bm.bm-play .bm-wr .bm-w:nth-child(4) { animation-delay: 1030ms; }
  html:not(.no-motion) .bm.bm-play .bm-wr .bm-w:nth-child(5) { animation-delay: 1100ms; }
  html:not(.no-motion) .bm.bm-play .bm-wr .bm-w:nth-child(6) { animation-delay: 1170ms; }
  html:not(.no-motion) .bm.bm-play .bm-cr .bm-n { animation: bm-up 420ms var(--ease) both; animation-delay: 1000ms; }
  html:not(.no-motion) .bm.bm-play .bm-cr .bm-n:nth-child(2) { animation-delay: 1070ms; }
  html:not(.no-motion) .bm.bm-play .bm-cr .bm-n:nth-child(3) { animation-delay: 1140ms; }
  html:not(.no-motion) .bm.bm-play .bm-cr .bm-n:nth-child(4) { animation-delay: 1210ms; }
  html:not(.no-motion) .bm.bm-play .bm-cr .bm-n:nth-child(5) { animation-delay: 1280ms; }
  html:not(.no-motion) .bm.bm-play .bm-cr .bm-n:nth-child(6) { animation-delay: 1350ms; }
  html:not(.no-motion) .bm.bm-play .bm-s { animation: bm-up 420ms var(--ease) both; animation-delay: 1250ms; }
  html:not(.no-motion) .bm.bm-play .bm-s + .bm-s { animation-delay: 1330ms; }
  html:not(.no-motion) .bm.bm-play .bm-s::before { animation: bm-grow 300ms ease-out both; animation-delay: 1200ms; }
  
  html:not(.no-motion) .a4-fw .bm:not(.bm-play):not(.bm-fl) .bm-pg { opacity: 0; }
  html:not(.no-motion) .bm.bm-play .bm-pg { animation: bm-show 500ms ease-out both; animation-delay: 1600ms; }
}


@media (prefers-reduced-motion: reduce) { .bm-pg { display: none; } }
html.no-motion .bm-pg { display: none; }

@media (forced-colors: active) {
  .bm-n, .bm-s, .bm-hub { border-color: CanvasText; }
  .bm-w { stroke: CanvasText; }
  .bm-yes { background: Canvas; border-width: 2px; }
}