:root .sig--br-portal { container-type: inline-size; display: grid; place-items: center; padding: clamp(16px, 3vw, 34px); }
:root .sig--br-portal svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--br-portal .brpt { width: 100%; max-width: 600px; }
:root .sig--br-portal .brpt__win { --fs: 1; position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: #f6f5f8; color: #1f1b24; box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .9); transition: background .6s var(--ease-out), color .6s, opacity .6s; }
:root .sig--br-portal .brpt__win.out { opacity: 0; }
:root .sig--br-portal .brpt__head { display: flex; align-items: center; gap: 10px; }
:root .sig--br-portal .brpt__crest svg { width: 26px; height: 30px; color: #7a00c2; stroke-width: 2; transition: color .6s; }
:root .sig--br-portal .brpt__head b { font: 600 calc(15px * var(--fs))/1.2 var(--f-display); letter-spacing: -.01em; transition: font-size .6s var(--ease-out); }
:root .sig--br-portal .brpt__a11y { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #4b4453; }
:root .sig--br-portal .brpt__a11y > svg { width: 22px; height: 22px; }
:root .sig--br-portal .brpt__sw { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #d9d3df; transition: background .4s; }
:root .sig--br-portal .brpt__sw i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .45s var(--ease-out); }
:root .sig--br-portal .brpt__win.sw .brpt__sw { background: #a100ff; }
:root .sig--br-portal .brpt__win.sw .brpt__sw i { transform: translateX(18px); }
:root .sig--br-portal .brpt__search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e1dbe6; font-size: calc(14px * var(--fs)); color: #1f1b24; transition: box-shadow .4s, background .6s; }
:root .sig--br-portal .brpt__search > svg { flex: none; width: 18px; height: 18px; color: #6b6474; }
:root .sig--br-portal .brpt__win.typing .brpt__search { box-shadow: inset 0 0 0 2px #a100ff; }
:root .sig--br-portal .brpt__caret { width: 1.5px; height: 18px; margin-left: -8px; background: #a100ff; opacity: 0; }
:root .sig--br-portal .brpt__win.typing .brpt__caret { opacity: 1; animation: brptBlink .9s steps(1) infinite; }
@keyframes brptBlink{ 50% { opacity: 0; } }
:root .sig--br-portal .brpt__hit { display: flex; align-items: center; gap: 8px; height: 0; margin-top: -12px; overflow: hidden; padding: 0 14px; border-radius: 10px; background: #efe3f9; color: #5a0090; font: 500 calc(13px * var(--fs))/1 var(--f-display); opacity: 0; transition: height .6s var(--ease-out), margin .6s var(--ease-out), opacity .4s; }
:root .sig--br-portal .brpt__hit svg { width: 16px; height: 16px; }
:root .sig--br-portal .brpt__win.hit .brpt__hit { height: 34px; margin-top: -4px; opacity: 1; }
:root .sig--br-portal .brpt__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:root .sig--br-portal .brpt__tile { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e8e3ec; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .7s var(--ease-out), background .6s, box-shadow .4s, color .6s; }
:root .sig--br-portal .brpt__tile svg { width: 22px; height: 22px; color: #7a00c2; transition: color .6s; }
:root .sig--br-portal .brpt__tile span { font: 600 calc(12.5px * var(--fs))/1.2 var(--f-display); transition: font-size .6s var(--ease-out); }
:root .sig--br-portal .brpt__win.in .brpt__tile { opacity: 1; transform: none; }
:root .sig--br-portal .brpt__win.in .brpt__tile:nth-child(2) { transition-delay: .07s; }
:root .sig--br-portal .brpt__win.in .brpt__tile:nth-child(3) { transition-delay: .14s; }
:root .sig--br-portal .brpt__win.in .brpt__tile:nth-child(4) { transition-delay: .21s; }
:root .sig--br-portal .brpt__win.in .brpt__tile:nth-child(5) { transition-delay: .28s; }
:root .sig--br-portal .brpt__win.in .brpt__tile:nth-child(6) { transition-delay: .35s; }
:root .sig--br-portal .brpt__tile.hot { background: #a100ff; color: #fff; box-shadow: 0 14px 26px -14px rgba(161, 0, 255, .9); transition-delay: 0s !important; }
:root .sig--br-portal .brpt__tile.hot svg { color: #fff; }
:root .sig--br-portal .brpt__low { display: grid; grid-template-columns: 1.25fr 1fr; gap: 8px; }
:root .sig--br-portal .brpt__note { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e8e3ec; opacity: 0; transform: translateX(-14px); transition: opacity .6s, transform .8s var(--ease-out), background .6s; }
:root .sig--br-portal .brpt__note > svg { flex: none; width: 20px; height: 20px; color: #7a00c2; }
:root .sig--br-portal .brpt__note small { display: block; font: 600 10.5px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #6b6474; margin-bottom: 4px; }
:root .sig--br-portal .brpt__note b { font: 600 calc(13px * var(--fs))/1.3 var(--f-display); }
:root .sig--br-portal .brpt__win.note .brpt__note { opacity: 1; transform: none; }
:root .sig--br-portal .brpt__map { position: relative; min-height: 82px; border-radius: 14px; overflow: hidden; background: #ece8f1; }
:root .sig--br-portal .brpt__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
:root .sig--br-portal .brpt__blk { fill: #ece8f1; stroke: none; }
:root .sig--br-portal .brpt__river { stroke: #c9b6e6; stroke-width: 7; }
:root .sig--br-portal .brpt__rd { stroke: #fff; stroke-width: 5; }
:root .sig--br-portal .brpt__rd--s { stroke-width: 2.5; }
:root .sig--br-portal .brpt__pin { position: absolute; left: 52%; top: 44%; width: 28px; height: 28px; margin: -26px 0 0 -14px; color: #a100ff; opacity: 0; transform: translateY(-24px); transition: opacity .3s, transform .7s var(--ease-back); }
:root .sig--br-portal .brpt__pin svg { width: 100%; height: 100%; fill: #a100ff; stroke: #fff; stroke-width: 1.4; }
:root .sig--br-portal .brpt__pin::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 18px; height: 6px; margin-left: -9px; border-radius: 50%; background: rgba(161, 0, 255, .35); }
:root .sig--br-portal .brpt__map em { position: absolute; left: calc(52% + 16px); top: 34%; padding: 3px 7px; border-radius: 6px; background: #1f1b24; color: #fff; font: 600 10.5px/1.2 var(--f-display); font-style: normal; opacity: 0; transition: opacity .5s .4s; }
:root .sig--br-portal .brpt__win.pin .brpt__pin { opacity: 1; transform: none; }
:root .sig--br-portal .brpt__win.pin .brpt__map em { opacity: 1; }
:root .sig--br-portal .brpt__win.hc { --fs: 1.12; background: #000; color: #fff; }
:root .sig--br-portal .brpt__win.hc .brpt__crest svg, :root .sig--br-portal .brpt__win.hc .brpt__tile svg, :root .sig--br-portal .brpt__win.hc .brpt__a11y { color: #c98cff; }
:root .sig--br-portal .brpt__win.hc .brpt__search { background: #000; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
:root .sig--br-portal .brpt__win.hc .brpt__search > svg { color: #fff; }
:root .sig--br-portal .brpt__win.hc .brpt__hit { background: #c98cff; color: #000; }
:root .sig--br-portal .brpt__win.hc .brpt__tile { background: #000; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
:root .sig--br-portal .brpt__win.hc .brpt__tile.hot { background: #c98cff; color: #000; }
:root .sig--br-portal .brpt__win.hc .brpt__tile.hot svg { color: #000; }
:root .sig--br-portal .brpt__win.hc .brpt__sw { background: #c98cff; }
:root .sig--br-portal .brpt__win.hc .brpt__map { background: #000; box-shadow: inset 0 0 0 2px #fff; }
:root .sig--br-portal .brpt__win.hc .brpt__blk { fill: #000; }
:root .sig--br-portal .brpt__win.hc .brpt__rd { stroke: #fff; stroke-width: 3; }
:root .sig--br-portal .brpt__win.hc .brpt__river { stroke: #c98cff; }
:root .sig--br-portal .brpt__map, :root .sig--br-portal .brpt__blk, :root .sig--br-portal .brpt__rd, :root .sig--br-portal .brpt__river { transition: background .6s, fill .6s, stroke .6s; }
:root .sig--br-portal .brpt__fx { position: absolute; z-index: 3; border-radius: 16px; box-shadow: 0 0 0 3px #c98cff, 0 0 0 6px rgba(201, 140, 255, .3); opacity: 0; pointer-events: none; transition: left .45s var(--ease-out), top .45s var(--ease-out), width .45s var(--ease-out), height .45s var(--ease-out), opacity .3s; }
:root .sig--br-portal .brpt__fx.on { opacity: 1; }
@container (max-width: 460px){:root .sig--br-portal .brpt__win { padding: 12px; gap: 10px; }
:root .sig--br-portal .brpt__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root .sig--br-portal .brpt__tile:nth-child(n+5) { display: none; }
:root .sig--br-portal .brpt__tile { padding: 10px; grid-template-columns: auto 1fr; align-items: center; }
:root .sig--br-portal .brpt__low { grid-template-columns: 1fr; }
:root .sig--br-portal .brpt__map { display: none; }
:root .sig--br-portal .brpt__search { font-size: 13px; }
:root .sig--br-portal .brpt__win.hc { --fs: 1.04; }
:root .sig--br-portal .brpt__tile span { font-size: calc(12px * var(--fs)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

}