.bn-chip,.bn-tag,.bn-series-tag,.bn-series-status,.bn-series-discussion__tab,.bn-series-filter,.bn-series-filter-trigger,.bn-score,.bn-card-meta.is-rating,.bn-series-comment-card__rating{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--bn-radius-pill);
}
.bn-tag,.bn-series-tag,.bn-series-status,.bn-series-discussion__tab,.bn-series-filter,.bn-series-filter-trigger{
border:1px solid var(--bn-line);
background:var(--bn-white-04);
}
.bn-score,.bn-card-meta.is-rating,.bn-series-comment-card__rating{
gap:6px;
border:1px solid var(--bn-gold-line);
background:var(--bn-gold-soft);
color:var(--bn-gold-text);
font-weight:600;
}
.bn-score{
flex:0 0 auto;
min-height:28px;
max-width:100%;
padding:2px clamp(9px,0.9vw,14px);
overflow:visible;
line-height:1.15;
}
.bn-card-meta.is-rating{
align-self:center;
justify-self:center;
max-width:100%;
min-height:18px;
margin-top:4px;
margin-bottom:2px;
padding:3px 7px;
font-size:0.76rem;
line-height:1.1;
}
.bn-series-comment-card__rating{
width:fit-content;
min-height:28px;
margin-bottom:10px;
padding:0 10px;
font-size:0.84rem;
line-height:1.1;
}
.bn-panel,.bn-series-body__inner,.bn-series-discussion,.bn-series-comment-form,.bn-series-ratings-header{
border:1px solid var(--bn-line);
border-radius:22px;
background:var(--bn-white-03);
}
.bn-button,.bn-site-search button,.wp-block-search__button,.bn-series-button{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--bn-radius-pill);
font-weight:600;
text-decoration:none;
transition:transform 0.18s ease,opacity 0.18s ease,background 0.18s ease,border-color 0.18s ease;
}
.bn-input,.bn-site-search input,.wp-block-search__input,.bn-comment-form input[type="text"],.bn-comment-form input[type="email"],.bn-comment-form input[type="url"],.bn-comment-form textarea{
width:100%;
box-sizing:border-box;
border:1px solid var(--bn-line);
color:var(--bn-text);
transition:border-color 0.18s ease,background 0.18s ease,box-shadow 0.18s ease;
}
.bn-site-search,.wp-block-search{
position:relative;
}
.bn-site-search form,.wp-block-search__inside-wrapper,.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper{
display:flex;
align-items:center;
gap:10px;
padding:7px;
border:1px solid rgba(183,180,174,0.14);
border-radius:calc(var(--bn-radius-pill) + 3px);
background:linear-gradient(180deg,rgba(55,30,30,0.88) 0%,rgba(36,34,32,0.96) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 14px 30px rgba(0,0,0,0.22);
backdrop-filter:blur(16px);
}
.bn-site-search input,.wp-block-search__input{
min-height:clamp(46px,3vw,54px);
padding:0 clamp(16px,1.3vw,20px);
border:1px solid transparent;
border-radius:var(--bn-radius-pill);
background:linear-gradient(180deg,rgba(255,255,255,0.035) 0%,rgba(255,255,255,0.02) 100%);
font-size:0.95rem;
font-weight:500;
letter-spacing:-0.01em;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
.bn-site-search input::placeholder,.wp-block-search__input::placeholder{
color:rgba(183,180,174,0.54);
}
.bn-site-search button,.wp-block-search__button{
position:relative;
min-height:clamp(46px,3vw,54px);
padding:0 clamp(18px,1.4vw,22px);
border:1px solid rgba(183,180,174,0.16);
background:linear-gradient(180deg,#b7b4ae 0%,#8f897f 100%);
color:#0a0a0a;
font-size:0.93rem;
font-weight:700;
letter-spacing:0.01em;
box-shadow:0 10px 22px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.26);
}
.bn-site-search button::before,.wp-block-search__button::before{
content:"";
width:18px;
height:18px;
border:2.25px solid currentColor;
border-radius:50%;
margin-right:10px;
transform:translateY(-1px);
box-sizing:border-box;
box-shadow:8px 8px 0 -5px currentColor;
opacity:0.96;
}
.bn-site-search button:hover,.wp-block-search__button:hover{
transform:translateY(-1px);
filter:brightness(1.02);
}
.wp-block-search__button.has-icon,.bn-site-search button.has-icon{
min-width:clamp(52px,3.2vw,60px);
padding:0;
}
.wp-block-search__button.has-icon::before,.bn-site-search button.has-icon::before{
content:none;
}
.wp-block-search__button.has-icon svg,.bn-site-search button.has-icon svg{
width:22px;
height:22px;
display:block;
fill:currentColor;
}
.wp-block-search__button.has-icon .wp-block-search__button-text,.bn-site-search button.has-icon .wp-block-search__button-text{
display:none;
}
.bn-comment-form input[type="text"],.bn-comment-form input[type="email"],.bn-comment-form input[type="url"],.bn-comment-form textarea{
padding:12px 13px;
border-radius:14px;
background:var(--bn-white-035);
}
.bn-input:focus,.bn-site-search input:focus,.wp-block-search__input:focus,.bn-comment-form input[type="text"]:focus,.bn-comment-form input[type="email"]:focus,.bn-comment-form input[type="url"]:focus,.bn-comment-form textarea:focus{
outline:none;
border-color:var(--bn-accent-focus);
background:var(--bn-white-05);
box-shadow:0 0 0 4px var(--bn-accent-ring);
}
.bn-site-search:focus-within form,.wp-block-search:focus-within .wp-block-search__inside-wrapper{
border-color:rgba(183,180,174,0.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 0 0 4px rgba(183,180,174,0.08),0 18px 34px rgba(0,0,0,0.24);
}
.bn-comment-form textarea{
min-height:132px;
resize:none;
overflow:hidden;
line-height:1.65;
}
.bn-featured-card{
--bn-featured-bg:none;
--bn-featured-card-fixed-height:clamp(290px,38vw,460px);
--bn-featured-cover-column:clamp(150px,24vw,320px);
--bn-featured-row-label:clamp(16px,1.2vw,22px);
--bn-featured-row-title:clamp(70px,8.6vw,118px);
--bn-featured-row-original-title:clamp(18px,1.4vw,24px);
--bn-featured-row-author:clamp(18px,1.4vw,24px);
--bn-featured-row-meta:clamp(24px,1.8vw,34px);
--bn-featured-row-tags:clamp(28px,2.1vw,40px);
--bn-featured-title-size:clamp(1.15rem,0.86rem + 1.45vw,2.55rem);
--bn-featured-body-size:clamp(0.84rem,0.8rem + 0.2vw,1rem);
--bn-featured-meta-size:clamp(0.78rem,0.75rem + 0.16vw,0.94rem);
--bn-featured-tag-size:clamp(0.74rem,0.72rem + 0.14vw,0.9rem);
position:relative;
isolation:isolate;
overflow:hidden;
height:var(--bn-featured-card-fixed-height);
min-height:var(--bn-featured-card-fixed-height);
padding:var(--bn-featured-padding);
border:1px solid var(--bn-line);
border-radius:var(--bn-radius-lg);
background:#1a1817;
box-shadow:var(--bn-shadow);
box-sizing:border-box;
}
.bn-featured-card::before,.bn-featured-card::after,.bn-series-banner::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
}
.bn-featured-card::before{
z-index:0;
opacity:0.75;
background-image:var(--bn-featured-bg);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
.bn-featured-card::after{
z-index:1;
background:linear-gradient(90deg,rgba(10,10,10,0.96) 0%,rgba(24,21,20,0.88) 34%,rgba(38,32,31,0.64) 62%,rgba(55,30,30,0.46) 100%),linear-gradient(180deg,rgba(10,10,10,0.28) 0%,rgba(55,30,30,0.42) 100%),radial-gradient(circle at 20% 20%,rgba(183,180,174,0.08),transparent 30%),radial-gradient(circle at 80% 10%,rgba(114,110,104,0.14),transparent 30%);
}
.bn-featured-card > *{
position:relative;
z-index:2;
}
.bn-featured-card .wp-block-columns{
display:grid !important;
grid-template-columns:minmax(0,1fr) var(--bn-featured-cover-column);
align-items:stretch;
gap:var(--bn-featured-gap);
width:100%;
height:100%;
min-height:0;
margin-bottom:0;
box-sizing:border-box;
}
.bn-featured-card .wp-block-column{
min-width:0;
min-height:0;
margin:0 !important;
flex-basis:auto !important;
}
.bn-featured-content{
display:grid;
grid-template-rows:var(--bn-featured-row-label) var(--bn-featured-row-title) var(--bn-featured-row-original-title) var(--bn-featured-row-author) var(--bn-featured-row-meta) minmax(0,1fr) minmax(var(--bn-featured-row-tags),auto);
align-content:stretch;
row-gap:clamp(4px,0.7vw,10px);
min-width:0;
min-height:0;
height:100%;
overflow:hidden;
}
.bn-featured-slot,.bn-featured-content > *{
min-width:0;
min-height:0;
max-width:100%;
}
.bn-featured-slot--label,.bn-featured-slot--original-title,.bn-featured-slot--author,.bn-featured-slot--meta,.bn-featured-slot--tags,.bn-featured-meta-text,.bn-featured-original-title-text{
overflow:hidden;
text-overflow:ellipsis;
}
.bn-featured-slot--label,.bn-featured-slot--original-title,.bn-featured-slot--author,.bn-featured-meta-text,.bn-featured-original-title-text,.bn-featured-meta > *{
white-space:nowrap;
}
.bn-featured-content h1,.bn-featured-content h2,.bn-featured-content h3{
display:flex;
align-items:center;
height:100%;
min-width:0;
min-height:0;
margin:0;
font-size:var(--bn-featured-title-size);
line-height:1.05;
letter-spacing:-0.04em;
}
.bn-featured-content h1 a,.bn-featured-content h2 a,.bn-featured-content h3 a,.bn-card-title a{
display:-webkit-box;
width:100%;
overflow:hidden;
color:inherit;
text-decoration:none;
text-overflow:ellipsis;
word-break:break-word;
overflow-wrap:anywhere;
-webkit-box-orient:vertical;
}
.bn-featured-content h1 a,.bn-featured-content h2 a,.bn-featured-content h3 a{
-webkit-line-clamp:2;
}
.bn-card-title a{
text-align:center;
-webkit-line-clamp:var(--bn-row-card-title-rows);
}
.bn-featured-content h1 a:hover,.bn-featured-content h2 a:hover,.bn-featured-content h3 a:hover{
color:inherit;
text-decoration:none;
}
.bn-featured-content p{
margin:0;
color:var(--bn-text-soft);
font-size:var(--bn-featured-body-size);
line-height:1.45;
}
.bn-featured-content .bn-featured-label{
align-self:center;
color:var(--bn-muted);
font-size:clamp(0.72rem,0.7rem + 0.14vw,0.9rem);
font-weight:600;
line-height:1.2;
text-transform:uppercase;
letter-spacing:0.08em;
}
.bn-featured-content .bn-featured-author,.bn-featured-content .bn-featured-original-title{
align-self:center;
font-size:clamp(0.82rem,0.78rem + 0.14vw,0.96rem);
line-height:1.3;
}
.bn-featured-content .bn-featured-author{
color:var(--bn-text-soft);
}
.bn-featured-content .bn-featured-original-title{
display:flex;
align-items:center;
gap:6px;
color:var(--bn-muted);
}
.bn-featured-meta{
display:flex;
align-items:center;
gap:10px;
flex-wrap:nowrap;
min-width:0;
min-height:0;
overflow:visible;
color:var(--bn-muted);
font-size:var(--bn-featured-meta-size);
font-weight:500;
line-height:1.2;
white-space:nowrap;
}
.bn-featured-description{
display:-webkit-box;
align-self:start;
min-width:0;
max-width:100%;
overflow:hidden;
line-height:1.45;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
}
.bn-tag-list{
display:flex;
align-items:center;
gap:8px;
min-width:0;
min-height:0;
overflow:hidden;
white-space:nowrap;
}
.bn-tag{
flex:0 1 auto;
min-height:clamp(26px,2vw,34px);
max-width:100%;
padding:0 clamp(8px,0.9vw,14px);
color:var(--bn-text-soft);
font-size:var(--bn-featured-tag-size);
line-height:1.1;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.bn-featured-media,.bn-featured-media a{
display:flex;
align-items:center;
justify-content:center;
}
.bn-featured-media{
min-width:0;
min-height:0;
height:100%;
overflow:hidden;
}
.bn-featured-media a{
width:100%;
height:100%;
}
.bn-featured-media img{
position:relative;
z-index:3;
display:block;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
aspect-ratio:2 / 3;
object-fit:cover;
border-radius:16px;
box-shadow:0 12px 28px rgba(0,0,0,0.28);
}
.bn-row-section{
width:100%;
}
.bn-row-section--bleed{
width:100%;
max-width:100%;
margin-inline:0;
padding-left:max(var(--bn-gutter),calc((100vw - var(--bn-container)) / 2));
padding-right:max(var(--bn-gutter),calc((100vw - var(--bn-container)) / 2));
overflow:visible;
box-sizing:border-box;
}
.bn-row-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
width:100%;
min-width:0;
margin-bottom:clamp(14px,1.5vw,18px);
overflow:visible;
box-sizing:border-box;
}
.bn-row-title{
flex:1 1 auto;
min-width:0;
}
.bn-row-more{
flex:0 0 auto;
min-width:max-content;
padding-left:12px;
text-align:right;
}
.bn-row-more a{
display:inline-flex;
align-items:center;
justify-content:flex-end;
max-width:100%;
white-space:nowrap;
}
.bn-row-slider,.bn-featured-carousel{
position:relative;
overflow:visible;
}
.bn-row-slider{
width:100%;
min-height:calc(var(--bn-row-card-height) + 6px);
}
.bn-row-slider__viewport{
width:100%;
min-height:calc(var(--bn-row-card-height) + 6px);
overflow-x:auto;
overflow-y:visible;
padding-top:4px;
cursor:grab;
scroll-behavior:smooth;
scroll-snap-type:x proximity;
scrollbar-width:thin;
scrollbar-color:var(--bn-white-28) var(--bn-white-06);
-webkit-overflow-scrolling:touch;
box-sizing:border-box;
}
.bn-row-slider__viewport.is-dragging,.bn-row-slider__viewport:active{
cursor:grabbing;
scroll-behavior:auto;
}
.bn-row-slider__viewport::-webkit-scrollbar{
height:12px;
}
.bn-row-slider__viewport::-webkit-scrollbar-track{
background:var(--bn-white-06);
border-radius:var(--bn-radius-pill);
}
.bn-row-slider__viewport::-webkit-scrollbar-thumb{
border:2px solid transparent;
border-radius:var(--bn-radius-pill);
background:var(--bn-white-28);
background-clip:padding-box;
}
.bn-row-slider__viewport::-webkit-scrollbar-thumb:hover{
background:var(--bn-white-40);
background-clip:padding-box;
}
.bn-card-grid{
display:flex;
flex-wrap:nowrap;
align-items:flex-start;
gap:var(--bn-row-gap);
width:max-content;
min-width:100%;
min-height:calc(var(--bn-row-card-height) + 2px);
padding-block:2px;
}
.bn-card{
position:relative;
display:grid;
grid-template-rows:var(--bn-row-card-cover-height) minmax(0,1fr);
flex:0 0 var(--bn-row-card-width);
width:var(--bn-row-card-width);
max-width:var(--bn-row-card-width);
height:var(--bn-row-card-height);
min-height:var(--bn-row-card-height);
min-width:0;
overflow:hidden;
border:1px solid var(--bn-line);
border-radius:20px;
background:linear-gradient(180deg,var(--bn-white-02),var(--bn-white-01)),var(--bn-card);
box-shadow:var(--bn-shadow-sm);
scroll-snap-align:start;
transition:transform 0.22s ease,background 0.22s ease,border-color 0.22s ease,box-shadow 0.22s ease;
box-sizing:border-box;
}
.bn-card:hover{
transform:translateY(-5px);
border-color:var(--bn-white-13);
background:var(--bn-card-hover);
box-shadow:var(--bn-shadow-md);
}
.bn-row-slider__viewport .bn-card:hover{
transform:translateY(-4px);
}
.bn-card-cover{
position:relative;
width:100%;
height:100%;
overflow:hidden;
background:var(--bn-card-cover-bg);
}
.bn-card-cover a{
display:block;
width:100%;
height:100%;
}
.bn-card-cover img{
display:block;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
}
.bn-rank-badge{
position:absolute;
top:10px;
left:10px;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:34px;
height:34px;
padding:0 10px;
border-radius:12px;
color:#0a0a0a;
font-size:0.92rem;
font-weight:800;
box-shadow:0 8px 20px rgba(0,0,0,0.24);
}
.bn-rank-badge--1{
color:#0a0a0a;
background:linear-gradient(180deg,#b7b4ae,#8f7462);
box-shadow:0 8px 20px rgba(143,116,98,0.3);
}
.bn-rank-badge--2{
color:#161413;
background:linear-gradient(180deg,#b7b4ae,#726e68);
box-shadow:0 8px 20px rgba(114,110,104,0.28);
}
.bn-rank-badge--3{
color:#f0e3da;
background:linear-gradient(180deg,#8f7462,#371e1e);
box-shadow:0 8px 20px rgba(55,30,30,0.32);
}
.bn-card-body{
display:grid;
grid-template-rows:1fr var(--bn-row-card-title-height) var(--bn-row-card-meta-height) 1fr;
align-items:center;
row-gap:8px;
min-width:0;
min-height:0;
height:100%;
padding:12px 12px 18px;
text-align:center;
box-sizing:border-box;
}
.bn-card-title{
grid-row:2;
display:flex;
align-items:center;
justify-content:center;
min-width:0;
margin:0;
overflow:hidden;
color:var(--bn-text);
font-size:clamp(0.92rem,0.86rem + 0.18vw,1rem);
font-weight:600;
line-height:1.35;
letter-spacing:-0.02em;
}
.bn-card-meta{
grid-row:3;
display:flex;
align-items:center;
justify-content:center;
min-width:0;
min-height:var(--bn-row-card-meta-height);
margin:0;
overflow:hidden;
color:var(--bn-muted);
font-size:0.82rem;
font-weight:500;
line-height:1.2;
text-align:center;
white-space:nowrap;
text-overflow:ellipsis;
}
.bn-featured-carousel{
--bn-featured-arrow-offset-left:0px;
--bn-featured-arrow-offset-right:0px;
width:min(96vw,var(--bn-featured-shell-width));
max-width:var(--bn-featured-shell-width);
margin-inline:auto;
padding-bottom:clamp(20px,2.5vw,34px);
}
.bn-featured-carousel,.bn-featured-carousel__shell,.bn-featured-carousel__viewport,.bn-featured-carousel__track,.bn-featured-carousel__slide{
box-sizing:border-box;
}
.bn-featured-carousel__shell{
position:relative;
}
.bn-featured-carousel__viewport{
position:relative;
width:100%;
min-height:var(--bn-featured-viewport-height);
overflow:hidden;
overflow-x:clip;
padding-block:6px;
}
.bn-featured-carousel__track{
display:flex;
align-items:stretch;
gap:var(--bn-featured-carousel-gap);
padding-left:max(0px,calc((100% - var(--bn-featured-center-width)) / 2));
padding-right:max(0px,calc((100% - var(--bn-featured-center-width)) / 2));
will-change:transform;
transform:translate3d(0,0,0);
transition-property:transform;
backface-visibility:hidden;
}
.bn-featured-carousel__slide{
display:flex;
align-items:stretch;
justify-content:center;
flex:0 0 var(--bn-featured-center-width);
width:var(--bn-featured-center-width);
max-width:100%;
min-width:0;
z-index:1;
}
.bn-featured-carousel__slide.is-focus{
z-index:3;
}
.bn-featured-carousel .bn-featured-card{
width:100%;
max-width:100%;
height:var(--bn-featured-card-height);
min-height:var(--bn-featured-card-height);
margin:0;
padding:var(--bn-featured-padding);
transform:scale(var(--bn-featured-scale-rest));
transform-origin:center;
opacity:var(--bn-featured-rest-opacity);
transition:transform var(--bn-featured-scale-duration) var(--bn-featured-scale-ease),opacity var(--bn-featured-scale-duration) var(--bn-featured-scale-ease),box-shadow var(--bn-featured-scale-duration) var(--bn-featured-scale-ease),filter var(--bn-featured-scale-duration) var(--bn-featured-scale-ease);
will-change:transform,opacity;
}
.bn-featured-carousel .bn-featured-card .wp-block-columns{
height:100%;
min-height:100%;
gap:clamp(18px,2vw,36px);
}
.bn-featured-carousel__slide.is-focus .bn-featured-card{
transform:scale(var(--bn-featured-scale-focus));
opacity:var(--bn-featured-focus-opacity);
box-shadow:var(--bn-shadow-lg);
}
.bn-featured-carousel__slide:not(.is-focus) .bn-featured-card{
filter:saturate(0.88);
}
.bn-featured-carousel .bn-featured-card::before{
transform:scale(1.04);
filter:blur(2px);
}
.bn-featured-carousel .bn-featured-content{
padding-right:2px;
}
.bn-featured-carousel .bn-featured-content .bn-featured-label{
color:#9a948c;
}
.bn-featured-carousel .bn-featured-media img{
transition:transform var(--bn-featured-scale-duration) var(--bn-featured-scale-ease),box-shadow var(--bn-featured-scale-duration) var(--bn-featured-scale-ease),opacity var(--bn-featured-scale-duration) var(--bn-featured-scale-ease);
}
.bn-featured-carousel__slide.is-focus .bn-featured-media img{
transform:scale(1);
opacity:1;
box-shadow:var(--bn-shadow-xl);
}
.bn-featured-carousel__slide:not(.is-focus) .bn-featured-media img{
transform:scale(0.96);
opacity:0.95;
}
.bn-featured-carousel__slide:not(.is-focus) .bn-featured-content{
opacity:0.92;
}
.bn-featured-carousel.is-snapping .bn-featured-carousel__track,.bn-featured-carousel.is-snapping .bn-featured-carousel__slide,.bn-featured-carousel.is-snapping .bn-featured-card,.bn-featured-carousel.is-snapping .bn-featured-media img,.bn-featured-carousel.is-snapping .bn-featured-content{
transition:none !important;
}
.bn-featured-carousel__button{
position:absolute;
top:calc(var(--bn-featured-card-height) / 2);
z-index:6;
display:inline-flex;
align-items:center;
justify-content:center;
width:clamp(42px,3.6vw,54px);
height:clamp(42px,3.6vw,54px);
border:1px solid var(--bn-white-10);
border-radius:var(--bn-radius-pill);
background:rgba(10,10,10,0.72);
color:#b7b4ae;
cursor:pointer;
transform:translateY(-50%);
box-shadow:var(--bn-shadow);
backdrop-filter:blur(8px);
transition:background 0.2s ease,border-color 0.2s ease,opacity 0.2s ease;
}
.bn-featured-carousel__button:hover{
background:rgba(10,10,10,0.84);
border-color:var(--bn-white-18);
}
.bn-featured-carousel__button span{
font-size:clamp(1.45rem,1.15rem + 0.7vw,2rem);
line-height:1;
font-weight:400;
transform:translateY(-1px);
}
.bn-featured-carousel__button--prev{
left:clamp(8px,calc(var(--bn-featured-arrow-offset-left) + var(--bn-featured-arrow-gap)),96px);
}
.bn-featured-carousel__button--next{
right:clamp(8px,calc(var(--bn-featured-arrow-offset-right) + var(--bn-featured-arrow-gap)),96px);
}
.bn-featured-carousel__controls{
display:flex;
align-items:center;
justify-content:center;
gap:clamp(10px,1.2vw,16px);
width:max-content;
max-width:100%;
margin:clamp(14px,1.5vw,20px) auto 0;
}
.bn-featured-carousel__dots{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}
.bn-featured-carousel__dot{
width:11px;
height:11px;
padding:0;
border:none;
border-radius:var(--bn-radius-pill);
background:var(--bn-white-28);
opacity:0.85;
transition:transform 0.2s ease,background 0.2s ease,opacity 0.2s ease;
}
.bn-featured-carousel__dot:hover{
background:var(--bn-white-40);
}
.bn-featured-carousel__dot.is-active{
background:var(--bn-white-96);
opacity:1;
}
@media (max-width: 1024px){
.bn-featured-card::before{
opacity:0.26;
}
.bn-featured-card::after{
background:linear-gradient(90deg,rgba(10,10,10,0.95) 0%,rgba(24,21,20,0.86) 38%,rgba(38,32,31,0.66) 68%,rgba(55,30,30,0.52) 100%),radial-gradient(circle at 20% 20%,rgba(183,180,174,0.08),transparent 30%),radial-gradient(circle at 80% 10%,rgba(114,110,104,0.14),transparent 30%);
}
.bn-featured-card{
--bn-featured-card-fixed-height:clamp(250px,38vw,360px);
--bn-featured-cover-column:clamp(148px,25vw,230px);
}}
@media (max-width: 768px){
.bn-featured-carousel{
--bn-featured-center-width:100%;
--bn-featured-card-height:236px;
--bn-featured-viewport-height:236px;
width:100%;
max-width:100%;
}
.bn-featured-carousel__viewport{
min-height:var(--bn-featured-viewport-height);
padding-block:0;
padding-inline:1px;
overflow-x:hidden;
}
.bn-featured-carousel__track{
gap:12px;
padding-left:0;
padding-right:0;
}
.bn-featured-carousel__slide{
flex:0 0 100%;
width:100%;
max-width:100%;
}
.bn-featured-carousel .bn-featured-card,.bn-featured-carousel__slide.is-focus .bn-featured-card,.bn-featured-carousel__slide:not(.is-focus) .bn-featured-card{
width:100%;
max-width:100%;
height:var(--bn-featured-card-height);
min-height:var(--bn-featured-card-height);
margin-inline:0;
transform:none;
opacity:1;
filter:none;
}
.bn-featured-card{
--bn-featured-padding:14px;
--bn-featured-gap:12px;
--bn-featured-card-fixed-height:236px;
--bn-featured-cover-column:118px;
--bn-featured-row-label:14px;
--bn-featured-row-title:52px;
--bn-featured-row-original-title:14px;
--bn-featured-row-author:15px;
--bn-featured-row-meta:24px;
--bn-featured-row-tags:20px;
--bn-featured-title-size:1rem;
--bn-featured-body-size:0.77rem;
--bn-featured-meta-size:0.72rem;
--bn-featured-tag-size:0.66rem;
}
.bn-featured-card .wp-block-columns,.bn-featured-carousel .bn-featured-card .wp-block-columns{
grid-template-columns:minmax(0,1fr) var(--bn-featured-cover-column);
gap:var(--bn-featured-gap);
}
.bn-featured-content{
padding-block:2px 4px;
row-gap:5px;
}
.bn-featured-slot--meta{
margin-top:2px;
}
.bn-featured-slot--desc,.bn-featured-slot--tags{
margin-top:3px;
}
.bn-featured-slot--tags{
padding-bottom:2px;
}
.bn-featured-content h1 a,.bn-featured-content h2 a,.bn-featured-content h3 a{
line-height:1.08;
-webkit-line-clamp:2;
line-clamp:2;
}
.bn-featured-description{
-webkit-line-clamp:3;
line-clamp:3;
}
.bn-featured-meta{
gap:6px;
}
.bn-score{
min-height:24px;
padding:2px 8px;
font-size:0.72rem;
line-height:1.15;
}
.bn-tag-list{
gap:6px;
}
.bn-tag{
min-height:20px;
padding-inline:7px;
}
.bn-featured-carousel__controls{
max-width:calc(100% - 8px);
margin:14px auto 0;
gap:10px;
}
.bn-featured-carousel__controls .bn-featured-carousel__button{
position:static;
width:36px;
height:36px;
min-width:36px;
min-height:36px;
background:var(--bn-white-06);
border-color:var(--bn-white-10);
box-shadow:none;
backdrop-filter:none;
transform:none;
}
.bn-featured-carousel__controls .bn-featured-carousel__button span{
font-size:1.25rem;
transform:none;
}
.bn-featured-carousel__controls .bn-featured-carousel__dots{
gap:8px;
}
.bn-card{
--bn-row-card-width:186px;
--bn-row-card-height:348px;
--bn-row-card-cover-height:242px;
}
.bn-card-body{
padding:8px 10px 10px;
row-gap:3px;
}
.bn-card-title{
font-size:0.92rem;
}
.bn-card-meta{
font-size:0.8rem;
}
.bn-series-cover-wrap{
margin-top:clamp(-64px,-9vw,-96px);
}
.bn-series-meta-row{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.bn-series-meta-item{
gap:4px;
padding:10px 8px;
border-radius:14px;
}
.bn-series-meta-label{
font-size:0.62rem;
letter-spacing:0.03em;
}
.bn-series-meta-value{
font-size:0.82rem;
line-height:1.25;
word-break:break-word;
}
.bn-series-ratings-header{
grid-template-columns:1fr;
gap:14px;
padding:14px;
}
.bn-series-rating-breakdown-wrap{
padding:14px;
}
.bn-series-tags,.bn-series-tags--expanded{
justify-content:center;
}}
@media (max-width: 640px){
.bn-featured-carousel{
--bn-featured-card-height:232px;
--bn-featured-viewport-height:232px;
}
.bn-featured-card{
--bn-featured-padding:12px;
--bn-featured-gap:10px;
--bn-featured-card-fixed-height:232px;
--bn-featured-cover-column:108px;
--bn-featured-row-label:13px;
--bn-featured-row-title:48px;
--bn-featured-row-original-title:13px;
--bn-featured-row-author:14px;
--bn-featured-row-meta:22px;
--bn-featured-row-tags:18px;
--bn-featured-title-size:0.95rem;
--bn-featured-body-size:0.73rem;
--bn-featured-meta-size:0.69rem;
--bn-featured-tag-size:0.63rem;
}
.bn-featured-content .bn-featured-author,.bn-featured-content .bn-featured-original-title{
font-size:0.72rem;
}
.bn-featured-content .bn-featured-label{
font-size:0.64rem;
letter-spacing:0.05em;
}
.bn-series-meta-row{
gap:6px;
}
.bn-series-meta-item{
padding:9px 6px;
}
.bn-series-meta-label{
font-size:0.58rem;
}
.bn-series-meta-value{
font-size:0.76rem;
}
.bn-featured-content{
padding-block:3px 5px;
row-gap:4px;
}
.bn-featured-slot--meta{
margin-top:2px;
}
.bn-featured-slot--desc,.bn-featured-slot--tags{
margin-top:3px;
}
.bn-featured-slot--tags{
padding-bottom:2px;
}
.bn-featured-description{
-webkit-line-clamp:2;
line-clamp:2;
}
.bn-featured-media img{
border-radius:12px;
}
.bn-score{
min-height:22px;
padding:2px 7px;
font-size:0.69rem;
line-height:1.15;
}
.bn-comment-form__grid{
grid-template-columns:1fr;
}
.bn-comment-form__shell{
padding:13px;
border-radius:16px;
}
.bn-series-discussion__panel,.bn-series-comment-form{
padding:12px;
}
.bn-comment-form__meta{
gap:8px;
white-space:nowrap;
}
.bn-comment-form__count{
margin-left:auto;
text-align:right;
}
.bn-comment-form__check-row{
align-items:flex-start;
gap:5px;
}
.bn-comment-form__check-row input{
margin-top:2px !important;
}
.bn-comment-form__actions{
margin-top:6px !important;
}
.bn-rating-input__stars{
gap:5px !important;
}
.bn-series-discussion__top{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
column-gap:4px;
padding:10px 12px;
}
.bn-series-discussion__tabs{
gap:3px;
}
.bn-series-discussion__tab{
min-height:32px;
padding:0 10px;
font-size:0.82rem;
}
.bn-series-filter-trigger{
width:32px;
min-width:32px;
height:32px;
margin:0 !important;
}
.bn-series-filter-menu{
top:calc(100% + 4px);
min-width:128px;
}
.bn-comment-form__error-dialog{
width:min(calc(100vw - 20px),360px);
max-width:calc(100vw - 20px);
max-height:calc(100vh - 20px);
padding:16px 14px 14px;
border-radius:18px;
}
.bn-comment-form__error-icon{
width:46px;
height:46px;
margin-bottom:10px;
font-size:1.12rem;
}
.bn-comment-form__error-title{
font-size:1rem;
}
.bn-comment-form__error-text{
font-size:0.88rem;
line-height:1.45;
}
.bn-comment-form__error-button{
min-width:100px;
min-height:38px;
margin-top:14px;
padding:0 14px;
font-size:0.88rem;
}
.bn-comment-error-fallback{
width:min(calc(100vw - 20px),360px);
margin:20px auto;
padding:18px 14px;
box-sizing:border-box;
}
.bn-comment-error-fallback h1{
font-size:1.08rem;
line-height:1.2;
}
.bn-comment-error-fallback p{
font-size:0.9rem;
line-height:1.45;
}}
@media (max-width: 480px){
:root{
--bn-gutter:14px;
}
.bn-featured-carousel{
--bn-featured-card-height:216px;
--bn-featured-viewport-height:216px;
}
.bn-featured-card{
--bn-featured-padding:10px;
--bn-featured-gap:8px;
--bn-featured-card-fixed-height:216px;
--bn-featured-cover-column:96px;
--bn-featured-row-label:12px;
--bn-featured-row-title:44px;
--bn-featured-row-original-title:12px;
--bn-featured-row-author:13px;
--bn-featured-row-meta:20px;
--bn-featured-row-tags:17px;
--bn-featured-title-size:0.89rem;
--bn-featured-body-size:0.69rem;
--bn-featured-meta-size:0.65rem;
--bn-featured-tag-size:0.59rem;
border-radius:16px;
}
.bn-series-meta-row{
gap:5px;
}
.bn-series-meta-item{
padding:8px 5px;
border-radius:12px;
}
.bn-series-meta-label{
font-size:0.54rem;
letter-spacing:0.02em;
}
.bn-series-meta-value{
font-size:0.72rem;
}
.bn-featured-content{
padding-block:4px 6px;
row-gap:3px;
}
.bn-featured-meta{
gap:5px;
}
.bn-featured-media img{
border-radius:10px;
}
.bn-card{
--bn-row-card-width:174px;
--bn-row-card-height:298px;
--bn-row-card-cover-height:206px;
}
.bn-card-body{
padding:7px 8px 9px;
row-gap:2px;
}
.bn-rank-badge{
top:8px;
left:8px;
min-width:30px;
height:30px;
font-size:0.82rem;
}
.bn-score{
min-height:20px;
padding:2px 7px;
font-size:0.65rem;
line-height:1.15;
}
.bn-featured-carousel__controls{
gap:8px;
max-width:100%;
}
.bn-featured-carousel__controls .bn-featured-carousel__button{
width:34px;
height:34px;
min-width:34px;
min-height:34px;
}
.bn-featured-carousel__controls .bn-featured-carousel__dots{
gap:7px;
}
.bn-row-header{
gap:12px;
}
.bn-row-more{
padding-left:8px;
}
.bn-row-more a{
font-size:0.9rem;
}
.bn-series-main{
width:min(100% - 28px,980px);
}
.bn-series-banner{
min-height:160px;
}
.bn-series-cover{
width:156px;
}
.bn-series-comment-card,.bn-series-comment-form,.bn-series-body__inner{
padding:16px;
}
.bn-series-discussion__panel{
padding:16px;
}}
@media (max-width: 380px){
.bn-featured-carousel{
--bn-featured-card-height:202px;
--bn-featured-viewport-height:202px;
}
.bn-featured-card{
--bn-featured-card-fixed-height:202px;
--bn-featured-cover-column:88px;
--bn-featured-row-label:11px;
--bn-featured-row-title:40px;
--bn-featured-row-original-title:11px;
--bn-featured-row-author:12px;
--bn-featured-row-meta:19px;
--bn-featured-row-tags:16px;
--bn-featured-title-size:0.83rem;
--bn-featured-body-size:0.64rem;
--bn-featured-meta-size:0.61rem;
--bn-featured-tag-size:0.56rem;
}
.bn-score{
min-height:19px;
padding:2px 6px;
font-size:0.61rem;
line-height:1.15;
}
.bn-featured-carousel__controls{
gap:6px;
}
.bn-featured-carousel__controls .bn-featured-carousel__button{
width:32px;
height:32px;
min-width:32px;
min-height:32px;
}
.bn-featured-carousel__controls .bn-featured-carousel__button span{
font-size:1.1rem;
}
.bn-featured-carousel__controls .bn-featured-carousel__dots{
gap:6px;
}
.bn-featured-carousel__dot{
width:10px;
height:10px;
}
.bn-card{
--bn-row-card-height:274px;
--bn-row-card-cover-height:188px;
}
.bn-card-title{
font-size:0.86rem;
}
.bn-card-meta{
font-size:0.76rem;
}}
@media (min-width: 769px){
.bn-featured-carousel__controls{
display:block;
width:auto;
max-width:none;
margin-top:0;
}
.bn-featured-carousel__controls .bn-featured-carousel__dots{
margin-top:clamp(14px,1.5vw,20px);
gap:10px;
}
.bn-featured-carousel__controls .bn-featured-carousel__button{
position:absolute;
top:calc(var(--bn-featured-card-height) / 2);
width:clamp(42px,3.6vw,54px);
height:clamp(42px,3.6vw,54px);
transform:translateY(-50%);
}
.bn-featured-carousel__controls .bn-featured-carousel__button--prev{
left:clamp(8px,calc(var(--bn-featured-arrow-offset-left) + var(--bn-featured-arrow-gap)),96px);
}
.bn-featured-carousel__controls .bn-featured-carousel__button--next{
right:clamp(8px,calc(var(--bn-featured-arrow-offset-right) + var(--bn-featured-arrow-gap)),96px);
}}
@media (prefers-reduced-motion: reduce){
.bn-site-loader,.bn-site-loader__mark::after,body:not(.bn-site-ready) .bn-featured-carousel::before,body:not(.bn-site-ready) .bn-row-slider::before{
animation:none !important;
transition:none !important;
}}
.bn-series-tag,.bn-tag{
--bn-tag-h:34;
--bn-tag-s:22%;
--bn-tag-l:67%;
border-color:hsl(var(--bn-tag-h) var(--bn-tag-s) var(--bn-tag-l) / 0.32);
background:linear-gradient(180deg,hsl(var(--bn-tag-h) var(--bn-tag-s) var(--bn-tag-l) / 0.16),hsl(var(--bn-tag-h) var(--bn-tag-s) 28% / 0.1));
color:hsl(var(--bn-tag-h) 26% 82%);
}
.bn-series-tag--color-1,.bn-tag--color-1{
--bn-tag-h:12;
}
.bn-series-tag--color-2,.bn-tag--color-2{
--bn-tag-h:28;
}
.bn-series-tag--color-3,.bn-tag--color-3{
--bn-tag-h:46;
}
.bn-series-tag--color-4,.bn-tag--color-4{
--bn-tag-h:78;
}
.bn-series-tag--color-5,.bn-tag--color-5{
--bn-tag-h:118;
}
.bn-series-tag--color-6,.bn-tag--color-6{
--bn-tag-h:158;
}
.bn-series-tag--color-7,.bn-tag--color-7{
--bn-tag-h:190;
}
.bn-series-tag--color-8,.bn-tag--color-8{
--bn-tag-h:214;
}
.bn-series-tag--color-9,.bn-tag--color-9{
--bn-tag-h:252;
}
.bn-series-tag--color-10,.bn-tag--color-10{
--bn-tag-h:286;
}
.bn-series-tag--color-11,.bn-tag--color-11{
--bn-tag-h:322;
}
.bn-series-tag--color-12,.bn-tag--color-12{
--bn-tag-h:348;
}
.bn-series-tag[style*="--bn-tag-custom"],.bn-tag[style*="--bn-tag-custom"]{
border-color:color-mix(in srgb,var(--bn-tag-custom) 58%,transparent);
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-tag-custom) 23%,transparent),color-mix(in srgb,var(--bn-tag-custom) 12%,transparent));
color:color-mix(in srgb,var(--bn-tag-custom) 34%,#ffffff);
}
@supports not (color: color-mix(in srgb,red,blue)){
.bn-series-tag[style*="--bn-tag-custom"],.bn-tag[style*="--bn-tag-custom"]{
border-color:rgba(var(--bn-tag-rgb),0.48);
background:linear-gradient(180deg,rgba(var(--bn-tag-rgb),0.2),rgba(var(--bn-tag-rgb),0.1));
color:rgba(var(--bn-tag-rgb),0.92);
}}
.bn-tag-list,.bn-series-tags,.bn-series-tags--expanded{
flex-wrap:wrap !important;
overflow:visible !important;
white-space:normal !important;
min-width:0 !important;
}
.bn-tag,.bn-series-tag{
flex:0 1 auto !important;
max-width:100% !important;
min-width:0 !important;
min-height:28px !important;
padding:5px 10px !important;
font-size:0.82rem !important;
line-height:1.18 !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
word-break:normal !important;
overflow-wrap:anywhere !important;
hyphens:auto !important;
text-align:center !important;
box-sizing:border-box !important;
}
.bn-featured-card .bn-featured-slot--tags,.bn-featured-card .bn-tag-list{
min-width:0 !important;
max-width:100% !important;
overflow:hidden !important;
}
.bn-featured-card .bn-tag-list{
display:flex !important;
align-content:flex-start !important;
align-items:flex-start !important;
flex-wrap:wrap !important;
gap:clamp(4px,0.55vw,7px) !important;
max-block-size:calc((var(--bn-featured-tag-line,24px) * var(--bn-featured-tag-rows,2)) + (clamp(4px,0.55vw,7px) * (var(--bn-featured-tag-rows,2) - 1))) !important;
white-space:normal !important;
}
.bn-featured-card .bn-tag{
flex:0 1 auto !important;
max-inline-size:min(100%,22ch) !important;
min-block-size:var(--bn-featured-tag-line,24px) !important;
block-size:var(--bn-featured-tag-line,24px) !important;
padding-block:0 !important;
padding-inline:clamp(6px,0.75vw,10px) !important;
font-size:var(--bn-featured-tag-size) !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
word-break:normal !important;
overflow-wrap:normal !important;
hyphens:none !important;
text-align:center !important;
}
@media (max-width: 780px){
.bn-featured-card{
--bn-featured-tag-line:20px;
--bn-featured-tag-rows:2;
}
.bn-featured-card .bn-tag{
max-inline-size:min(100%,17ch) !important;
}}
@media (max-width: 480px){
.bn-featured-card{
--bn-featured-tag-line:18px;
--bn-featured-tag-rows:2;
}
.bn-featured-card .bn-tag-list{
gap:4px !important;
}
.bn-featured-card .bn-tag{
max-inline-size:min(100%,14ch) !important;
padding-inline:6px !important;
}}
@media (max-width: 380px){
.bn-featured-card{
--bn-featured-tag-line:17px;
--bn-featured-tag-rows:1;
}}
.bn-featured-card .bn-featured-slot--tags{
min-block-size:0 !important;
overflow:hidden !important;
}
.bn-featured-card .bn-tag-list{
--bn-featured-tag-line:clamp(22px,2vw,30px);
--bn-featured-tag-gap:clamp(4px,0.6vw,8px);
align-items:flex-start !important;
align-content:flex-start !important;
flex-wrap:wrap !important;
gap:var(--bn-featured-tag-gap) !important;
max-block-size:calc((var(--bn-featured-tag-line) * 2) + var(--bn-featured-tag-gap)) !important;
overflow:hidden !important;
white-space:normal !important;
}
.bn-featured-card .bn-tag{
display:inline-flex;
align-items:center;
justify-content:center;
block-size:var(--bn-featured-tag-line) !important;
min-block-size:var(--bn-featured-tag-line) !important;
max-inline-size:100% !important;
padding-block:0 !important;
padding-inline:clamp(7px,0.8vw,11px) !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.bn-featured-card .bn-tag.is-overflow-hidden{
display:none !important;
}
.bn-featured-card .bn-tag-more{
flex:0 0 auto;
min-inline-size:var(--bn-featured-tag-line);
color:var(--bn-text);
text-decoration:none;
}
.bn-featured-card .bn-tag-more:hover,.bn-featured-card .bn-tag-more:focus-visible{
color:var(--bn-text);
text-decoration:none;
}
@media (max-width: 780px){
.bn-featured-card .bn-tag-list{
--bn-featured-tag-line:22px;
--bn-featured-tag-gap:5px;
}}
@media (max-width: 480px){
.bn-featured-card .bn-tag-list{
--bn-featured-tag-line:20px;
--bn-featured-tag-gap:4px;
}
.bn-featured-card .bn-tag{
padding-inline:6px !important;
font-size:max(0.58rem,var(--bn-featured-tag-size)) !important;
}}
@media (max-width: 380px){
.bn-featured-card .bn-tag-list{
--bn-featured-tag-line:19px;
}}
.bn-account-menu-item{
position:relative;
list-style:none;
}
.bn-account-menu{
position:relative;
}
.bn-account-menu__toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border:1px solid var(--bn-line);
border-radius:999px;
background:var(--bn-white-04);
color:var(--bn-text);
cursor:pointer;
transition:background 0.18s ease,border-color 0.18s ease,transform 0.18s ease;
}
.bn-account-menu__toggle::-webkit-details-marker{
display:none;
}
.bn-account-menu__toggle svg{
width:21px;
height:21px;
}
.bn-account-menu[open] .bn-account-menu__toggle,.bn-account-menu__toggle:hover{
background:var(--bn-white-08);
border-color:var(--bn-accent-focus);
transform:translateY(-1px);
}
.bn-account-menu__dropdown{
position:absolute;
z-index:50;
top:calc(100% + 10px);
right:0;
min-width:210px;
padding:8px;
border:1px solid var(--bn-line);
border-radius:18px;
background:rgba(24,22,21,0.98);
box-shadow:0 18px 44px rgba(0,0,0,0.34);
backdrop-filter:blur(16px);
}
.bn-account-menu__item{
display:flex;
align-items:center;
min-height:42px;
padding:0 13px;
border-radius:12px;
color:var(--bn-text);
font-size:0.92rem;
font-weight:700;
text-decoration:none;
white-space:nowrap;
}
.bn-account-menu__item:hover,.bn-account-menu__item:focus{
background:var(--bn-white-06);
outline:0;
}
.bn-comment-form__field--guest-identity{
margin-bottom:2px;
}
.bn-comment-form__guest-badge{
display:inline-flex;
align-items:center;
gap:6px;
width:fit-content;
max-width:100%;
padding:8px 11px;
border:1px solid var(--bn-line);
border-radius:999px;
background:var(--bn-white-035);
color:var(--bn-muted);
font-size:0.84rem;
line-height:1.2;
}
.bn-comment-form__guest-badge strong{
color:var(--bn-text);
font-weight:800;
}
@media (max-width: 700px){
.bn-account-menu__dropdown{
right:auto;
left:50%;
transform:translateX(-50%);
}}
.bn-account-menu__mobile{
display:none;
}
.bn-account-menu__mobile-head{
display:none;
}
.bn-account-menu__mobile-icon svg{
width:30px;
height:30px;
}
@media (max-width: 782px){
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
align-items:center !important;
text-align:center;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu-item{
order:-100;
width:100%;
display:flex !important;
justify-content:center;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu{
width:100%;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__toggle,.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__dropdown{
display:none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile{
display:grid;
justify-items:center;
gap:10px;
width:100%;
padding:8px 0 16px;
text-align:center;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile-head{
display:grid;
justify-items:center;
gap:8px;
padding:4px 0 8px;
color:var(--bn-text);
text-align:center;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile-head strong{
font-size:1rem;
font-weight:800;
line-height:1.2;
text-align:center;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border:1px solid var(--bn-line);
border-radius:999px;
background:var(--bn-white-04);
color:var(--bn-text);
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__item{
justify-content:center;
min-height:42px;
padding:0;
color:var(--bn-text);
background:none !important;
text-align:center;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__item:hover,.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__item:focus{
background:none !important;
text-decoration:underline;
}}
.has-bpp-series-title-suggest{
position:relative;
}
.bn-series-title-suggest{
position:absolute;
z-index:60;
top:calc(100% + 8px);
left:0;
right:0;
display:grid;
gap:4px;
max-height:min(330px,70vh);
padding:8px;
border:1px solid rgba(183,180,174,.18);
background:rgba(18,16,15,.98);
box-shadow:0 18px 44px rgba(0,0,0,.36);
overflow:auto;
clip-path:inset(0 round 16px);
}
.bn-series-title-suggest[hidden]{
display:none !important;
}
.bn-series-title-suggest a{
display:block;
padding:10px 12px;
color:var(--bn-text);
font-size:.9rem;
font-weight:850;
line-height:1.2;
text-decoration:none;
clip-path:inset(0 round 11px);
}
.bn-series-title-suggest a:hover,.bn-series-title-suggest a:focus{
background:rgba(255,255,255,.075);
outline:0;
}
.wp-block-search,.bn-site-search{
overflow:visible;
}
.bn-cart-menu-item{
position:relative;
list-style:none;
}
.bn-cart-menu__toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border:1px solid var(--bn-line);
border-radius:999px;
background:var(--bn-white-04);
color:var(--bn-text);
text-decoration:none;
cursor:pointer;
transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.bn-cart-menu__toggle svg{
display:block;
width:21px;
height:21px;
}
.bn-cart-menu__toggle:hover,.bn-cart-menu__toggle:focus-visible{
background:var(--bn-white-08);
border-color:var(--bn-accent-focus);
transform:translateY(-1px);
outline:0;
}
@media (max-width:782px){
.wp-block-navigation__responsive-container.is-menu-open .bn-cart-menu-item{
order:-99;
display:flex !important;
justify-content:center;
width:100%;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-cart-menu__toggle{
width:46px;
height:46px;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-cart-menu__toggle svg{
width:23px;
height:23px;
}}
.bn-cart-menu__toggle{
position:relative;
cursor:pointer;
}
.bn-cart-menu__badge{
position:absolute;
top:-5px;
right:-5px;
display:grid;
place-items:center;
min-width:18px;
height:18px;
padding:0 5px;
border:2px solid var(--bn-bg,#151312);
border-radius:999px;
background:#e23535;
color:#fff;
font-size:.68rem;
font-weight:950;
line-height:1;
}
.bn-cart-menu__badge[hidden]{
display:none !important;
}
a[href],button:not(:disabled),[role=button]{
cursor:pointer;
}
button:disabled,[aria-disabled=true]{
cursor:not-allowed;
}
.bn-cart-menu__toggle{
overflow:visible !important;
}
.bn-cart-menu__badge{
top:-7px !important;
right:-7px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:18px !important;
height:18px !important;
padding:0 5px !important;
border:2px solid #151312 !important;
border-radius:999px !important;
background:#e23535 !important;
color:#fff !important;
font-size:10px !important;
font-weight:950 !important;
line-height:18px !important;
letter-spacing:0 !important;
text-align:center !important;
transform:none !important;
}
@media (max-width:782px){
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile-actions{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile-actions .bn-cart-menu__toggle{
width:46px;
height:46px;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile-actions .bn-cart-menu__toggle svg{
width:23px;
height:23px;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-cart-menu-item{
display:none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile-head{
gap:8px;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__mobile-icon{
margin:0;
}}
header .bn-series-title-suggest{
z-index:99999 !important;
}
header .has-bpp-series-title-suggest{
isolation:isolate;
}
html.has-bpp-suggest-open header .wp-block-navigation,html.has-bpp-suggest-open header .wp-block-navigation__container{
z-index:10 !important;
}
html.has-bpp-suggest-open header .wp-block-navigation .wp-block-navigation-item:not(.has-child),html.has-bpp-suggest-open header .wp-block-navigation .wp-block-navigation-item__content{
pointer-events:none !important;
}
header .has-bpp-suggest-open,header .has-bpp-suggest-open form,header .has-bpp-suggest-open .bn-series-title-suggest{
z-index:2147483000 !important;
}
header .has-bpp-suggest-open .bn-series-title-suggest{
pointer-events:auto !important;
position:absolute !important;
isolation:isolate !important;
}
header .bn-series-title-suggest a{
position:relative !important;
z-index:2 !important;
pointer-events:auto !important;
}
.bn-account-menu__toggle-icon,.bn-account-menu__item--notifications{
position:relative;
}
.bn-account-menu__item--notifications{
width:100%;
border:0;
background:transparent;
font:inherit;
text-align:left;
cursor:pointer;
color:inherit;
}
.bn-account-menu__item--notifications svg{
width:17px;
height:17px;
margin-right:8px;
vertical-align:-3px;
stroke:currentColor;
}
.bn-notification-badge{
position:absolute;
top:-7px;
right:-7px;
display:inline-flex !important;
align-items:center !important;
justify-content:center;
min-width:16px;
height:16px;
padding:0 4px;
border:2px solid var(--bn-bg);
border-radius:var(--bn-radius-pill);
background:#ef4444;
color:#fff;
font-size:10px;
font-weight:950;
line-height:16px;
box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.bn-notification-badge[hidden]{
display:none !important;
}
.bn-account-menu__item--notifications .bn-notification-badge{
top:6px;
right:10px;
}
.has-bpp-notifications-modal{
overflow:hidden;
}
.bn-notifications-modal[hidden]{
display:none !important;
}
.bn-notifications-modal{
position:fixed;
inset:0;
z-index:100000;
display:grid;
place-items:center;
padding:var(--bn-gutter);
font-family:var(--bn-font-sans);
color:var(--bn-text);
}
.bn-notifications-modal__backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.72);
backdrop-filter:blur(10px);
}
.bn-notifications-modal__dialog{
position:relative;
width:min(640px,100%);
max-height:min(720px,88vh);
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid var(--bn-line);
border-radius:var(--bn-radius-lg);
background:linear-gradient(180deg,var(--bn-card) 0%,#1b1917 100%);
box-shadow:var(--bn-shadow-xl);
}
.bn-notifications-modal__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:22px 24px;
border-bottom:1px solid var(--bn-white-06);
background:var(--bn-white-02);
}
.bn-notifications-modal__head p{
margin:0 0 4px;
color:var(--bn-gold-text);
font-size:12px;
font-weight:850;
letter-spacing:.1em;
text-transform:uppercase;
}
.bn-notifications-modal__head h2{
margin:0;
color:var(--bn-white-96);
font-size:clamp(1.35rem,1rem + 1vw,2rem);
letter-spacing:var(--bn-letter-tight);
line-height:1.05;
}
.bn-notifications-modal__close,.bn-notifications-modal__delete{
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--bn-line);
border-radius:var(--bn-radius-pill);
background:var(--bn-white-04);
color:var(--bn-text);
cursor:pointer;
transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.bn-notifications-modal__close:hover,.bn-notifications-modal__delete:hover{
border-color:var(--bn-accent-line);
background:var(--bn-white-08);
color:#fff;
}
.bn-notifications-modal__close{
width:40px;
height:40px;
font-size:25px;
line-height:1;
}
.bn-notifications-modal__actions{
display:flex;
justify-content:flex-end;
gap:8px;
padding:12px 18px;
border-bottom:1px solid var(--bn-white-06);
background:var(--bn-white-01);
}
.bn-notifications-modal__action{
border:1px solid var(--bn-line);
border-radius:var(--bn-radius-pill);
background:var(--bn-white-03);
color:var(--bn-text);
padding:8px 13px;
font-size:12px;
font-weight:850;
cursor:pointer;
transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.bn-notifications-modal__action:hover{
border-color:var(--bn-accent-line);
background:var(--bn-white-08);
color:#fff;
}
.bn-notifications-modal__action.is-danger{
border-color:var(--bn-danger-line);
color:var(--bn-danger-text);
}
.bn-notifications-modal__list{
overflow:auto;
padding:12px;
scrollbar-width:thin;
scrollbar-color:var(--bn-white-16) transparent;
}
.bn-notifications-modal__item{
position:relative;
display:grid;
gap:4px;
margin:0 0 8px;
padding:14px 48px 14px 16px;
border:1px solid var(--bn-line);
border-radius:var(--bn-radius-md);
background:var(--bn-white-035);
color:inherit;
text-decoration:none;
transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.bn-notifications-modal__item:hover{
border-color:var(--bn-accent-line);
background:var(--bn-white-06);
transform:translateY(-1px);
}
.bn-notifications-modal__item.is-unread{
border-color:rgba(239,68,68,.42);
box-shadow:inset 4px 0 0 #ef4444;
}
.bn-notifications-modal__item strong{
color:var(--bn-white-96);
font-size:15px;
}
.bn-notifications-modal__item span{
color:var(--bn-text);
font-size:13px;
}
.bn-notifications-modal__item em{
color:var(--bn-muted);
font-size:11px;
font-style:normal;
}
.bn-notifications-modal__delete{
position:absolute;
top:12px;
right:12px;
width:28px;
height:28px;
font-size:19px;
}
.bn-notifications-modal__empty{
margin:28px 12px;
color:var(--bn-text-soft);
text-align:center;
}
.bn-user-mention{
display:inline-flex;
align-items:center;
border-radius:var(--bn-radius-pill);
background:var(--bn-gold-soft);
padding:0 .38em;
color:var(--bn-gold-text);
font-weight:850;
text-decoration:none;
}
.bn-user-mention:hover{
color:#fff;
}
.bn-mention-menu{
position:absolute;
z-index:100001;
width:min(330px,calc(100vw - 24px));
overflow:hidden;
border:1px solid var(--bn-line);
border-radius:var(--bn-radius-md);
background:linear-gradient(180deg,var(--bn-card) 0%,#1b1917 100%);
box-shadow:var(--bn-shadow-lg);
padding:6px;
color:var(--bn-text);
font-family:var(--bn-font-sans);
}
.bn-mention-menu__item{
display:flex;
align-items:center;
gap:10px;
width:100%;
border:0;
border-radius:var(--bn-radius-sm);
background:transparent;
padding:9px;
color:var(--bn-text);
text-align:left;
cursor:pointer;
}
.bn-mention-menu__item:hover,.bn-mention-menu__item:focus-visible,.bn-mention-menu__item.is-active{
background:var(--bn-white-08);
color:#fff;
outline:0;
}
.bn-mention-menu__avatar{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
flex:0 0 34px;
border-radius:var(--bn-radius-pill);
background:var(--bn-gold-soft);
background-size:cover;
background-position:center;
color:var(--bn-gold-text);
font-weight:900;
}
.bn-mention-menu__item strong,.bn-mention-menu__item small{
display:block;
}
.bn-mention-menu__item strong{
color:inherit;
font-size:13px;
}
.bn-mention-menu__item small{
color:var(--bn-text-soft);
font-size:11px;
}
.bn-account-menu__item--notifications{
display:flex !important;
align-items:center;
gap:8px;
position:relative !important;
padding-right:34px !important;
}
.bn-account-menu__item--notifications svg{
flex:0 0 17px;
margin-right:0 !important;
}
.bn-account-menu__item--notifications .bn-notification-badge{
top:50% !important;
right:12px !important;
transform:translateY(-50%) !important;
border-color:#151312 !important;
}
.bn-notification-badge--account{
top:-6px !important;
right:-6px !important;
}
.bn-user-mention{
display:inline-flex !important;
align-items:center;
vertical-align:baseline;
border:1px solid var(--bn-accent-line);
border-radius:var(--bn-radius-pill);
background:linear-gradient(180deg,var(--bn-gold-soft),rgba(211,167,75,.12));
padding:.02em .48em;
color:var(--bn-gold-text) !important;
font-weight:900;
text-decoration:none !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.bn-user-mention:hover{
border-color:var(--bn-accent-focus);
color:#fff !important;
}
.bn-user-mention--missing{
border-color:var(--bn-line);
background:var(--bn-white-04);
color:var(--bn-text-soft) !important;
}
.bn-mention-menu{
position:fixed !important;
z-index:2147483000 !important;
max-height:min(280px,48vh);
overflow:auto !important;
isolation:isolate;
pointer-events:auto;
}
.bn-notifications-modal__item.is-highlighted{
border-color:rgba(211,167,75,.58);
background:linear-gradient(180deg,rgba(211,167,75,.13),var(--bn-white-035));
box-shadow:inset 4px 0 0 var(--bn-gold),0 0 0 1px rgba(211,167,75,.08);
}
.bn-notifications-modal__item.is-highlighted strong{
color:#fff;
}
.bn-notifications-modal__item.is-highlighted:before{
content:"";
position:absolute;
top:14px;
right:48px;
width:8px;
height:8px;
border-radius:50%;
background:#ef4444;
box-shadow:0 0 0 3px rgba(239,68,68,.16);
}
.bn-account-menu__item--notifications{
font-family:inherit !important;
font-size:inherit !important;
font-weight:inherit !important;
letter-spacing:inherit !important;
line-height:inherit !important;
text-transform:inherit !important;
}
.bn-account-menu__item--notifications span:not(.bn-notification-badge){
font:inherit !important;
color:inherit !important;
}
.bn-user-mention{
display:inline !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
padding:0 !important;
box-shadow:none !important;
color:var(--bn-gold-text) !important;
font-weight:850 !important;
text-decoration:none !important;
}
.bn-user-mention:hover{
color:#fff !important;
text-decoration:underline !important;
}
.bn-user-mention--missing{
color:var(--bn-text-soft) !important;
}
.bn-notifications-modal__item:not(.is-highlighted):before{
display:none !important;
}
.bn-notifications-modal__item:not(.is-unread){
box-shadow:none;
}
.bn-notifications-modal__item:not(.is-highlighted){
border-color:var(--bn-line);
background:var(--bn-white-035);
}
.bn-account-menu__item.bn-account-menu__item--notifications{
appearance:none !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
width:100% !important;
min-height:42px !important;
padding:0 34px 0 13px !important;
border:0 !important;
border-radius:12px !important;
background:transparent !important;
color:var(--bn-text) !important;
font-family:var(--bn-font-sans) !important;
font-size:.92rem !important;
font-weight:700 !important;
line-height:normal !important;
letter-spacing:normal !important;
text-align:left !important;
text-decoration:none !important;
text-transform:none !important;
white-space:nowrap !important;
cursor:pointer !important;
}
.bn-account-menu__item.bn-account-menu__item--notifications:hover,.bn-account-menu__item.bn-account-menu__item--notifications:focus{
background:var(--bn-white-06) !important;
outline:0 !important;
}
.bn-account-menu__item.bn-account-menu__item--notifications>span:not(.bn-notification-badge){
display:inline !important;
font:inherit !important;
color:inherit !important;
line-height:inherit !important;
letter-spacing:inherit !important;
text-transform:inherit !important;
}
.bn-account-menu__item.bn-account-menu__item--notifications>svg{
width:17px !important;
height:17px !important;
flex:0 0 17px !important;
margin:0 8px 0 0 !important;
stroke:currentColor !important;
}
@media (min-width:783px){
.bn-account-menu__dropdown .bn-account-menu__item:not(.bn-account-menu__item--notifications){
justify-content:center;
text-align:center;
}
.bn-account-menu__item.bn-account-menu__item--notifications{
justify-content:flex-start;
text-align:left;
}}
.bn-notification-crisp-price{
display:inline-flex;
align-items:center;
gap:.25em;
font-weight:900;
}
.bn-notification-crisp-icon{
display:inline-flex;
width:1.15em;
height:1.15em;
vertical-align:-.18em;
}
.bn-notification-crisp-icon .bn-crisps-icon{
width:100%;
height:100%;
}
.bn-featured-card .bn-featured-slot--desc{
align-self:stretch !important;
min-block-size:0 !important;
overflow:hidden !important;
}
.bn-featured-card .bn-featured-slot--tags{
align-self:end !important;
min-block-size:0 !important;
overflow:hidden !important;
}
.bn-featured-card .bn-featured-description{
max-block-size:100% !important;
overflow:hidden !important;
}
.bn-featured-card .bn-tag-list{
max-inline-size:100% !important;
}
.bn-featured-card .bn-tag{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
}
.bn-featured-card .bn-featured-content{
grid-template-rows:var(--bn-featured-row-label) var(--bn-featured-row-title) var(--bn-featured-row-original-title) var(--bn-featured-row-author) var(--bn-featured-row-meta) minmax(0,1fr) minmax(0,calc((var(--bn-featured-tag-line,24px) * var(--bn-featured-tag-rows,2)) + (clamp(4px,.6vw,8px) * (var(--bn-featured-tag-rows,2) - 1)))) !important;
}
@media (max-width:640px){
.bn-featured-card .bn-featured-content{
grid-template-rows:var(--bn-featured-row-label) var(--bn-featured-row-title) var(--bn-featured-row-original-title) var(--bn-featured-row-author) var(--bn-featured-row-meta) minmax(0,1fr) minmax(0,42px) !important;
}
.bn-featured-card .bn-featured-description{
-webkit-line-clamp:2 !important;
line-clamp:2 !important;
}
.bn-featured-card .bn-tag-list{
max-block-size:42px !important;
}}
@media (max-width:480px){
.bn-featured-card .bn-featured-content{
grid-template-rows:var(--bn-featured-row-label) var(--bn-featured-row-title) var(--bn-featured-row-original-title) var(--bn-featured-row-author) var(--bn-featured-row-meta) minmax(0,1fr) minmax(0,36px) !important;
}
.bn-featured-card .bn-featured-description{
-webkit-line-clamp:2 !important;
line-clamp:2 !important;
}
.bn-featured-card .bn-tag-list{
max-block-size:36px !important;
}}
@media (max-width:380px){
.bn-featured-card .bn-featured-content{
grid-template-rows:var(--bn-featured-row-label) var(--bn-featured-row-title) var(--bn-featured-row-original-title) var(--bn-featured-row-author) var(--bn-featured-row-meta) minmax(0,1fr) minmax(0,18px) !important;
}
.bn-featured-card .bn-featured-description{
-webkit-line-clamp:1 !important;
line-clamp:1 !important;
}
.bn-featured-card .bn-tag-list{
max-block-size:18px !important;
}}
@media (max-width:782px){
.bn-notification-badge--account{
display:none !important;
}
.wp-block-navigation__responsive-container-open{
position:relative !important;
overflow:visible !important;
}
.wp-block-navigation__responsive-container-open .bn-notification-badge--nav-toggle{
top:-7px !important;
right:-7px !important;
border-color:#151312 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__item.bn-account-menu__item--notifications{
position:relative !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
min-width:0 !important;
max-width:100% !important;
margin:0 auto !important;
padding:0 25px 0 0 !important;
overflow:visible !important;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__item.bn-account-menu__item--notifications>svg{
margin:0 8px 0 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .bn-account-menu__item.bn-account-menu__item--notifications .bn-notification-badge{
top:50% !important;
right:0 !important;
transform:translateY(-50%) !important;
border-color:#151312 !important;
}}
@media (min-width:783px){
.bn-notification-badge--nav-toggle{
display:none !important;
}}
.bn-featured-card{
--bn-featured-desc-lines:4;
}
.bn-featured-card .bn-featured-slot--desc,.bn-featured-card .bn-featured-description{
overflow:hidden !important;
}
.bn-featured-card .bn-featured-description{
display:-webkit-box !important;
line-height:1.45 !important;
max-block-size:calc((1.45em * var(--bn-featured-desc-lines)) - .5px) !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:var(--bn-featured-desc-lines) !important;
line-clamp:var(--bn-featured-desc-lines) !important;
contain:paint;
}
.bn-featured-card .bn-featured-slot--desc{
max-block-size:calc((1.45em * var(--bn-featured-desc-lines)) - .5px) !important;
}
@media (max-width:768px){
.bn-featured-card{
--bn-featured-desc-lines:3;
}}
@media (max-width:640px){
.bn-featured-card{
--bn-featured-desc-lines:2;
}}
@media (max-width:380px){
.bn-featured-card{
--bn-featured-desc-lines:1;
}}
.bn-system-panel{
position:relative;
isolation:isolate;
box-sizing:border-box;
margin:1.35rem 0;
padding:18px 20px;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 38%,transparent);
border-radius:18px;
background:linear-gradient(135deg,var(--bn-sp-panel),var(--bn-sp-panel-2));
box-shadow:0 14px 38px color-mix(in srgb,var(--bn-sp-dark) 44%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 12%,transparent);
color:var(--bn-sp-text);
font-family:var(--bn-font-sans,inherit);
overflow:hidden;
backdrop-filter:blur(12px);
}
.bn-system-panel:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:radial-gradient(circle at 16% 0,color-mix(in srgb,var(--bn-sp-accent) 30%,transparent),transparent 34%),linear-gradient(90deg,color-mix(in srgb,var(--bn-sp-accent) 10%,transparent) 1px,transparent 1px),linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-accent) 8%,transparent) 1px,transparent 1px);
background-size:auto,34px 34px,34px 34px;
pointer-events:none;
}
.bn-system-panel *{
box-sizing:border-box;
}
.bn-system-panel__title{
display:inline-flex;
align-items:center;
max-width:100%;
margin:0 0 12px;
padding:5px 11px;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 44%,transparent);
border-radius:999px;
background:color-mix(in srgb,var(--bn-sp-accent) 24%,transparent);
box-shadow:0 0 18px color-mix(in srgb,var(--bn-sp-accent) 18%,transparent);
color:color-mix(in srgb,var(--bn-sp-text) 88%,white);
font-size:.74rem;
font-weight:900;
letter-spacing:.12em;
line-height:1;
text-transform:uppercase;
}
.bn-system-panel__body{
display:grid;
gap:12px;
min-width:0;
color:var(--bn-sp-text);
font-size:clamp(.96rem,.92rem + .15vw,1.04rem);
font-weight:550;
line-height:1.7;
text-shadow:0 0 14px color-mix(in srgb,var(--bn-sp-accent) 20%,transparent);
}
.bn-system-panel--align-center .bn-system-panel__title{
display:flex;
width:max-content;
margin-left:auto;
margin-right:auto;
text-align:center;
justify-content:center;
}
.bn-system-panel--align-right .bn-system-panel__title{
display:flex;
width:max-content;
margin-left:auto;
text-align:right;
justify-content:flex-end;
}
.bn-system-panel--align-justify .bn-system-panel__title{
display:flex;
width:100%;
text-align:justify;
justify-content:space-between;
}
.bn-system-panel__group{
display:grid;
gap:8px;
min-width:0;
}
.bn-system-panel__row{
display:block;
min-width:0;
}
.bn-system-panel__row--label{
display:grid;
grid-template-columns:max-content minmax(0,1fr);
align-items:flex-start;
gap:.55em;
}
.bn-system-panel__text{
display:inline;
min-width:0;
overflow-wrap:anywhere;
}
.bn-system-panel--align-left .bn-system-panel__body{
text-align:left;
}
.bn-system-panel--align-center .bn-system-panel__body{
text-align:center;
}
.bn-system-panel--align-center .bn-system-panel__row--label{
grid-template-columns:max-content minmax(0,max-content);
justify-content:center;
}
.bn-system-panel--align-right .bn-system-panel__body{
text-align:right;
}
.bn-system-panel--align-right .bn-system-panel__row--label{
grid-template-columns:max-content minmax(0,max-content);
justify-content:flex-end;
}
.bn-system-panel--align-justify .bn-system-panel__body{
text-align:justify;
}
.bn-system-panel__mini{
display:inline-flex;
flex:0 0 auto;
align-items:center;
max-width:100%;
margin:.24em 0 0;
padding:3px 8px;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 42%,transparent);
border-radius:7px;
background:color-mix(in srgb,var(--bn-sp-accent) 22%,transparent);
color:color-mix(in srgb,var(--bn-sp-text) 90%,white);
font-size:.72em;
font-weight:900;
letter-spacing:.08em;
line-height:1.1;
text-transform:uppercase;
vertical-align:.08em;
overflow-wrap:anywhere;
white-space:normal;
}
.bn-system-panel__status{
display:grid;
gap:6px;
min-width:0;
padding:10px 12px;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 36%,transparent);
border-radius:12px;
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-dark) 38%,transparent),color-mix(in srgb,var(--bn-sp-accent) 10%,transparent));
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 9%,transparent);
}
.bn-system-panel__status-title{
margin:0 0 2px;
color:color-mix(in srgb,var(--bn-sp-text) 84%,white);
font-size:.7em;
font-weight:950;
letter-spacing:.14em;
line-height:1.2;
text-transform:uppercase;
}
.bn-system-panel__status-row{
display:grid;
grid-template-columns:minmax(7.5em,max-content) minmax(0,1fr);
align-items:baseline;
gap:.75em;
min-width:0;
}
.bn-system-panel__status-row--plain{
grid-template-columns:1fr;
}
.bn-system-panel__status-label{
min-width:0;
color:color-mix(in srgb,var(--bn-sp-accent-soft) 90%,white);
font-size:.78em;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
overflow-wrap:anywhere;
}
.bn-system-panel__status-label:before{
content:"[";
opacity:.62;
}
.bn-system-panel__status-label:after{
content:"]";
opacity:.62;
}
.bn-system-panel__status-value{
min-width:0;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
font-weight:850;
letter-spacing:.015em;
overflow-wrap:anywhere;
}
.bn-system-panel__format{
border-radius:.35em;
padding:0 .08em;
}
.bn-system-panel__format--color,.bn-system-panel__format--color *{
color:var(--bn-sp-format-color) !important;
text-shadow:0 0 12px var(--bn-sp-format-glow);
}
.bn-system-panel__format--bg{
background-color:var(--bn-sp-format-bg) !important;
box-shadow:0 0 0 1px var(--bn-sp-format-ring) inset;
}
.bn-system-panel mark{
border-radius:.35em;
padding:0 .18em;
background:color-mix(in srgb,var(--bn-sp-accent) 24%,transparent);
color:color-mix(in srgb,var(--bn-sp-text) 94%,white);
}
.bn-system-panel code{
padding:.12em .34em;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 24%,transparent);
border-radius:.42em;
background:color-mix(in srgb,var(--bn-sp-dark) 36%,transparent);
color:color-mix(in srgb,var(--bn-sp-text) 94%,white);
font:inherit;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
.bn-system-panel a{
color:color-mix(in srgb,var(--bn-sp-text) 94%,white);
text-decoration:underline;
text-decoration-color:color-mix(in srgb,var(--bn-sp-accent) 70%,transparent);
text-underline-offset:.18em;
}
.bn-system-panel--style-card{
max-width:440px;
margin:1.5rem auto;
padding:clamp(16px,3vw,22px);
border-width:1px;
border-radius:24px;
background:linear-gradient(145deg,color-mix(in srgb,var(--bn-sp-panel) 92%,var(--bn-sp-accent)),var(--bn-sp-panel-2));
box-shadow:0 20px 46px color-mix(in srgb,var(--bn-sp-dark) 48%,transparent),0 0 0 1px color-mix(in srgb,var(--bn-sp-accent) 24%,transparent),inset 0 1px 0 color-mix(in srgb,white 12%,transparent);
transform:translateZ(0);
}
.bn-system-panel--style-card:before{
background:radial-gradient(circle at 18% 0,color-mix(in srgb,var(--bn-sp-accent) 18%,transparent),transparent 34%),linear-gradient(120deg,transparent 0 34%,color-mix(in srgb,white 7%,transparent) 46%,transparent 58% 100%);
background-size:auto;
opacity:.72;
}
.bn-system-panel--style-card:after{
content:"";
position:absolute;
inset:9px;
z-index:-1;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 28%,transparent);
border-radius:18px;
pointer-events:none;
}
.bn-system-panel--style-card .bn-system-panel__title{
display:flex;
width:100%;
max-width:100%;
justify-content:center;
margin:0 0 12px;
padding:0 0 10px;
border:0;
border-bottom:1px solid color-mix(in srgb,var(--bn-sp-accent) 30%,transparent);
border-radius:0;
background:transparent;
box-shadow:none;
color:color-mix(in srgb,var(--bn-sp-text) 92%,white);
font-size:clamp(.9rem,.84rem + .28vw,1.02rem);
font-weight:900;
letter-spacing:.08em;
line-height:1.25;
text-align:center;
text-shadow:0 1px 12px color-mix(in srgb,var(--bn-sp-accent) 18%,transparent);
text-transform:none;
overflow-wrap:anywhere;
}
.bn-system-panel--style-card .bn-system-panel__body{
gap:8px;
padding:12px 2px 0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
font-weight:650;
line-height:1.55;
}
.bn-system-panel--style-card .bn-system-panel__group{
gap:6px;
}
.bn-system-panel--style-card .bn-system-panel__row--label{
grid-template-columns:minmax(5.25em,max-content) minmax(0,1fr);
align-items:baseline;
}
.bn-system-panel--style-card .bn-system-panel__row--label .bn-system-panel__label{
color:color-mix(in srgb,var(--bn-sp-accent) 78%,var(--bn-sp-text));
font-size:.78em;
letter-spacing:.08em;
}
.bn-system-panel--style-card .bn-system-panel__mini{
margin:.18em 0 0;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
color:color-mix(in srgb,var(--bn-sp-accent) 82%,white);
font-size:.7em;
letter-spacing:.1em;
}
.bn-system-panel--style-card .bn-system-panel__status{
gap:5px;
margin-top:4px;
padding:10px 12px;
border-color:color-mix(in srgb,var(--bn-sp-accent) 24%,transparent);
border-radius:14px;
background:color-mix(in srgb,var(--bn-sp-dark) 22%,transparent);
box-shadow:inset 0 1px 0 color-mix(in srgb,white 7%,transparent);
}
.bn-system-panel--style-card .bn-system-panel__status-title{
font-size:.68em;
letter-spacing:.12em;
}
.bn-system-panel--style-card .bn-system-panel__status-label{
color:color-mix(in srgb,var(--bn-sp-accent) 76%,var(--bn-sp-text));
font-size:.74em;
letter-spacing:.06em;
}
.bn-system-panel--style-card .bn-system-panel__status-label:before,.bn-system-panel--style-card .bn-system-panel__status-label:after{
content:none;
}
.bn-system-panel--style-horror{
font-family:Georgia,"Times New Roman",serif;
}
.bn-system-panel--style-horror:before{
background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--bn-sp-accent) 24%,transparent),transparent 30%),radial-gradient(circle at 84% 0,color-mix(in srgb,#000 38%,transparent),transparent 40%);
background-size:auto;
}
.bn-system-panel--style-thoughts{
border-style:dashed;
}
.bn-system-panel--style-thoughts:before{
background:radial-gradient(circle at 12% 6%,color-mix(in srgb,var(--bn-sp-accent) 24%,transparent),transparent 32%),radial-gradient(circle at 92% 92%,color-mix(in srgb,var(--bn-sp-accent-soft) 15%,transparent),transparent 38%);
background-size:auto;
}
.bn-system-panel--style-thoughts .bn-system-panel__body{
font-style:italic;
}
.bn-system-panel--style-plain{
border-color:color-mix(in srgb,var(--bn-sp-accent) 24%,transparent);
box-shadow:0 12px 30px color-mix(in srgb,var(--bn-sp-dark) 26%,transparent);
}
.bn-system-panel--style-plain:before{
content:none;
}
.bn-system-panel--style-plain .bn-system-panel__title{
background:transparent;
box-shadow:none;
}
.bn-system-panel[style]{
--bn-sp-panel:rgba(14,62,118,.46);
--bn-sp-panel-2:rgba(12,30,61,.28);
--bn-sp-accent:rgba(116,202,255,1);
--bn-sp-accent-soft:rgba(190,232,255,1);
--bn-sp-text:rgba(223,245,255,1);
--bn-sp-dark:rgba(9,23,46,1);
}
@supports not (color:color-mix(in srgb,white,black)){
.bn-system-panel{
border-color:rgba(116,202,255,.38);
box-shadow:0 14px 38px rgba(0,32,80,.28),inset 0 0 0 1px rgba(190,232,255,.1);
}
.bn-system-panel__title{
border-color:rgba(130,218,255,.42);
background:rgba(29,111,186,.28);
box-shadow:0 0 18px rgba(87,197,255,.18);
}
.bn-system-panel__mini{
border-color:rgba(139,222,255,.42);
background:rgba(77,169,238,.22);
}}
@media (max-width:640px){
.bn-system-panel{
margin:1rem 0;
padding:15px 16px;
border-radius:16px;
}
.bn-system-panel--align-center .bn-system-panel__title,.bn-system-panel--align-right .bn-system-panel__title,.bn-system-panel--align-justify .bn-system-panel__title{
width:auto;
max-width:100%;
}
.bn-system-panel__body{
font-size:.96rem;
line-height:1.62;
}
.bn-system-panel__row--label{
grid-template-columns:max-content minmax(0,1fr);
gap:.45em;
}
.bn-system-panel--align-center .bn-system-panel__row--label,.bn-system-panel--align-right .bn-system-panel__row--label{
grid-template-columns:max-content minmax(0,1fr);
justify-content:stretch;
}
.bn-system-panel__status{
padding:9px 10px;
}
.bn-system-panel__status-row{
grid-template-columns:1fr;
gap:.18em;
}
.bn-system-panel__mini{
max-width:46vw;
}}
.bn-system-panel__status-row{
grid-template-columns:max-content minmax(0,max-content);
gap:.45em;
}
.bn-system-panel__status-value{
display:block;
}
.bn-system-panel__skill{
display:grid;
gap:7px;
min-width:0;
padding:11px 12px;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 34%,transparent);
border-radius:14px;
background:linear-gradient(135deg,color-mix(in srgb,var(--bn-sp-dark) 46%,transparent),color-mix(in srgb,var(--bn-sp-accent) 12%,transparent));
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 8%,transparent);
}
.bn-system-panel__skill-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
min-width:0;
padding-bottom:6px;
border-bottom:1px solid color-mix(in srgb,var(--bn-sp-accent) 22%,transparent);
}
.bn-system-panel__skill-name{
min-width:0;
color:color-mix(in srgb,var(--bn-sp-text) 92%,white);
font-size:.94em;
font-weight:950;
letter-spacing:.08em;
line-height:1.25;
text-transform:uppercase;
overflow-wrap:anywhere;
}
.bn-system-panel__skill-rank{
flex:0 0 auto;
padding:2px 7px;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 42%,transparent);
border-radius:999px;
background:color-mix(in srgb,var(--bn-sp-accent) 18%,transparent);
color:color-mix(in srgb,var(--bn-sp-accent-soft) 90%,white);
font-size:.68em;
font-weight:950;
letter-spacing:.1em;
line-height:1.2;
text-transform:uppercase;
}
.bn-system-panel__skill-desc{
min-width:0;
color:color-mix(in srgb,var(--bn-sp-text) 86%,white);
font-size:.95em;
font-weight:650;
line-height:1.62;
overflow-wrap:anywhere;
}
@media (max-width:640px){
.bn-system-panel__status-row{
grid-template-columns:1fr;
gap:.12em;
}
.bn-system-panel__status-label,.bn-system-panel__status-value{
display:block;
width:100%;
max-width:100%;
text-align:inherit;
}
.bn-system-panel__skill{
padding:10px;
}
.bn-system-panel__skill-head{
align-items:flex-start;
flex-direction:column;
gap:6px;
}
.bn-system-panel__skill-rank{
max-width:100%;
white-space:normal;
}}
.bn-system-panel__status{
width:max-content;
max-width:100%;
justify-self:start;
grid-template-columns:max-content minmax(0,max-content);
column-gap:.45em;
row-gap:6px;
}
.bn-system-panel--align-center .bn-system-panel__status{
justify-self:center;
}
.bn-system-panel--align-right .bn-system-panel__status{
justify-self:end;
}
.bn-system-panel--align-justify .bn-system-panel__status{
width:100%;
justify-self:stretch;
grid-template-columns:max-content minmax(0,1fr);
}
.bn-system-panel__status-row{
display:contents;
}
.bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1/-1;
}
.bn-system-panel__status-title{
grid-column:1/-1;
}
.bn-system-panel__status-label{
grid-column:1;
text-align:right;
white-space:nowrap;
}
.bn-system-panel__status-value{
grid-column:2;
text-align:left;
}
.bn-system-panel__skill-head{
display:grid;
grid-template-columns:minmax(0,1fr);
justify-content:start;
justify-items:start;
align-items:start;
gap:6px;
}
.bn-system-panel__skill-rank{
justify-self:start;
white-space:normal;
}
@media (max-width:640px){
.bn-system-panel__status{
width:100%;
grid-template-columns:max-content minmax(0,1fr);
column-gap:.45em;
row-gap:5px;
}
.bn-system-panel--align-center .bn-system-panel__status,.bn-system-panel--align-right .bn-system-panel__status{
justify-self:stretch;
}
.bn-system-panel__status-row{
display:contents;
}
.bn-system-panel__status-label{
display:block;
width:auto;
max-width:42vw;
text-align:right;
white-space:nowrap;
}
.bn-system-panel__status-value{
display:block;
width:auto;
max-width:100%;
text-align:left;
overflow-wrap:anywhere;
}
.bn-system-panel__skill-head{
display:grid;
grid-template-columns:minmax(0,1fr);
}}
.bn-system-panel__row--label{
display:grid;
grid-template-columns:max-content minmax(0,1fr);
align-items:start;
width:auto;
max-width:100%;
gap:.55em;
}
.bn-system-panel__mini{
width:auto;
max-width:min(48vw,100%);
margin:0;
justify-self:start;
white-space:normal;
text-align:inherit;
}
.bn-system-panel__text{
min-width:0;
max-width:100%;
overflow-wrap:anywhere;
}
.bn-system-panel--align-right .bn-system-panel__row--label{
grid-template-columns:max-content minmax(0,max-content);
justify-content:end;
}
.bn-system-panel--align-justify .bn-system-panel__row--label{
grid-template-columns:max-content minmax(0,1fr);
justify-content:stretch;
}
.bn-system-panel__status{
display:grid;
width:100%;
max-width:100%;
grid-template-columns:max-content minmax(0,max-content);
justify-content:start;
column-gap:.45em;
row-gap:6px;
min-width:0;
}
.bn-system-panel--align-center .bn-system-panel__status{
justify-content:center;
}
.bn-system-panel--align-right .bn-system-panel__status{
justify-content:end;
}
.bn-system-panel--align-justify .bn-system-panel__status{
grid-template-columns:max-content minmax(0,1fr);
justify-content:stretch;
}
.bn-system-panel__status-title,.bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1/-1;
}
.bn-system-panel__status-label{
grid-column:1;
align-self:baseline;
width:auto;
max-width:46vw;
text-align:right;
white-space:normal;
overflow-wrap:anywhere;
}
.bn-system-panel__status-value{
grid-column:2;
align-self:baseline;
width:auto;
min-width:0;
text-align:left;
overflow-wrap:anywhere;
}
.bn-system-panel__skill-head{
display:flex;
align-items:baseline;
justify-content:flex-start;
gap:.55em;
min-width:0;
}
.bn-system-panel__skill-name{
flex:0 1 auto;
min-width:0;
}
.bn-system-panel__skill-rank{
flex:0 0 auto;
max-width:50%;
white-space:nowrap;
justify-self:auto;
}
@media (max-width:640px){
.bn-system-panel__row--label,.bn-system-panel--align-center .bn-system-panel__row--label,.bn-system-panel--align-right .bn-system-panel__row--label{
grid-template-columns:max-content minmax(0,1fr);
justify-content:start;
width:auto;
}
.bn-system-panel__mini{
max-width:42vw;
}
.bn-system-panel__status,.bn-system-panel--align-center .bn-system-panel__status,.bn-system-panel--align-right .bn-system-panel__status{
grid-template-columns:max-content minmax(0,1fr);
justify-content:stretch;
width:100%;
}
.bn-system-panel__status-label{
max-width:42vw;
text-align:right;
white-space:normal;
}
.bn-system-panel__status-value{
min-width:0;
}
.bn-system-panel__skill-head{
display:flex;
flex-direction:row;
align-items:baseline;
justify-content:flex-start;
gap:.5em;
}
.bn-system-panel__skill-rank{
max-width:46%;
white-space:nowrap;
}}
.bn-system-panel__status{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
grid-template-columns:max-content max-content !important;
column-gap:.45em !important;
row-gap:6px !important;
justify-content:start !important;
justify-items:stretch !important;
align-items:baseline !important;
padding-inline:0 !important;
}
.bn-system-panel--align-center .bn-system-panel__status{
justify-content:center !important;
}
.bn-system-panel--align-right .bn-system-panel__status{
justify-content:end !important;
}
.bn-system-panel--align-justify .bn-system-panel__status{
grid-template-columns:max-content minmax(0,1fr) !important;
justify-content:stretch !important;
}
.bn-system-panel__status-row{
display:contents !important;
}
.bn-system-panel__status-title,.bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1/-1 !important;
}
.bn-system-panel__status-title{
text-align:center !important;
}
.bn-system-panel--align-left .bn-system-panel__status-title{
text-align:left !important;
}
.bn-system-panel--align-right .bn-system-panel__status-title{
text-align:right !important;
}
.bn-system-panel__status-label{
grid-column:1 !important;
align-self:baseline !important;
width:auto !important;
max-width:min(54vw,100%) !important;
text-align:right !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__status-value{
grid-column:2 !important;
align-self:baseline !important;
width:auto !important;
min-width:0 !important;
max-width:100% !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__row--label,.bn-system-panel--align-center .bn-system-panel__row--label,.bn-system-panel--align-right .bn-system-panel__row--label,.bn-system-panel--align-justify .bn-system-panel__row--label{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
width:auto !important;
max-width:100% !important;
gap:.35em !important;
}
.bn-system-panel--align-center .bn-system-panel__row--label{
align-items:center !important;
}
.bn-system-panel--align-right .bn-system-panel__row--label{
align-items:flex-end !important;
}
.bn-system-panel__mini{
display:inline-flex !important;
width:auto !important;
max-width:100% !important;
flex:0 0 auto !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
text-align:inherit !important;
}
.bn-system-panel__text{
display:block !important;
width:auto !important;
max-width:100% !important;
min-width:0 !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__skill-head{
display:flex !important;
flex-direction:row !important;
align-items:baseline !important;
justify-content:flex-start !important;
gap:.55em !important;
min-width:0 !important;
}
.bn-system-panel__skill-name{
flex:0 1 auto !important;
min-width:0 !important;
}
.bn-system-panel__skill-rank{
flex:0 0 auto !important;
max-width:50% !important;
white-space:nowrap !important;
justify-self:auto !important;
}
@media (max-width:640px){
.bn-system-panel__status,.bn-system-panel--align-center .bn-system-panel__status,.bn-system-panel--align-right .bn-system-panel__status{
grid-template-columns:max-content minmax(0,1fr) !important;
justify-content:stretch !important;
width:100% !important;
}
.bn-system-panel__status-label{
max-width:48vw !important;
text-align:right !important;
white-space:normal !important;
}
.bn-system-panel__status-value{
min-width:0 !important;
text-align:left !important;
}
.bn-system-panel__row--label,.bn-system-panel--align-center .bn-system-panel__row--label,.bn-system-panel--align-right .bn-system-panel__row--label{
width:auto !important;
max-width:100% !important;
align-items:flex-start !important;
}
.bn-system-panel--align-center .bn-system-panel__row--label{
align-items:center !important;
}
.bn-system-panel--align-right .bn-system-panel__row--label{
align-items:flex-end !important;
}
.bn-system-panel__mini{
max-width:100% !important;
}
.bn-system-panel__skill-head{
display:flex !important;
flex-direction:row !important;
align-items:baseline !important;
justify-content:flex-start !important;
gap:.5em !important;
}
.bn-system-panel__skill-rank{
max-width:46% !important;
white-space:nowrap !important;
}}
.bn-system-panel--align-center .bn-system-panel__title,.bn-system-panel--align-right .bn-system-panel__title,.bn-system-panel--align-justify .bn-system-panel__title{
display:flex !important;
width:max-content !important;
max-width:100% !important;
}
.bn-system-panel--align-center .bn-system-panel__title{
margin-left:auto !important;
margin-right:auto !important;
justify-content:center !important;
text-align:center !important;
}
.bn-system-panel--align-right .bn-system-panel__title{
margin-left:auto !important;
margin-right:0 !important;
justify-content:flex-end !important;
text-align:right !important;
}
.bn-system-panel--align-justify .bn-system-panel__title{
margin-left:0 !important;
margin-right:0 !important;
justify-content:flex-start !important;
text-align:left !important;
}
.bn-system-panel__status{
display:block !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
padding-inline:10px !important;
}
.bn-system-panel__status-title{
display:block !important;
width:max-content !important;
max-width:100% !important;
margin:0 0 6px !important;
}
.bn-system-panel--align-left .bn-system-panel__status-title,.bn-system-panel--align-justify .bn-system-panel__status-title{
margin-left:0 !important;
margin-right:auto !important;
text-align:left !important;
}
.bn-system-panel--align-center .bn-system-panel__status-title{
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
.bn-system-panel--align-right .bn-system-panel__status-title{
margin-left:auto !important;
margin-right:0 !important;
text-align:right !important;
}
.bn-system-panel__status-list{
display:grid !important;
width:max-content !important;
max-width:100% !important;
min-width:0 !important;
grid-template-columns:minmax(0,max-content) minmax(0,max-content) !important;
column-gap:.45em !important;
row-gap:6px !important;
align-items:baseline !important;
}
.bn-system-panel--align-left .bn-system-panel__status-list,.bn-system-panel--align-justify .bn-system-panel__status-list{
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel--align-center .bn-system-panel__status-list{
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-right .bn-system-panel__status-list{
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1/-1 !important;
}
.bn-system-panel__status-label{
grid-column:1 !important;
width:auto !important;
max-width:52vw !important;
text-align:right !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__status-value{
grid-column:2 !important;
width:auto !important;
min-width:0 !important;
max-width:100% !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__row--label,.bn-system-panel--align-left .bn-system-panel__row--label,.bn-system-panel--align-center .bn-system-panel__row--label,.bn-system-panel--align-right .bn-system-panel__row--label,.bn-system-panel--align-justify .bn-system-panel__row--label{
display:flex !important;
flex-direction:column !important;
width:max-content !important;
max-width:100% !important;
min-width:0 !important;
gap:.35em !important;
align-items:flex-start !important;
justify-content:flex-start !important;
}
.bn-system-panel--align-center .bn-system-panel__row--label{
margin-left:auto !important;
margin-right:auto !important;
align-items:center !important;
}
.bn-system-panel--align-right .bn-system-panel__row--label{
margin-left:auto !important;
margin-right:0 !important;
align-items:flex-end !important;
}
.bn-system-panel__mini{
display:inline-flex !important;
width:auto !important;
max-width:100% !important;
flex:0 0 auto !important;
justify-self:start !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
@media (max-width:640px){
.bn-system-panel--align-center .bn-system-panel__title,.bn-system-panel--align-right .bn-system-panel__title,.bn-system-panel--align-justify .bn-system-panel__title{
width:max-content !important;
max-width:100% !important;
}
.bn-system-panel__status{
padding-inline:8px !important;
}
.bn-system-panel__status-list{
width:max-content !important;
max-width:100% !important;
grid-template-columns:minmax(0,max-content) minmax(0,max-content) !important;
}
.bn-system-panel__status-label{
max-width:50vw !important;
}
.bn-system-panel__row--label,.bn-system-panel--align-center .bn-system-panel__row--label,.bn-system-panel--align-right .bn-system-panel__row--label,.bn-system-panel--align-justify .bn-system-panel__row--label{
width:max-content !important;
max-width:100% !important;
}
.bn-system-panel__mini{
width:auto !important;
max-width:100% !important;
}}
.bn-system-panel__status{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
gap:10px !important;
padding:12px !important;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 40%,transparent) !important;
border-radius:14px !important;
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-accent) 13%,transparent),color-mix(in srgb,var(--bn-sp-dark) 40%,transparent)) !important;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 10%,transparent),0 10px 28px color-mix(in srgb,var(--bn-sp-dark) 22%,transparent) !important;
}
.bn-system-panel__status-title{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
max-width:100% !important;
margin:0 !important;
padding:6px 10px !important;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 34%,transparent) !important;
border-radius:10px !important;
background:color-mix(in srgb,var(--bn-sp-accent) 14%,transparent) !important;
color:color-mix(in srgb,var(--bn-sp-text) 92%,white) !important;
font-size:.76em !important;
font-weight:950 !important;
letter-spacing:.14em !important;
line-height:1.15 !important;
text-align:center !important;
text-transform:uppercase !important;
}
.bn-system-panel__status-list{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
grid-template-columns:1fr !important;
gap:7px !important;
margin:0 !important;
}
.bn-system-panel__status-row{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
width:100% !important;
min-width:0 !important;
padding:8px 10px !important;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 20%,transparent) !important;
border-radius:10px !important;
background:color-mix(in srgb,var(--bn-sp-dark) 24%,transparent) !important;
}
.bn-system-panel__status-row--plain{
justify-content:center !important;
}
.bn-system-panel__status-label{
display:block !important;
flex:1 1 auto !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
color:color-mix(in srgb,var(--bn-sp-accent-soft) 90%,white) !important;
font-size:.78em !important;
font-weight:950 !important;
letter-spacing:.08em !important;
line-height:1.25 !important;
text-align:left !important;
text-transform:uppercase !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__status-label:before{
content:"[" !important;
opacity:.62 !important;
}
.bn-system-panel__status-label:after{
content:"]" !important;
opacity:.62 !important;
}
.bn-system-panel__status-value{
display:block !important;
flex:0 1 auto !important;
width:auto !important;
max-width:55% !important;
min-width:0 !important;
color:var(--bn-sp-text) !important;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
font-weight:900 !important;
letter-spacing:.015em !important;
line-height:1.25 !important;
text-align:right !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-left .bn-system-panel__status-title{
justify-content:flex-start !important;
text-align:left !important;
}
.bn-system-panel--align-center .bn-system-panel__status-title{
justify-content:center !important;
text-align:center !important;
}
.bn-system-panel--align-right .bn-system-panel__status-title{
justify-content:flex-end !important;
text-align:right !important;
}
.bn-system-panel--align-justify .bn-system-panel__status-title{
justify-content:center !important;
text-align:center !important;
}
@media (max-width:640px){
.bn-system-panel__status{
padding:10px !important;
gap:8px !important;
}
.bn-system-panel__status-title{
padding:6px 9px !important;
}
.bn-system-panel__status-row{
gap:9px !important;
padding:8px 9px !important;
}
.bn-system-panel__status-label{
font-size:.76em !important;
}
.bn-system-panel__status-value{
max-width:46% !important;
font-size:.96em !important;
}}
.bn-system-panel__status-title{
display:inline-flex !important;
width:max-content !important;
max-width:100% !important;
justify-self:start !important;
}
.bn-system-panel--align-left .bn-system-panel__status-title,.bn-system-panel--align-justify .bn-system-panel__status-title{
justify-self:start !important;
justify-content:flex-start !important;
text-align:left !important;
}
.bn-system-panel--align-center .bn-system-panel__status-title{
justify-self:center !important;
justify-content:center !important;
text-align:center !important;
}
.bn-system-panel--align-right .bn-system-panel__status-title{
justify-self:end !important;
justify-content:flex-end !important;
text-align:right !important;
}
.bn-system-panel__status-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) max-content !important;
align-items:center !important;
justify-content:stretch !important;
column-gap:12px !important;
}
.bn-system-panel__status-label{
grid-column:1 !important;
max-width:none !important;
text-align:left !important;
}
.bn-system-panel__status-value{
grid-column:2 !important;
justify-self:end !important;
max-width:44vw !important;
text-align:right !important;
}
.bn-system-panel__status-row--plain{
grid-template-columns:1fr !important;
}
.bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1 !important;
justify-self:center !important;
max-width:100% !important;
text-align:center !important;
}
@media (max-width:640px){
.bn-system-panel__status-title{
display:inline-flex !important;
width:max-content !important;
max-width:100% !important;
}
.bn-system-panel__status-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) max-content !important;
column-gap:8px !important;
}
.bn-system-panel__status-value{
max-width:38vw !important;
}
.bn-system-panel__status-label,.bn-system-panel__status-value{
overflow-wrap:anywhere !important;
word-break:normal !important;
}}
.bn-system-panel__status{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
.bn-system-panel__status-list{
display:grid !important;
width:min(100%,18rem) !important;
max-width:100% !important;
min-width:0 !important;
grid-template-columns:1fr !important;
gap:7px !important;
justify-self:start !important;
margin:0 !important;
}
.bn-system-panel--align-center .bn-system-panel__status-title,.bn-system-panel--align-center .bn-system-panel__status-list{
justify-self:center !important;
}
.bn-system-panel--align-right .bn-system-panel__status-title,.bn-system-panel--align-right .bn-system-panel__status-list{
justify-self:end !important;
}
.bn-system-panel--align-justify .bn-system-panel__status-title,.bn-system-panel--align-justify .bn-system-panel__status-list{
justify-self:center !important;
}
.bn-system-panel__status-row{
display:grid !important;
width:100% !important;
min-width:0 !important;
grid-template-columns:minmax(0,1fr) minmax(2.25em,max-content) !important;
align-items:center !important;
column-gap:10px !important;
}
.bn-system-panel__status-label{
grid-column:1 !important;
min-width:0 !important;
max-width:none !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__status-value{
grid-column:2 !important;
justify-self:end !important;
min-width:2.25em !important;
max-width:none !important;
text-align:right !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1 !important;
justify-self:center !important;
min-width:0 !important;
max-width:100% !important;
text-align:center !important;
}
@media (max-width:640px){
.bn-system-panel__status-title{
display:inline-flex !important;
width:max-content !important;
max-width:100% !important;
}
.bn-system-panel__status-list{
width:min(100%,18rem) !important;
max-width:100% !important;
}
.bn-system-panel__status-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(2.25em,max-content) !important;
column-gap:9px !important;
}
.bn-system-panel__status-value{
min-width:2.25em !important;
max-width:none !important;
}
.bn-system-panel__status-label,.bn-system-panel__status-value{
word-break:normal !important;
overflow-wrap:anywhere !important;
}}
.bn-system-panel .bn-system-panel__status{
display:flex !important;
flex-direction:column !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
align-items:flex-start !important;
}
.bn-system-panel .bn-system-panel__status-title{
display:inline-flex !important;
width:auto !important;
max-width:100% !important;
flex:0 0 auto !important;
align-self:flex-start !important;
justify-self:auto !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
white-space:normal !important;
text-align:center !important;
}
.bn-system-panel .bn-system-panel__status-list{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
width:clamp(13.5rem,34vw,16rem) !important;
max-width:100% !important;
min-width:0 !important;
flex:0 1 auto !important;
align-self:flex-start !important;
justify-self:auto !important;
margin:0 !important;
gap:7px !important;
}
.bn-system-panel .bn-system-panel__status-row{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
grid-template-columns:minmax(0,1fr) minmax(2.25em,max-content) !important;
align-items:center !important;
justify-content:stretch !important;
column-gap:10px !important;
}
.bn-system-panel .bn-system-panel__status-label{
grid-column:1 !important;
min-width:0 !important;
max-width:none !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
.bn-system-panel .bn-system-panel__status-value{
grid-column:2 !important;
justify-self:end !important;
min-width:2.25em !important;
max-width:none !important;
text-align:right !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
.bn-system-panel .bn-system-panel__status-row--plain{
grid-template-columns:1fr !important;
}
.bn-system-panel .bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1 !important;
justify-self:center !important;
min-width:0 !important;
text-align:center !important;
}
.bn-system-panel--align-center .bn-system-panel__status{
align-items:center !important;
}
.bn-system-panel--align-center .bn-system-panel__status-title,.bn-system-panel--align-center .bn-system-panel__status-list{
align-self:center !important;
}
.bn-system-panel--align-right .bn-system-panel__status{
align-items:flex-end !important;
}
.bn-system-panel--align-right .bn-system-panel__status-title,.bn-system-panel--align-right .bn-system-panel__status-list{
align-self:flex-end !important;
}
.bn-system-panel--align-justify .bn-system-panel__status{
align-items:center !important;
}
.bn-system-panel--align-justify .bn-system-panel__status-title,.bn-system-panel--align-justify .bn-system-panel__status-list{
align-self:center !important;
}
@media (max-width:640px){
.bn-system-panel .bn-system-panel__status{
align-items:flex-start !important;
}
.bn-system-panel .bn-system-panel__status-title{
display:inline-flex !important;
width:auto !important;
max-width:100% !important;
align-self:flex-start !important;
}
.bn-system-panel .bn-system-panel__status-list{
width:clamp(13.5rem,52vw,16rem) !important;
max-width:100% !important;
align-self:flex-start !important;
}
.bn-system-panel .bn-system-panel__status-row{
grid-template-columns:minmax(0,1fr) minmax(2.25em,max-content) !important;
column-gap:8px !important;
}
.bn-system-panel--align-center .bn-system-panel__status{
align-items:center !important;
}
.bn-system-panel--align-center .bn-system-panel__status-title,.bn-system-panel--align-center .bn-system-panel__status-list{
align-self:center !important;
}
.bn-system-panel--align-right .bn-system-panel__status{
align-items:flex-end !important;
}
.bn-system-panel--align-right .bn-system-panel__status-title,.bn-system-panel--align-right .bn-system-panel__status-list{
align-self:flex-end !important;
}
.bn-system-panel--align-justify .bn-system-panel__status{
align-items:center !important;
}
.bn-system-panel--align-justify .bn-system-panel__status-title,.bn-system-panel--align-justify .bn-system-panel__status-list{
align-self:center !important;
}}
.bn-system-panel .bn-system-panel__body{
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
min-width:0 !important;
}
.bn-system-panel__align{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
gap:12px !important;
}
.bn-system-panel__align--left{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel__align--center{
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel__align--right{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel__align--justify{
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel__align--left .bn-system-panel__group,.bn-system-panel__align--left .bn-system-panel__status,.bn-system-panel__align--left .bn-system-panel__skill,.bn-system-panel__align--left .bn-system-panel__meter{
justify-self:start !important;
align-self:start !important;
}
.bn-system-panel__align--center .bn-system-panel__group,.bn-system-panel__align--center .bn-system-panel__status,.bn-system-panel__align--center .bn-system-panel__skill,.bn-system-panel__align--center .bn-system-panel__meter{
justify-self:center !important;
align-self:center !important;
}
.bn-system-panel__align--right .bn-system-panel__group,.bn-system-panel__align--right .bn-system-panel__status,.bn-system-panel__align--right .bn-system-panel__skill,.bn-system-panel__align--right .bn-system-panel__meter{
justify-self:end !important;
align-self:end !important;
}
.bn-system-panel__layout{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
gap:var(--bn-sp-layout-gap,12px) !important;
align-items:stretch !important;
}
.bn-system-panel__layout--align-left{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel__layout--align-center{
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel__layout--align-right{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel__layout--align-justify{
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel__cell{
display:grid !important;
grid-column:span min(var(--bn-sp-col-span,1),var(--bn-sp-cols,2)) !important;
width:var(--bn-sp-col-width,100%) !important;
max-width:100% !important;
min-width:0 !important;
gap:10px !important;
padding:10px !important;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 18%,transparent) !important;
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-panel) 78%,transparent),color-mix(in srgb,var(--bn-sp-panel-2) 74%,transparent)) !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px)) !important;
}
.bn-system-panel__cell--align-left{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel__cell--align-center{
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel__cell--align-right{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel__cell--align-justify{
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel__meter{
display:grid !important;
width:min(100%,18rem) !important;
max-width:100% !important;
min-width:0 !important;
gap:7px !important;
color:var(--bn-sp-text) !important;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
}
.bn-system-panel__meter--align-left{
justify-self:start !important;
text-align:left !important;
}
.bn-system-panel__meter--align-center{
justify-self:center !important;
text-align:center !important;
}
.bn-system-panel__meter--align-right{
justify-self:end !important;
text-align:right !important;
}
.bn-system-panel__meter--align-justify{
justify-self:stretch !important;
width:100% !important;
}
.bn-system-panel__meter-head,.bn-system-panel__meter-caption{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-width:0 !important;
color:var(--bn-sp-text) !important;
font-size:.78em !important;
font-weight:900 !important;
letter-spacing:.04em !important;
line-height:1.2 !important;
}
.bn-system-panel__meter-label{
min-width:0 !important;
color:color-mix(in srgb,var(--bn-sp-accent-soft) 92%,white) !important;
text-transform:uppercase !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__meter-value{
flex:0 0 auto !important;
color:var(--bn-sp-text) !important;
text-align:right !important;
}
.bn-system-panel__meter-track{
position:relative !important;
height:10px !important;
overflow:hidden !important;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 28%,transparent) !important;
background:color-mix(in srgb,var(--bn-sp-dark) 78%,transparent) !important;
box-shadow:inset 0 0 14px rgba(0,0,0,.28) !important;
clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px)) !important;
}
.bn-system-panel__meter-fill{
display:block !important;
width:var(--bn-sp-meter,0%) !important;
height:100% !important;
background:linear-gradient(90deg,var(--bn-sp-accent),var(--bn-sp-accent-soft)) !important;
box-shadow:0 0 14px color-mix(in srgb,var(--bn-sp-accent) 58%,transparent) !important;
}
.bn-system-panel__meter--thin .bn-system-panel__meter-track{
height:6px !important;
}
.bn-system-panel__meter--chunky .bn-system-panel__meter-track{
height:16px !important;
}
.bn-system-panel__meter--bar.bn-system-panel__meter--radial .bn-system-panel__meter-track{
display:none !important;
}
.bn-system-panel__meter--radial{
width:max-content !important;
justify-items:center !important;
}
.bn-system-panel__meter-circle{
display:grid !important;
place-items:center !important;
width:86px !important;
height:86px !important;
border-radius:999px !important;
background:conic-gradient(var(--bn-sp-accent) var(--bn-sp-meter-deg,0deg),color-mix(in srgb,var(--bn-sp-dark) 84%,transparent) 0deg) !important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--bn-sp-accent) 24%,transparent),0 0 24px color-mix(in srgb,var(--bn-sp-accent) 18%,transparent) !important;
}
.bn-system-panel__meter-circle:before{
content:"" !important;
grid-area:1/1 !important;
width:66px !important;
height:66px !important;
border-radius:999px !important;
background:linear-gradient(180deg,var(--bn-sp-panel),var(--bn-sp-panel-2)) !important;
box-shadow:inset 0 0 18px rgba(0,0,0,.34) !important;
}
.bn-system-panel__meter-circle span{
position:relative !important;
grid-area:1/1 !important;
color:var(--bn-sp-text) !important;
font-size:.82rem !important;
font-weight:950 !important;
line-height:1 !important;
}
.bn-system-panel__meter--orb .bn-system-panel__meter-circle{
width:100px !important;
height:100px !important;
}
.bn-system-panel__meter--orb .bn-system-panel__meter-circle:before{
width:74px !important;
height:74px !important;
}
.bn-system-panel--align-labels .bn-system-panel__group{
display:grid !important;
width:max-content !important;
max-width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-ch,0ch),max-content) minmax(0,max-content) !important;
gap:7px 10px !important;
}
.bn-system-panel--align-labels .bn-system-panel__row{
display:contents !important;
}
.bn-system-panel--align-labels .bn-system-panel__row:not(.bn-system-panel__row--label) .bn-system-panel__text{
grid-column:1/-1 !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini{
grid-column:1 !important;
align-self:start !important;
white-space:nowrap !important;
text-align:right !important;
overflow-wrap:normal !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text{
grid-column:2 !important;
align-self:start !important;
min-width:0 !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-labels .bn-system-panel__status-list{
display:grid !important;
width:max-content !important;
max-width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-ch,0ch),max-content) minmax(2.25em,max-content) !important;
gap:7px 10px !important;
}
.bn-system-panel--align-labels .bn-system-panel__status-row{
display:contents !important;
}
.bn-system-panel--align-labels .bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1/-1 !important;
justify-self:center !important;
}
.bn-system-panel--align-labels .bn-system-panel__status-label{
grid-column:1 !important;
align-self:center !important;
white-space:nowrap !important;
text-align:right !important;
overflow-wrap:normal !important;
}
.bn-system-panel--align-labels .bn-system-panel__status-value{
grid-column:2 !important;
align-self:center !important;
justify-self:start !important;
min-width:0 !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:start !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:center !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:end !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-ch,0ch),max-content) minmax(0,1fr) !important;
}
@media (max-width:640px){
.bn-system-panel__layout:not(.bn-system-panel__layout--no-stack){
grid-template-columns:1fr !important;
}
.bn-system-panel__cell{
grid-column:1/-1 !important;
width:100% !important;
}
.bn-system-panel__meter{
width:min(100%,16rem) !important;
}
.bn-system-panel__meter-circle{
width:78px !important;
height:78px !important;
}
.bn-system-panel__meter-circle:before{
width:60px !important;
height:60px !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-ch,0ch),max-content) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
white-space:nowrap !important;
overflow-wrap:normal !important;
}}
.bn-system-panel__align--left *{
text-align:inherit;
}
.bn-system-panel__align--center *{
text-align:inherit;
}
.bn-system-panel__align--right *{
text-align:inherit;
}
.bn-system-panel__align--left .bn-system-panel__group,.bn-system-panel__align--left .bn-system-panel__status,.bn-system-panel__align--left .bn-system-panel__skill,.bn-system-panel__align--left .bn-system-panel__meter,.bn-system-panel__align--left .bn-system-panel__layout{
justify-self:start !important;
}
.bn-system-panel__align--center .bn-system-panel__group,.bn-system-panel__align--center .bn-system-panel__status,.bn-system-panel__align--center .bn-system-panel__skill,.bn-system-panel__align--center .bn-system-panel__meter,.bn-system-panel__align--center .bn-system-panel__layout{
justify-self:center !important;
}
.bn-system-panel__align--right .bn-system-panel__group,.bn-system-panel__align--right .bn-system-panel__status,.bn-system-panel__align--right .bn-system-panel__skill,.bn-system-panel__align--right .bn-system-panel__meter,.bn-system-panel__align--right .bn-system-panel__layout{
justify-self:end !important;
}
.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel__align--justify .bn-system-panel__status,.bn-system-panel__align--justify .bn-system-panel__skill,.bn-system-panel__align--justify .bn-system-panel__meter,.bn-system-panel__align--justify .bn-system-panel__layout{
justify-self:stretch !important;
width:100% !important;
}
.bn-system-panel--align-labels .bn-system-panel__group{
display:grid !important;
grid-template-columns:minmax(var(--bn-sp-label-ch,0ch),max-content) minmax(var(--bn-sp-value-ch,0ch),max-content) !important;
justify-content:start !important;
width:max-content !important;
max-width:100% !important;
gap:7px 10px !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini{
grid-column:1 !important;
justify-self:end !important;
align-self:start !important;
max-width:none !important;
text-align:right !important;
white-space:nowrap !important;
overflow-wrap:normal !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text{
grid-column:2 !important;
justify-self:start !important;
align-self:start !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__body{
justify-items:start !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__body{
justify-items:center !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__body{
justify-items:end !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__body{
justify-items:stretch !important;
}
.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__group{
justify-self:start !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__group{
justify-self:center !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__group{
justify-self:end !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group{
justify-self:stretch !important;
width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-ch,0ch),max-content) minmax(0,1fr) !important;
}
.bn-system-panel__align--left .bn-system-panel__row--label{
justify-content:start !important;
}
.bn-system-panel__align--center .bn-system-panel__row--label{
justify-content:center !important;
}
.bn-system-panel__align--right .bn-system-panel__row--label{
justify-content:end !important;
}
.bn-system-panel__align--left .bn-system-panel__row--label .bn-system-panel__text,.bn-system-panel__align--center .bn-system-panel__row--label .bn-system-panel__text,.bn-system-panel__align--right .bn-system-panel__row--label .bn-system-panel__text{
text-align:left !important;
}
@media (max-width:640px){
.bn-system-panel--align-labels .bn-system-panel__group{
grid-template-columns:minmax(var(--bn-sp-label-ch,0ch),max-content) minmax(0,1fr) !important;
width:100% !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__group{
justify-self:stretch !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini{
max-width:45vw !important;
}}
.bn-system-panel__meter{
--bn-sp-meter-color:var(--bn-sp-accent);
--bn-sp-meter-soft:var(--bn-sp-accent-soft);
--bn-sp-meter-glow:color-mix(in srgb,var(--bn-sp-meter-color) 48%,transparent);
}
.bn-system-panel__meter-fill{
width:var(--bn-sp-meter,0%) !important;
background:linear-gradient(90deg,var(--bn-sp-meter-color),var(--bn-sp-meter-soft)) !important;
box-shadow:0 0 14px var(--bn-sp-meter-glow) !important;
transform:translateZ(0) !important;
}
.bn-system-panel__meter-circle{
background:conic-gradient(var(--bn-sp-meter-color) var(--bn-sp-meter-deg,0deg),color-mix(in srgb,var(--bn-sp-dark) 84%,transparent) 0deg) !important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--bn-sp-meter-color) 28%,transparent),0 0 24px var(--bn-sp-meter-glow) !important;
}
.bn-system-panel__meter--segmented .bn-system-panel__meter-fill{
background:repeating-linear-gradient(90deg,var(--bn-sp-meter-color) 0 10px,color-mix(in srgb,var(--bn-sp-meter-soft) 88%,white) 10px 14px,transparent 14px 16px) !important;
}
.bn-system-panel__meter--glow .bn-system-panel__meter-track{
box-shadow:inset 0 0 14px rgba(0,0,0,.34),0 0 18px var(--bn-sp-meter-glow) !important;
}
.bn-system-panel__meter--flat .bn-system-panel__meter-track{
clip-path:none !important;
border-radius:999px !important;
}
.bn-system-panel--align-labels{
--bn-sp-label-col:calc(var(--bn-sp-label-ch,0)*1ch + 1.15em);
--bn-sp-value-col:calc(var(--bn-sp-value-ch,0)*1ch + .25em);
}
.bn-system-panel--align-labels .bn-system-panel__group{
display:grid !important;
grid-template-columns:var(--bn-sp-label-col) minmax(var(--bn-sp-value-col),max-content) !important;
justify-content:start !important;
width:max-content !important;
max-width:100% !important;
gap:7px 10px !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini{
grid-column:1 !important;
justify-self:stretch !important;
justify-content:center !important;
align-self:start !important;
width:100% !important;
max-width:none !important;
text-align:center !important;
white-space:nowrap !important;
overflow-wrap:normal !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text{
grid-column:2 !important;
justify-self:start !important;
align-self:start !important;
min-width:0 !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__status-list{
grid-template-columns:var(--bn-sp-label-col) minmax(var(--bn-sp-value-col),max-content) !important;
width:max-content !important;
max-width:100% !important;
justify-content:start !important;
}
.bn-system-panel--align-labels .bn-system-panel__status-label{
justify-self:stretch !important;
text-align:center !important;
white-space:nowrap !important;
}
.bn-system-panel--align-labels .bn-system-panel__status-value{
justify-self:start !important;
text-align:left !important;
}
.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:start !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:center !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:end !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
grid-template-columns:var(--bn-sp-label-col) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--manual .bn-system-panel__status-list{
justify-self:inherit !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--left{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--center{
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--right{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--justify{
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--left .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--left .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--left .bn-system-panel__status-list{
justify-self:start !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--center .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--center .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--center .bn-system-panel__status-list{
justify-self:center !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--right .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--right .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--right .bn-system-panel__status-list{
justify-self:end !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--justify .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--justify .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
grid-template-columns:var(--bn-sp-label-col) minmax(0,1fr) !important;
}
.bn-system-panel__layout--style-panel,.bn-system-panel__cell--style-panel,.bn-system-panel__layout--style-glass,.bn-system-panel__cell--style-glass,.bn-system-panel__layout--style-solid,.bn-system-panel__cell--style-solid,.bn-system-panel__layout--style-outline,.bn-system-panel__cell--style-outline,.bn-system-panel__layout--style-inset,.bn-system-panel__cell--style-inset,.bn-system-panel__layout--style-ghost,.bn-system-panel__cell--style-ghost,.bn-system-panel__layout--style-scan,.bn-system-panel__cell--style-scan{
padding:12px;
border-radius:14px;
}
.bn-system-panel__layout--style-panel,.bn-system-panel__cell--style-panel{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 30%,transparent);
background:linear-gradient(135deg,color-mix(in srgb,var(--bn-sp-dark) 38%,transparent),color-mix(in srgb,var(--bn-sp-accent) 10%,transparent));
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 8%,transparent);
}
.bn-system-panel__layout--style-glass,.bn-system-panel__cell--style-glass{
border:1px solid color-mix(in srgb,var(--bn-sp-accent-soft) 28%,transparent);
background:linear-gradient(135deg,color-mix(in srgb,var(--bn-sp-accent) 16%,transparent),color-mix(in srgb,var(--bn-sp-dark) 28%,transparent));
box-shadow:0 10px 28px color-mix(in srgb,var(--bn-sp-dark) 20%,transparent),inset 0 0 0 1px color-mix(in srgb,white 6%,transparent);
backdrop-filter:blur(10px);
}
.bn-system-panel__layout--style-solid,.bn-system-panel__cell--style-solid{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 34%,transparent);
background:color-mix(in srgb,var(--bn-sp-dark) 72%,var(--bn-sp-panel));
box-shadow:inset 0 0 24px rgba(0,0,0,.18);
}
.bn-system-panel__layout--style-outline,.bn-system-panel__cell--style-outline{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 46%,transparent);
background:transparent;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 7%,transparent);
}
.bn-system-panel__layout--style-inset,.bn-system-panel__cell--style-inset{
border:1px solid color-mix(in srgb,var(--bn-sp-dark) 70%,transparent);
background:color-mix(in srgb,var(--bn-sp-dark) 52%,transparent);
box-shadow:inset 0 10px 24px rgba(0,0,0,.26),inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent) 18%,transparent);
}
.bn-system-panel__layout--style-ghost,.bn-system-panel__cell--style-ghost{
border:1px dashed color-mix(in srgb,var(--bn-sp-accent) 32%,transparent);
background:color-mix(in srgb,var(--bn-sp-accent) 6%,transparent);
}
.bn-system-panel__layout--style-scan,.bn-system-panel__cell--style-scan{
position:relative;
overflow:hidden;
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 34%,transparent);
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-dark) 44%,transparent),color-mix(in srgb,var(--bn-sp-accent) 8%,transparent));
}
.bn-system-panel__layout--style-scan:before,.bn-system-panel__cell--style-scan:before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:repeating-linear-gradient(180deg,transparent 0 7px,color-mix(in srgb,var(--bn-sp-accent) 8%,transparent) 7px 8px);
opacity:.7;
}
@media (max-width:640px){
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__status-list{
width:100% !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col)) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}}
.bn-system-panel{
overflow:hidden !important;
}
.bn-system-panel__body,.bn-system-panel__group,.bn-system-panel__row,.bn-system-panel__text,.bn-system-panel__status,.bn-system-panel__status-list,.bn-system-panel__status-row,.bn-system-panel__status-value,.bn-system-panel__layout,.bn-system-panel__cell{
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel__layout{
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
overflow:visible !important;
}
.bn-system-panel__cell{
overflow:visible !important;
clip-path:none !important;
border-radius:14px !important;
contain:layout style !important;
}
.bn-system-panel__cell>*,.bn-system-panel__layout>*{
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel__cell .bn-system-panel__text,.bn-system-panel__cell .bn-system-panel__status-value,.bn-system-panel__cell p,.bn-system-panel__cell span{
overflow-wrap:anywhere !important;
word-break:normal !important;
}
.bn-system-panel__layout--style-scan,.bn-system-panel__cell--style-scan{
overflow:visible !important;
}
.bn-system-panel__layout--style-scan:before,.bn-system-panel__cell--style-scan:before{
border-radius:inherit !important;
overflow:hidden !important;
}
.bn-system-panel__meter--radial,.bn-system-panel__meter--orb{
width:max-content !important;
max-width:100% !important;
justify-items:center !important;
}
.bn-system-panel__meter-circle{
position:relative !important;
display:grid !important;
place-items:center !important;
width:96px !important;
height:96px !important;
border-radius:999px !important;
background:conic-gradient(from -90deg,var(--bn-sp-meter-color) 0 var(--bn-sp-meter-deg,0deg),color-mix(in srgb,var(--bn-sp-dark) 82%,transparent) var(--bn-sp-meter-deg,0deg) 360deg) !important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--bn-sp-meter-color) 30%,transparent),0 0 26px var(--bn-sp-meter-glow) !important;
overflow:hidden !important;
}
.bn-system-panel__meter-circle:before{
content:"" !important;
grid-area:1/1 !important;
width:68px !important;
height:68px !important;
border-radius:999px !important;
background:linear-gradient(180deg,var(--bn-sp-panel),var(--bn-sp-panel-2)) !important;
box-shadow:inset 0 0 18px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 14%,transparent) !important;
}
.bn-system-panel__meter-circle:after{
content:"" !important;
position:absolute !important;
inset:7px !important;
border-radius:inherit !important;
border:1px solid color-mix(in srgb,var(--bn-sp-meter-soft) 22%,transparent) !important;
pointer-events:none !important;
}
.bn-system-panel__meter-circle span{
position:relative !important;
z-index:1 !important;
grid-area:1/1 !important;
color:var(--bn-sp-text) !important;
font-size:.86rem !important;
font-weight:950 !important;
line-height:1 !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__status-list{
max-width:100% !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
}
@media (max-width:640px){
.bn-system-panel__layout:not(.bn-system-panel__layout--stack){
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
}
.bn-system-panel__layout--stack{
grid-template-columns:1fr !important;
}
.bn-system-panel__layout:not(.bn-system-panel__layout--stack)>.bn-system-panel__cell{
grid-column:span min(var(--bn-sp-col-span,1),var(--bn-sp-cols,2)) !important;
width:var(--bn-sp-col-width,100%) !important;
}
.bn-system-panel__meter-circle{
width:86px !important;
height:86px !important;
}
.bn-system-panel__meter-circle:before{
width:60px !important;
height:60px !important;
}
.bn-system-panel--align-labels:not(.bn-system-panel--align-justify) .bn-system-panel__group,.bn-system-panel--align-labels:not(.bn-system-panel--align-justify) .bn-system-panel__status,.bn-system-panel--align-labels:not(.bn-system-panel--align-justify) .bn-system-panel__status-list{
width:fit-content !important;
max-width:100% !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col)) minmax(0,max-content) !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
width:100% !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col)) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}}
.bn-system-panel,.bn-system-panel *,.bn-system-panel *:before,.bn-system-panel *:after{
box-sizing:border-box !important;
}
.bn-system-panel{
max-width:100% !important;
overflow:hidden !important;
}
.bn-system-panel__body,.bn-system-panel__align,.bn-system-panel__layout,.bn-system-panel__cell,.bn-system-panel__group,.bn-system-panel__row,.bn-system-panel__text,.bn-system-panel__status,.bn-system-panel__status-list,.bn-system-panel__status-row,.bn-system-panel__status-label,.bn-system-panel__status-value,.bn-system-panel__skill,.bn-system-panel__skill-head,.bn-system-panel__skill-name,.bn-system-panel__skill-desc,.bn-system-panel__meter,.bn-system-panel__meter-head,.bn-system-panel__meter-caption,.bn-system-panel__meter-label,.bn-system-panel__meter-value{
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel__body,.bn-system-panel__align,.bn-system-panel__layout,.bn-system-panel__cell{
overflow-wrap:anywhere !important;
word-break:normal !important;
}
.bn-system-panel__layout{
display:grid !important;
width:100% !important;
overflow:hidden !important;
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
gap:var(--bn-sp-layout-gap,12px) !important;
align-items:stretch !important;
}
.bn-system-panel__cell{
display:grid !important;
width:min(100%,var(--bn-sp-col-width,100%)) !important;
overflow:hidden !important;
clip-path:none !important;
contain:none !important;
grid-column:span var(--bn-sp-col-span,1) !important;
gap:10px !important;
align-content:start !important;
}
.bn-system-panel__cell>*{
min-width:0 !important;
max-width:100% !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__layout--style-scan,.bn-system-panel__cell--style-scan{
overflow:hidden !important;
}
.bn-system-panel__layout--style-scan:before,.bn-system-panel__cell--style-scan:before{
border-radius:inherit !important;
}
.bn-system-panel__layout--align-left,.bn-system-panel__cell--align-left{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel__layout--align-center,.bn-system-panel__cell--align-center{
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel__layout--align-right,.bn-system-panel__cell--align-right{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel__layout--align-justify,.bn-system-panel__cell--align-justify{
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel__meter--radial,.bn-system-panel__meter--orb{
width:max-content !important;
max-width:100% !important;
justify-items:center !important;
align-content:start !important;
}
.bn-system-panel__meter-circle{
position:relative !important;
display:grid !important;
place-items:center !important;
width:96px !important;
height:96px !important;
overflow:visible !important;
border-radius:999px !important;
background:none !important;
box-shadow:none !important;
isolation:isolate !important;
}
.bn-system-panel__meter-circle:before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:0 !important;
width:auto !important;
height:auto !important;
border-radius:inherit !important;
background:conic-gradient(from -90deg,var(--bn-sp-meter-color) 0 var(--bn-sp-meter-deg,0deg),color-mix(in srgb,var(--bn-sp-dark) 82%,transparent) var(--bn-sp-meter-deg,0deg) 360deg) !important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--bn-sp-meter-color) 30%,transparent),0 0 26px var(--bn-sp-meter-glow) !important;
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 18px),#000 calc(100% - 17px));
mask:radial-gradient(farthest-side,transparent calc(100% - 18px),#000 calc(100% - 17px));
}
.bn-system-panel__meter-circle:after{
content:"" !important;
position:absolute !important;
inset:19px !important;
z-index:1 !important;
border-radius:inherit !important;
background:linear-gradient(180deg,var(--bn-sp-panel),var(--bn-sp-panel-2)) !important;
box-shadow:inset 0 0 18px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 14%,transparent) !important;
pointer-events:none !important;
}
.bn-system-panel__meter-circle span{
position:relative !important;
z-index:2 !important;
grid-area:1/1 !important;
color:var(--bn-sp-text) !important;
font-size:.86rem !important;
font-weight:950 !important;
line-height:1 !important;
text-align:center !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
display:grid !important;
width:max-content !important;
max-width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,0ch),max-content) minmax(0,max-content) !important;
gap:7px 10px !important;
}
.bn-system-panel--align-labels .bn-system-panel__status{
max-width:100% !important;
}
.bn-system-panel--align-labels .bn-system-panel__row,.bn-system-panel--align-labels .bn-system-panel__status-row{
display:contents !important;
}
.bn-system-panel--align-labels .bn-system-panel__row:not(.bn-system-panel__row--label) .bn-system-panel__text,.bn-system-panel--align-labels .bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1/-1 !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
grid-column:1 !important;
justify-self:end !important;
align-self:start !important;
max-width:100% !important;
text-align:right !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text,.bn-system-panel--align-labels .bn-system-panel__status-value{
grid-column:2 !important;
justify-self:start !important;
align-self:start !important;
min-width:0 !important;
max-width:100% !important;
text-align:left !important;
white-space:normal !important;
overflow:visible !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,0ch),max-content) minmax(0,1fr) !important;
}
.bn-system-panel__align--manual{
display:grid !important;
max-width:100% !important;
min-width:0 !important;
gap:12px !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--left{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--center{
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--right{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--justify{
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__group,.bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status,.bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status-list,.bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__skill,.bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__meter,.bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__layout{
justify-self:start !important;
text-align:left !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__group,.bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status,.bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status-list,.bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__skill,.bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__meter,.bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__layout{
justify-self:center !important;
text-align:center !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__group,.bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status,.bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status-list,.bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__skill,.bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__meter,.bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__layout{
justify-self:end !important;
text-align:right !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status,.bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list,.bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__skill,.bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__meter,.bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__layout{
justify-self:stretch !important;
width:100% !important;
text-align:justify !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status-list{
justify-self:start !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status-list{
justify-self:center !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status-list{
justify-self:end !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
}
@media (max-width:640px){
.bn-system-panel__layout:not(.bn-system-panel__layout--stack){
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
overflow:hidden !important;
}
.bn-system-panel__layout--stack{
grid-template-columns:1fr !important;
}
.bn-system-panel__cell{
grid-column:span var(--bn-sp-col-span,1) !important;
width:100% !important;
}
.bn-system-panel__meter-circle{
width:86px !important;
height:86px !important;
}
.bn-system-panel__meter-circle:before{
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));
mask:radial-gradient(farthest-side,transparent calc(100% - 15px),#000 calc(100% - 14px));
}
.bn-system-panel__meter-circle:after{
inset:17px !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
width:max-content !important;
max-width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,0ch),max-content) minmax(0,max-content) !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list{
width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,0ch),max-content) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text,.bn-system-panel--align-labels .bn-system-panel__status-value{
white-space:normal !important;
overflow:visible !important;
overflow-wrap:anywhere !important;
}}
.bn-system-panel .bn-system-panel__meter--radial{
display:grid !important;
justify-items:center !important;
align-content:start !important;
width:max-content !important;
max-width:100% !important;
gap:9px !important;
text-align:center !important;
overflow:visible !important;
}
.bn-system-panel .bn-system-panel__meter-circle{
position:relative !important;
display:grid !important;
place-items:center !important;
width:96px !important;
height:96px !important;
max-width:100% !important;
aspect-ratio:1 !important;
border-radius:50% !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
isolation:isolate !important;
}
.bn-system-panel .bn-system-panel__meter-circle:before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:0 !important;
width:auto !important;
height:auto !important;
border-radius:inherit !important;
background:conic-gradient(from -90deg,var(--bn-sp-meter-color,var(--bn-sp-accent)) 0deg,var(--bn-sp-meter-soft,var(--bn-sp-accent-soft)) var(--bn-sp-meter-deg,0deg),color-mix(in srgb,var(--bn-sp-dark) 78%,transparent) var(--bn-sp-meter-deg,0deg),color-mix(in srgb,var(--bn-sp-dark) 78%,transparent) 360deg) !important;
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 18px),#000 calc(100% - 17px)) !important;
mask:radial-gradient(farthest-side,transparent calc(100% - 18px),#000 calc(100% - 17px)) !important;
box-shadow:none !important;
pointer-events:none !important;
}
.bn-system-panel .bn-system-panel__meter-circle:after{
content:"" !important;
position:absolute !important;
inset:22px !important;
z-index:1 !important;
border-radius:inherit !important;
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-panel) 92%,transparent),color-mix(in srgb,var(--bn-sp-panel-2) 94%,transparent)) !important;
box-shadow:inset 0 0 18px rgba(0,0,0,.36),0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 13%,transparent) !important;
pointer-events:none !important;
}
.bn-system-panel .bn-system-panel__meter-circle span{
position:relative !important;
z-index:2 !important;
display:block !important;
max-width:calc(100% - 48px) !important;
color:var(--bn-sp-text) !important;
font-size:.84rem !important;
font-weight:950 !important;
line-height:1 !important;
text-align:center !important;
white-space:nowrap !important;
}
.bn-system-panel .bn-system-panel__meter-caption{
display:grid !important;
justify-items:center !important;
gap:3px !important;
max-width:100% !important;
text-align:center !important;
}
.bn-system-panel .bn-system-panel__meter--align-left{
justify-self:start !important;
text-align:left !important;
}
.bn-system-panel .bn-system-panel__meter--align-center{
justify-self:center !important;
text-align:center !important;
}
.bn-system-panel .bn-system-panel__meter--align-right{
justify-self:end !important;
text-align:right !important;
}
.bn-system-panel .bn-system-panel__meter--align-left .bn-system-panel__meter-caption{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel .bn-system-panel__meter--align-right .bn-system-panel__meter-caption{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel .bn-system-panel__layout{
display:grid !important;
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
grid-auto-flow:row !important;
align-items:stretch !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
gap:var(--bn-sp-layout-gap,12px) !important;
overflow:visible !important;
clip-path:none !important;
}
.bn-system-panel .bn-system-panel__cell{
display:grid !important;
align-content:start !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
min-height:0 !important;
gap:10px !important;
overflow:visible !important;
clip-path:none !important;
word-break:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel .bn-system-panel__cell>*{
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel .bn-system-panel__cell p,.bn-system-panel .bn-system-panel__cell span,.bn-system-panel .bn-system-panel__cell div,.bn-system-panel .bn-system-panel__cell li,.bn-system-panel .bn-system-panel__cell dd,.bn-system-panel .bn-system-panel__cell dt{
max-width:100% !important;
overflow:visible !important;
text-overflow:clip !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel .bn-system-panel__cell img,.bn-system-panel .bn-system-panel__cell video,.bn-system-panel .bn-system-panel__cell iframe,.bn-system-panel .bn-system-panel__cell table{
max-width:100% !important;
}
.bn-system-panel .bn-system-panel__layout--align-left,.bn-system-panel .bn-system-panel__cell--align-left{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel .bn-system-panel__layout--align-center,.bn-system-panel .bn-system-panel__cell--align-center{
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel .bn-system-panel__layout--align-right,.bn-system-panel .bn-system-panel__cell--align-right{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel .bn-system-panel__layout--align-justify,.bn-system-panel .bn-system-panel__cell--align-justify{
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel .bn-system-panel__layout--style-panel,.bn-system-panel .bn-system-panel__layout--style-glass,.bn-system-panel .bn-system-panel__layout--style-solid,.bn-system-panel .bn-system-panel__layout--style-outline,.bn-system-panel .bn-system-panel__layout--style-inset,.bn-system-panel .bn-system-panel__layout--style-ghost,.bn-system-panel .bn-system-panel__layout--style-scan{
padding:10px !important;
border-radius:16px !important;
background:color-mix(in srgb,var(--bn-sp-dark) 18%,transparent) !important;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 7%,transparent) !important;
}
.bn-system-panel .bn-system-panel__cell--style-panel,.bn-system-panel .bn-system-panel__cell--style-glass,.bn-system-panel .bn-system-panel__cell--style-solid,.bn-system-panel .bn-system-panel__cell--style-outline,.bn-system-panel .bn-system-panel__cell--style-inset,.bn-system-panel .bn-system-panel__cell--style-ghost,.bn-system-panel .bn-system-panel__cell--style-scan{
padding:12px !important;
border-radius:14px !important;
}
.bn-system-panel .bn-system-panel__layout--style-panel{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 18%,transparent) !important;
background:linear-gradient(135deg,color-mix(in srgb,var(--bn-sp-dark) 22%,transparent),color-mix(in srgb,var(--bn-sp-accent) 5%,transparent)) !important;
}
.bn-system-panel .bn-system-panel__cell--style-panel{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 32%,transparent) !important;
background:linear-gradient(135deg,color-mix(in srgb,var(--bn-sp-dark) 42%,transparent),color-mix(in srgb,var(--bn-sp-accent) 12%,transparent)) !important;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 9%,transparent) !important;
}
.bn-system-panel .bn-system-panel__layout--style-glass{
border:1px solid color-mix(in srgb,var(--bn-sp-accent-soft) 18%,transparent) !important;
background:color-mix(in srgb,var(--bn-sp-accent) 7%,transparent) !important;
}
.bn-system-panel .bn-system-panel__cell--style-glass{
border:1px solid color-mix(in srgb,var(--bn-sp-accent-soft) 30%,transparent) !important;
background:linear-gradient(135deg,color-mix(in srgb,var(--bn-sp-accent) 17%,transparent),color-mix(in srgb,var(--bn-sp-dark) 30%,transparent)) !important;
box-shadow:0 10px 28px color-mix(in srgb,var(--bn-sp-dark) 18%,transparent),inset 0 0 0 1px color-mix(in srgb,white 6%,transparent) !important;
backdrop-filter:blur(10px) !important;
}
.bn-system-panel .bn-system-panel__layout--style-solid{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 20%,transparent) !important;
background:color-mix(in srgb,var(--bn-sp-dark) 38%,transparent) !important;
}
.bn-system-panel .bn-system-panel__cell--style-solid{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 34%,transparent) !important;
background:color-mix(in srgb,var(--bn-sp-dark) 72%,var(--bn-sp-panel)) !important;
box-shadow:inset 0 0 24px rgba(0,0,0,.18) !important;
}
.bn-system-panel .bn-system-panel__layout--style-outline{
border:1px dashed color-mix(in srgb,var(--bn-sp-accent) 30%,transparent) !important;
background:transparent !important;
}
.bn-system-panel .bn-system-panel__cell--style-outline{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 48%,transparent) !important;
background:transparent !important;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 7%,transparent) !important;
}
.bn-system-panel .bn-system-panel__layout--style-inset{
border:1px solid color-mix(in srgb,var(--bn-sp-dark) 56%,transparent) !important;
background:color-mix(in srgb,var(--bn-sp-dark) 32%,transparent) !important;
box-shadow:inset 0 5px 16px rgba(0,0,0,.18) !important;
}
.bn-system-panel .bn-system-panel__cell--style-inset{
border:1px solid color-mix(in srgb,var(--bn-sp-dark) 70%,transparent) !important;
background:color-mix(in srgb,var(--bn-sp-dark) 52%,transparent) !important;
box-shadow:inset 0 10px 24px rgba(0,0,0,.26),inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent) 18%,transparent) !important;
}
.bn-system-panel .bn-system-panel__layout--style-ghost{
border:1px dotted color-mix(in srgb,var(--bn-sp-accent) 24%,transparent) !important;
background:transparent !important;
}
.bn-system-panel .bn-system-panel__cell--style-ghost{
border:1px dashed color-mix(in srgb,var(--bn-sp-accent) 34%,transparent) !important;
background:color-mix(in srgb,var(--bn-sp-accent) 6%,transparent) !important;
}
.bn-system-panel .bn-system-panel__layout--style-scan,.bn-system-panel .bn-system-panel__cell--style-scan{
position:relative !important;
isolation:isolate !important;
overflow:visible !important;
}
.bn-system-panel .bn-system-panel__layout--style-scan{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 22%,transparent) !important;
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-dark) 28%,transparent),color-mix(in srgb,var(--bn-sp-accent) 5%,transparent)) !important;
}
.bn-system-panel .bn-system-panel__cell--style-scan{
border:1px solid color-mix(in srgb,var(--bn-sp-accent) 36%,transparent) !important;
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-dark) 46%,transparent),color-mix(in srgb,var(--bn-sp-accent) 9%,transparent)) !important;
}
.bn-system-panel .bn-system-panel__layout--style-scan:before,.bn-system-panel .bn-system-panel__cell--style-scan:before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:-1 !important;
border-radius:inherit !important;
background:repeating-linear-gradient(180deg,transparent 0 7px,color-mix(in srgb,var(--bn-sp-accent) 8%,transparent) 7px 8px) !important;
opacity:.62 !important;
pointer-events:none !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
display:grid !important;
width:max-content !important;
max-width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,var(--bn-sp-label-ch,0ch)),max-content) minmax(0,max-content) !important;
gap:7px 10px !important;
align-items:start !important;
text-align:left !important;
overflow:visible !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text,.bn-system-panel--align-labels .bn-system-panel__status-value{
grid-column:2 !important;
justify-self:start !important;
align-self:start !important;
min-width:0 !important;
max-width:100% !important;
text-align:left !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__status{
justify-self:start !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__status{
justify-self:center !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__status{
justify-self:end !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,var(--bn-sp-label-ch,0ch)),max-content) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,var(--bn-sp-label-ch,0ch)),max-content) minmax(0,1fr) !important;
}
@media (max-width:640px){
.bn-system-panel .bn-system-panel__layout:not(.bn-system-panel__layout--stack){
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
overflow:visible !important;
}
.bn-system-panel .bn-system-panel__layout--stack{
grid-template-columns:1fr !important;
}
.bn-system-panel .bn-system-panel__cell{
grid-column:span min(var(--bn-sp-col-span,1),var(--bn-sp-cols,2)) !important;
width:100% !important;
overflow:visible !important;
clip-path:none !important;
}
.bn-system-panel .bn-system-panel__meter-circle{
width:88px !important;
height:88px !important;
}
.bn-system-panel .bn-system-panel__meter-circle:before{
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px)) !important;
mask:radial-gradient(farthest-side,transparent calc(100% - 16px),#000 calc(100% - 15px)) !important;
}
.bn-system-panel .bn-system-panel__meter-circle:after{
inset:20px !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
width:max-content !important;
max-width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,var(--bn-sp-label-ch,0ch)),max-content) minmax(0,max-content) !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list{
width:100% !important;
grid-template-columns:minmax(var(--bn-sp-label-col,var(--bn-sp-label-ch,0ch)),max-content) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__status-row{
grid-template-columns:unset !important;
}}
.bn-system-panel .bn-system-panel__layout,.bn-system-panel .bn-system-panel__cell{
min-width:0 !important;
max-width:100% !important;
overflow:visible !important;
clip-path:none !important;
}
.bn-system-panel .bn-system-panel__layout{
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
align-items:stretch !important;
}
.bn-system-panel .bn-system-panel__cell{
display:grid !important;
width:100% !important;
height:auto !important;
align-content:start !important;
justify-content:stretch !important;
}
.bn-system-panel .bn-system-panel__cell>*,.bn-system-panel .bn-system-panel__layout>*,.bn-system-panel .bn-system-panel__align>*,.bn-system-panel .bn-system-panel__body>*{
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel .bn-system-panel__text,.bn-system-panel .bn-system-panel__format,.bn-system-panel .bn-system-panel__mini,.bn-system-panel .bn-system-panel__status-label,.bn-system-panel .bn-system-panel__status-value,.bn-system-panel .bn-system-panel__skill-name,.bn-system-panel .bn-system-panel__skill-rank,.bn-system-panel .bn-system-panel__skill-desc,.bn-system-panel .bn-system-panel__meter-label,.bn-system-panel .bn-system-panel__meter-value{
overflow-wrap:anywhere !important;
word-break:normal !important;
white-space:normal !important;
text-overflow:clip !important;
}
.bn-system-panel .bn-system-panel__cell img,.bn-system-panel .bn-system-panel__cell svg,.bn-system-panel .bn-system-panel__cell video,.bn-system-panel .bn-system-panel__cell canvas,.bn-system-panel .bn-system-panel__cell iframe{
max-width:100% !important;
height:auto !important;
}
.bn-system-panel .bn-system-panel__cell pre,.bn-system-panel .bn-system-panel__cell code,.bn-system-panel .bn-system-panel__cell table{
max-width:100% !important;
white-space:pre-wrap !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel .bn-system-panel__cell pre,.bn-system-panel .bn-system-panel__cell table{
overflow-x:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
display:grid !important;
width:auto !important;
max-width:100% !important;
min-width:0 !important;
grid-template-columns:minmax(0,max-content) minmax(0,1fr) !important;
gap:7px 10px !important;
align-items:start !important;
justify-content:start !important;
text-align:left !important;
overflow:visible !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
grid-column:1 !important;
justify-self:end !important;
align-self:start !important;
text-align:right !important;
max-width:100% !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text,.bn-system-panel--align-labels .bn-system-panel__status-value{
grid-column:2 !important;
justify-self:stretch !important;
align-self:start !important;
text-align:left !important;
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel--align-labels .bn-system-panel__row:not(.bn-system-panel__row--label) .bn-system-panel__text,.bn-system-panel--align-labels .bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1/-1 !important;
justify-self:stretch !important;
text-align:inherit !important;
}
.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__status{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__status{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__status{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
@media (min-width:641px){
.bn-system-panel .bn-system-panel__layout,.bn-system-panel .bn-system-panel__cell{
overflow:visible !important;
clip-path:none !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
grid-template-columns:minmax(0,max-content) minmax(0,1fr) !important;
}}
@media (max-width:640px){
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
width:auto !important;
grid-template-columns:minmax(0,max-content) minmax(0,1fr) !important;
}}
.bn-system-panel .bn-system-panel__body,.bn-system-panel .bn-system-panel__layout,.bn-system-panel .bn-system-panel__cell,.bn-system-panel .bn-system-panel__group,.bn-system-panel .bn-system-panel__status,.bn-system-panel .bn-system-panel__status-list{
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel .bn-system-panel__layout{
display:grid !important;
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
gap:var(--bn-sp-gap,10px) !important;
align-items:stretch !important;
justify-items:stretch !important;
overflow:visible !important;
clip-path:none !important;
}
.bn-system-panel .bn-system-panel__cell{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-height:0 !important;
align-content:start !important;
overflow:visible !important;
clip-path:none !important;
}
.bn-system-panel .bn-system-panel__cell>*,.bn-system-panel .bn-system-panel__layout>*{
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel .bn-system-panel__text,.bn-system-panel .bn-system-panel__format,.bn-system-panel .bn-system-panel__mini,.bn-system-panel .bn-system-panel__status-label,.bn-system-panel .bn-system-panel__status-value,.bn-system-panel .bn-system-panel__skill-name,.bn-system-panel .bn-system-panel__skill-rank,.bn-system-panel .bn-system-panel__skill-desc,.bn-system-panel .bn-system-panel__meter-label,.bn-system-panel .bn-system-panel__meter-value{
max-width:100% !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
white-space:normal !important;
text-overflow:clip !important;
}
.bn-system-panel .bn-system-panel__cell img,.bn-system-panel .bn-system-panel__cell svg,.bn-system-panel .bn-system-panel__cell video,.bn-system-panel .bn-system-panel__cell canvas,.bn-system-panel .bn-system-panel__cell iframe{
display:block !important;
max-width:100% !important;
height:auto !important;
}
.bn-system-panel--align-left .bn-system-panel__cell:not(.bn-system-panel__cell--align-center):not(.bn-system-panel__cell--align-right):not(.bn-system-panel__cell--align-justify){
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel--align-center .bn-system-panel__cell:not(.bn-system-panel__cell--align-left):not(.bn-system-panel__cell--align-right):not(.bn-system-panel__cell--align-justify){
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel--align-right .bn-system-panel__cell:not(.bn-system-panel__cell--align-left):not(.bn-system-panel__cell--align-center):not(.bn-system-panel__cell--align-justify){
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel--align-justify .bn-system-panel__cell:not(.bn-system-panel__cell--align-left):not(.bn-system-panel__cell--align-center):not(.bn-system-panel__cell--align-right){
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel .bn-system-panel__cell--align-left{
justify-items:start !important;
text-align:left !important;
}
.bn-system-panel .bn-system-panel__cell--align-center{
justify-items:center !important;
text-align:center !important;
}
.bn-system-panel .bn-system-panel__cell--align-right{
justify-items:end !important;
text-align:right !important;
}
.bn-system-panel .bn-system-panel__cell--align-justify{
justify-items:stretch !important;
text-align:justify !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
--bn-sp-label-gap:10px;
display:grid !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,var(--bn-sp-value-col,1fr)) !important;
gap:7px var(--bn-sp-label-gap) !important;
align-items:start !important;
align-content:start !important;
width:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
min-width:0 !important;
max-width:100% !important;
text-align:left !important;
overflow:visible !important;
clip-path:none !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
grid-column:1 !important;
justify-self:end !important;
align-self:start !important;
text-align:right !important;
width:auto !important;
max-width:100% !important;
}
.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell--align-left .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__cell--align-left .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status-list{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell--align-center .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__cell--align-center .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status-list{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell--align-right .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__cell--align-right .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status-list{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell--align-justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__cell--align-justify .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list{
justify-self:stretch !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
@media (max-width:640px){
.bn-system-panel .bn-system-panel__layout:not(.bn-system-panel__layout--stack){
grid-template-columns:repeat(var(--bn-sp-cols,2),minmax(0,1fr)) !important;
}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,var(--bn-sp-value-col,1fr)) !important;
width:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
width:100% !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}}
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
--bn-sp-label-gap:10px;
display:grid !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,var(--bn-sp-value-col,max-content)) !important;
inline-size:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
width:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
max-width:100% !important;
justify-content:start !important;
align-content:start !important;
text-align:left !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
grid-column:1 !important;
justify-self:end !important;
text-align:right !important;
white-space:normal !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text,.bn-system-panel--align-labels .bn-system-panel__status-value{
grid-column:2 !important;
justify-self:start !important;
text-align:left !important;
min-width:0 !important;
max-width:100% !important;
white-space:normal !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__cell--align-left .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__cell--align-left .bn-system-panel__status-list{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__cell--align-center .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__cell--align-center .bn-system-panel__status-list{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__cell--align-right .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__cell--align-right .bn-system-panel__status-list{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__cell--align-justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__cell--align-justify .bn-system-panel__status-list{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
@media (max-width:640px){
.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__status-list{
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,var(--bn-sp-value-col,max-content)) !important;
inline-size:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
width:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group,.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__status-list,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list{
inline-size:100% !important;
width:100% !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}}
.bn-system-panel--align-labels .bn-system-panel__group--aligned{
--bn-sp-label-gap:10px;
display:grid !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,var(--bn-sp-value-col,max-content)) !important;
inline-size:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
width:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
max-width:100% !important;
column-gap:var(--bn-sp-label-gap) !important;
row-gap:8px !important;
align-items:baseline !important;
align-content:start !important;
text-align:left !important;
}
.bn-system-panel--align-labels .bn-system-panel__group--aligned .bn-system-panel__row{
display:contents !important;
}
.bn-system-panel--align-labels .bn-system-panel__group--aligned .bn-system-panel__row--spacer{
display:block !important;
grid-column:1/-1 !important;
min-height:4px !important;
}
.bn-system-panel--align-labels .bn-system-panel__group--aligned .bn-system-panel__row--label .bn-system-panel__mini{
grid-column:1 !important;
justify-self:end !important;
align-self:baseline !important;
text-align:right !important;
white-space:normal !important;
max-width:100% !important;
}
.bn-system-panel--align-labels .bn-system-panel__group--aligned .bn-system-panel__row--label .bn-system-panel__text{
grid-column:2 !important;
justify-self:start !important;
align-self:baseline !important;
min-width:0 !important;
max-width:100% !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
.bn-system-panel--align-labels .bn-system-panel__group--aligned>.bn-system-panel__row:not(.bn-system-panel__row--label):not(.bn-system-panel__row--spacer){
display:block !important;
grid-column:1/-1 !important;
min-width:0 !important;
max-width:100% !important;
text-align:inherit !important;
}
.bn-system-panel--align-left.bn-system-panel--align-labels .bn-system-panel__group--aligned{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels .bn-system-panel__group--aligned{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels .bn-system-panel__group--aligned{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group--aligned{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__group--aligned,.bn-system-panel--align-labels .bn-system-panel__cell--align-left .bn-system-panel__group--aligned{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__group--aligned,.bn-system-panel--align-labels .bn-system-panel__cell--align-center .bn-system-panel__group--aligned{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__group--aligned,.bn-system-panel--align-labels .bn-system-panel__cell--align-right .bn-system-panel__group--aligned{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group--aligned,.bn-system-panel--align-labels .bn-system-panel__cell--align-justify .bn-system-panel__group--aligned{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
@media (max-width:640px){
.bn-system-panel--align-labels .bn-system-panel__group--aligned{
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,var(--bn-sp-value-col,max-content)) !important;
inline-size:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
width:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels .bn-system-panel__group--aligned,.bn-system-panel--align-labels .bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__group--aligned,.bn-system-panel--align-labels .bn-system-panel__cell--align-justify .bn-system-panel__group--aligned{
inline-size:100% !important;
width:100% !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}}
.bn-system-panel__mini,.bn-system-panel__status-label{
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}
.bn-system-panel__mini{
inline-size:fit-content !important;
width:fit-content !important;
max-inline-size:100% !important;
min-inline-size:0 !important;
justify-content:center !important;
padding-inline:.72em !important;
line-height:1.12 !important;
}
.bn-system-panel__row--label{
grid-template-columns:max-content minmax(0,1fr) !important;
}
.bn-system-panel__align-labels{
--bn-sp-label-gap:10px;
display:grid !important;
justify-items:start !important;
inline-size:100% !important;
min-inline-size:0 !important;
max-inline-size:100% !important;
}
.bn-system-panel--align-center .bn-system-panel__body>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify){
justify-items:center !important;
}
.bn-system-panel--align-right .bn-system-panel__body>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify){
justify-items:end !important;
}
.bn-system-panel--align-justify .bn-system-panel__body>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify){
justify-items:stretch !important;
}
.bn-system-panel__align-labels--align-left,.bn-system-panel__align--manual.bn-system-panel__align--left>.bn-system-panel__align-labels,.bn-system-panel__cell--align-left>.bn-system-panel__align-labels{
justify-items:start !important;
}
.bn-system-panel__align-labels--align-center,.bn-system-panel__align--manual.bn-system-panel__align--center>.bn-system-panel__align-labels,.bn-system-panel__cell--align-center>.bn-system-panel__align-labels{
justify-items:center !important;
}
.bn-system-panel__align-labels--align-right,.bn-system-panel__align--manual.bn-system-panel__align--right>.bn-system-panel__align-labels,.bn-system-panel__cell--align-right>.bn-system-panel__align-labels{
justify-items:end !important;
}
.bn-system-panel__align-labels--align-justify,.bn-system-panel__align--manual.bn-system-panel__align--justify>.bn-system-panel__align-labels,.bn-system-panel__cell--align-justify>.bn-system-panel__align-labels{
justify-items:stretch !important;
}
.bn-system-panel__align-labels .bn-system-panel__group--aligned{
display:grid !important;
grid-template-columns:max-content minmax(0,max-content) !important;
gap:7px var(--bn-sp-label-gap) !important;
inline-size:fit-content !important;
width:fit-content !important;
max-inline-size:100% !important;
max-width:100% !important;
align-items:start !important;
text-align:inherit !important;
}
.bn-system-panel__align-labels .bn-system-panel__row{
display:contents !important;
}
.bn-system-panel__align-labels .bn-system-panel__row--spacer{
display:block !important;
grid-column:1/-1 !important;
min-block-size:5px !important;
}
.bn-system-panel__align-labels .bn-system-panel__row--label .bn-system-panel__mini{
grid-column:1 !important;
justify-self:end !important;
align-self:start !important;
text-align:center !important;
}
.bn-system-panel__align-labels .bn-system-panel__row--label .bn-system-panel__text{
grid-column:2 !important;
justify-self:start !important;
align-self:start !important;
min-inline-size:0 !important;
max-inline-size:100% !important;
text-align:inherit !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__align-labels .bn-system-panel__row:not(.bn-system-panel__row--label):not(.bn-system-panel__row--spacer) .bn-system-panel__text{
grid-column:1/-1 !important;
justify-self:stretch !important;
}
.bn-system-panel__align-labels--align-justify .bn-system-panel__group--aligned,.bn-system-panel__align--manual.bn-system-panel__align--justify>.bn-system-panel__align-labels .bn-system-panel__group--aligned,.bn-system-panel__cell--align-justify>.bn-system-panel__align-labels .bn-system-panel__group--aligned{
inline-size:100% !important;
width:100% !important;
grid-template-columns:max-content minmax(0,1fr) !important;
}
.bn-system-panel__status-list{
display:grid !important;
grid-template-columns:max-content minmax(0,max-content) !important;
gap:7px .75em !important;
inline-size:fit-content !important;
width:fit-content !important;
max-inline-size:100% !important;
max-width:100% !important;
align-items:baseline !important;
text-align:inherit !important;
}
.bn-system-panel__status-label{
grid-column:1 !important;
justify-self:start !important;
min-inline-size:0 !important;
text-align:inherit !important;
}
.bn-system-panel__status-value{
grid-column:2 !important;
justify-self:start !important;
min-inline-size:0 !important;
max-inline-size:100% !important;
text-align:inherit !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1/-1 !important;
justify-self:stretch !important;
}
.bn-system-panel--align-left .bn-system-panel__status-list{
justify-self:start !important;
}
.bn-system-panel--align-center .bn-system-panel__status-list{
justify-self:center !important;
}
.bn-system-panel--align-right .bn-system-panel__status-list{
justify-self:end !important;
}
.bn-system-panel--align-justify .bn-system-panel__status-list{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
grid-template-columns:max-content minmax(0,1fr) !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--left .bn-system-panel__status-list,.bn-system-panel__cell--align-left .bn-system-panel__status-list{
justify-self:start !important;
inline-size:fit-content !important;
width:fit-content !important;
grid-template-columns:max-content minmax(0,max-content) !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--center .bn-system-panel__status-list,.bn-system-panel__cell--align-center .bn-system-panel__status-list{
justify-self:center !important;
inline-size:fit-content !important;
width:fit-content !important;
grid-template-columns:max-content minmax(0,max-content) !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--right .bn-system-panel__status-list,.bn-system-panel__cell--align-right .bn-system-panel__status-list{
justify-self:end !important;
inline-size:fit-content !important;
width:fit-content !important;
grid-template-columns:max-content minmax(0,max-content) !important;
}
.bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list,.bn-system-panel__cell--align-justify .bn-system-panel__status-list{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
grid-template-columns:max-content minmax(0,1fr) !important;
}
@media (max-width:640px){
.bn-system-panel__mini{
max-inline-size:100% !important;
}
.bn-system-panel__align-labels{
inline-size:100% !important;
}
.bn-system-panel__align-labels .bn-system-panel__group--aligned,.bn-system-panel__status-list{
inline-size:fit-content !important;
width:fit-content !important;
max-inline-size:100% !important;
grid-template-columns:max-content minmax(0,max-content) !important;
}
.bn-system-panel__align-labels--align-center .bn-system-panel__group--aligned,.bn-system-panel__align--manual.bn-system-panel__align--center>.bn-system-panel__align-labels .bn-system-panel__group--aligned{
justify-self:center !important;
}
.bn-system-panel__align-labels--align-right .bn-system-panel__group--aligned,.bn-system-panel__align--manual.bn-system-panel__align--right>.bn-system-panel__align-labels .bn-system-panel__group--aligned{
justify-self:end !important;
}
.bn-system-panel__align-labels--align-justify .bn-system-panel__group--aligned,.bn-system-panel__align--manual.bn-system-panel__align--justify>.bn-system-panel__align-labels .bn-system-panel__group--aligned,.bn-system-panel__cell--align-justify>.bn-system-panel__align-labels .bn-system-panel__group--aligned,.bn-system-panel--align-justify .bn-system-panel__status-list,.bn-system-panel__align--manual.bn-system-panel__align--justify .bn-system-panel__status-list,.bn-system-panel__cell--align-justify .bn-system-panel__status-list{
inline-size:100% !important;
width:100% !important;
grid-template-columns:max-content minmax(0,1fr) !important;
}}
.bn-system-panel__status-list .bn-system-panel__status-label,.bn-system-panel__status-list .bn-system-panel__status-value{
text-align:start !important;
}
.bn-system-panel__columns-wrap{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
gap:8px !important;
color:var(--bn-sp-text) !important;
}
.bn-system-panel__columns-title,.bn-system-panel__cell-title,.bn-system-panel__skill-tree-title{
color:color-mix(in srgb,var(--bn-sp-text) 84%,white) !important;
text-shadow:0 0 12px color-mix(in srgb,var(--bn-sp-accent) 18%,transparent) !important;
}
.bn-system-panel__cell-title{
margin-bottom:0 !important;
}
.bn-system-panel .bn-system-panel__layout,.bn-system-panel .bn-system-panel__cell{
border-color:color-mix(in srgb,var(--bn-sp-accent) 24%,transparent) !important;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-accent-soft) 8%,transparent) !important;
}
.bn-system-panel .bn-system-panel__layout--style-bare{
box-shadow:none !important;
}
.bn-system-panel .bn-system-panel__cell--style-bare{
padding:0 !important;
border-color:transparent !important;
background:transparent !important;
box-shadow:none !important;
}
.bn-system-panel__label-style{
--bn-sp-label-style:var(--bn-sp-accent);
--bn-sp-label-style-soft:var(--bn-sp-accent-soft);
--bn-sp-label-style-dark:var(--bn-sp-dark);
--bn-sp-label-style-glow:color-mix(in srgb,var(--bn-sp-accent) 34%,transparent);
display:inline-flex;
align-items:center;
justify-content:center;
max-width:100%;
vertical-align:.08em;
font-weight:950;
letter-spacing:.07em;
line-height:1.05;
text-transform:uppercase;
color:color-mix(in srgb,var(--bn-sp-text) 90%,white);
text-shadow:0 0 10px var(--bn-sp-label-style-glow);
overflow-wrap:anywhere;
}
.bn-system-panel__label-style--badge,.bn-system-panel__label-style--chip,.bn-system-panel__label-style--tag{
padding:.22em .65em;
border:1px solid color-mix(in srgb,var(--bn-sp-label-style) 42%,transparent);
border-radius:7px;
background:color-mix(in srgb,var(--bn-sp-label-style) 20%,transparent);
}
.bn-system-panel__label-style--button{
padding:.32em .82em;
border:1px solid color-mix(in srgb,var(--bn-sp-label-style) 52%,transparent);
border-radius:999px;
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-label-style-soft) 26%,transparent),color-mix(in srgb,var(--bn-sp-label-style) 20%,transparent));
box-shadow:0 0 0 1px color-mix(in srgb,var(--bn-sp-label-style-soft) 10%,transparent) inset,0 0 16px color-mix(in srgb,var(--bn-sp-label-style) 18%,transparent);
}
.bn-system-panel__label-style--pill{
padding:.24em .74em;
border-radius:999px;
background:color-mix(in srgb,var(--bn-sp-label-style) 24%,transparent);
}
.bn-system-panel__label-style--outline{
padding:.18em .56em;
border:1px solid color-mix(in srgb,var(--bn-sp-label-style) 48%,transparent);
border-radius:6px;
background:transparent;
}
.bn-system-panel__label-style--plain{
display:inline;
color:color-mix(in srgb,var(--bn-sp-label-style-soft) 88%,white);
}
.bn-system-panel__label-style--glow{
color:color-mix(in srgb,var(--bn-sp-label-style-soft) 90%,white);
text-shadow:0 0 16px color-mix(in srgb,var(--bn-sp-label-style) 62%,transparent);
}
.bn-system-panel__label-style--bracket:before{
content:"[";
opacity:.68;
}
.bn-system-panel__label-style--bracket:after{
content:"]";
opacity:.68;
}
.bn-system-panel__skill-tree{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
gap:10px !important;
}
.bn-system-panel__skill-tree-grid{
position:relative;
display:grid !important;
grid-template-columns:repeat(var(--bn-sp-tree-cols,2),minmax(0,1fr)) !important;
gap:var(--bn-sp-tree-gap,10px) !important;
width:100% !important;
min-width:0 !important;
}
.bn-system-panel__skill-tree-grid:before{
content:"";
position:absolute;
inset:12px 12px;
z-index:0;
pointer-events:none;
background:linear-gradient(90deg,color-mix(in srgb,var(--bn-sp-accent) 18%,transparent) 1px,transparent 1px),linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-accent) 14%,transparent) 1px,transparent 1px);
background-size:38px 38px;
mask-image:radial-gradient(ellipse at center,#000 20%,transparent 76%);
}
.bn-system-panel__node{
--bn-sp-node-color:var(--bn-sp-accent);
--bn-sp-node-color-soft:var(--bn-sp-accent-soft);
--bn-sp-node-color-dark:var(--bn-sp-dark);
--bn-sp-node-color-glow:color-mix(in srgb,var(--bn-sp-accent) 34%,transparent);
position:relative;
z-index:1;
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
gap:9px !important;
align-items:start !important;
min-width:0 !important;
padding:10px !important;
border:1px solid color-mix(in srgb,var(--bn-sp-node-color) 34%,transparent) !important;
border-radius:12px;
background:linear-gradient(180deg,color-mix(in srgb,var(--bn-sp-dark) 48%,transparent),color-mix(in srgb,var(--bn-sp-node-color) 10%,transparent)) !important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--bn-sp-node-color-soft) 7%,transparent) inset,0 10px 22px color-mix(in srgb,var(--bn-sp-dark) 18%,transparent) !important;
color:var(--bn-sp-text) !important;
text-align:left !important;
}
.bn-system-panel__node:before{
content:"";
position:absolute;
left:20px;
top:-10px;
width:1px;
height:10px;
background:color-mix(in srgb,var(--bn-sp-node-color) 30%,transparent);
}
.bn-system-panel__node-icon{
display:grid;
place-items:center;
width:28px;
height:28px;
border:1px solid color-mix(in srgb,var(--bn-sp-node-color) 42%,transparent);
border-radius:999px;
background:color-mix(in srgb,var(--bn-sp-node-color) 18%,transparent);
box-shadow:0 0 14px var(--bn-sp-node-color-glow);
font-size:.78rem;
font-weight:950;
line-height:1;
}
.bn-system-panel__node-icon:empty:before{
content:"";
display:block;
width:8px;
height:8px;
border-radius:999px;
background:var(--bn-sp-node-color);
box-shadow:0 0 12px var(--bn-sp-node-color);
}
.bn-system-panel__node-main{
display:grid !important;
min-width:0 !important;
gap:4px !important;
}
.bn-system-panel__node-title{
color:color-mix(in srgb,var(--bn-sp-text) 90%,white);
font-size:.86em;
font-weight:950;
letter-spacing:.06em;
line-height:1.2;
text-transform:uppercase;
}
.bn-system-panel__node-meta{
color:color-mix(in srgb,var(--bn-sp-node-color-soft) 90%,white);
font-size:.72em;
font-weight:900;
letter-spacing:.08em;
line-height:1.15;
text-transform:uppercase;
}
.bn-system-panel__node-desc{
min-width:0;
color:color-mix(in srgb,var(--bn-sp-text) 82%,white);
font-size:.86em;
font-weight:650;
line-height:1.45;
overflow-wrap:anywhere;
}
.bn-system-panel__node-meter{
height:6px;
margin-top:3px;
overflow:hidden;
border-radius:999px;
background:color-mix(in srgb,var(--bn-sp-dark) 74%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-node-color) 20%,transparent);
}
.bn-system-panel__node-meter span{
display:block;
width:var(--bn-sp-node-progress,0%);
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,var(--bn-sp-node-color),var(--bn-sp-node-color-soft));
box-shadow:0 0 12px var(--bn-sp-node-color-glow);
}
.bn-system-panel__node--state-locked,.bn-system-panel__node--locked{
filter:saturate(.55);
opacity:.68;
}
.bn-system-panel__node--state-complete,.bn-system-panel__node--complete{
border-color:color-mix(in srgb,var(--bn-sp-node-color-soft) 54%,transparent) !important;
}
.bn-system-panel__node--legendary{
box-shadow:0 0 0 1px color-mix(in srgb,var(--bn-sp-node-color-soft) 14%,transparent) inset,0 0 24px color-mix(in srgb,var(--bn-sp-node-color) 18%,transparent) !important;
}
.bn-system-panel__decor{
--bn-sp-decor-color:var(--bn-sp-accent);
--bn-sp-decor-color-soft:var(--bn-sp-accent-soft);
--bn-sp-decor-color-dark:var(--bn-sp-dark);
--bn-sp-decor-color-glow:color-mix(in srgb,var(--bn-sp-accent) 34%,transparent);
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
gap:10px !important;
align-items:start !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
padding:10px 12px !important;
border:1px solid color-mix(in srgb,var(--bn-sp-decor-color) 34%,transparent) !important;
border-radius:12px;
background:linear-gradient(90deg,color-mix(in srgb,var(--bn-sp-decor-color) 14%,transparent),color-mix(in srgb,var(--bn-sp-dark) 36%,transparent)) !important;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bn-sp-decor-color-soft) 8%,transparent) !important;
text-align:left !important;
}
.bn-system-panel__decor-icon{
display:grid;
place-items:center;
width:1.8em;
height:1.8em;
border-radius:8px;
background:color-mix(in srgb,var(--bn-sp-decor-color) 22%,transparent);
color:color-mix(in srgb,var(--bn-sp-decor-color-soft) 86%,white);
font-weight:950;
line-height:1;
box-shadow:0 0 14px var(--bn-sp-decor-color-glow);
}
.bn-system-panel__decor-body{
display:grid;
min-width:0;
gap:3px;
}
.bn-system-panel__decor-title{
color:color-mix(in srgb,var(--bn-sp-text) 88%,white);
font-size:.78em;
font-weight:950;
letter-spacing:.1em;
line-height:1.2;
text-transform:uppercase;
}
.bn-system-panel__decor-text{
min-width:0;
color:color-mix(in srgb,var(--bn-sp-text) 84%,white);
font-size:.94em;
line-height:1.5;
overflow-wrap:anywhere;
}
.bn-system-panel__decor--danger{
--bn-sp-decor-color:#ff4f68;
--bn-sp-decor-color-soft:#ffc0c9;
}
.bn-system-panel__decor--warning{
--bn-sp-decor-color:#ffd35f;
--bn-sp-decor-color-soft:#fff0b4;
}
.bn-system-panel__decor--info{
--bn-sp-decor-color:#60d8ff;
--bn-sp-decor-color-soft:#c8f4ff;
}
.bn-system-panel__decor--success{
--bn-sp-decor-color:#67e092;
--bn-sp-decor-color-soft:#c9ffd9;
}
.bn-system-panel__decor--sigil{
--bn-sp-decor-color:#caa7ff;
--bn-sp-decor-color-soft:#efe0ff;
}
.bn-system-panel__decor--style-inline{
display:inline-grid !important;
width:auto !important;
}
.bn-system-panel__decor--style-stamp{
width:max-content !important;
max-width:100% !important;
}
.bn-system-panel__decor--style-ghost{
background:transparent !important;
}
.bn-system-panel__decor--align-center{
justify-self:center !important;
}
.bn-system-panel__decor--align-right{
justify-self:end !important;
}
.bn-system-panel__decor--align-justify{
justify-self:stretch !important;
}
.bn-system-panel__decor-divider{
display:flex !important;
align-items:center !important;
gap:10px !important;
width:100% !important;
color:color-mix(in srgb,var(--bn-sp-accent-soft) 78%,white);
font-size:.72em;
font-weight:950;
letter-spacing:.16em;
line-height:1;
text-transform:uppercase;
}
.bn-system-panel__decor-divider:before,.bn-system-panel__decor-divider:after{
content:"";
height:1px;
flex:1 1 auto;
background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bn-sp-accent) 42%,transparent),transparent);
}
.bn-system-panel__decor-divider span{
flex:0 1 auto;
max-width:100%;
overflow-wrap:anywhere;
}
@media (max-width:640px){
.bn-system-panel--align-labels .bn-system-panel__group--aligned,.bn-system-panel--align-labels .bn-system-panel__align-labels .bn-system-panel__group--aligned,.bn-system-panel--align-labels .bn-system-panel__status-list{
grid-template-columns:minmax(var(--bn-sp-label-col,0px),max-content) minmax(0,1fr) !important;
inline-size:100% !important;
width:100% !important;
max-inline-size:100% !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
min-inline-size:var(--bn-sp-label-col,auto) !important;
max-inline-size:48vw !important;
justify-content:center !important;
text-align:center !important;
white-space:nowrap !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text,.bn-system-panel--align-labels .bn-system-panel__status-value{
min-inline-size:0 !important;
max-inline-size:100% !important;
text-align:left !important;
}
.bn-system-panel__skill-tree-grid{
grid-template-columns:repeat(min(var(--bn-sp-tree-cols,2),2),minmax(0,1fr)) !important;
}
.bn-system-panel__node{
grid-template-columns:auto minmax(0,1fr) !important;
padding:9px !important;
}
.bn-system-panel__decor{
grid-template-columns:auto minmax(0,1fr) !important;
padding:9px 10px !important;
}}
@media (max-width:460px){
.bn-system-panel__skill-tree-grid{
grid-template-columns:1fr !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini,.bn-system-panel--align-labels .bn-system-panel__status-label{
max-inline-size:44vw !important;
font-size:.68em !important;
}}
.bn-system-panel .bn-system-panel__layout{
align-items:stretch !important;
}
.bn-system-panel .bn-system-panel__cell{
align-self:stretch !important;
}
.bn-system-panel .bn-system-panel__cell--style-bare{
padding:11px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
clip-path:none !important;
}
.bn-system-panel .bn-system-panel__cell--style-bare>.bn-system-panel__group:first-child,.bn-system-panel .bn-system-panel__cell--style-bare>.bn-system-panel__align-labels:first-child,.bn-system-panel .bn-system-panel__cell--style-bare>.bn-system-panel__status:first-child,.bn-system-panel .bn-system-panel__cell--style-bare>.bn-system-panel__skill:first-child,.bn-system-panel .bn-system-panel__cell--style-bare>.bn-system-panel__skill-tree:first-child,.bn-system-panel .bn-system-panel__cell--style-bare>.bn-system-panel__decor:first-child,.bn-system-panel .bn-system-panel__cell--style-bare>.bn-system-panel__meter:first-child{
margin-top:0 !important;
}
.bn-system-panel .bn-system-panel__skill-tree{
container-type:inline-size !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow:visible !important;
}
.bn-system-panel .bn-system-panel__skill-tree-grid{
display:grid !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
grid-template-columns:repeat(var(--bn-sp-tree-cols,2),minmax(0,1fr)) !important;
grid-auto-flow:row dense !important;
gap:var(--bn-sp-tree-gap,10px) !important;
overflow:visible !important;
}
.bn-system-panel .bn-system-panel__node{
min-width:0 !important;
max-width:100% !important;
overflow:hidden !important;
}
.bn-system-panel .bn-system-panel__node-main,.bn-system-panel .bn-system-panel__node-title,.bn-system-panel .bn-system-panel__node-meta,.bn-system-panel .bn-system-panel__node-desc{
min-width:0 !important;
max-width:100% !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
.bn-system-panel .bn-system-panel__node-icon{
flex:0 0 auto !important;
}
@container (max-width:620px){
.bn-system-panel .bn-system-panel__skill-tree-grid{
grid-template-columns:repeat(min(var(--bn-sp-tree-cols,2),2),minmax(0,1fr)) !important;
}
.bn-system-panel .bn-system-panel__node{
grid-template-columns:auto minmax(0,1fr) !important;
padding:9px !important;
gap:8px !important;
}}
@container (max-width:320px){
.bn-system-panel .bn-system-panel__skill-tree-grid{
grid-template-columns:1fr !important;
}
.bn-system-panel .bn-system-panel__node-icon{
width:26px !important;
height:26px !important;
}}
@media (max-width:720px){
.bn-system-panel .bn-system-panel__skill-tree-grid{
grid-template-columns:repeat(min(var(--bn-sp-tree-cols,2),2),minmax(0,1fr)) !important;
}
.bn-system-panel .bn-system-panel__cell--style-bare{
padding:11px !important;
}}
@media (max-width:360px){
.bn-system-panel .bn-system-panel__skill-tree-grid{
grid-template-columns:1fr !important;
}
.bn-system-panel .bn-system-panel__cell--style-bare{
padding:10px !important;
}}
.bn-system-panel--align-labels .bn-system-panel__group--aligned{
grid-template-columns:minmax(var(--bn-sp-label-col,0px),max-content) minmax(0,1fr) !important;
align-items:center !important;
column-gap:var(--bn-sp-label-gap,.75em) !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini{
grid-column:1 !important;
inline-size:var(--bn-sp-label-col,auto) !important;
width:var(--bn-sp-label-col,auto) !important;
min-inline-size:var(--bn-sp-label-col,auto) !important;
max-inline-size:none !important;
justify-self:end !important;
justify-content:center !important;
text-align:center !important;
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text{
grid-column:2 !important;
justify-self:start !important;
align-self:center !important;
min-inline-size:0 !important;
max-inline-size:100% !important;
text-align:left !important;
}
.bn-system-panel .bn-system-panel__status-list{
width:100% !important;
max-width:100% !important;
}
.bn-system-panel .bn-system-panel__status-row{
grid-template-columns:minmax(max-content,1fr) max-content !important;
}
.bn-system-panel .bn-system-panel__status-label{
min-width:max-content !important;
max-width:none !important;
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}
.bn-system-panel .bn-system-panel__status-value{
min-width:max-content !important;
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}
@media (max-width:720px){
.bn-system-panel--align-labels .bn-system-panel__align-labels,.bn-system-panel--align-labels .bn-system-panel__group--aligned{
inline-size:100% !important;
width:100% !important;
max-inline-size:100% !important;
}
.bn-system-panel--align-labels .bn-system-panel__group--aligned{
grid-template-columns:minmax(var(--bn-sp-label-col,0px),max-content) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__mini{
inline-size:var(--bn-sp-label-col,auto) !important;
width:var(--bn-sp-label-col,auto) !important;
min-inline-size:var(--bn-sp-label-col,auto) !important;
max-inline-size:none !important;
}
.bn-system-panel--align-labels .bn-system-panel__row--label .bn-system-panel__text{
justify-self:start !important;
text-align:left !important;
}
.bn-system-panel .bn-system-panel__status-row{
grid-template-columns:minmax(max-content,1fr) max-content !important;
column-gap:8px !important;
}
.bn-system-panel .bn-system-panel__status-label,.bn-system-panel .bn-system-panel__status-value{
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}}
.bn-system-panel__align-labels .bn-system-panel__group--aligned{
--bn-sp-label-gap:10px;
display:grid !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,var(--bn-sp-value-col,max-content)) !important;
inline-size:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
width:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
max-width:100% !important;
column-gap:var(--bn-sp-label-gap) !important;
row-gap:8px !important;
align-items:baseline !important;
align-content:start !important;
justify-content:start !important;
text-align:left !important;
overflow:visible !important;
clip-path:none !important;
}
.bn-system-panel__align-labels .bn-system-panel__group--aligned>.bn-system-panel__row--label{
display:contents !important;
}
.bn-system-panel__align-labels .bn-system-panel__group--aligned>.bn-system-panel__row--spacer{
display:block !important;
grid-column:1/-1 !important;
min-height:4px !important;
}
.bn-system-panel__align-labels .bn-system-panel__group--aligned>.bn-system-panel__row:not(.bn-system-panel__row--label):not(.bn-system-panel__row--spacer){
display:block !important;
grid-column:1/-1 !important;
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel__align-labels .bn-system-panel__group--aligned>.bn-system-panel__row--label>.bn-system-panel__mini{
grid-column:1 !important;
justify-self:end !important;
align-self:baseline !important;
width:auto !important;
max-width:100% !important;
text-align:right !important;
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}
.bn-system-panel__align-labels .bn-system-panel__group--aligned>.bn-system-panel__row--label>.bn-system-panel__text{
grid-column:2 !important;
justify-self:start !important;
align-self:baseline !important;
min-width:0 !important;
max-width:100% !important;
text-align:left !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
.bn-system-panel__cell .bn-system-panel__align-labels,.bn-system-panel__layout .bn-system-panel__align-labels{
min-width:0 !important;
max-width:100% !important;
}
.bn-system-panel__cell .bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify) .bn-system-panel__group--aligned{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel__align-labels--align-left .bn-system-panel__group--aligned{
justify-self:start !important;
margin-left:0 !important;
margin-right:auto !important;
}
.bn-system-panel__align-labels--align-center .bn-system-panel__group--aligned{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel__align-labels--align-right .bn-system-panel__group--aligned{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel__align-labels--align-justify .bn-system-panel__group--aligned{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell>.bn-system-panel__group--aligned{
justify-self:start !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell--align-center>.bn-system-panel__group--aligned{
justify-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell--align-right>.bn-system-panel__group--aligned{
justify-self:end !important;
margin-left:auto !important;
margin-right:0 !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell--align-justify>.bn-system-panel__group--aligned{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
@media (max-width:640px){
.bn-system-panel__align-labels .bn-system-panel__group--aligned{
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,var(--bn-sp-value-col,max-content)) !important;
inline-size:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
width:min(100%,calc(var(--bn-sp-label-col,0px) + var(--bn-sp-value-col,100%) + var(--bn-sp-label-gap))) !important;
}
.bn-system-panel__align-labels--align-justify .bn-system-panel__group--aligned{
inline-size:100% !important;
width:100% !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
.bn-system-panel__align-labels .bn-system-panel__group--aligned>.bn-system-panel__row--label>.bn-system-panel__mini{
max-inline-size:48vw !important;
}}
.bn-system-panel__cell .bn-system-panel__status-row,.bn-system-panel__layout .bn-system-panel__status-row{
align-items:center !important;
}
.bn-system-panel__cell .bn-system-panel__status-label,.bn-system-panel__layout .bn-system-panel__status-label{
align-self:center !important;
}
.bn-system-panel__cell .bn-system-panel__status-value,.bn-system-panel__layout .bn-system-panel__status-value{
align-self:center !important;
}
@media (max-width:640px){
.bn-system-panel__cell .bn-system-panel__status{
padding-inline:10px !important;
}
.bn-system-panel__cell .bn-system-panel__status-list,.bn-system-panel__layout .bn-system-panel__status-list{
inline-size:100% !important;
width:100% !important;
max-inline-size:100% !important;
}
.bn-system-panel__cell .bn-system-panel__status-row,.bn-system-panel__layout .bn-system-panel__status-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) max-content !important;
align-items:center !important;
column-gap:7px !important;
padding-inline:9px !important;
}
.bn-system-panel__cell .bn-system-panel__status-label,.bn-system-panel__layout .bn-system-panel__status-label{
grid-column:1 !important;
justify-self:start !important;
align-self:center !important;
min-inline-size:0 !important;
max-inline-size:100% !important;
font-size:clamp(.68em,2.72vw,.76em) !important;
letter-spacing:.045em !important;
line-height:1.15 !important;
text-align:left !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}
.bn-system-panel__cell .bn-system-panel__status-value,.bn-system-panel__layout .bn-system-panel__status-value{
grid-column:2 !important;
justify-self:end !important;
align-self:center !important;
max-inline-size:none !important;
font-size:clamp(.88em,3vw,.96em) !important;
line-height:1.15 !important;
text-align:right !important;
white-space:nowrap !important;
overflow:visible !important;
overflow-wrap:normal !important;
word-break:normal !important;
hyphens:none !important;
}
.bn-system-panel__cell .bn-system-panel__status-row--plain,.bn-system-panel__layout .bn-system-panel__status-row--plain{
grid-template-columns:1fr !important;
}
.bn-system-panel__cell .bn-system-panel__status-row--plain .bn-system-panel__status-value,.bn-system-panel__layout .bn-system-panel__status-row--plain .bn-system-panel__status-value{
grid-column:1 !important;
justify-self:center !important;
max-inline-size:100% !important;
text-align:center !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status,.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-list{
inline-size:100% !important;
width:100% !important;
max-inline-size:100% !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-list{
display:grid !important;
grid-template-columns:1fr !important;
gap:7px !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-row{
display:grid !important;
grid-template-columns:minmax(0,1fr) max-content !important;
}
.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-label,.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-value{
align-self:center !important;
}
}
@media (max-width:380px){
.bn-system-panel__cell .bn-system-panel__status-row,.bn-system-panel__layout .bn-system-panel__status-row{
column-gap:5px !important;
padding-inline:8px !important;
}
.bn-system-panel__cell .bn-system-panel__status-label,.bn-system-panel__layout .bn-system-panel__status-label{
font-size:clamp(.62em,3.12vw,.72em) !important;
letter-spacing:.025em !important;
}
.bn-system-panel__cell .bn-system-panel__status-value,.bn-system-panel__layout .bn-system-panel__status-value{
font-size:clamp(.84em,3.25vw,.94em) !important;
}
}
.bn-system-panel__cell .bn-system-panel__status-row,.bn-system-panel__layout .bn-system-panel__status-row{
grid-template-columns:minmax(max-content,1fr) max-content !important;
}
.bn-system-panel__cell .bn-system-panel__status-label,.bn-system-panel__layout .bn-system-panel__status-label{
min-inline-size:max-content !important;
inline-size:max-content !important;
max-inline-size:none !important;
white-space:nowrap !important;
overflow:visible !important;
overflow-wrap:normal !important;
word-break:keep-all !important;
hyphens:none !important;
}
@media (max-width:640px){
.bn-system-panel__cell .bn-system-panel__status-row,.bn-system-panel__layout .bn-system-panel__status-row,.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-row{
grid-template-columns:minmax(max-content,1fr) max-content !important;
}
.bn-system-panel__cell .bn-system-panel__status-label,.bn-system-panel__layout .bn-system-panel__status-label,.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-label{
min-inline-size:max-content !important;
inline-size:max-content !important;
max-inline-size:none !important;
font-size:clamp(.58em,2.38vw,.72em) !important;
letter-spacing:.015em !important;
line-height:1 !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:normal !important;
word-break:keep-all !important;
hyphens:none !important;
}
.bn-system-panel__cell .bn-system-panel__status-value,.bn-system-panel__layout .bn-system-panel__status-value,.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-value{
min-inline-size:max-content !important;
inline-size:max-content !important;
font-size:clamp(.82em,2.72vw,.94em) !important;
line-height:1 !important;
white-space:nowrap !important;
}
}
@media (max-width:380px){
.bn-system-panel__cell .bn-system-panel__status-row,.bn-system-panel__layout .bn-system-panel__status-row,.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-row{
column-gap:4px !important;
padding-inline:7px !important;
}
.bn-system-panel__cell .bn-system-panel__status-label,.bn-system-panel__layout .bn-system-panel__status-label,.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-label{
font-size:clamp(.54em,2.95vw,.68em) !important;
letter-spacing:0 !important;
}
.bn-system-panel__cell .bn-system-panel__status-value,.bn-system-panel__layout .bn-system-panel__status-value,.bn-system-panel--align-labels .bn-system-panel__cell .bn-system-panel__status-value{
font-size:clamp(.78em,3.05vw,.9em) !important;
}
}
.bn-system-panel .bn-system-panel__align-labels{
justify-items:start !important;
}
.bn-system-panel .bn-system-panel__align-labels .bn-system-panel__group--aligned{
justify-self:start !important;
margin-inline:0 auto !important;
}
.bn-system-panel--align-center .bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify),.bn-system-panel__align--manual.bn-system-panel__align--center>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify),.bn-system-panel__cell--align-center>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify){
justify-items:center !important;
}
.bn-system-panel--align-center .bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify) .bn-system-panel__group--aligned,.bn-system-panel__align--manual.bn-system-panel__align--center>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify) .bn-system-panel__group--aligned,.bn-system-panel__cell--align-center>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-right):not(.bn-system-panel__align-labels--align-justify) .bn-system-panel__group--aligned,.bn-system-panel__align-labels--align-center .bn-system-panel__group--aligned{
justify-self:center !important;
margin-inline:auto !important;
}
.bn-system-panel--align-right .bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-justify),.bn-system-panel__align--manual.bn-system-panel__align--right>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-justify),.bn-system-panel__cell--align-right>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-justify){
justify-items:end !important;
}
.bn-system-panel--align-right .bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-justify) .bn-system-panel__group--aligned,.bn-system-panel__align--manual.bn-system-panel__align--right>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-justify) .bn-system-panel__group--aligned,.bn-system-panel__cell--align-right>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-justify) .bn-system-panel__group--aligned,.bn-system-panel__align-labels--align-right .bn-system-panel__group--aligned{
justify-self:end !important;
margin-inline:auto 0 !important;
}
.bn-system-panel--align-justify .bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right),.bn-system-panel__align--manual.bn-system-panel__align--justify>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right),.bn-system-panel__cell--align-justify>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right),.bn-system-panel__align-labels--align-justify{
justify-items:stretch !important;
}
.bn-system-panel--align-justify .bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right) .bn-system-panel__group--aligned,.bn-system-panel__align--manual.bn-system-panel__align--justify>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right) .bn-system-panel__group--aligned,.bn-system-panel__cell--align-justify>.bn-system-panel__align-labels:not(.bn-system-panel__align-labels--align-left):not(.bn-system-panel__align-labels--align-center):not(.bn-system-panel__align-labels--align-right) .bn-system-panel__group--aligned,.bn-system-panel__align-labels--align-justify .bn-system-panel__group--aligned{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
margin-inline:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
.bn-system-panel--align-center.bn-system-panel--align-labels>.bn-system-panel__body>.bn-system-panel__group--aligned{
justify-self:center !important;
margin-inline:auto !important;
}
.bn-system-panel--align-right.bn-system-panel--align-labels>.bn-system-panel__body>.bn-system-panel__group--aligned{
justify-self:end !important;
margin-inline:auto 0 !important;
}
.bn-system-panel--align-justify.bn-system-panel--align-labels>.bn-system-panel__body>.bn-system-panel__group--aligned{
justify-self:stretch !important;
inline-size:100% !important;
width:100% !important;
margin-inline:0 !important;
grid-template-columns:minmax(0,var(--bn-sp-label-col,max-content)) minmax(0,1fr) !important;
}
.bn-system-panel .bn-system-panel__status-list{
--bn-sp-status-content:calc(var(--bn-sp-label-col,7.5em) + var(--bn-sp-value-col,2.25em) + 2.75rem);
inline-size:min(100%,clamp(13.5rem,var(--bn-sp-status-content),21rem)) !important;
width:min(100%,clamp(13.5rem,var(--bn-sp-status-content),21rem)) !important;
max-inline-size:100% !important;
}
.bn-system-panel--style-card .bn-system-panel__status-list{
--bn-sp-status-content:calc(var(--bn-sp-label-col,7.5em) + var(--bn-sp-value-col,2.25em) + 3rem);
inline-size:min(100%,clamp(14rem,var(--bn-sp-status-content),22rem)) !important;
width:min(100%,clamp(14rem,var(--bn-sp-status-content),22rem)) !important;
}
.bn-system-panel .bn-system-panel__status-row{
grid-template-columns:minmax(0,1fr) minmax(2.25em,max-content) !important;
}
.bn-system-panel .bn-system-panel__status-label{
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
}
.bn-system-panel .bn-system-panel__status-value{
white-space:nowrap !important;
overflow-wrap:normal !important;
word-break:normal !important;
}
@supports selector(:has(*)){
.bn-system-panel .bn-system-panel__layout:has(.bn-system-panel__status){
grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)) !important;
}
.bn-system-panel .bn-system-panel__layout:has(.bn-system-panel__status)>.bn-system-panel__cell{
min-inline-size:0 !important;
max-inline-size:100% !important;
}
}
@media (max-width:360px){
.bn-system-panel .bn-system-panel__status-list,.bn-system-panel--style-card .bn-system-panel__status-list{
inline-size:100% !important;
width:100% !important;
}
.bn-system-panel .bn-system-panel__status-label,.bn-system-panel .bn-system-panel__status-value{
white-space:normal !important;
overflow-wrap:anywhere !important;
}
}