.hero-logo{width:390px;height:390px;right:3%;top:-70px;opacity:.14;filter:contrast(1.25);mix-blend-mode:screen}
body.light .metric.accent{background:#fff;color:#111;border-color:#d3d3d3}
body.light .metric.accent strong,body.light .metric.accent p,body.light .metric.accent small{color:#111}
body.light .metric.accent p,body.light .metric.accent small{opacity:.68}
body.light .metric.accent .metric-icon{color:#111}
body.light .syken-hero{background:#fff;color:#111;border-color:#d3d3d3}
body.light .syken-hero .hero-copy p{color:#555}
body.light .syken-hero .hero-copy>span{color:#777}
body.light .syken-hero .hero-copy h2{color:#111}
body.light .syken-hero .hero-copy h2 em{color:#777}
body.light .syken-hero .hero-actions button:first-child{background:#111;color:#fff;border-color:#111}
body.light .syken-hero .hero-actions button:last-child{background:#fff;color:#111;border-color:#aaa}
body.light .hero-logo{filter:invert(1) contrast(1.25);mix-blend-mode:multiply;opacity:.12}
body.light .sidebar{background:#f7f7f7;border-color:#d0d0d0}
body.light .sidebar .brand b{color:#080808}
body.light .sidebar .brand small,body.light .sidebar .nav-label{color:#696969}
body.light .sidebar .nav-item{color:#696969;background:transparent}
body.light .sidebar .nav-item:hover{background:#ededed;color:#080808}
body.light .sidebar .nav-item.active{background:#e5e5e5;color:#080808;box-shadow:inset 3px 0 #080808}
body.light .sidebar .sheet-link{background:#fff;border-color:#d0d0d0;color:#080808}
body.light .product-card,body.light .product-card.marble{background:#fff;color:#080808;border-color:#d0d0d0}
body.light .product-card.marble{background:radial-gradient(circle at 80% 20%,#e1e1e1 0,transparent 31%),#fff}
body.light .product-card>span,body.light .product-card>strong,body.light .product-card p b{color:#080808}
body.light .product-card>div:last-child p{color:#696969;border-color:#d0d0d0}
body.light .info-strip{background:#fff;border-color:#d0d0d0;color:#696969}
body.light .info-strip span{color:#080808}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.ui-icon,.metric-icon,.menu-lines,.theme-symbol,.close-mark,.add-mark{display:inline-block;position:relative;flex:0 0 auto}
.ui-icon{width:16px;height:16px}
.ui-icon::before,.metric-icon::before{content:"";position:absolute;inset:3px;border:1.5px solid currentColor}
.icon-sales::before,.icon-goals::before{border-radius:50%}
.icon-collection::before{inset:2px 4px 4px 2px;box-shadow:3px 3px 0 -1px currentColor}
.icon-products::before{border-radius:2px;transform:rotate(45deg)}
.icon-finance::before{inset:4px 1px;border-left:0;border-right:0}
.icon-installments::before{border-top-width:4px}
.icon-forecast::before{border:0;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:skewY(-30deg)}
.icon-home::before{transform:rotate(45deg);inset:4px;border-radius:1px}
.metric-icon{width:24px;height:24px}
.metric-icon::before{inset:4px}
.menu-lines{width:18px;height:2px;background:currentColor;box-shadow:0 -5px currentColor,0 5px currentColor}
.theme-symbol{width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.close-mark{width:18px;height:18px}
.close-mark::before,.close-mark::after,.add-mark::before,.add-mark::after{content:"";position:absolute;left:50%;top:50%;background:currentColor}
.close-mark::before{width:16px;height:1.5px;transform:translate(-50%,-50%) rotate(45deg)}
.close-mark::after{width:16px;height:1.5px;transform:translate(-50%,-50%) rotate(-45deg)}
.add-mark{width:16px;height:16px;vertical-align:middle}
.add-mark::before{width:12px;height:1px;transform:translate(-50%,-50%)}
.add-mark::after{width:1px;height:12px;transform:translate(-50%,-50%)}
@media(max-width:650px){
  .hero-logo{width:330px;height:330px;right:-80px;top:-35px;opacity:.12}
  .hero-copy{padding-top:85px}
  .hero-copy h2{position:relative;z-index:2}
  .syken-hero{min-height:530px}
  .hero-actions{flex-wrap:wrap}
  .hero-actions button{min-height:48px}
  .metric.accent{min-height:180px}
}