@import url("/site-font.css?v=1.0.0-noto");

body.app-shell .top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:1fr;
  align-items:center;
  gap:8px 12px;
  height:64px;
  min-height:64px;
  padding:0 18px;
  background:#090b0f;
  border-bottom:1px solid #252934;
  justify-content:initial;
}
body.app-shell .brand.site-logo{display:inline-flex;align-items:center;line-height:0;justify-self:start}
body.app-shell .brand.site-logo img{display:block;width:128px;height:33px;max-width:min(128px,32vw);object-fit:contain}
body.app-shell .top-nav{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,28px);
  color:#b9c4dc;font-weight:700;font-size:14px;min-width:0;
  grid-column:2;grid-row:1;justify-self:center;
  flex-wrap:nowrap;line-height:1.2;
}
body.app-shell .top-nav a{
  color:inherit;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;line-height:1.2;
}
body.app-shell .top-nav-drop{
  position:relative;display:inline-flex;align-items:center;align-self:center;
}
body.app-shell .top-nav-drop>summary{
  list-style:none;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;line-height:1.2;
  font:inherit;font-size:inherit;font-weight:inherit;
}
body.app-shell .top-nav-drop>summary::-webkit-details-marker{display:none}
body.app-shell .top-nav-drop[open]>summary,body.app-shell .top-nav-drop>summary:hover,body.app-shell .top-nav-drop>summary.active{color:#fff}
body.app-shell .top-nav-drop>div{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:148px;padding:12px 8px 8px;border-radius:12px;background:#12151c;border:1px solid #343640;z-index:80;
}
body.app-shell .top-nav-drop>div::before{
  content:"";position:absolute;left:0;right:0;top:-16px;height:16px;
}
@media(min-width:701px){
  body.app-shell .top-nav-drop:hover>div,
  body.app-shell .top-nav-drop[open]>div{display:block}
}
@media(max-width:700px){
  body.app-shell .top-nav-drop[open]>div{display:block}
}
body.app-shell .top-nav-drop>div a{display:block;padding:8px 10px;border-radius:8px}
body.app-shell .top-nav-drop>div a:hover{background:#1d2230}
body.app-shell .top-nav a:hover,body.app-shell .top-nav a.active,body.app-shell .top-nav a.on{color:#fff}
body.app-shell .top-actions{justify-self:end;display:flex;align-items:center;gap:12px;flex-shrink:0;grid-column:3;grid-row:1}
body.app-shell .top .chip{
  border:0!important;border-radius:8px;padding:9px 12px;background:#1d2230;color:#fff;
  font-weight:700;cursor:pointer;font-size:13px;line-height:1.2;
}
body.app-shell .top .chip.credits{background:#1a2744!important;color:#8ea8ff!important}
body.app-shell .top .chip.upgrade{background:#4431ff!important;color:#fff!important;text-decoration:none}
body.app-shell .layout{grid-template-columns:208px minmax(0,1fr)}
body.app-shell aside.side{
  background:#16181d;border-right:1px solid #2b3038;padding:12px 8px;
  display:flex;flex-direction:column;gap:12px;min-height:0;
}
body.app-shell .side .new{
  width:100%;text-align:left;margin:0;
  background:#343943!important;color:#d5dae5!important;border:1px solid #4a5364!important;
  border-radius:8px;padding:9px 12px;font-weight:700;
}
body.app-shell .side .links{display:grid;gap:5px}
body.app-shell .side .links a{
  color:#d5dae5;text-decoration:none;padding:8px 10px;border-radius:7px;display:block;font-size:13px;
}
body.app-shell .side .links a.on,body.app-shell .side .links a.active{background:#343943;color:#fff}
body.app-shell .side .links a.side-soon{opacity:.45;cursor:not-allowed;pointer-events:none}
body.app-shell .side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}
body.app-shell .invite{border:1px solid #9a8454;border-radius:9px;padding:10px;font-size:12px;line-height:1.45;color:#d5dae5}
body.typography-layout.app-shell .typo-app{display:grid;grid-template-columns:208px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
body.typography-layout.app-shell .typo-app>.top{grid-column:1/-1}
body.typography-layout.app-shell .typo-app>.side{grid-column:1;grid-row:2;min-height:0;overflow:auto}
body.typography-layout.app-shell .typo-body{grid-column:2;grid-row:2;min-width:0;min-height:0;overflow:auto}
body.character-layout.app-shell .character-header.top{position:sticky;top:0;z-index:20}
@media(max-width:1100px){
  body.app-shell .top{
    display:flex!important;
    flex-wrap:nowrap;
    align-items:center;
    height:56px;
    min-height:56px;
    padding:0 8px;
    gap:6px;
    overflow:hidden;
  }
  body.app-shell .brand.site-logo{flex:0 1 auto;min-width:0}
  body.app-shell .brand.site-logo img{width:96px;height:auto;max-width:28vw}
  body.app-shell .top-nav{display:flex!important;position:static;order:0;flex:1;flex-direction:row;align-items:center;gap:clamp(10px,1.4vw,22px);padding:0;font-size:13px}
  body.app-shell .top-actions{
    margin-left:auto;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:4px;
    min-width:0;
    grid-column:auto;
    grid-row:auto;
  }
  body.app-shell .top .chip,
  body.app-shell .top .mobile-menu-btn{
    white-space:nowrap;
    flex:0 0 auto;
    padding:7px 8px;
    font-size:12px;
    line-height:1.2;
  }
  body.app-shell .mobile-menu-btn{display:inline-flex!important}
  body.app-shell .workspace .mobile-menu{display:none!important}
  body.app-shell aside.side,
  body.app-shell .side{
    display:none!important;
  }
  body.app-shell aside.side.open,
  body.app-shell .side.open{
    display:flex!important;
    position:fixed;
    left:0;
    top:56px;
    bottom:0;
    width:min(260px,88vw);
    max-width:260px;
    z-index:80;
    overflow:auto;
    box-shadow:16px 0 48px rgba(0,0,0,.55);
  }
  body.app-shell .layout{grid-template-columns:minmax(0,1fr)!important;height:auto;min-height:calc(100dvh - 56px)}
  body.studio-layout.app-shell .app{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:56px minmax(0,1fr)!important;
  }
  body.typography-layout.app-shell .typo-app{grid-template-columns:minmax(0,1fr)!important}
  body.typography-layout.app-shell .typo-app>.side{grid-column:auto;grid-row:auto}
  body.typography-layout.app-shell .typo-body{grid-column:1!important;grid-row:auto!important}
  body.app-shell .vt-layout-grid{grid-template-columns:minmax(0,1fr)!important}
  body.app-shell .step-float-bar{
    position:sticky!important;
    top:64px!important;
    left:auto!important;
    transform:none!important;
    width:auto!important;
    max-width:calc(100vw - 12px)!important;
    margin:8px auto;
    z-index:24;
    overflow-x:auto;
  }
  body.app-shell .step-float-bar .step,
  body.app-shell .step-float-bar .top-new{
    flex:none!important;
    white-space:nowrap!important;
  }
}
@media(max-width:700px){
  body.app-shell .top-nav{display:none!important}
  body.app-shell .top{
    flex-wrap:wrap;
    height:auto;
    overflow:visible;
    padding:8px;
    row-gap:8px;
  }
  body.app-shell .top-actions{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
}