:root{--fg:26,26,24;--bone:#fcfbf9;--ink:#1a1a18;--sand:#f1efea;--dim:rgba(var(--fg),.43);--haze:rgba(var(--fg),.62);--edge:rgba(var(--fg),.16);--edge-soft:rgba(var(--fg),.095);--spark:#8a7959;--fault:#9b5b4b;--mono:"IBM Plex Mono",monospace;--body:"Inter",sans-serif;--display:"Newsreader",Georgia,serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bone);color:var(--ink)}body{font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased}
.topbar{min-height:54px;padding:0 clamp(18px,3vw,42px);border-bottom:1px solid var(--edge);display:grid;grid-template-columns:1fr auto auto auto;gap:30px;align-items:center;font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.brand{color:var(--ink);font:500 19px var(--display);letter-spacing:-.01em;text-decoration:none;text-transform:none}.live{display:flex;align-items:center;gap:8px}.live i{width:6px;height:6px;border-radius:50%;background:var(--spark);box-shadow:0 0 0 3px rgba(138,121,89,.13)}.live.error i{background:var(--fault);box-shadow:0 0 0 3px rgba(155,91,75,.12)}#clock{min-width:72px;text-align:right;font-variant-numeric:tabular-nums}
.primary-nav{align-self:stretch;display:flex;gap:24px}.primary-nav a{position:relative;display:flex;align-items:center;color:var(--dim);text-decoration:none}.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--ink)}.primary-nav a[aria-current="page"]:after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:1px;background:var(--ink)}.dashboard-view[hidden]{display:none}
main{width:min(1540px,100%);margin:0 auto;padding:40px clamp(18px,3vw,42px) 64px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px}.eyebrow{margin:0 0 5px;color:var(--dim);font:10px var(--mono);letter-spacing:.18em;text-transform:uppercase}h1,h2{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.015em}h1{font-size:clamp(34px,4vw,52px);line-height:1}.section-head h2{font-size:30px;line-height:1}.window-label{margin:0 0 2px;color:var(--dim);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.kpis{display:grid;grid-template-columns:1.35fr repeat(7,1fr);border:1px solid var(--edge);margin-bottom:18px}.kpi{min-width:0;min-height:132px;padding:18px;border-left:1px solid var(--edge-soft);background:rgba(241,239,234,.35)}.kpi:first-child{border-left:0}.kpi p,.kpi span{display:block;margin:0;color:var(--dim);font:9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase}.kpi strong{display:block;margin:14px 0 8px;font:400 clamp(28px,2.7vw,42px)/.9 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}.kpi.featured{background:var(--ink);color:var(--bone)}.kpi.featured p,.kpi.featured span{color:rgba(252,251,249,.55)}.kpi.featured strong{color:var(--bone)}
.panel{border:1px solid var(--edge);background:rgba(252,251,249,.78)}.charts{display:grid;grid-template-columns:1.8fr 1fr;gap:18px}.chart-panel{min-width:0}.panel-head{min-height:74px;padding:15px 18px;border-bottom:1px solid var(--edge-soft);display:flex;align-items:center;justify-content:space-between;gap:20px}.panel-head h2{font-size:20px}.legend{flex:none;color:var(--dim);font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase}.legend i,.key{display:inline-block;width:7px;height:7px;margin-right:7px;background:var(--spark)}.chart{position:relative;height:260px;padding:12px 14px 8px}.chart svg{display:block;width:100%;height:100%;overflow:visible}.chart .grid-line{stroke:var(--edge-soft);stroke-width:1;vector-effect:non-scaling-stroke}.chart .axis-label{fill:rgba(var(--fg),.43);font:8.5px var(--mono);letter-spacing:.03em}.chart .area{fill:rgba(138,121,89,.12)}.chart .line{fill:none;stroke:var(--spark);stroke-width:1.7;vector-effect:non-scaling-stroke}.chart .bar{fill:rgba(138,121,89,.67)}.empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--dim);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.fabric-head{margin-top:48px}.window-label .key{margin-left:15px}.key.routable{background:var(--spark)}.key.disconnected{background:#b8aa8e}.key.offline{background:#8c8982}.network{min-height:590px;display:grid;grid-template-columns:minmax(0,1fr) 360px;overflow:hidden}#map{min-height:590px;background:var(--sand)}.network aside{padding:25px 24px;border-left:1px solid var(--edge);overflow:auto}.network aside h2{margin:6px 0 10px;font-size:30px}.detail-intro,.network aside>p:not(.eyebrow){max-width:28em;color:var(--haze);line-height:1.6}.node-status{display:inline-flex;align-items:center;gap:7px}.node-status:before{content:"";width:6px;height:6px;background:var(--spark);border-radius:50%}.node-status.tunnel_offline:before{background:#b8aa8e}.node-status.offline:before{background:#8c8982}.row{padding:12px 0;border-top:1px solid var(--edge-soft);display:flex;justify-content:space-between;gap:20px}.row span:first-child{color:var(--dim);font-size:12px}.row b{max-width:58%;font:500 11px var(--mono);text-align:right;overflow-wrap:anywhere}.replicas{margin-top:28px}.pill{display:inline-block;margin:4px 5px 4px 0;padding:5px 8px;border:1px solid var(--edge);font:9px var(--mono);letter-spacing:.03em}
.management-head{margin-top:48px}.management{overflow:hidden}.management-toolbar{padding:16px 18px;border-bottom:1px solid var(--edge);display:flex;justify-content:space-between;align-items:end;gap:24px;background:rgba(241,239,234,.35)}.admin-auth{display:grid;grid-template-columns:minmax(220px,360px) auto auto;gap:8px;align-items:end}.admin-auth label,.desired-form label,.release-publisher label{color:var(--dim);font:9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}.admin-auth label{grid-column:1/-1;margin-bottom:-3px}.admin-auth input,.desired-form input,.desired-form select,.release-publisher input{width:100%;height:38px;padding:0 10px;border:1px solid var(--edge);border-radius:0;background:var(--bone);color:var(--ink);font:11px var(--mono);outline:none}.admin-auth input:focus,.desired-form input:focus,.desired-form select:focus,.release-publisher input:focus{border-color:var(--spark);box-shadow:0 0 0 1px var(--spark)}button{min-height:38px;padding:0 13px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--bone);font:9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}button:hover{background:#33332f}button:disabled{cursor:wait;opacity:.48}.button-secondary{border-color:var(--edge);background:transparent;color:var(--ink)}.button-secondary:hover{background:var(--sand)}.danger-button{border-color:rgba(155,91,75,.6);background:transparent;color:var(--fault)}.danger-button:hover{background:rgba(155,91,75,.08)}.management-actions{display:flex;align-items:center;gap:8px}.management-status{margin-right:8px;color:var(--dim);font:9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}.management-status:before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#8c8982}.management-status.connected:before{background:var(--spark)}.management-status.error:before{background:var(--fault)}.enrollment-result{padding:15px 18px;border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(138,121,89,.09)}.enrollment-result[hidden]{display:none}.enrollment-result strong{display:block;font:500 22px var(--mono);letter-spacing:.08em}.enrollment-result span{display:block;margin-top:3px;color:var(--dim);font:9.5px var(--mono);text-transform:uppercase}.release-publisher{padding:0 18px;border-bottom:1px solid var(--edge);background:rgba(241,239,234,.2)}.release-publisher summary{padding:14px 0;cursor:pointer;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.release-publisher form{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:2px 0 18px}.release-publisher label{display:grid;gap:5px}.release-publisher fieldset{display:grid;grid-template-columns:2fr 2fr 1fr;gap:10px;margin:0;padding:12px;border:1px solid var(--edge)}.release-publisher legend{padding:0 6px;color:var(--dim);font:9px var(--mono)}.release-publisher fieldset,.release-publisher form>div{grid-column:1/-1}.fleet-state>.empty-state{min-height:170px}.fleet-grid{display:grid;grid-template-columns:1fr}.fleet-node{min-width:0;padding:20px;border-bottom:1px solid var(--edge-soft)}.fleet-node header{display:flex;justify-content:space-between;align-items:start;gap:18px}.fleet-node h3,.subhead h3{margin:5px 0 0;font:400 24px var(--display)}.node-id{display:block;margin-top:3px;color:var(--dim);font:9px var(--mono)}.fleet-node .node-status{color:var(--dim);font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase}.drift{padding:4px 6px;border:1px solid var(--edge);color:var(--dim);font:8.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}.drift.has-drift{border-color:rgba(155,91,75,.35);color:var(--fault)}.fleet-node dl{display:flex;margin:17px 0;padding:10px 0;border-top:1px solid var(--edge-soft);border-bottom:1px solid var(--edge-soft)}.fleet-node dl div{flex:1}.fleet-node dt{color:var(--dim);font:9px var(--mono);letter-spacing:.09em;text-transform:uppercase}.fleet-node dd{margin:4px 0 0;font:11px var(--mono)}.model-state{display:grid;grid-template-columns:1fr 1fr;gap:18px;min-height:58px}.pill.inactive{color:var(--dim);border-style:dashed}.muted{color:var(--dim);font-size:12px}.drift-note{margin:8px 0 0;color:var(--fault);font-size:11px}.desired-form{margin-top:17px;padding-top:15px;border-top:1px solid var(--edge-soft)}.form-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--dim);font:9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}.desired-form button{min-height:34px}.model-row{display:grid;grid-template-columns:minmax(180px,2fr) minmax(150px,1fr) auto auto;gap:8px;margin-bottom:8px}.running-toggle{display:flex!important;align-items:center;gap:7px;white-space:nowrap}.running-toggle input,.node-controls input{width:auto;height:auto}.node-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0;padding:13px 0;border-top:1px solid var(--edge-soft);border-bottom:1px solid var(--edge-soft)}.node-controls label{display:flex;align-items:center;gap:8px}.node-controls label:last-child{display:grid;grid-template-columns:auto minmax(150px,1fr)}.form-actions{display:flex;align-items:center;gap:8px}.form-result{float:none!important;margin-left:10px;color:var(--dim);font:9.5px var(--mono);letter-spacing:0!important;text-transform:none!important}.management-ledger{display:grid;grid-template-columns:1fr 1fr}.management-ledger>section{min-width:0;padding:20px}.management-ledger>section+section{border-left:1px solid var(--edge)}.subhead{margin-bottom:13px}.event-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--edge-soft)}.event-list li{padding:10px 0;border-bottom:1px solid var(--edge-soft);display:flex;justify-content:space-between;gap:18px}.event-list strong,.event-list span{display:block}.event-list strong{font:500 11px var(--mono)}.event-list span{margin-top:2px;color:var(--dim);font-size:11px}.event-list time{flex:none;color:var(--dim);font:9px var(--mono)}.empty-state{display:grid;place-items:center;margin:0;padding:28px;color:var(--dim);font:9.5px var(--mono);letter-spacing:.08em;text-align:center;text-transform:uppercase}.error-copy{color:var(--fault)}
.routing-manager{padding:0 18px;border-bottom:1px solid var(--edge);background:rgba(241,239,234,.2)}.routing-manager summary{padding:14px 0;cursor:pointer;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.routing-copy{margin:0 0 12px;color:var(--haze);font-size:12px}.routing-manager form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px;padding-bottom:16px}.routing-manager label{display:grid;gap:5px;color:var(--dim);font:9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}.routing-manager input,.routing-manager select{width:100%;height:38px;padding:0 10px;border:1px solid var(--edge);border-radius:0;background:var(--bone);color:var(--ink);font:11px var(--mono);outline:none}.routing-manager input:focus,.routing-manager select:focus{border-color:var(--spark);box-shadow:0 0 0 1px var(--spark)}.routing-manager .routing-check{grid-column:1/-1;display:flex;align-items:center;gap:8px}.routing-manager .routing-check input{width:auto;height:auto}.routing-manager .form-actions{grid-column:1/-1}.routing-list{margin:0;padding:0 0 14px;list-style:none;border-top:1px solid var(--edge-soft)}.routing-list li{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--edge-soft)}.routing-list strong,.routing-list span{display:block}.routing-list strong{font:500 11px var(--mono)}.routing-list span{margin-top:2px;color:var(--dim);font-size:11px}.routing-list time{color:var(--dim);font:9px var(--mono)}
.maplibregl-ctrl-group{border-radius:0;box-shadow:none;border:1px solid var(--edge)}.maplibregl-ctrl-group button{background-color:var(--bone)}.maplibregl-popup-content{padding:9px 11px;border:1px solid var(--edge);border-radius:0;background:var(--bone);color:var(--ink);box-shadow:0 8px 24px rgba(26,26,24,.12);font-family:var(--body)}.maplibregl-popup-tip{display:none}footer{min-height:52px;padding:0 clamp(18px,3vw,42px);border-top:1px solid var(--edge);display:flex;justify-content:space-between;align-items:center;color:var(--dim);font:9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.fleet-node .node-status.disconnected:before,.fleet-node .node-status.revoked:before{background:var(--fault)}
@media(max-width:1180px){.kpis{grid-template-columns:repeat(4,1fr)}.kpi:nth-child(5){border-left:0}.kpi:nth-child(n+5){border-top:1px solid var(--edge-soft)}}
@media(max-width:800px){.topbar{gap:16px}main{padding-top:28px}.kpis{grid-template-columns:repeat(2,1fr)}.kpi:nth-child(odd){border-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--edge-soft)}.kpi.featured{grid-column:1/-1}.kpi:nth-child(2){border-left:0}.charts{grid-template-columns:1fr}.network{grid-template-columns:1fr}.network aside{min-height:340px;border-left:0;border-top:1px solid var(--edge)}.fabric-head{align-items:flex-start;flex-direction:column}.window-label .key:first-child{margin-left:0}.management-toolbar{align-items:stretch;flex-direction:column}.management-actions{flex-wrap:wrap}.fleet-grid,.management-ledger{grid-template-columns:1fr}.fleet-node{border-right:0}.management-ledger>section+section{border-top:1px solid var(--edge);border-left:0}.release-publisher fieldset{grid-template-columns:1fr}.model-row{grid-template-columns:1fr 1fr}.node-controls{grid-template-columns:1fr}}
@media(max-width:800px){.routing-manager form{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.topbar{grid-template-columns:1fr auto auto;gap:16px}.live{display:none}.primary-nav{gap:14px}.section-head{align-items:flex-start;flex-direction:column;gap:12px}.kpi{min-height:116px;padding:15px}.chart{height:220px}footer{align-items:flex-start;flex-direction:column;justify-content:center;gap:4px}.admin-auth{grid-template-columns:1fr 1fr}.admin-auth input{grid-column:1/-1}.management-actions button{flex:1}.management-status{width:100%;margin:0 0 4px}.model-state,.release-publisher form{grid-template-columns:1fr}.enrollment-result{align-items:flex-start;flex-direction:column}.fleet-node dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}.model-row{grid-template-columns:1fr}.form-actions{align-items:stretch;flex-direction:column}.form-result{margin-left:0}}
@media(max-width:520px){.routing-manager form{grid-template-columns:1fr}.routing-list li{flex-direction:column;gap:4px}}
@media(max-width:390px){.topbar #clock{display:none}.topbar{grid-template-columns:auto 1fr}.primary-nav{justify-content:flex-end}}
@media(max-width:650px){.topbar #clock{display:none}.topbar{grid-template-columns:auto 1fr}.primary-nav{justify-content:flex-end;gap:12px}}
@media(max-width:360px){.topbar{padding-left:12px;padding-right:12px;gap:10px}.primary-nav{gap:10px}.primary-nav a{font-size:10px}}
@media(max-width:520px){.topbar{gap:0;padding-top:10px}.primary-nav{grid-column:1/-1;justify-content:space-between;min-height:40px}}
/* Billing uses the dashboard's restrained typography, with its own three-card grid. */
#billing-view{--billing-muted:rgba(var(--fg),.66)}
.billing-intro{margin:14px 0 0;max-width:48em;color:var(--billing-muted);font-size:13px}
.billing-badge,.billing-tag{margin:0;color:var(--billing-muted);font:10px/1.6 var(--mono)}
.billing-badge{padding:8px 12px;border:1px solid var(--edge);background:var(--sand);max-width:340px}
.billing-tag{flex-shrink:0;text-transform:uppercase;letter-spacing:.05em}
.billing-panel{min-width:0;padding:26px;margin:0 0 18px}
.billing-panel h2{font:400 27px/1.15 var(--display);letter-spacing:-.02em}
.billing-panel h3{margin:0 0 8px;font:400 23px/1.2 var(--display)}
.billing-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.billing-connect{border-top:2px solid var(--spark)}
.billing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px}
.billing-kpis{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}
.billing-kpis .kpi{padding:24px;min-height:150px;border-top:0;grid-column:auto}
.billing-kpis .kpi+.kpi{border-left:1px solid var(--edge-soft)}
.billing-kpis .kpi strong{font-size:40px;white-space:normal;overflow-wrap:anywhere;line-height:1.1}
.billing-kpis .kpi span{line-height:1.7;letter-spacing:.07em}
#billing-name{font-size:26px}
.billing-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:18px;margin:22px 0}
.billing-form label,.billing-panel>div>label{display:grid;gap:8px;min-width:0;color:var(--billing-muted);font:11px/1.5 var(--mono)}
.billing-panel input,.billing-panel textarea,.billing-panel select{width:100%;min-width:0;min-height:42px;padding:10px 12px;border:1px solid var(--edge);border-radius:0;background:var(--bone);color:var(--ink);font:12px/1.5 var(--mono)}
.billing-panel textarea{resize:vertical}
.billing-panel :is(input,textarea,select):focus-visible{outline:2px solid var(--spark);outline-offset:2px}
.billing-panel :is(button,summary,a):focus-visible{outline:2px solid var(--spark);outline-offset:4px}
.billing-panel button{min-height:42px;padding:10px 14px;line-height:1.5}
.billing-panel button:disabled{opacity:.5;cursor:default}
#billing-login{grid-template-columns:minmax(180px,1fr) auto auto auto}
#billing-topup,#billing-admin-login{grid-template-columns:minmax(0,1fr) auto}
#billing-pay{grid-template-columns:minmax(0,1fr)}
#billing-pay button{justify-self:start}
.billing-hint{margin:10px 0;color:var(--billing-muted);font-size:12px;line-height:1.7}
.billing-hint code{font:11px var(--mono)}
.billing-hint a{color:var(--ink);text-underline-offset:3px}
.billing-notice{margin:18px 0 0;padding:12px 14px;background:var(--sand);color:var(--billing-muted);font:11px/1.6 var(--mono)}
#billing-status:not(:empty){margin:18px 0 0;padding:12px 14px;border-left:2px solid var(--spark);background:var(--sand);font-size:12px;overflow-wrap:anywhere}
#billing-status.billing-error{color:var(--fault);border-color:var(--fault);background:rgba(155,91,75,.06)}
#billing-status:empty{margin:0}
.billing-table-wrap{min-width:0;overflow:auto;margin:20px 0 0}
.billing-table-wrap table{border-collapse:collapse;width:100%;font:11px/1.6 var(--mono)}
.billing-table-wrap th,.billing-table-wrap td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--edge-soft);max-width:320px;overflow-wrap:anywhere;vertical-align:top}
.billing-table-wrap th{background:var(--sand);color:var(--billing-muted);font-size:10px;font-weight:400}
.billing-table-wrap td:first-child{font-weight:500}
.billing-table-wrap tbody tr:hover{background:rgba(241,239,234,.35)}
.billing-table-wrap button{min-height:30px;padding:5px 9px;font-size:9px;border-color:var(--edge);background:transparent;color:var(--ink)}
.billing-table-wrap .billing-hint{margin:0;padding:24px;border:1px dashed var(--edge);text-align:center}
.billing-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:18px;border:1px solid var(--edge);background:var(--sand);font:12px/1.8 var(--mono)}
#billing-payment-action{margin-top:20px;padding:18px;border:1px solid var(--edge);background:rgba(241,239,234,.35)}
.billing-disclosure{margin-top:26px;padding-top:18px;border-top:1px solid var(--edge)}
.billing-panel summary{cursor:pointer;font:400 21px/1.5 var(--display)}
.billing-operator{margin-top:32px;background:rgba(241,239,234,.3)}
.billing-operator>summary span{margin-left:18px;color:var(--billing-muted);font:10px/1.6 var(--mono)}
.billing-operator[open]>summary{margin-bottom:20px}
.billing-admin-section{margin-top:26px;padding-top:24px;border-top:1px solid var(--edge)}
@media(max-width:1000px){.billing-grid{grid-template-columns:minmax(0,1fr)}.billing-panel{padding:22px}.billing-form{grid-template-columns:repeat(2,minmax(0,1fr))}#billing-login{grid-template-columns:minmax(0,1fr) auto}#billing-login label{grid-column:1/-1}}
@media(max-width:600px){.billing-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-kpis .kpi.featured{grid-column:1/-1}.billing-kpis .kpi:nth-child(2){border-left:0}.billing-kpis .kpi:nth-child(n+2){border-top:1px solid var(--edge-soft)}.billing-kpis .kpi{padding:18px}.billing-kpis .kpi strong{font-size:32px}#billing-name{font-size:22px}.billing-panel-heading{align-items:flex-start;flex-wrap:wrap}.billing-operator>summary span{display:block;margin:8px 0 0}}
@media(max-width:520px){.billing-panel{padding:18px}.billing-form,#billing-topup,#billing-admin-login{grid-template-columns:minmax(0,1fr);gap:14px}.billing-panel h2{font-size:25px}#billing-login{grid-template-columns:repeat(2,minmax(0,1fr))}#billing-login>button:first-of-type{grid-column:1/-1}.billing-badge{max-width:100%}.billing-table-wrap th,.billing-table-wrap td{padding:10px 8px}.primary-nav{gap:9px}.topbar{gap:10px}}