*{box-sizing:border-box;}
body{
  margin:0;
  font-family:Arial, sans-serif;
  background:#0b1220;
  color:#e2e8f0;
}
.top{
  padding:14px 16px;
  border-bottom:1px solid rgba(226,232,240,.15);
  background:#111827;
}
.top__title{font-size:18px;font-weight:700;}
.top__hint{margin-top:4px;font-size:13px;color:#cbd5e1;}

.layout{
  display:flex;
  min-height:calc(100vh - 58px);
}

.side{
  width:280px;
  padding:14px;
  border-right:1px solid rgba(226,232,240,.15);
  background:#0f172a;
}
.side__block{
  background:#111827;
  border:1px solid rgba(226,232,240,.12);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
}
.side__head{
  font-size:13px;
  color:#cbd5e1;
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.side__link{
  display:block;
  padding:10px 10px;
  margin-bottom:8px;
  border-radius:12px;
  text-decoration:none;
  color:#e2e8f0;
  background:#1f2937;
  transition:.15s;
}
.side__link:hover{background:#273449;}
.side__link:active{background:#fde047;color:#111827;}
.side__link.is-active{
  outline:3px solid #38bdf8;
  outline-offset:2px;
}
.side__text{font-size:13px;color:#cbd5e1;line-height:1.35;}

.viewer{
  flex:1;
  padding:14px;
}
.viewer__frame{
  width:100%;
  height:calc(100vh - 86px);
  border:1px solid rgba(226,232,240,.15);
  border-radius:14px;
  background:#fff;
}